/* * Assets Film & TV: the Module Dashboard. REFERENCE STYLESHEET (DOCKERTST_WALK_2026-09-18.md, T6). * * This file is the design. It is written to be copied into the application unchanged, and the page * `dashboard-mock.html` beside it is drawn by this file alone. * * 1. EVERYTHING IS UNDER `.ftd` AND EVERY CLASS STARTS `ftd-`. Nothing here can touch the rest of the * site, and no Bootstrap or theme class is relied on (`.card`, `.row`, `.badge`, `.btn` are NOT used, * on purpose: they are what bent the last mock out of shape). * 2. THE COLOURS ARE THE ENTITY'S. The four `--ftd-*` theme variables below are the fall-back only; the * component sets them on the `.ftd` element from `window.COLOUR_PLATE` (primary_colour, * accent_colour, soft_primary_colour, soft_accent_colour), which is where the site's own * `.af-primary` / `.af-accent` classes get theirs. No colour of the theme is written anywhere else * in this file. * 3. IT RESPONDS TO THE ROOM IT IS GIVEN, NOT TO THE SCREEN. `.ftd` and every card body are size containers, and the * breakpoints are container queries: the page has a 250px sidebar that collapses to 70px, so a screen width says * little about the width the dashboard really has. Nothing is ever clipped or overlapped: a band's buttons drop to * a second line, panels go from three columns to two to one, the settings wrap. (A browser without container * queries gets the wrapping, which needs none, and the single-column layout below 1100px of screen.) * 4. SIZES ARE FIXED WHERE THEY WERE AGREED: a band is 74px (58px small), a list row 30px, a button * 32px, a settings control 26px, the card body's padding 18px 20px 20px. Equal heights are the point. */ .ftd { /* theme: overwritten inline by the component from window.COLOUR_PLATE. These four are the fall-back for an entity with no colours of its own (app.blade.php:217 emits COLOUR_PLATE only when the entity has a primary colour): the site's own default dark sidebar and default primary, not any one customer's. */ --ftd-primary: #2a3042; --ftd-accent: #556ee6; --ftd-primary-soft: rgba(42, 48, 66, .25); --ftd-accent-soft: rgba(85, 110, 230, .25); /* neutrals: the same for every entity */ --ftd-ink: #2b3440; --ftd-text: #495057; --ftd-muted: #8a93a0; --ftd-line: #e6e9ee; --ftd-hairline: #f0f2f5; --ftd-surface: #ffffff; --ftd-inset: #f4f6f9; --ftd-control-line: #d3d9e2; --ftd-good-bg: #d8ecd9; --ftd-good-ink: #2f6b33; --ftd-bad-bg: #f8dcdc; --ftd-bad-ink: #9b2c2c; /* derived: a tint of the accent for hovers. The first line is the fall-back for a browser without color-mix. */ --ftd-hover: #f0f5fc; --ftd-hover: color-mix(in srgb, var(--ftd-accent) 9%, #ffffff); font-size: 13px; line-height: 1.5; color: var(--ftd-text); container-type: inline-size; container-name: ftd; } .ftd, .ftd *, .ftd *::before, .ftd *::after { box-sizing: border-box; } .ftd a, .ftd a:hover, .ftd a:focus { color: inherit; text-decoration: none; } /* ================================================================ THE GUARD (the margin reset, and what else the site leaks in) HISTORY, kept because each step was right about the thing it was fixing. Written plainly as `.ftd h4, .ftd p, ...` the reset was (0,1,1), and it silently beat every single-class margin on those tags: a rule such as `.ftd-thing { margin: 0 0 12px }` was cancelled with nothing to show for it, 31 times over during the design walk (find_cancelled_margins.py, re-run 2026-09-20: `TOTAL cancelled margin rules: 31`; an earlier draft of this comment said 63, which the script has never printed). On 2026-09-20 it was rewritten with :where() at (0,0,0) so a single class wins, which is what a reader expects. That fixed the walk, and broke the site. THE FAULT, found the same day by T6a's two checkers (throughput/notes/T6a.md Q1) and measured here: this sheet is shipped into the application as public/css/film-tv-dashboard.css and loaded LAST of six link tags in layouts/app.blade.php, but LOAD ORDER DOES NOT DECIDE BETWEEN DIFFERENT SPECIFICITIES. The site's app.css carries Bootstrap's reboot as bare element selectors at (0,0,1) (h1..h6 margin-bottom .5rem, dl 1rem, dd .5rem, p 1rem, dt weight, label, ul, ol, hr, figure, img, svg, sub, sup, code, and the form controls' font: inherit), and (0,0,1) beats (0,0,0) whatever loads last. So inside .ftd on the REAL page the :where() reset did not apply at all: the mocks never showed it, because a mock loads no site stylesheet. THE MEND, 2026-09-20: the ancestor is written PLAINLY and the tags stay inside :where(). `.ftd :where(h4)` is (0,1,0). Specificity compares a, then b, then c, so (0,1,0) beats the reboot's (0,0,1) outright -- and a single class is ALSO (0,1,0), so it still wins on source order, because every class rule in this sheet stands below this block. The reason for :where() therefore survives exactly: the guard loses to one class. Measured on all 22 signed-off pages at 1920, 1366 and 390 (check_under_site_css.py). ONLY THE PROPERTIES MEASURED TO LEAK ARE LISTED. A property a .ftd- class sets must never be added here without re-measuring: at the same (0,1,0) the class still wins on order, but the moment one is raised, it does not. */ .ftd :where(h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ul, ol, li, figure, blockquote, pre, label, fieldset, legend) { margin: 0; } .ftd :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .ftd :where(dt, label) { font-weight: inherit; } .ftd :where(label) { display: inline; } /* the reboot makes every label inline-block */ .ftd :where(ul, ol) { padding-left: 0; } /* NO list-style guard, on purpose (corrected 2026-09-21). `4-styles.css:41` strips the marker of every ul and li on the site, and the first pass answered with `.ftd :where(ul, ol, li) { list-style: revert }`. Measured 2026-09-21 in the engine under the site's five sheets, that rule put BULLETS back on every Bootstrap control drawn inside .ftd: a top-bar dropdown's items, a tab strip, a pagination all computed `disc` at display: list-item, because `.dropdown-menu`, `.nav` and `.pagination` strip the marker at (0,1,0), the guard was also (0,1,0) and the sheet loads later; and the redesigned top bar carries .ftd on every page of every customer. Measured the same day: not ONE list item in any of the 24 signed-off pages shows a marker, so the rule protected nothing the design draws. A later page that wants a marked list says so on its own class (`list-style: disc`), which beats the site's (0,0,1) rule without any help from here. Dropping only `li` from the guard is NOT enough: the site sets the li itself to none, so an inherited value never reaches it, and the ul kept `disc` on every site control. */ .ftd :where(legend) { width: auto; max-width: none; font-size: inherit; } .ftd :where(hr) { height: auto; overflow: hidden; } .ftd :where(img, svg) { vertical-align: baseline; } /* the UA's own values, measured 2026-09-20 with the reboot switched off in the engine, NOT `inherit`: small is 83.33% of its parent and sup/sub carry vertical-align super/sub at the same 83.33%. The reboot moves each of them (small to 80%, sup/sub to 75% on the baseline with position: relative). */ .ftd :where(small) { font-size: 83.3333%; } .ftd :where(sub, sup) { position: static; line-height: inherit; font-size: 83.3333%; } .ftd :where(sup) { vertical-align: super; top: auto; } .ftd :where(sub) { vertical-align: sub; bottom: auto; } /* `code`, `kbd`, `samp` and `pre` are NOT guarded, and this is a DELIBERATE, NARROW exception. The reboot does reach them (font-family to SFMono, font-size to 87.5%, colour to #e83e8c), so under the site's CSS they would draw in pink monospace. But measured 2026-09-20, appears in the signed-off pages FOUR times, all four inside table-mock's own explanatory prose ABOUT the component ("the new_line slot", "the custom_header prop"), never in the design itself; the other six mocks and r1 to r15 have none. No redesigned page draws one. Guarding them buys nothing on any real page and costs real damage on the mock: the guard at (0,1,0) beat table-mock's own shell rule `code { font-size: 12px }` (0,0,1) and grew all four, breaking a signed-off render by 5,188 pixels at 1920 and again at 1366. IF A LATER PAGE DRAWS A , ADD IT TO THE GUARD THEN and re-measure that page. */ /* `b` and `strong` are DELIBERATELY NOT reset. Measured the same way: the reboot's `font-weight: bolder` and the UA's own `bold` BOTH compute to 700 from this sheet's weights, so it is not a leak -- and `font-weight: inherit` here broke 20 signed-off renders, because 268 elements in the mocks carry no class and rely on that bold. Where the sheet does want another weight it says so on an ancestor class (`.ftd-count b`, `.ftd-post__line b` and eleven more, all (0,1,1), all beating this guard). */ /* the reboot gives every form control `font: inherit`, which pulls the leaked heading line-height down into buttons and inputs. The mocks draw them at the UA's own values, so the UA's own values are restated. NOT `inherit`: measured 2026-09-20, `inherit` here breaks 731 elements of the mocks, which rely on the UA default. */ .ftd :where(button, input, optgroup, select, textarea) { line-height: normal; font-size: 13.3333px; font-family: Arial; } .ftd button, .ftd select { font-family: inherit; } /* declared after the guard on purpose: this one IS the design */ /* THE ONE LEAK A LOW GUARD CANNOT REACH: `.af-dashboard h4` in the site's myStyle.css, at (0,1,1). `af-dashboard` is put on the page's .row by views/assetflow/items/View.vue:320 whenever the item type is customers or service_providers, which IS the module dashboard, and it sets `text-transform: uppercase`, `font-size: 18px`, `font-weight: 600`, `margin-top: 1.4rem !important` and a `:before` that injects a Font Awesome glyph in front of the text. It is the most damaging leak of the five sheets because it changes what the heading SAYS, not only its box, and at (0,1,1) it beats the guard above. It reaches `h4` AND NOTHING ELSE: `.af-dashboard h4` is the only heading rule in the five sheets (checked 2026-09-20, `grep "af-dashboard[^,{]*h[1-6]"` matches myStyle.css:4984 and its :before at 4991, nothing more). So a class on an h1, h2, h3, h5 or h6 is not at risk from it, and only the h4 cases are listed below. `.ftd .ftd-x` is (0,2,0), which beats (0,1,1). A blanket `.ftd h4` would also beat it -- and would then beat the single-class rules this sheet is built on, killing 466 elements' worth of deliberate uppercase in table-mock alone. WHAT IS LISTED, and why it is not just today's three. Measured in the engine 2026-09-20, one probe per class on a real h4 under all five sheets: EVERY heading class the sheet declares takes the full takeover when it is drawn on an h4 -- 22.4px of top margin, the glyph, and for most of them 18px/600/uppercase as well. Only the classes named here escape. In today's mocks just three of them sit on an h4 (ftd-panel__head 48, ftd-summary__title 12, ftd-table__title 3) and the rest happen to be drawn on div/span/h1, which is why no render ever caught it. But nothing in this sheet or in the markup FIXES a class to a tag, and the builder rewriting these pages in Vue chooses the tag freely, so the cover names every heading-like class the sheet declares. THE COVER IS IN TWO HALVES, and the split is not cosmetic. `text-transform: none` and `margin-top: 0` are the right answer only for a class that wants neither. Measured sheet-alone 2026-09-20, a single blanket rule over all 33 classes changed NINE of them against their signed-off value (ftd-card__head, ftd-sec__title, ftd-list__head, ftd-table__head, ftd-sstep__title, ftd-hstep__title and ftd-doneline__title all want uppercase; ftd-head__title wants margin-top 1px and ftd-asset__name 14px) and broke dashboard-mock at 390 by 324,040 pixels. So the blanket covers only the classes that genuinely want none/0, and the nine restate their own value at the same (0,2,0). A LATER PAGE THAT DRAWS A NEW HEADING CLASS MUST STILL ADD IT HERE, to whichever half matches what it wants. A bare h4 inside .ftd cannot be defended, because defending it would mean `.ftd h4`, the blanket this avoids. */ .ftd .ftd-panel__head, .ftd .ftd-summary__title, .ftd .ftd-table__title, .ftd .ftd-modal__title, .ftd .ftd-band__title, .ftd .ftd-post__line, .ftd .ftd-empty__title, .ftd .ftd-filehead, .ftd .ftd-toast__title, .ftd .ftd-files__name, .ftd .ftd-row__name, .ftd .ftd-summary__name, .ftd .ftd-ptile__name, .ftd .ftd-optrow__name, .ftd .ftd-choice__name, .ftd .ftd-swatch__name, .ftd .ftd-thumbrow__name, .ftd .ftd-drop__head, .ftd .ftd-sec__head, .ftd .ftd-modal__head, .ftd .ftd-postform__head, .ftd .ftd-toast__line, .ftd .ftd-empty__line, .ftd .ftd-table__head--single { margin-top: 0 !important; text-transform: none; } /* the nine that want their own value: same (0,2,0), each restating what the sheet alone draws. .ftd-table__head--single is NOT among them: it is the modifier that turns the uppercase column head back to sentence case, so it belongs in the blanket above. */ .ftd .ftd-card__head, .ftd .ftd-sec__title, .ftd .ftd-list__head, .ftd .ftd-table__head, .ftd .ftd-sstep__title, .ftd .ftd-hstep__title, .ftd .ftd-doneline__title { margin-top: 0 !important; text-transform: uppercase; } /* ftd-head__title and ftd-asset__name take the text-transform and the glyph cover but NOT a restated margin-top, and that is deliberate. A margin restated with !important is a CONSTANT, and neither of these has a constant top margin: .ftd-asset__name is 14px normally and 0 inside `@container ftdcard (min-width: 640px)` (the latest-asset block), and pinning it to 14px broke dashboard-mock at 1366 by 18,766 pixels. They are drawn on h1/div today, which `.af-dashboard h4` cannot reach, so the margin half costs nothing today; if either is ever put on an h4 it gains 22.4px of top margin and that must be answered by changing the class's own rule, not by an !important here. */ .ftd .ftd-head__title, .ftd .ftd-asset__name { text-transform: none; } /* THE SECOND LEAK THAT NEEDS !important, and the widest one in the five sheets. `2-myStyle.css:5644`, inside `@media (min-width: 768px) and (max-width: 1199px)`, is `body[data-sidebar="dark"] h1, ...h2, ...h3, ...h4, ...h5, ...h6 { color: #605d5d !important }`. `data-sidebar="dark"` is the DEFAULT, not an exotic state: mixins/layouts.mixin.js:6 sets `sidebar: "dark"` and :161 writes the attribute onto . So on any tablet-width viewport EVERY heading inside .ftd goes grey, on every page. Measured 2026-09-20: at 1024 and at 900, 12 of 12 heading classes changed colour -- .ftd-panel__head rgb(43,52,64) -> rgb(96,93,93), .ftd-summary__title rgb(102,112,125) -> rgb(96,93,93), and so on; at 1366 and 1920, 0 of 12, because the media query does not apply there. `!important` is the only answer to `!important`, as it is for [type=search] below. Each class restates ITS OWN colour rather than `inherit`, because several of these are deliberately not the body ink. This is invisible to every render the mocks produce (they load no site stylesheet) and to check_under_site_css.py as it stands (its ancestry starts at #app and never sets the attribute, and its three widths -- 1920, 1366, 390 -- all miss the 768 to 1199 band). It therefore has to be remembered: do not take these !important markers off. WHICH CLASSES ARE RESTATED. A class may only be named here if the value restated is the one it really draws in the context named. The five below have ONE unconditional colour, checked against every other rule that names them. */ .ftd .ftd-panel__head, .ftd .ftd-table__title, .ftd .ftd-head__title, .ftd .ftd-asset__name, .ftd .ftd-band__title { color: var(--ftd-ink) !important; } /* THE FOUR THAT WERE LEFT, now restated PER CONTEXT (2026-09-21). The first pass left these out because each has more than one rightful colour, and a single flat value with !important beat the sheet's own later rule and broke table-mock at 1920 by 8,262 pixels. That was the right diagnosis and the wrong conclusion: what broke it was restating one LITERAL over every context, not the !important. Restating the VARIABLE the rule itself uses, once per context, cannot fight the sheet, because it says the same thing the sheet already said. Every context was enumerated by grepping each class's own colour rules, 2026-09-21: .ftd-card__head one rule (the card head), --ftd-head-ink, which a theme may move and which this restates by name so it still moves. .ftd-sec__title two: --ftd-ink from the later of its two base rules, and --ftd-head-ink inside .ftd-sec--boxed. The boxed selector below MIRRORS that rule exactly, so the pair resolves the same way the sheet alone resolves it. .ftd-list__head one rule, #fff on the primary band. .ftd-table__head one rule, #fff on the primary band. (.ftd-table__head--single needs none: it is always drawn with .ftd-table__head and inherits the white correctly.) THE COST, and it is accepted with open eyes: a later single class can no longer recolour these four, because (0,2,0) + !important beats it. That is already true of .ftd-sec__title through its own (0,2,0) boxed rule, and of the five above. The guard's promise is that THE GUARD loses to one class; a leak cover answering !important is the documented exception, not a breach of it. KNOWN RESIDUAL, unchanged by this and written down so it is not mistaken for mended: 24 further heading classes still take the grey at tablet widths when they are drawn on a heading tag, and a separate, width-independent leak (`.af-dashboard h4`, (0,1,1)) still moves font-size, weight and line-height on the classes the cover above does not restate those for. Both need their own decision. */ .ftd .ftd-card__head { color: var(--ftd-head-ink) !important; } .ftd .ftd-sec__title { color: var(--ftd-ink) !important; } .ftd .ftd-sec--boxed > .ftd-sec__head .ftd-sec__title, .ftd .ftd-sec--boxed > .ftd-sec__toggle .ftd-sec__title { color: var(--ftd-head-ink) !important; } .ftd .ftd-list__head, .ftd .ftd-table__head { color: #fff !important; } /* and .ftd-summary__title, which the first pass missed because no check could see it: it is drawn on an h4 twelve times across r1 and r4, so it took the tablet grey on every real page. Found 2026-09-21 once check_under_site_css.py was given the 1024 width and the attribute. IT MUST RESTATE --ftd-label, NOT --ftd-ink. The class has two rules -- var(--ftd-muted) where it is declared in F8, and var(--ftd-label) in the later form-label group, which wins unconditionally. This cover sits ABOVE both, so restating anything else here would beat the later rule and change the signed-off colour. Restating what actually wins changes nothing and answers the leak. */ .ftd .ftd-summary__title { color: var(--ftd-label) !important; } /* the site's myStyle.css puts `border-radius: .25rem !important` on every [type=search], at (0,1,0). !important outranks every normal declaration at any weight, so this is the one place the sheet must answer in kind. The value restated is 0, which is what the sheet alone draws and what Tristian signed off: a search input in this design has `border: 0` and sits INSIDE the rounded .ftd-search pill, so a corner on the input itself is a corner on an invisible border. The pill's own 6px is untouched, declared on .ftd-search in the corners list below. Measured 2026-09-20: 6 search inputs across the signed-off pages (an earlier draft said 18). Apart from this and the two heading leaks above, nothing else in the five sheets needs !important. */ .ftd :where(input[type="search"]) { border-radius: 0 !important; } /* ...except where the sheet gives the input itself a box, as .ftd-input does. (0,2,0) + !important beats the site. */ .ftd input.ftd-input[type="search"] { border-radius: var(--ftd-corner) !important; } /* `content: none` already stops the glyph painting -- a pseudo-element with no content does not exist -- but the font-family is restated too so the check script can prove the cover clean rather than allow an exception. */ .ftd .ftd-panel__head::before, .ftd .ftd-summary__title::before, .ftd .ftd-table__title::before, .ftd .ftd-head__title::before, .ftd .ftd-card__head::before, .ftd .ftd-asset__name::before, .ftd .ftd-modal__title::before, .ftd .ftd-sec__title::before, .ftd .ftd-band__title::before, .ftd .ftd-post__line::before, .ftd .ftd-list__head::before, .ftd .ftd-table__head::before, .ftd .ftd-empty__title::before, .ftd .ftd-filehead::before, .ftd .ftd-toast__title::before, .ftd .ftd-files__name::before, .ftd .ftd-row__name::before, .ftd .ftd-summary__name::before, .ftd .ftd-sstep__title::before, .ftd .ftd-hstep__title::before, .ftd .ftd-doneline__title::before, .ftd .ftd-ptile__name::before, .ftd .ftd-optrow__name::before, .ftd .ftd-choice__name::before, .ftd .ftd-swatch__name::before, .ftd .ftd-thumbrow__name::before, .ftd .ftd-drop__head::before, .ftd .ftd-sec__head::before, .ftd .ftd-modal__head::before, .ftd .ftd-postform__head::before, .ftd .ftd-toast__line::before, .ftd .ftd-empty__line::before, .ftd .ftd-table__head--single::before { content: none; padding-right: 0; font-family: inherit; display: inline; } /* ================================================================ THE GUARD ends */ /* ---------------------------------------------------------------- the three rows */ .ftd-grid { display: grid; gap: 20px; margin-bottom: 20px; } .ftd-grid--assets { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .ftd-grid--thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftd-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* an Object Dashboard's two lists of files */ .ftd-grid--files { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.4fr); } /* under 1300px of room the latest asset drops beneath the ASSETS card (and lies on its side, see .ftd-asset); under 900px every row is one column */ @container ftd (max-width: 1300px) { .ftd-grid--assets { grid-template-columns: minmax(0, 1fr); } .ftd-grid--files { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftd-grid--files > .ftd-card:first-child { grid-column: 1 / -1; } } @container ftd (max-width: 900px) { .ftd-grid--thirds, .ftd-grid--files, .ftd-grid--halves { grid-template-columns: minmax(0, 1fr); } .ftd-grid--files > .ftd-card:first-child { grid-column: auto; } } @container ftd (max-width: 560px) { .ftd-grid { gap: 14px; margin-bottom: 14px; } .ftd-card__head { padding: 10px 14px; } .ftd-card__body { padding: 14px; } } @supports not (container-type: inline-size) { @media (max-width: 1100px) { .ftd-grid--assets, .ftd-grid--thirds, .ftd-grid--files { grid-template-columns: minmax(0, 1fr); } } } /* ---------------------------------------------------------------- a card */ .ftd-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--ftd-surface); border: 1px solid var(--ftd-line); border-radius: 8px; box-shadow: 0 5px 30px rgba(0, 28, 56, .06); } /* the head is drawn at the weight Tristian chose, Balanced (Log #355): the inset grey with the title in ink, framed on the line colour, which is the ONE grammar a card's head, a boxed section's head and a modal's head now share. The variables are declared in the section FOUNDATION below; the primary band it carried before was the `strong` setting, which the walk compared and he did not choose. ONE definition: nothing below restates this rule. */ .ftd-card__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--ftd-head-bg); color: var(--ftd-head-ink); border-bottom: 1px solid var(--ftd-head-line); font-size: 14px; font-weight: 500; text-transform: uppercase; } .ftd .ftd-card__head a { font-size: 12px; font-weight: 400; text-transform: none; color: inherit; opacity: .8; } /* EVERY HOVER UNDERLINE IN THIS SHEET CARRIES !important, and this is the reason, written once here for all eleven of them (card head, band title, panel head, asset name, post text, ftd-link, sec link, fact value, crumb, table cell, bulk bar). The site's app.css ends with `a { text-decoration: none !important }`. !important outranks every normal declaration at any specificity, so without !important of its own not one of these underlines appears on a real page -- and a mock never shows it, because a mock loads no site stylesheet. Proved in the engine 2026-09-20: the rule as written computed `none`; only `underline !important` survived. This is invisible to a pixel diff of the mocks, which render no hover state, so it cannot be caught by the renders: it has to be remembered. Do not take these !important markers off. */ .ftd .ftd-card__head a:hover { opacity: 1; text-decoration: underline !important; color: inherit; } .ftd-card__body { flex: 1; min-width: 0; padding: 18px 20px 20px; container-type: inline-size; container-name: ftdcard; } /* ---------------------------------------------------------------- a band: a card's main link */ .ftd-band { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; min-height: 74px; padding: 14px 18px; border-radius: 8px; border: 1px solid var(--ftd-accent-soft); background: linear-gradient(90deg, var(--ftd-accent-soft), rgba(255, 255, 255, 0) 85%); } .ftd-band + .ftd-band { margin-top: 10px; } .ftd-band + .ftd-panel, .ftd-band + .ftd-group { margin-top: 16px; } .ftd-band__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ftd-primary); color: #fff; font-size: 1.4rem; } .ftd-band__count { font-size: 26px; font-weight: 600; line-height: 1; color: var(--ftd-primary); } .ftd-band__text { flex: 1 1 130px; min-width: 110px; } .ftd-band__title { display: block; font-size: 14px; font-weight: 500; color: var(--ftd-ink); } .ftd .ftd-band__title a:hover { text-decoration: underline !important; } .ftd-band__sub { display: block; font-size: 12px; color: var(--ftd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* the band's buttons: one group, pushed right; when the name would be squeezed the group drops to a second line */ .ftd-band__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; } .ftd-band__links { display: flex; flex-wrap: wrap; gap: 8px; } .ftd-band--sm { min-height: 58px; padding: 10px 14px; gap: 12px; } .ftd-band--sm .ftd-band__icon { width: 36px; height: 36px; font-size: 1.15rem; } .ftd-band--sm .ftd-band__count { min-width: 34px; font-size: 20px; text-align: right; } .ftd-band--sm .ftd-band__title { font-size: 13px; } /* the filled button: Open, Open asset */ .ftd .ftd-btn { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 14px; border-radius: var(--ftd-corner); background: var(--ftd-primary); color: #fff; font-size: 12px; font-weight: 500; transition: filter .15s, background .15s; } /* the corner is the one central 6px (Log #355); it was the 16px pill, which the walk compared and he did not choose */ .ftd .ftd-btn:hover { background: var(--ftd-accent); color: #fff; } /* the outlined button: a list's other tabs, on its band (More..., Add, Import, Export) */ .ftd .ftd-pill { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 13px; border: 1px solid var(--ftd-accent-soft); border-radius: var(--ftd-corner); background: var(--ftd-surface); color: var(--ftd-primary); font-size: 12px; font-weight: 500; transition: all .15s; } /* the one central corner, as .ftd-btn */ .ftd-pill i { font-size: 1.05rem; } .ftd .ftd-pill:hover { background: var(--ftd-primary); border-color: var(--ftd-primary); color: #fff; } .ftd-band--sm .ftd-pill { height: 28px; padding: 0 11px; } /* a small band in a narrow card: Open and the pills keep their icon and lose their word (the title is the link, and each keeps its title attribute), so the name still has room on one line */ @container ftdcard (max-width: 400px) { .ftd-band--sm .ftd-btn__label, .ftd-band--sm .ftd-pill__label { display: none; } .ftd-band--sm .ftd-btn, .ftd-band--sm .ftd-pill { width: 30px; height: 30px; padding: 0; justify-content: center; border-radius: 50%; } .ftd-band--sm .ftd-band__text { flex-basis: 80px; min-width: 70px; } .ftd-band--sm .ftd-band__sub { display: none; } /* the name may take two lines here; the band stays its height */ } /* ---------------------------------------------------------------- a captioned group of panels */ .ftd-group { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ftd-primary); } .ftd-group::after { content: ""; flex: 1; height: 1px; background: var(--ftd-line); } .ftd-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } /* four across, for a card the full width of the page (an Object Dashboard's filters); it steps down to three and then follows .ftd-panels */ .ftd-panels--four { grid-template-columns: repeat(4, minmax(0, 1fr)); } @container ftdcard (max-width: 1100px) { .ftd-panels--four { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container ftdcard (max-width: 760px) { .ftd-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container ftdcard (max-width: 480px) { .ftd-panels, .ftd-panel__rows--two { grid-template-columns: minmax(0, 1fr); } .ftd-panel__rows--two > .ftd-row:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--ftd-hairline); } } /* ---------------------------------------------------------------- a panel: a headed list of links with counts */ .ftd-panel { overflow: hidden; border: 1px solid var(--ftd-line); border-radius: 7px; background: var(--ftd-surface); } .ftd .ftd-panel__head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ftd-inset); border-bottom: 1px solid var(--ftd-line); font-size: 12px; font-weight: 600; color: var(--ftd-ink); } .ftd-panel__head i { font-size: 1.05rem; color: var(--ftd-accent); } .ftd-panel__head span { flex: 1; } /* a panel whose rows open the list in a view of their own says so in its head */ .ftd-panel__view { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 9px; background: var(--ftd-accent-soft); color: var(--ftd-primary); font-size: 10.5px; font-weight: 500; font-style: normal; } .ftd .ftd-panel__head .ftd-panel__view i { font-size: .9rem; color: var(--ftd-primary); } .ftd .ftd-panel__head a { font-size: 11.5px; font-weight: 400; color: var(--ftd-accent); } .ftd .ftd-panel__head a:hover { text-decoration: underline !important; color: var(--ftd-accent); } .ftd-panel__rows { padding: 4px 12px 6px; } .ftd-panel__rows--two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; } .ftd .ftd-row { display: flex; align-items: center; gap: 8px; height: 30px; margin: 0 -6px; padding: 0 6px; border-radius: 5px; border-bottom: 1px solid var(--ftd-hairline); transition: background .15s; } .ftd-panel__rows > .ftd-row:last-child, .ftd-panel__rows--two > .ftd-row:nth-last-child(2):nth-child(odd) { border-bottom: 0; } .ftd-row__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ftd-row__count { font-weight: 600; color: var(--ftd-ink); } .ftd .ftd-row:hover { background: var(--ftd-hover); color: var(--ftd-primary); } .ftd-row--zero .ftd-row__name, .ftd-row--zero .ftd-row__count { color: var(--ftd-muted); font-weight: 400; } .ftd-card__body > .ftd-panel + .ftd-panel { margin-top: 14px; } /* panels stacked in a card, not panels side by side in a grid */ .ftd-panel__empty { padding: 10px 0 8px; color: var(--ftd-muted); font-size: 12px; } /* ---------------------------------------------------------------- the list's toolbar: ONE bar, and it is the LIST'S OWN The pattern is the assets list's existing row: what is shown on the left ("Items 1-10 of 424"), the controls on the right. The same bar heads the object's Dashboard tab, where the left reads the total ("424 assets") and a choice saves and redraws nothing, and the list tab, where it saves and redraws the list. No box, no title, no sentence: the page is white and the bar is a row on it. On the Module Dashboard it sits inside a card, under the band, so there it is an inset strip; the controls are the same. */ .ftd-settings { position: relative; container-type: inline-size; container-name: ftdsettings; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 18px; } /* `position: relative` anchors the Saved flash; `ftdsettings` lets the flash answer THE BAR'S own width, not the page's: see ONE ROW AT 1366 below */ .ftd-settings__count { margin-right: auto; font-size: 14px; color: var(--ftd-muted); } .ftd-settings__count b { font-weight: 500; color: var(--ftd-ink); } .ftd-settings__saved { font-size: 12px; font-weight: 500; color: var(--ftd-good-ink); opacity: 0; transition: opacity .3s; } .ftd-settings__saved.is-shown { opacity: 1; } .ftd-settings__controls { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px 12px; margin-left: auto; } .ftd-settings--card { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--ftd-line); border-radius: 8px; background: var(--ftd-inset); } .ftd-settings--card .ftd-settings__count { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ftd-ink); } .ftd-settings--card .ftd-settings__count i { font-size: 1.05rem; color: var(--ftd-accent); } .ftd-control { min-width: 0; display: flex; align-items: center; gap: 6px; } .ftd-control > span { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-seg { max-width: 100%; display: inline-flex; flex-wrap: wrap; overflow: hidden; border: 1px solid var(--ftd-control-line); border-radius: 6px; background: var(--ftd-surface); } .ftd .ftd-seg button { display: inline-flex; align-items: center; height: 26px; margin: 0; padding: 0 7px; border: 0; border-right: 1px solid var(--ftd-control-line); border-radius: 0; background: var(--ftd-surface); color: var(--ftd-text); font-size: 11.5px; line-height: 1; cursor: pointer; } .ftd .ftd-seg button:last-child { border-right: 0; } .ftd .ftd-seg button:hover { background: var(--ftd-hover); } .ftd .ftd-seg button.is-on { background: var(--ftd-primary); color: #fff; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); } .ftd-seg button i { font-size: 1rem; } .ftd .ftd-settings select { height: 28px; max-width: 160px; padding: 0 4px; border: 1px solid var(--ftd-control-line); border-radius: 6px; background: var(--ftd-surface); color: var(--ftd-text); font-size: 11.5px; } /* ONE ROW AT 1366 (2026-09-21). Measured here on the pages themselves: at 1366 the mock's shell leaves a list toolbar a 1030px content box, and the LIST tab's bar ("Items 1-10 of 424") asked 1030.8px of it on r3 and 1033.8px on r12, so it wrapped to a second row and stood 57px instead of 28px. The Dashboard tab's bar ("424 assets") asked 990.5px and fitted, but only once the Saved flash was out of the way. The component adds no CSS of its own and its markup is the mock's, so the bar has to fit here or not at all. Three things buy the room back, each the smallest change that reaches what it reaches. The Saved flash held 53px of the row plus a 16px gap for a message that is invisible until a choice is made, so it comes out of flow and sits just under the bar, in the 18px bottom margin the bar already has -- exactly 18px of it, which is why that rule carries no margin-top and why it lives in its own `ftdsettings` query below rather than here. The segmented control's side padding drops from 7px to 5px, worth 36px over the eighteen buttons of the widest bar. And the gap between control groups drops from 12px to 10px, worth 6px over the four groups of the list bar, which is what turns a 0.8px and a 3.8px shortfall into 5.2px and 2.2px of slack. THE SHORTFALL IS SMALL AND THE SLACK IS SMALL. A longer count ("Items 100-110 of 1,424") or one more control would wrap the list bar again. If that happens the answer is a shorter control set, not another two pixels: the honest levers are spent. ONE NOTE ON WEIGHT, because it is the one place this pass does not keep the usual promise. The button rule is `.ftd .ftd-settings .ftd-seg button`, (0,3,1). It has to beat the base rule it overrules, `.ftd .ftd-seg button` at (0,2,1), AND stay inside the toolbar so a segmented control elsewhere keeps its 7px, and (0,3,1) is the least that does both. A single plain class on such a button therefore does NOT win its padding -- measured. That is true of the base rule already, so the rules this pass adds change nothing about it; it is written down here so the next reader does not have to find it twice. The other four rules this pass adds are all (0,1,0) and a single class beats every one of them. WHY A CONTAINER QUERY AND NOT A PLAIN RULE. Measured against container width, the bar re-packs at 400-420, 500 and 900-920 as well, so a global change moves the narrow renders: taking the flash out of flow unprompted moved dashboard-mock at 390 by 622,068 pixels. The floor of 1000 sits above the 980 at which the bar wraps for its own reasons and below the 1030 the shell gives at 1366, so nothing under 1000px of `.ftd` moves at all. `.ftd` is already a named size container (`container-name: ftd`, the block at the head of this sheet), so this is the sheet's own mechanism, not a new one. WHICH BARS THESE TWO LEVERS REACH, stated plainly because `@container ftd` names the PAGE root and not the bar: at 1000px of page and up they reach EVERY `.ftd-settings` on the page, including a narrow one inside a card. That is safe for these two and only these two, because both only ever shrink a control -- a 298px card strip measured 5px of button padding and a 10px control gap with no overlap and no overflow. The third lever, which takes the flash OUT OF FLOW, is not safe on that query and is written against `ftdsettings` instead; the block below says why. The guard's `.ftd :where(button, ...)` is (0,1,0) and sets no padding, so it and the button rule above do not meet. WHAT THIS DOES NOT FIX, and it is recorded rather than bodged. The card form (`.ftd-settings--card` inside the Module Dashboard's ASSETS card) is still two rows. Measured here after the mend: it asks 1024px and is given 971px at 1920 and 958px at 1366, so it is short by 53px and 66px. The cause is the card's width, not the breakpoint -- `.ftd-grid--assets` gives ASSETS 2fr of 3, so the card is about the same width at 1920 as at 1366, and the form is two rows at BOTH. This mend does not change that at either, and it should not: closing 53px would mean cutting the card's own strip and body padding, which is a signed-off surface. The three ways out -- accept two rows in a settings strip, give the card form a shorter control set (its Show carries five options against the plain bar's three, its Sort ten), or widen the ASSETS card at this breakpoint -- are decisions for the walk, not for this sheet. */ @container ftd (min-width: 1000px) { .ftd .ftd-settings .ftd-seg button { padding: 0 5px; } .ftd-settings__controls { column-gap: 10px; } } /* THE FLASH ANSWERS THE BAR, NOT THE PAGE (2026-09-21, corrected the same day). Taking the flash out of flow was first written into the 1000px `ftd` query above, with the other two levers. That is wrong for this one declaration: `@container ftd` names the page root, so a 298px settings strip inside a card got an absolutely positioned flash whenever the PAGE was wide. Measured: bar 298px on a 1400px page, the flash landed 19px INTO the table below it, green on the dark head band. The two padding levers above may stay on the page's query because they only ever shrink a control; a rule that takes a box out of flow must answer the box that has to hold it. 900px is the floor because the plain list bar is 1030px at 1366 and the card strip is about 300px: nothing between the two exists in the signed-off set, so the floor sits in the gap. Measured after the change: plain bar 1030px, flash absolute, 0px of overlap with the table; card strip 298px on a 1400px page, flash back in flow, 16px of clearance. NO `margin-top`. The flash is 18px of line-height and the bar's bottom margin is 18px, so the 2px the first draft added needed 20px of an 18px gap and put the flash 2px into the table head -- measured, and invisible in every render only because the flash is `opacity: 0` until a choice is made. At 0 it fits exactly. */ @container ftdsettings (min-width: 900px) { .ftd-settings__saved { position: absolute; left: 0; top: 100%; } } /* ---------------------------------------------------------------- latest asset */ .ftd-gallery { min-height: 230px; border-radius: 6px; overflow: hidden; background: var(--ftd-inset); } .ftd-gallery__placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 230px; padding: 0 20px; text-align: center; font-size: 12px; color: var(--ftd-muted); background: linear-gradient(135deg, var(--ftd-inset), var(--ftd-line)); } .ftd-gallery__placeholder i { font-size: 3rem; opacity: .6; } @container ftdcard (min-width: 640px) { .ftd-asset { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0 24px; align-items: start; } .ftd-asset__info > .ftd-asset__name { margin-top: 0; } } .ftd-asset__name { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; font-size: 16px; font-weight: 500; } /* T6: "a long name, one line with ellipsis, never a wrap". The row is the name and its status badge. The name is the flex item that gives way: min-width 0 lets it shrink below its text (a flex item's floor is auto, which is its content, so without this it pushes the badge out instead of truncating), and the badge keeps `flex: none` on .ftd-badge, so it is never squeezed. A short name is unchanged: it does not fill the row, so nothing truncates. The small band's name is allowed to wrap (T6's own exception) and is a different class, untouched. */ .ftd .ftd-asset__name a { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ftd-primary); } .ftd .ftd-asset__name a:hover { color: var(--ftd-accent); text-decoration: underline !important; } .ftd-asset__desc { margin: 2px 0 12px; color: var(--ftd-muted); } .ftd .ftd-asset__facts { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; } .ftd .ftd-asset__facts dt { color: var(--ftd-muted); font-weight: 400; } .ftd .ftd-asset__facts dd { text-align: right; color: var(--ftd-ink); } .ftd-asset__foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ftd-line); } .ftd-muted { color: var(--ftd-muted); font-size: 12px; } .ftd-badge { flex: none; padding: 2px 9px; border-radius: 4px; background: var(--ftd-good-bg); color: var(--ftd-good-ink); font-size: 11px; font-weight: 500; } .ftd-badge--grey { background: #e9ecef; color: #5c6670; } .ftd-badge--red { background: var(--ftd-bad-bg); color: var(--ftd-bad-ink); } /* ---------------------------------------------------------------- headline numbers: a strip of linked counts under a band (an Object Dashboard's statuses) */ .ftd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; } @container ftdcard (max-width: 560px) { .ftd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ftd .ftd-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border: 1px solid var(--ftd-line); border-radius: 7px; background: var(--ftd-surface); transition: all .15s; } .ftd .ftd-stat:hover { background: var(--ftd-hover); border-color: var(--ftd-accent); } .ftd-stat__n { font-size: 20px; font-weight: 600; line-height: 1.15; color: var(--ftd-primary); } .ftd-stat__label { font-size: 12px; color: var(--ftd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a file's page: the band is the file and what can be done with it; the counts beneath it may be five across and may carry good or bad news */ .ftd-stats--five { grid-template-columns: repeat(5, minmax(0, 1fr)); } @container ftd (max-width: 900px) { .ftd-stats--five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ftd .ftd-stat--good { border-color: #cfe6d1; background: #f1f8f2; } .ftd-stat--good .ftd-stat__n { color: var(--ftd-good-ink); } .ftd .ftd-stat--bad { border-color: #f1cccc; background: #fdf1f1; } .ftd-stat--bad .ftd-stat__n { color: var(--ftd-bad-ink); } /* A COUNT OF NONE IS QUIET ON A TILE TOO, 2026-09-21. The panel row already has this device (.ftd-row--zero above): a status with nothing in it should not shout the theme colour at the same weight as a status with 212 in it. The tile had nothing for it, because .ftd-stat__n is --ftd-primary unconditionally and .ftd-stat carried only --good and --bad. This is OPT-IN and no signed-off page sets it, so nothing moves today; it is here for the pages still to come. It echoes the row's device exactly, muted colour and weight 400, and it is (0,2,0), the same as --good and --bad, so a tile that is BOTH zero and good takes whichever the markup means last in this file: --good and --bad are written above, so --zero wins, which is right (a zero is not good news). The tile stays a link: this names only the number inside it, never the anchor, so the hover on .ftd-stat is untouched. */ .ftd-stat--zero .ftd-stat__n { color: var(--ftd-muted); font-weight: 400; } .ftd-filehead .ftd-band__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; } .ftd-filehead .ftd-band__sub { white-space: normal; } .ftd-filehead__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .ftd-filehead__about { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ftd-line); } .ftd .ftd-pill--danger { border-color: #f1cccc; color: var(--ftd-bad-ink); } .ftd .ftd-pill--danger:hover { background: var(--ftd-bad-ink); border-color: var(--ftd-bad-ink); color: #fff; } .ftd .ftd-btn i { font-size: 1.05rem; } /* what happened, newest first: a file's Activity tab */ /* a run of chips: an export's columns */ .ftd-chips { display: flex; flex-wrap: wrap; gap: 6px; } /* ---------------------------------------------------------------- a row with a thumbnail: the latest assets, the latest dispositions */ .ftd .ftd-thumbrow { display: flex; align-items: center; gap: 10px; min-height: 54px; margin: 0 -6px; padding: 6px; border-radius: 6px; border-bottom: 1px solid var(--ftd-hairline); transition: background .15s; } .ftd .ftd-thumbrow:last-child { border-bottom: 0; } .ftd .ftd-thumbrow:hover { background: var(--ftd-hover); } .ftd-thumbrow__img { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; overflow: hidden; border-radius: 6px; background: var(--ftd-inset); color: var(--ftd-muted); font-size: 1.2rem; } .ftd-thumbrow__img img { width: 100%; height: 100%; object-fit: cover; } .ftd-thumbrow__text { flex: 1; min-width: 0; } .ftd-thumbrow__name, .ftd-thumbrow__sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ftd-thumbrow__name { font-weight: 500; color: var(--ftd-ink); } .ftd-thumbrow__sub { font-size: 12px; color: var(--ftd-muted); } /* ---------------------------------------------------------------- a list of records: one row a record, the column names above (the Files list) One line per record where the old list spent two: the four big boxes (status, items, successful, failed) become a badge and a short count. */ .ftd-list { overflow: hidden; border: 1px solid var(--ftd-line); border-radius: 8px; background: var(--ftd-surface); box-shadow: 0 5px 30px rgba(0, 28, 56, .06); } .ftd-list__head, .ftd .ftd-listrow { display: grid; grid-template-columns: minmax(0, 2.4fr) 76px minmax(0, .7fr) minmax(0, .9fr) 104px 222px 132px; align-items: center; gap: 0 16px; padding: 0 18px; } .ftd-list__head { height: 40px; background: var(--ftd-primary); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .ftd .ftd-listrow { min-height: 62px; border-bottom: 1px solid var(--ftd-hairline); transition: background .15s; } .ftd .ftd-listrow:last-child { border-bottom: 0; } .ftd .ftd-listrow:hover { background: var(--ftd-hover); } .ftd-listrow__main { display: flex; align-items: center; gap: 12px; min-width: 0; } .ftd-listrow__meta { display: contents; } .ftd-listrow__meta > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ftd-listrow__counts { font-size: 12px; color: var(--ftd-muted); } .ftd-listrow__counts b { font-weight: 600; color: var(--ftd-ink); } .ftd-listrow__counts .is-bad { color: var(--ftd-bad-ink); font-weight: 600; } .ftd-listrow__meta > .ftd-counts { overflow: visible; } /* a record's counts, the same three in the same three places on every row: items, successful, failed */ .ftd-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .ftd-count { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 40px; border: 1px solid var(--ftd-line); border-radius: 6px; background: var(--ftd-surface); line-height: 1.15; } .ftd a.ftd-count:hover { border-color: var(--ftd-accent); background: var(--ftd-hover); } .ftd-count b { font-size: 14px; font-weight: 600; color: var(--ftd-ink); } .ftd-count span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-count--good { border-color: #cfe6d1; background: #f1f8f2; } .ftd-count--good b { color: var(--ftd-good-ink); } .ftd-count--bad { border-color: #f1cccc; background: #fdf1f1; } .ftd-count--bad b { color: var(--ftd-bad-ink); } /* an import that was uploaded and never run has nothing to count: it says so in words, in the counts' place */ .ftd-counts--words { display: block; font-size: 12px; color: var(--ftd-muted); } .ftd-listrow__actions { display: flex; justify-content: flex-end; gap: 6px; } .ftd .ftd-chip { display: inline-block; padding: 1px 9px; border-radius: var(--ftd-corner); background: var(--ftd-accent-soft); color: var(--ftd-primary); font-size: 11px; font-weight: 500; } /* the one central corner */ .ftd-chip--export { background: var(--ftd-primary-soft); } /* what one row of an import did to one record: made it, or found it already there */ .ftd .ftd-chip--made { background: var(--ftd-good-bg); color: var(--ftd-good-ink); } .ftd .ftd-chip--matched { background: #e9ecef; color: #5c6670; } .ftd-listrow__meta > .ftd-listrow__note { overflow: visible; white-space: normal; font-size: 12px; color: var(--ftd-muted); } .ftd-listrow__note .ftd-chips { display: inline-flex; margin-right: 6px; vertical-align: middle; } .ftd .ftd-listrow__note a.ftd-chip:hover { filter: brightness(.94); } /* the legend is written on a

, so the FIRST reset -- the plain `.ftd p` one, (0,1,1) -- cancelled this -8px pull, and the approved render has it flush. The guard at the head of this sheet is (0,1,0) and loses to a single class, so the pull would appear for the first time and move a page Tristian has approved. It is taken off on a

, which is the only tag it is used on, so the approved render stands; the declaration is left for any other tag, as the sheet wrote it. (This has been true of the guard since it was :where(), and stays true now that it is .ftd :where(p): both lose to one class. The 2026-09-20 mend changed which SITE rules the guard beats, not which of this sheet's.) */ .ftd-legend { margin: -8px 0 12px; font-size: 12px; color: var(--ftd-muted); } .ftd p.ftd-legend { margin: 0; } /* on a

the old reset cancelled it, and the approved render has it flush */ .ftd-legend .ftd-chip { margin: 0 4px 0 10px; } .ftd-legend .ftd-chip:first-child { margin-left: 0; } .ftd .ftd-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--ftd-accent-soft); border-radius: var(--ftd-corner); background: var(--ftd-surface); color: var(--ftd-primary); font-size: 1.05rem; transition: all .15s; } /* the one central corner; it was a circle, which the round setting made of it */ .ftd .ftd-iconbtn:hover { background: var(--ftd-primary); border-color: var(--ftd-primary); color: #fff; } .ftd .ftd-iconbtn--danger { color: var(--ftd-bad-ink); } .ftd .ftd-iconbtn--danger:hover { background: var(--ftd-bad-ink); border-color: var(--ftd-bad-ink); color: #fff; } /* an import's log: one row of the file a row, and what became of it (row, object, department, outcome, note, the record it made) */ .ftd-list--log .ftd-list__head, .ftd .ftd-list--log .ftd-listrow { grid-template-columns: minmax(0, 2.4fr) minmax(0, .7fr) minmax(0, .9fr) 112px minmax(0, 1.8fr) 96px; } .ftd .ftd-list--log .ftd-listrow { min-height: 54px; padding-top: 8px; padding-bottom: 8px; } .ftd-rowno { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: var(--ftd-inset); color: var(--ftd-muted); font-size: 12px; font-weight: 600; } .ftd-badge--amber { background: #fdf0d5; color: #8a5a00; } /* with less room the column names go and each record is its name, then its facts on a second line */ @container ftd (max-width: 1100px) { .ftd-list__head { display: none; } .ftd .ftd-listrow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 10px 14px; } .ftd-listrow__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; grid-column: 1 / -1; order: 3; } } /* ---------------------------------------------------------------- latest imports, latest exports */ .ftd-files { width: 100%; border-collapse: collapse; } .ftd .ftd-files td { padding: 9px 6px; border: 0; border-bottom: 1px solid var(--ftd-line); vertical-align: middle; } .ftd .ftd-files tr:last-child td { border-bottom: 0; } .ftd .ftd-files tr:hover td { background: var(--ftd-hover); } .ftd .ftd-files__name { width: 60%; max-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ftd-ink); } .ftd-files__name i { margin-right: 6px; font-size: 1.1rem; vertical-align: middle; color: var(--ftd-accent); } .ftd .ftd-files__when { text-align: right; white-space: nowrap; color: var(--ftd-muted); } @container ftdcard (max-width: 420px) { .ftd .ftd-files__when { white-space: normal; font-size: 11px; } .ftd .ftd-files__name { width: 50%; } } /* ================================================================ ACTIVITY (the Timeline, rebuilt) One shared component in place of the block pasted into twenty files (AUDIT_SHARED_UI_2026-09-19.md, section 2). It does what the Timeline does today and nothing it has no back end for: no filter, no search, no edit, delete or reply. - the row above it is the list toolbar (T12): the count on the left, the layout on the right, the pressed button being the saved one (`preferred_timeline_layout`: 0 Timeline, 1 List; saved silently, as today); - "Timeline" is a card per entry; "List" is the same entries in THE TABLE (its columns are today's: Created By, Action, Title, Images, Date); - an entry: what kind it is on the rail (New, Update, Override, Comment: the List layout's own three words and the user's own posts), who, what they did in words (getItemPostTitle), when (the date and how long ago), then the text with its links, the list of what changed, and its images (a click opens the lightbox, on every page); - "Post an update" only where the page has it (`form` on or off per page), folded or open as the user left it (`post_update_form_appearance`). */ .ftd-posts { position: relative; margin: 0; padding: 0; } .ftd-posts::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 15px; width: 2px; background: var(--ftd-line); } .ftd-post { position: relative; display: grid; grid-template-columns: 32px 36px minmax(0, 1fr); gap: 0 12px; padding: 0 0 18px; } .ftd-post:last-child { padding-bottom: 0; } .ftd-post__kind { z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 2px solid var(--ftd-surface); border-radius: 50%; background: var(--ftd-accent-soft); color: var(--ftd-primary); font-size: 1rem; } .ftd-post--new .ftd-post__kind { background: var(--ftd-good-bg); color: var(--ftd-good-ink); } .ftd-post--override .ftd-post__kind { background: #fdf0d5; color: #8a5a00; } .ftd-post--bad .ftd-post__kind { background: var(--ftd-bad-bg); color: var(--ftd-bad-ink); } .ftd-post--comment .ftd-post__kind { background: var(--ftd-inset); color: var(--ftd-muted); } .ftd-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ftd-primary); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .02em; } .ftd-avatar--sm { width: 24px; height: 24px; font-size: 10px; } .ftd-avatar--system { background: var(--ftd-inset); color: var(--ftd-muted); } .ftd-post__body { min-width: 0; } .ftd-post__line { color: var(--ftd-text); } .ftd-post__line b { font-weight: 600; color: var(--ftd-ink); } .ftd-post__when { font-size: 12px; color: var(--ftd-muted); } .ftd-post__text { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: var(--ftd-inset); color: var(--ftd-text); overflow-wrap: break-word; } .ftd .ftd-post__text a { color: var(--ftd-accent); font-weight: 500; } .ftd .ftd-post__text a:hover { text-decoration: underline !important; } .ftd .ftd-post__text > * + * { margin-top: 10px; } /* what changed, as name and value: the entry's `post_meta`, the object's own dictionary deciding the names */ .ftd-post__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 18px; } .ftd-post__facts dt { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-post__facts dd { color: var(--ftd-ink); overflow-wrap: break-word; } .ftd-post__none { font-style: italic; color: var(--ftd-muted); } .ftd-post__images { display: flex; flex-wrap: wrap; gap: 8px; } .ftd .ftd-post__img { display: flex; align-items: center; justify-content: center; width: 96px; height: 72px; border: 1px solid var(--ftd-line); border-radius: 6px; background: var(--ftd-surface); color: var(--ftd-control-line); font-size: 1.6rem; cursor: zoom-in; } .ftd .ftd-post__img:hover { border-color: var(--ftd-accent); color: var(--ftd-accent); } .ftd-posts__more { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ftd-hairline); font-size: 12px; color: var(--ftd-muted); } .ftd-posts__empty { padding: 28px 0 22px; text-align: center; color: var(--ftd-muted); } .ftd-posts__empty i { display: block; margin-bottom: 6px; font-size: 2rem; color: var(--ftd-control-line); } /* Post an update: the heading is the fold; the text, the images to go with it, Cancel (which folds it) and Submit */ .ftd-postform { margin: 0 0 18px; border: 1px solid var(--ftd-line); border-radius: 8px; background: var(--ftd-surface); } .ftd .ftd-postform__head { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--ftd-ink); font-size: 13px; font-weight: 600; cursor: pointer; } .ftd-postform__head i { font-size: 1.3rem; color: var(--ftd-muted); transition: transform .2s; } .ftd-postform.is-open .ftd-postform__head i { transform: rotate(180deg); } .ftd-postform__body { display: none; padding: 0 14px 14px; } .ftd-postform.is-open .ftd-postform__body { display: block; } .ftd-postform__fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 12px; } .ftd .ftd-postform textarea { width: 100%; min-height: 112px; padding: 10px 12px; border: 1px solid var(--ftd-control-line); border-radius: 6px; font: inherit; color: var(--ftd-ink); resize: vertical; } .ftd-postform__drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 112px; padding: 10px; border: 1px dashed var(--ftd-control-line); border-radius: 6px; background: var(--ftd-inset); color: var(--ftd-muted); font-size: 12px; text-align: center; } .ftd-postform__drop i { font-size: 1.8rem; color: var(--ftd-control-line); } .ftd-postform__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 12px; } .ftd-postform__foot .ftd-postform__left { margin-right: auto; display: flex; gap: 8px; } @container ftdcard (max-width: 520px) { .ftd-post { grid-template-columns: 32px minmax(0, 1fr); } .ftd-post > .ftd-avatar { display: none; } .ftd-postform__fields { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ ACTIVITY ends */ /* ================================================================ BULK ACTIONS The one shared block behind every Bulk Actions tab (BulkActionsBlock.vue and its five sub-components), redrawn. It does what the block does today and keeps its contract (the page still says which actions to offer; one endpoint; the same saved preferences). Three numbered steps and a bar that always says what is about to happen: 1 WHICH RECORDS the ticked ones, or all N of the list as it is filtered now (it says how it is filtered); 2 WHAT TO DO the actions the page offers, as tiles, grouped; the chosen one is pressed; 3 THE DETAIL the panel of the chosen action: one panel drawn for tags, one for the six "change" actions, one each for delete and storage planning, all from the same few pieces below; then WHEN IT IS DONE (the two saved preferences, each a one-of-N choice, which is what they are) and the submit bar. */ .ftd-steps { display: grid; gap: 20px; } .ftd-step__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); font-size: 11px; font-weight: 600; } .ftd-card__head .ftd-step__hint { margin-left: auto; font-size: 11px; font-weight: 400; letter-spacing: 0; text-transform: none; opacity: .8; } /* a choice among a few: a tile with an icon, a name and a line of explanation; the chosen one is pressed */ .ftd-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .ftd-choices--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ftd .ftd-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 58px; padding: 10px 12px; border: 1px solid var(--ftd-line); border-radius: 8px; background: var(--ftd-surface); color: var(--ftd-text); font: inherit; text-align: left; cursor: pointer; transition: all .15s; } .ftd .ftd-choice:hover { border-color: var(--ftd-accent); background: var(--ftd-hover); } .ftd .ftd-choice.is-on { border-color: var(--ftd-primary); background: var(--ftd-hover); box-shadow: inset 0 0 0 1px var(--ftd-primary); } .ftd-choice__tick { display: none; position: absolute; top: 7px; right: 9px; font-size: 1.05rem; color: var(--ftd-primary); } .ftd-choice.is-on .ftd-choice__tick { display: block; } .ftd-choice > i { flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--ftd-inset); color: var(--ftd-primary); font-size: 1.15rem; } .ftd-choice.is-on > i { background: var(--ftd-surface); } .ftd-choice__name { display: block; font-weight: 600; color: var(--ftd-ink); } .ftd-choice__sub { display: block; font-size: 12px; color: var(--ftd-muted); } .ftd .ftd-choice--danger > i, .ftd .ftd-choice--danger .ftd-choice__name { color: var(--ftd-bad-ink); } .ftd .ftd-choice--danger.is-on { border-color: var(--ftd-bad-ink); background: #fdf1f1; box-shadow: inset 0 0 0 1px var(--ftd-bad-ink); } .ftd-choice--danger .ftd-choice__tick { color: var(--ftd-bad-ink); } .ftd .ftd-choice[disabled] { cursor: not-allowed; opacity: .5; } .ftd-choicegroup { margin: 14px 0 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-choicegroup:first-child { margin-top: 0; } /* the chosen action's panel */ .ftd-field { margin: 0 0 14px; } .ftd-field > label, .ftd-field__label { display: block; margin: 0 0 5px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-muted); } .ftd .ftd-field select, .ftd .ftd-field input[type="text"] { width: 100%; max-width: 460px; height: 36px; padding: 0 10px; border: 1px solid var(--ftd-control-line); border-radius: 6px; background: var(--ftd-surface); font: inherit; color: var(--ftd-ink); } /* the help line is drawn on a

, a AND a

across the mocks, and under the FIRST reset -- the plain `.ftd p` one, (0,1,1) -- the same class rendered two ways: 5px under a div or a span, nothing under a p, because that reset beat this single class on that one tag and nobody saw it. The guard at the head of this sheet is (0,1,0) and loses to a single class, so the p case would gain 5px it never had and move pages Tristian has approved. The approved render is the truth, so the 5px is kept where it was drawn and taken off where it was not. A single rule for both is a change to ask for, not one to slip in with a merge. */ .ftd-field__help { margin-top: 5px; font-size: 12px; color: var(--ftd-muted); } .ftd p.ftd-field__help { margin-top: 0; } /* on a

the old reset cancelled it, and the approved render has it flush */ .ftd-note { display: flex; gap: 8px; margin: 0 0 14px; padding: 9px 12px; border-left: 3px solid var(--ftd-accent); border-radius: 0 6px 6px 0; background: var(--ftd-inset); font-size: 12px; color: var(--ftd-text); } .ftd-note i { flex: none; font-size: 1.05rem; color: var(--ftd-accent); } .ftd-note--danger { border-left-color: var(--ftd-bad-ink); background: #fdf1f1; } .ftd-note--danger i { color: var(--ftd-bad-ink); } /* OPTIONS IN VIEW, TO CLICK (Tristian, 2026-09-19: not a dropdown, "the user can see the options and click to select", with the box above to narrow them). One of many (a department, a character, a set, a folder, a service provider: `data-single`) or several (tags). A chip is off or on; on shows the tick. No "x": nothing here removes anything from the system. The list scrolls inside its own height when it is long. */ .ftd-tagpick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; } .ftd .ftd-tag { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border: 1px solid var(--ftd-control-line); border-radius: 13px; background: var(--ftd-surface); color: var(--ftd-text); font: inherit; font-size: 12px; cursor: pointer; } .ftd .ftd-tag:hover { border-color: var(--ftd-accent); } .ftd .ftd-tag.is-on { border-color: var(--ftd-primary); background: var(--ftd-primary); color: #fff; } .ftd-tag > i { display: none; font-size: .95rem; } .ftd-tag.is-on > i { display: inline; } .ftd-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ftd-text); cursor: pointer; } .ftd-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ftd-accent); } /* when it is done: the two saved preferences, each one of a few */ .ftd-prefs { display: flex; flex-wrap: wrap; gap: 14px 34px; } .ftd-prefs .ftd-control > span { min-width: 0; } /* what is about to happen, and the button that does it; it stays in view */ .ftd-submitbar { position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 20px; padding: 12px 16px; border: 1px solid var(--ftd-line); border-radius: 10px; background: var(--ftd-surface); box-shadow: 0 10px 30px rgba(0, 28, 56, .14); } .ftd-submitbar__what { margin-right: auto; color: var(--ftd-text); } .ftd-submitbar__what b { font-weight: 600; color: var(--ftd-ink); } .ftd .ftd-btn--danger { background: var(--ftd-bad-ink); } .ftd .ftd-btn--danger:hover { background: #7f1d1d; } .ftd .ftd-btn[aria-disabled="true"] { background: var(--ftd-control-line); cursor: not-allowed; } /* after it is sent: the run, in place, for every action and not only for an export */ .ftd-run { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border: 1px solid #cfe6d1; border-radius: 8px; background: #f1f8f2; } .ftd-run__bar { flex: 1 1 220px; height: 8px; border-radius: 4px; background: #d8ecd9; overflow: hidden; } .ftd-run__bar > span { display: block; height: 100%; background: var(--ftd-good-ink); } /* the saved preferences as a quiet strip BELOW the button: settings, not a step of the action */ .ftd-prefstrip { margin-top: 14px; } .ftd-submitbar--inline { position: static; margin-top: 18px; box-shadow: none; background: var(--ftd-inset); } /* small tiles (a name and its icon, no second line) and a one-column list of them */ .ftd-choices--small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; } .ftd-choices--small .ftd-choice, .ftd-choices--list .ftd-choice { align-items: center; min-height: 44px; padding: 6px 10px; } .ftd-choices--list { grid-template-columns: minmax(0, 1fr); gap: 6px; } .ftd-choices--small + .ftd-choices--small { margin-top: 8px; } /* the first design's tiles, slimmed for the compact card: the icon, the name and ONE line of explanation; a group's name ABOVE its row of tiles (Tristian, 2026-09-19: not beside it, which pushed the tiles to the right) */ .ftd-choice > span:not(.ftd-choice__tick) { min-width: 0; } .ftd-choices--slim { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); gap: 8px; } .ftd .ftd-choices--slim .ftd-choice { align-items: center; min-height: 46px; padding: 5px 28px 5px 9px; } .ftd-choices--slim .ftd-choice > i { width: 30px; height: 30px; font-size: 1.05rem; } .ftd-choices--slim .ftd-choice__name { line-height: 1.3; } .ftd-choices--slim .ftd-choice__sub { font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ftd-choices--which { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) auto; align-items: center; } .ftd-choices--which .ftd-formrow__link { margin-left: 4px; white-space: nowrap; } .ftd-choicerow + .ftd-choicerow { margin-top: 10px; } .ftd-choicerow > .ftd-choicegroup { margin: 0 0 5px; } @container ftd (max-width: 900px) { .ftd-choices--which { grid-template-columns: minmax(0, 1fr); } } /* B. conditional steps: one open at a time; a finished step is one line and can be changed; a step not yet reached is only its name */ .ftd-stepper { border: 1px solid var(--ftd-line); border-radius: 8px; background: var(--ftd-surface); box-shadow: 0 5px 30px rgba(0, 28, 56, .06); } .ftd-sstep + .ftd-sstep { border-top: 1px solid var(--ftd-line); } .ftd-sstep__head { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; } .ftd-sstep__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ftd-inset); color: var(--ftd-muted); font-size: 12px; font-weight: 600; } .ftd-sstep__title { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-sstep__summary { font-weight: 600; color: var(--ftd-ink); } .ftd .ftd-sstep__change { display: none; margin-left: auto; color: var(--ftd-accent); font-size: 12px; font-weight: 500; } .ftd-sstep__body { display: none; padding: 4px 18px 18px 56px; } .ftd-sstep.is-open > .ftd-sstep__body { display: block; } .ftd-sstep.is-open .ftd-sstep__no { background: var(--ftd-primary); color: #fff; } .ftd-sstep.is-open .ftd-sstep__title { color: var(--ftd-ink); } .ftd-sstep.is-open .ftd-sstep__summary { display: none; } .ftd-sstep.is-done .ftd-sstep__no { background: var(--ftd-good-bg); color: var(--ftd-good-ink); } .ftd-sstep.is-done .ftd-sstep__change { display: inline; } .ftd-sstep.is-todo { opacity: .55; } .ftd-sstep.is-todo .ftd-sstep__summary { display: none; } /* C. side by side */ .ftd-bulk-split { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.7fr); gap: 20px; align-items: start; } .ftd-bulk-split__left, .ftd-bulk-split__right { display: grid; gap: 20px; } .ftd-bulk-split__right { position: sticky; top: 12px; } /* D. one compact card: a label on the left, its control on the right */ .ftd-formrow { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 8px 18px; padding: 12px 0; border-bottom: 1px solid var(--ftd-hairline); } .ftd-formrow:first-child { padding-top: 0; } .ftd-formrow__label { padding-top: 6px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ftd-muted); } .ftd-formrow__body > .ftd-field:last-child, .ftd-formrow__body [data-panel] > .ftd-field:last-child { margin-bottom: 0; } .ftd .ftd-formrow__link { margin-left: 12px; color: var(--ftd-accent); font-size: 12px; font-weight: 500; } .ftd .ftd-seg--big button { height: 34px; padding: 0 16px; font-size: 13px; } @container ftd (max-width: 900px) { .ftd-bulk-split { grid-template-columns: minmax(0, 1fr); } .ftd-bulk-split__right { position: static; } .ftd-formrow { grid-template-columns: minmax(0, 1fr); } .ftd-sstep__body { padding-left: 18px; } } @container ftd (max-width: 700px) { .ftd-choices--two { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ BULK ACTIONS ends */ /* ================================================================ FOUNDATION The design walk's shared layer, folded in (DESIGN_WALK_PLAN_2026-09-19.md section B, primitives F1 to F20). It was `design-walk/foundation.css`, loaded after this sheet while the twenty-one designs were drawn; now it is part of the one sheet Abed ships, and foundation.css is no longer needed to draw a page. WHAT CHANGED IN THE FOLDING, and nothing else did: 1. ONE VALUE FOR CORNERS. The walk compared square, 6px and round behind html[data-corners]; Tristian chose 6px (Log #355). The switch is gone and 6px is the only value. An underline tab still has no corners. 2. ONE VALUE FOR WEIGHT. The walk compared strong, Balanced and quiet behind html[data-weight]; Tristian chose Balanced (Log #355). The switch is gone. A card's head, a boxed section's head and a modal's head are ONE grammar: the inset grey with the title in ink, framed on the real line colour. 3. THE REDEFINITIONS ARE FOLDED WHERE THE THING IS DECLARED, not restated here. Where this layer used to overrule a rule above it by loading later, that rule above now carries the signed-off result itself and says so in its own one-line comment. Nothing in the sheet fights anything else in it. Everything else is as Tristian signed it off on r1 to r8: the section as a bordered box with a heading, always open (Log #356), the meaning colours (Yes / On Camera green, No / Off Camera red, Unknown grey), and the restyle of the central boxes, forms and modals for the whole site (Log #360). IT OBEYS THE SHEET'S OWN RULES, as it did as a separate file: everything under `.ftd`, every class `ftd-`, theme colour only through the four --ftd-* variables, container queries and never media queries, a one-line comment on every class, no Bootstrap. Two literal neutrals are named here for states the sheet already writes literally in the same way: --ftd-warn-bg / --ftd-warn-ink (the amber of .ftd-badge--amber and .ftd-post--override) and --ftd-focus (the accent at 35%). WHERE IT SITS, and why: BEFORE the section THE TABLE, which must stay last because the table's builder rewrites everything from THE TABLE's marker to the end of the file. ACTIVITY and BULK ACTIONS splice themselves in just before THE TABLE too, so the order of the three is not fixed and this section never relies on it: the three places where a later section declares the same thing carry their weight in specificity instead, and each says so where it stands. */ .ftd { /* the amber the approved sheet already writes literally at .ftd-badge--amber and .ftd-post--override, named once so a warning is the same amber everywhere; and the focus ring, which is the accent, not a colour of its own */ --ftd-warn-bg: #fdf0d5; --ftd-warn-ink: #8a5a00; --ftd-warn-line: #ecd9ab; --ftd-focus: rgba(85, 110, 230, .35); --ftd-focus: color-mix(in srgb, var(--ftd-accent) 35%, transparent); /* THE OFF INK: the colour of text that is switched off - an absent value's dash, a disabled tab, a disabled menu entry, a disabled page number. It is NOT --ftd-control-line. --ftd-control-line is a LINE colour (#d3d9e2) and measures 1.4:1 on white: as a line it is right, as words it is very nearly invisible, and "invisible" is not the same as "off". Measured: 3.35:1 on the surface and 3.10:1 on the inset, so a disabled thing still reads as words the eye can find and then dismiss. A dash nobody can see is a bug report, not a design. Large decorative glyphs (the dropzone's cloud, an empty state's icon at 2.4rem) keep --ftd-control-line: they are furniture, not words, and at that size the lighter tone is the point. */ --ftd-off-ink: #848d9b; } /* ONE FOCUS RING for every control this file draws, so a keyboard user is never lost. It is the accent. */ .ftd :focus-visible { outline: 2px solid var(--ftd-accent); outline-offset: 1px; } /* THE BUTTON-ELEMENT RESET. THIS IS LOAD-BEARING: READ IT BEFORE YOU WRITE A CONTROL. .ftd-btn, .ftd-pill and .ftd-iconbtn were written in the approved sheet for an : they set a background and a radius but NO border, because an anchor has none. The moment the same class goes on a real