/* ═══════════════════════════════════════════════════════════════════════ /darmaster/12/skin.css — BLUEPRINT / FOLDER skin for the Document Library ─────────────────────────────────────────────────────────────────────── Loaded LAST by /darmaster/12/index.php, AFTER all of /08's stylesheets, so it wins on source order at equal specificity. It RE-SKINS /08 — it does not re-implement it: every filter, search, status/facet edit, export, drag and collapse still runs on the shared webpage_section_browser.js against /08's .doc-* structure. This file only changes the LOOK: · slate-blue blueprint palette (token override of theme_section_dark.css) · Cinzel wordbrand · section + department bands → flat manila folder TABS in a fixed 3-up grid (collapsed by default → tab; expanded → full-width folder header) · flat count chips; sub-bands show the count only ("files" stays on entity) · re-tinted floating control-panel toolbar + per-row indicator icons Delete the /12 folder to discard — /08 and all shared assets are untouched. ═══════════════════════════════════════════════════════════════════════ */ /* ── 0 · SELF-HOSTED CINZEL DECORATIVE wordbrand (700) ────────────────────── The wordmark is var(--font-display) — the site's self-hosted wordmark face (css/fonts/, used by the homepage). /12 had been pulling plain remote Cinzel, which loaded unreliably (the fallback serif "overwrote" it on load). The woff2 are COPIED into 12/fonts/ so /12 stays self-contained AND the wordbrand renders reliably with ZERO external dependency. url() is relative to THIS file → /darmaster/12/fonts/. */ @font-face{ font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../css/fonts/cinzeldecorative-700-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../css/fonts/cinzeldecorative-700-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* ── 1 · PALETTE TOKENS — slate-blue blueprint (override theme_section_dark) ── */ :root{ /* ENTITY-DRIVEN blueprint palette — every tone derives from the site's --nav-bg (a dark shade of its brand) + --nav-gold (its accent), so the library wears the same hue as the rest of the site instead of a fixed slate-blue. The page is a touch lighter than the nav so the bar still reads as the deepest band. Fallbacks keep it standalone-safe. */ --doc-bg: var(--page-bg); --doc-surface: color-mix(in srgb, var(--nav-bg, #16232F) 52%, transparent); --doc-surface-h: color-mix(in srgb, var(--nav-bg, #16232F) 64%, transparent); --doc-control: color-mix(in srgb, var(--nav-gold, #B8832A) 12%, transparent); --doc-panel: color-mix(in srgb, var(--nav-bg, #16232F) 90%, #ffffff); --doc-header-bg: var(--nav-bg, #16232F); /* deepest band = the nav colour */ --doc-tint: var(--doc-bg); --doc-text: #F4EFE5; --doc-text-muted: rgba(244, 239, 229, 0.60); --doc-text-faint: rgba(244, 239, 229, 0.34); --doc-title: var(--doc-text); --doc-gold: var(--nav-gold, #D2A24A); --doc-rule: color-mix(in srgb, var(--nav-gold, #B8832A) 22%, transparent); --doc-radius: 4px; /* control fill = a lighter step of the nav hue (was hardcoded slate) */ --bp-ctrl: color-mix(in srgb, var(--nav-bg, #16232F) 72%, #ffffff); --bp-ctrl-h: color-mix(in srgb, var(--nav-bg, #16232F) 62%, #ffffff); --bp-band2: color-mix(in srgb, var(--nav-bg, #16232F) 90%, #000000); /* toolbar band — a step deeper than the page */ --bp-brand: var(--font-display); } /* ── 2 · PAGE GROUND — slate + faint blueprint graph-paper grid ────────────── */ body{ background-color: var(--doc-bg); background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(180,205,228,0.045) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(180,205,228,0.045) 31px 32px); } /* ── 3 · WORDBRAND ───────────────────────────────────────────────────────── The nav wordmark, INTERNAL badge link styling, and nav background are now SITEWIDE in the shared module CSS (/darmaster/css/modules/module_nav_sections.css). /12 used to override them here; those overrides were moved into the shared stylesheet so every page that loads the module (currently /01, /08, /12) shares one source of truth. Edit the shared file to change the nav for all three pages at once. */ /* ── 4 · CONTROL FILLS — retint /08's theme-blue (#1A4D6D) chrome to slate ──── */ .doc-search-field .doc-search, .doc-search-clear-outer, .dtool, .cbx > summary, .doc-ico, .doc-views[data-view="list"] .doc-card .doc-card-arrow, .doc-views[data-view="list"] .doc-card .dc-led{ background: var(--bp-ctrl); } .dtool:hover, .cbx > summary:hover, .doc-ico:hover, .doc-search-clear-outer:hover{ background: var(--bp-ctrl-h); } /* AUDIT-fix: removed dead .dh-age-dir / .dh-age-val (-/+/days picker retired in /08; the age filter is now the .cbx-age dropdown, covered by .cbx above). */ /* the search field flips to ivory while typing — leave /08's :focus rule intact */ /* ── 5 · FOLDER-TAB BANDS ────────────────────────────────────────────────── Sections + departments become flat manila folder tabs laid out 3-up. The entity band stays the full-width heavy header. Collapsed (default) → a one- column tab; expanded → a full-width folder header with its children below. */ /* These container/spacing rules are VIEW-AGNOSTIC ([data-view]) so the bands lay out and space IDENTICALLY in list AND tiles. The ONLY thing that differs per view is the innermost .doc-grid (list = rows, tiles = 3-up cards, set in §32). */ .doc-views[data-view] .doc-entity{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 7px; align-items: start; } .doc-views[data-view] .doc-section-label{ grid-column: 1 / -1; margin-top: 16px; } .doc-views[data-view] .doc-entity:first-of-type .doc-section-label{ margin-top: 4px; } .doc-views[data-view] .doc-section-grp:not(.is-collapsed){ display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 7px; align-items: start; grid-column: 1 / -1; } .doc-views[data-view] .doc-section-grp:not(.is-collapsed) > .doc-subcat-label{ grid-column: 1 / -1; } .doc-views[data-view] .doc-dept:not(.is-collapsed){ display: block; grid-column: 1 / -1; } .doc-views[data-view] .doc-section-grp.is-collapsed, .doc-views[data-view] .doc-dept.is-collapsed{ display: block; grid-column: auto; min-width: 0; } .doc-views[data-view] .doc-grid{ grid-column: 1 / -1; } /* the tab itself (section + department sub-bands) */ .doc-views[data-view] .doc-subcat-label{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; margin: 0; padding: 7px 26px 7px 12px; font-size: var(--ui-fs-title); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: left; border: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 42%, transparent); border-left: 4px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 78%, #ffffff); /* folder spine */ border-radius: 0 4px 4px 0; /* squared left, rounded right */ background: color-mix(in srgb, var(--ent, var(--doc-gold)) 22%, transparent); /* FLAT fill */ box-shadow: -2px 3px 5px -1px rgba(0,0,0,0.40); /* left + bottom lift */ } /* department tab a touch lighter (hierarchy cue) + slightly smaller */ .doc-views[data-view] .doc-dept-label{ background: color-mix(in srgb, #ffffff 16%, color-mix(in srgb, var(--ent, var(--doc-gold)) 22%, transparent)); font-size: var(--ui-fs-value); } /* name truncates so a tab never exceeds its column */ .doc-views[data-view] .doc-subcat-label .band-name{ line-height: 1; flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* /08's disclosure caret (::before, right:11px, rotates on collapse) is kept. */ /* ── 6 · COUNT CHIPS — DEBOSSED wells; sub-bands show the COUNT ONLY ───────── A pill PRESSED INTO the band (was a raised 3D bead): a light well with an inner top shade + a bottom light lip and NO outer drop shadow, and the numeral in the ENTITY SIGNATURE colour (--ent → DARX brown / DARH blue / DARM green). The well is a FIXED light tone mixed with the per-band --ent, so a given entity's count chip is IDENTICAL in its own (dark) library and in DARMASTER's (light) band — and the dark entity numeral stays readable on the light well in both. Driven entirely by --ent → no per-page logic. */ .doc-views[data-view] .doc-subcat-label .band-files, .doc-views[data-view] .doc-section-label .band-files{ margin: 0; padding: 1px 9px 2px; border-radius: 999px; min-width: 18px; text-align: center; background: color-mix(in srgb, var(--ent, var(--doc-gold)) 10%, #F4EEE2); /* light well */ border: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 32%, rgba(0,0,0,0.12)); box-shadow: inset 0 2px 3px rgba(0,0,0,0.30), /* inner top shade — the recess */ inset 0 -1px 0 rgba(255,255,255,0.70); /* bottom lip catches the light */ color: var(--ent, var(--doc-gold)); font-size: var(--ui-fs-label); font-weight: 700; font-style: normal; text-shadow: 0 1px 0 rgba(255,255,255,0.55); /* engrave the numeral into the well */ } .doc-views[data-view] .doc-subcat-label .doc-sw, .doc-views[data-view] .doc-subcat-label .doc-dw{ display: none; } /* count only */ /* ── 7 · PER-ROW INDICATOR ICONS — show type + info + status LED + arrow, flattened to the blueprint look. The LED colour already tracks data-status. */ .doc-views[data-view="list"] .doc-ico-type{ display: inline-flex; } /* surface the doc-type icon in the lean row */ .doc-views[data-view="list"] .doc-card .doc-ico, .doc-views[data-view="list"] .doc-card .doc-card-arrow, .doc-views[data-view="list"] .doc-card .dc-led{ border-color: var(--doc-rule); border-radius: 2px; /* AUDIT-fix: was 4px — match the squared 2px toolbar */ } .doc-views[data-view="list"] .doc-card .doc-ico-type svg{ color: var(--doc-text-muted); } .doc-views[data-view="list"] .doc-card .doc-ico-info{ color: var(--doc-text-muted); } .doc-views[data-view="list"] .doc-card .doc-card-arrow:hover{ background: color-mix(in srgb, var(--doc-gold) 26%, var(--bp-ctrl)); color: var(--doc-gold); } /* ── 8 · TOOLBAR (control panel) — /08's floating, draggable, NON-scrolling two-row header. Re-tint only; the layout (flex-wrap, no scrollbar) stays. ── */ /* /08's header carries an ASYMMETRIC pad (padding-left:52px, padding-right:22px) which throws the centred controls off the content's centre line. Zero both so .dh-row centres on the same axis as .section-main → toolbar controls and rows line up exactly. The grip is absolute(right:0) and the controls are a centred column, so they never reach it. */ .doc-header{ z-index: 1000; padding-left: 0; padding-right: 0; } /* SMART CHROME: the toolbar slides away WITH the nav as one block. When the nav auto-hides (translateY(-105%)), the toolbar slides fully off the top too — its own height PLUS the nav offset above it — so nothing is left floating. A top-edge pointer peek (.darx_chrome_peek_top) brings both back together. */ html.darx_chrome_hide:not(.darx_chrome_peek_top) .doc-header{ transform: translateY(calc(-100% - var(--nav-h-real, var(--nav-h, 60px)))); } .doc-search-info-pill{ font-family: var(--type-mono); } /* count readout keeps the LED treatment */ /* ── 8b · BAND 2 RECOLOR — the toolbar band AND every control on it (buttons, counter "logotype", search box) share ONE navy fill (user swatch --bp-band2). The band is flattened to that flat fill (over /08's frost gradient); --bp-ctrl is re-scoped INSIDE .doc-header so the §4 control fills (search field, .dtool view icons, .cbx filter summaries, the × clear) recolour to band-2 WITHOUT touching the document-row icons outside the toolbar (they keep the global --bp-ctrl). The counter + export/reset assembly are set explicitly. */ .doc-header{ background: var(--bp-band2); /* flat band-2 fill */ --bp-ctrl: var(--bp-band2); /* toolbar buttons + search → band-2 */ --bp-ctrl-h: color-mix(in srgb, var(--bp-band2) 86%, #ffffff); /* subtle hover lift */ } .doc-header .doc-search-info-pill, .doc-header .dh-assembly, .doc-header .dh-assembly > *, .doc-header .doc-export-btn, .doc-header .reset-btn{ background: var(--bp-band2) !important; /* counter "logotype" + export/reset */ } /* ── TOOLBAR LAYOUT — every object the SAME height (24px, matching Collapse/Expand), squared corners, minimal gaps; each row fills its full width (Row 1 search flexes, Row 2 the entity selector flexes). No scrollbars — Row 2 wraps if it truly can't fit. 2026-06-24 user: brought 28px → 24px so the search/refresh/dropdowns are no taller than the Collapse/Expand buttons — ONE uniform toolbar height. */ .doc-header .dtool, .doc-header .cbx > summary, .doc-header .doc-search, .doc-header .doc-search-clear-outer, .doc-header .doc-export-btn, .doc-header .reset-btn, .doc-header .dh-assembly{ height: 24px; min-height: 24px; box-sizing: border-box; border-radius: 2px; } /* COUNTER ASSEMBLY → connected segmented group (counter | ↓ | ⟳). EVERY segment is a true 28px — the same as every other toolbar object — and they share 1px edges (overlapping borders) so the trio reads as one squared instrument, no taller. */ .dh-assembly{ display: inline-flex; align-items: stretch; gap: 0; flex: 0 0 auto; } .dh-assembly > *{ height: 24px !important; min-height: 24px !important; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--doc-gold) 40%, var(--doc-rule)) !important; border-radius: 0 !important; box-shadow: none !important; } .dh-assembly > * + *{ margin-left: -1px; } /* overlap → single shared edge */ .dh-assembly > :first-child{ border-radius: 2px 0 0 2px !important; } .dh-assembly > :last-child{ border-radius: 0 2px 2px 0 !important; } .dh-assembly > .doc-export-btn, .dh-assembly > .reset-btn{ width: 34px; min-width: 34px; background: rgba(16, 24, 32, 0.42); } .dh-assembly > .doc-export-btn:hover, .dh-assembly > .reset-btn:hover{ background: color-mix(in srgb, var(--doc-gold) 16%, transparent); position: relative; z-index: 1; } /* ROW 1 — assembly (fixed) · type tools · VIEW TOGGLES (pushed right into the open green area where the search box used to be); no wrap. 2026-06-24 user. */ .dh-controls .doc-search-wrap{ flex-wrap: nowrap; justify-content: flex-start; gap: 4px; } .dh-controls .doc-search-field{ flex: 1 1 auto; max-width: none; min-width: 90px; } .doc-search-wrap .dh-tools{ margin-left: auto; } /* view toggles + bulk → right side of Row 1 */ /* ROW 2 — tools + filters; the ENTITY selector flexes to fill the slack. Tight gaps + compact icon buttons so the whole row packs onto a single line. */ .ctrl-cluster{ justify-content: flex-start; gap: 4px; } .dh-tools{ gap: 4px; } /* FILTERS lead the row (Revised · Status · Entity · Section · Department); the six view/type/purpose TOOL buttons are sent to the end (2nd half) via flex order. */ .ctrl-cluster .dtool{ width: 24px; min-width: 24px; order: 10; } .ctrl-cluster .cbx:has(input.f-entity){ flex: 1 1 auto; min-width: 0; } .ctrl-cluster .cbx:has(input.f-entity) > summary{ width: 100%; justify-content: space-between; } /* ── 9 · EXPANDED-CARD PLATE — /08's .dc-band is already the blueprint control plate (recessed ink panel + graph grid + corner marks). Nudge it onto the slate palette so it reads as one system with the page. ──────────────────── */ .doc-views[data-view="list"] .doc-card.is-expanded .dc-band{ background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(170,198,222,0.05) 21px 22px), repeating-linear-gradient(90deg, transparent 0 21px, rgba(170,198,222,0.05) 21px 22px), linear-gradient(180deg, #36434f 0%, #2e3a45 100%); } /* ── 10 · EXPANDED-CARD SELECTORS — label TOP-LEFT, value 2nd-row RIGHT ────── /08 stacks value-over-label; flip all four selectors (status · entity · section · department) so the field LABEL leads (top, left-aligned) and the current VALUE sits below it, right-aligned. The caret pins top-right. */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-toggle{ grid-template-columns: 1fr auto auto; grid-template-areas: "key key car" "gap dot val"; column-gap: 5px; row-gap: 4px; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .facet-chip{ grid-template-columns: 1fr auto; grid-template-areas: "key car" "val val"; column-gap: 5px; row-gap: 4px; } /* LABEL → top row, LEFT */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-key, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .fc-key{ grid-area: key; justify-self: start; text-align: left; } /* CARET → top row, RIGHT */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-car, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .fc-car{ grid-area: car; justify-self: end; align-self: center; } /* VALUE → 2nd row, RIGHT (status keeps its dot beside the label) */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-curdot{ grid-area: dot; align-self: center; justify-self: end; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-curlabel{ grid-area: val; justify-self: end; text-align: right; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .fc-val{ grid-area: val; justify-self: end; text-align: right; } /* ── 11 · ROW WIDTH — constrain the document rows to a centred column ──────── /08 yanks .doc-views out to the section edges with negative margins, so the bands/tabs/rows run EDGE-TO-EDGE with no breathing room. Cancel that, cap the column, centre it, and inset it so the content reads as a contained column (narrower than the full-width chrome/toolbar). Tweak the max-width / padding here to widen or tighten the column. */ /* The toolbar's inner controls (.dh-row) AND the document column (.section-main) share ONE centred column of the SAME width, so they line up exactly — no more toolbar wider than the rows. The full-width dark toolbar BAR stays as chrome; only its inner controls are constrained. Tune the column in one place here. */ .dh-row, .section-main{ box-sizing: border-box; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 14px; padding-right: 14px; /* small inset so rows never touch the edge */ } .doc-views{ margin-left: 0; margin-right: 0; } /* undo /08's -20px edge-to-edge pull */ /* ── 12 · ENTITY BAND — ONE row: "NAME | N documents" (count to the RIGHT of the name), and clicking the band folds/unfolds ALL its sections (JS in index.php). */ .doc-views[data-view] .doc-section-label{ display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 6px; padding: 13px 26px 13px 4px; /* one row; 26px right reserves the caret AND aligns the count chip with the section/dept chip column. Explicit on all sides so the band is identical in list + tiles. */ cursor: pointer; user-select: none; position: relative; } .doc-views[data-view] .doc-section-label .band-name{ line-height: 1.1; } /* The entity count is now the SAME debossed chip as section/dept (§6), but reads "N Documents" in TITLE CASE — the band is uppercase, so force none on the chip. */ .doc-views[data-view] .doc-section-label .band-files{ text-transform: none; letter-spacing: 0; } .doc-views[data-view] .doc-section-label .doc-ew{ display: none; } /* hide JS "file/files" */ .doc-views[data-view] .doc-section-label .doc-ec::after{ content: " Documents"; } /* disclosure caret (right) + rotate when the entity is collapsed */ .doc-views[data-view] .doc-section-label::after{ content: "\25BE"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: var(--ui-fs-label); opacity: 0.5; transition: transform 0.18s ease, opacity 0.18s ease; } .doc-views[data-view] .doc-section-label:hover::after{ opacity: 0.9; } .doc-views[data-view] .doc-entity.is-collapsed > .doc-section-label::after{ transform: translateY(-50%) rotate(-90deg); } /* collapsed entity → hide all its sections (the entity band stays visible) */ .doc-views[data-view] .doc-entity.is-collapsed > .doc-section-grp{ display: none !important; } /* ── 13 · SELECTOR VALUES COLOUR-CODED (the VALUE / 2nd row of each open-card selector). status → its own status colour; entity · section · department all → the ENTITY's colour (--ent, set inline on .doc-entity), lifted toward white so even the darkest entity reads on the dark plate. Updates live when the status is changed (driven off the card's data-status). */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .facet-chip .fc-val{ color: color-mix(in srgb, var(--ent, var(--doc-text)) 60%, #ffffff); } .doc-views[data-view="list"] .doc-card.is-expanded[data-status="live"] .dcb-sel .dss-curlabel{ color: var(--doc-public); } .doc-views[data-view="list"] .doc-card.is-expanded[data-status="review"] .dcb-sel .dss-curlabel{ color: var(--doc-review-bright); } .doc-views[data-view="list"] .doc-card.is-expanded[data-status="unpublished"] .dcb-sel .dss-curlabel{ color: var(--doc-public-red-bright); } .doc-views[data-view="list"] .doc-card.is-expanded[data-status="archived"] .dcb-sel .dss-curlabel{ color: var(--doc-archived); } /* ── 14 · SWAP the open-card plate columns — SELECTORS to the LEFT, document METADATA to the RIGHT (was metadata-left / selectors-right). The metadata also flips to LEFT-aligned so it hugs the centre gutter from its new (right) side, keeping the two columns facing the gutter symmetrically. */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel{ grid-column: 1; grid-row: 1; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta{ grid-column: 2; grid-row: 1; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-idline, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcs-metrics{ align-items: flex-start; text-align: left; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dc-fileline, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .doc-card-file{ text-align: left; } /* ── 15 · SELECTOR ROW DIVIDER — a thin ENTITY-coloured line between the label row (top) and the value row (below) of each open-card selector. Adds a "line" grid row and fills it with a 1px ::after. */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-toggle{ grid-template-areas: "key key car" "line line line" "gap dot val"; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .facet-chip{ grid-template-areas: "key car" "line line" "val val"; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .dss-toggle::after, .doc-views[data-view="list"] .doc-card.is-expanded .dcb-sel .facet-chip::after{ content: ""; grid-area: line; width: 100%; height: 1px; background: color-mix(in srgb, var(--ent, var(--doc-gold)) 55%, #ffffff); /* lifted so it reads even for dark entities */ } /* ── 16 · METADATA COLUMN re-segmented into three ENTITY-ruled groups, each closed by a thin entity-coloured rule (same line treatment as §15): ① IDENTITY — registry id + version ── rule ── ② SIZE — "Lines: N | Chars: N" (one line, " | " between) ── rule ── ③ PROVENANCE — Created · Revised · file TYPE (the filename suffix) ── rule ── The old .dc-idline / .dcs-metrics / .dc-fileline wrappers are gone; the leaf classes (.dc-uidrow .m-stat .m-lbl .m-created .m-date) are kept so the base typography in webpage_section_browser.css still applies. */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta{ display: flex; flex-direction: column; align-items: stretch; gap: 0; } /* every group → its content, then a 1px entity rule beneath it */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-grp{ padding: 0 0 7px; margin: 0 0 7px; border-bottom: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 55%, #ffffff); } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-grp:last-child{ margin-bottom: 0; } /* ① identity */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-ident{ display: flex; align-items: baseline; } /* ② size — single horizontal line: Lines: N | Chars: N */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-size{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 8px; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-size .m-stat b{ margin-right: 0; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-size .m-sep{ color: var(--doc-text-faint, rgba(246,241,231,0.3)); font-weight: 400; font-size: var(--ui-fs-value); } /* ③ provenance — Created | Revised side by side on ONE line, " | " between */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-prov{ display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 7px; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-prov .m-date{ margin: 0; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-prov .m-sep{ color: var(--doc-text-faint, rgba(246,241,231,0.3)); font-weight: 400; font-size: var(--ui-fs-value); } /* collapsed lean row → keep the whole metadata out (replaces the base .dc-idline / .dc-fileline collapsed-hide that no longer matches the markup) */ .doc-views[data-view="list"] .doc-card:not(.is-expanded) .dcm-grp{ display: none; } /* tiles fallback — dissolve the metadata group wrappers so the leaves flow in the tile's information order (the base already hides .m-lbl + .m-created in tiles); the editable form is list-plate-only, so hide it in tiles. */ .doc-views[data-view="tiles"] .dcb-meta .dcm-grp{ display: contents; } .doc-views[data-view="tiles"] .dcb-meta .dc-uidrow{ order: 4; } .doc-views[data-view="tiles"] .dcb-meta .dcm-size .m-stat, .doc-views[data-view="tiles"] .dcb-meta .dcm-size .m-sep, .doc-views[data-view="tiles"] .dcb-meta .m-date{ order: 5; } .doc-views[data-view="tiles"] .dcb-meta .dcm-edit{ display: none; } /* ── 17 · EDITABLE TECHNICAL-CARD FIELDS — document Title, Filename (with a copy button), Page Presentation textarea, and the WRITE-TO-file button. The §16 provenance rule above is the "thin line" before this block; the block itself carries NO bottom rule. Every control is full metadata-column width. */ /* the editable group is the LAST one → drop the §16 rule beneath it; stack the fields */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .dcm-edit{ border-bottom: 0; padding-bottom: 0; margin-bottom: 0; margin-top: 2px; display: flex; flex-direction: column; gap: 8px; } /* one field = a tiny label above its control */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fld{ display: flex; flex-direction: column; gap: 3px; width: 100%; margin: 0; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fld-lbl{ font-family: var(--type-mono, var(--font-mono)); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--ui-fs-label); font-weight: 600; color: var(--lbl-ink, var(--doc-text-muted, rgba(244,239,229,.55))); } /* shared field look (title / filename / textarea) */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-input{ display: block; width: 100%; box-sizing: border-box; color: var(--doc-text, #F4EFE5); background: color-mix(in srgb, var(--doc-bg, #2b3845) 72%, #000 28%); border: 1px solid var(--doc-rule, rgba(170,198,222,.22)); border-radius: 3px; padding: 5px 8px; transition: border-color .15s ease, box-shadow .15s ease; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-input:focus{ outline: none; border-color: color-mix(in srgb, var(--ent, var(--doc-gold)) 65%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ent, var(--doc-gold)) 24%, transparent); } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-input::placeholder{ font-style: italic; color: var(--doc-text-faint, rgba(244,239,229,.38)); opacity: 1; } /* TITLE — editorial serif, single line */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-title{ font-family: var(--font-body); font-size: var(--ui-fs-title); line-height: 1.3; height: 28px; } /* FILENAME — mono, sits in a row with the copy button */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fname-row{ display: flex; align-items: stretch; gap: 4px; width: 100%; } /* FILENAME — READ-ONLY display of the real file name (not editable); still selectable, and copyable via the button. Muted/inset so it reads as a label, distinct from the editable Title field above it. */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fname{ flex: 1 1 auto; min-width: 0; box-sizing: border-box; font-family: var(--type-mono, var(--font-mono)); font-size: var(--ui-fs-value); letter-spacing: 0.01em; height: 28px; padding: 5px 8px; cursor: text; color: var(--doc-text-muted, rgba(244,239,229,.72)); background: color-mix(in srgb, var(--doc-bg, #2b3845) 84%, #000 16%); border: 1px solid var(--doc-rule, rgba(170,198,222,.22)); border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fname:focus{ outline: none; border-color: color-mix(in srgb, var(--ent, var(--doc-gold)) 45%, var(--doc-rule, rgba(170,198,222,.22))); } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fcopy{ flex: 0 0 auto; width: 28px; height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--bp-ctrl, #33485c); border: 1px solid var(--doc-rule, rgba(170,198,222,.22)); border-radius: 3px; color: var(--doc-text-muted, rgba(244,239,229,.6)); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fcopy:hover{ color: color-mix(in srgb, var(--ent, var(--doc-gold)) 75%, #fff); border-color: color-mix(in srgb, var(--ent, var(--doc-gold)) 55%, #fff); } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-fcopy.is-copied{ color: var(--doc-public, #5FBF7F); border-color: var(--doc-public, #5FBF7F); background: color-mix(in srgb, var(--doc-public, #5FBF7F) 18%, var(--bp-ctrl, #33485c)); } /* PAGE PRESENTATION — 4 rows, resizable */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-intro{ resize: vertical; min-height: calc(4 * 1.4em + 12px); font-family: var(--font-body); font-size: var(--ui-fs-value); line-height: 1.4; } /* WRITE TO file — the commit action */ .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-write{ align-self: flex-end; margin-top: 1px; box-sizing: border-box; font-family: var(--type-mono, var(--font-mono)); text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--ui-fs-value); font-weight: 700; color: var(--doc-bg, #1f2a35); background: color-mix(in srgb, var(--ent, var(--doc-gold)) 78%, #fff); border: 1px solid color-mix(in srgb, var(--ent, var(--doc-gold)) 60%, #000); border-radius: 3px; padding: 6px 14px; cursor: pointer; transition: filter .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-write:hover{ filter: brightness(1.08); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ent, var(--doc-gold)) 30%, transparent); } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-write:disabled{ opacity: .6; cursor: default; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-write.is-saved{ background: var(--doc-public, #5FBF7F); border-color: var(--doc-public, #5FBF7F); color: #14241a; } .doc-views[data-view="list"] .doc-card.is-expanded .dcb-meta .m-write.is-error{ background: var(--doc-public-red-bright, #E0606A); border-color: var(--doc-public-red-bright, #E0606A); color: #2a1012; } /* ── 18 · TOP NAV → aligned to the shared §11 content column ──────────────── The platform nav (DARALBEIDA wordmark row + the 8 section tabs) natively centres a 640px block inside 24px side padding; the /12 toolbar + document rows use the §11 700px column with 14px padding. That mismatch left the nav narrower and inset from everything below it. Re-point the nav's two inner blocks to the SAME column so the wordmark sits flush on the toolbar's left axis (the "yellow line") and the 8 tabs fill the row edge-to-edge, 4 per row. The nav's own 24px side padding is dropped so the centring math is identical to the toolbar at EVERY viewport (incl. the narrow widths the user uses). NOTE: css/modules/module_nav_sections.css (the native 640px nav) loads AFTER this skin file. Those nav layout overrides (700px rows, internal 14px padding, edge-to-edge background, 4-column grid) were promoted into the shared module CSS so they apply sitewide; nothing to override here now. */ /* ═══════════════════════════════════════════════════════════════════════ 19 · DARMASTER-UNIFORM DOCUMENT CARDS (shared by EVERY site) The documents are COMMON to all libraries, so each card renders in DARMASTER's light Sand+Ink palette — identical regardless of which entity library (and its colour) you are viewing. Done by re-scoping the card's colour tokens + overriding the few hard-coded control colours, all inside the .doc-card subtree, so this single shared rule colours the cards on every site. ═══════════════════════════════════════════════════════════════════════ */ .doc-card{ --doc-surface: #F6F1E6; --doc-surface-h: #EFE7D6; --doc-text: #33312E; --doc-text-muted: rgba(51,49,46,.62); --doc-text-faint: rgba(51,49,46,.42); --doc-title: #33312E; --doc-gold: #8A7647; --doc-rule: rgba(74,74,76,.20); --ent: #6E6A60; /* cards are NOT entity-coloured */ --bp-ctrl: #ECE4D2; --bp-ctrl-h: #E2D8C2; /* a LIGHT wash of the FILE's entity colour over the sand (opaque, so it looks the same in the entity's own library and in DARMASTER). --ent-accent is set per .doc-entity; falls back to neutral taupe. */ background: color-mix(in srgb, var(--ent-accent, #6E6A60) 14%, #F6F1E6) !important; border-color: rgba(74,74,76,.18) !important; color: #33312E !important; } /* THE CARD = the expanded technical panel (.dc-band, framed by corner brackets). ONLY this gets the entity wash 30% DARKER — the collapsed list ROWS (.doc-card above) keep the lighter wash and are NOT touched here. */ .doc-card .dc-band, .doc-card.is-expanded .dc-band{ background: color-mix(in srgb, color-mix(in srgb, var(--ent-accent, #6E6A60) 14%, #F6F1E6) 70%, #000000) !important; background-image:none !important; box-shadow:none !important; } .doc-card .doc-card-title, .doc-card .band-name, .doc-card .dc-uid, .doc-card .m-title, .doc-card .dss-curlabel, .doc-card .fc-val{ color: #33312E !important; } .doc-card .m-lbl, .doc-card .dc-ver, .doc-card .dc-rowx, .doc-card .doc-card-purpose, .doc-card .dss-key, .doc-card .fc-key, .doc-card .m-fld-lbl, .doc-card .m-created, .doc-card .m-date, .doc-card .m-stat{ color: rgba(51,49,46,.62) !important; } /* Header-row continuation (after the doc id): " | last-updated | size= N kb". Muted mono so it reads as secondary metadata, not a second title. */ .doc-card .dc-rowx{ font-weight: 500; letter-spacing: .01em; white-space: nowrap; } /* control chips/boxes that hard-code the dark navy → light sand + ink */ .doc-card .dss-toggle, .doc-card .facet-chip, .doc-card .doc-ico, .doc-card .dc-led, .doc-card .doc-card-arrow{ background: rgba(74,74,76,.06) !important; border-color: rgba(74,74,76,.22) !important; color: #33312E !important; } .doc-card .dss-menu{ background:#F6F1E6 !important; border-color:rgba(74,74,76,.22) !important; } .doc-card .dc-statusopt{ color:#33312E !important; } .doc-card .m-input, .doc-card .m-fname{ background:#FFFFFF !important; color:#33312E !important; border-color:rgba(74,74,76,.22) !important; } .doc-card .doc-card-arrow:hover{ background: color-mix(in srgb, #8A7647 22%, #ffffff) !important; } /* the status colour dots + LEDs stay semantic (live/review/etc.) — untouched. */ /* ── "Last updated" line in the LEFT selectors column (after the last selector) */ .dc-updated-sep{ border:0; border-top:1px solid rgba(74,74,76,.22); margin:9px 2px 6px; } .dc-updated{ font-weight:700; font-style:italic; font-size: var(--ui-fs-value); color:#33312E; padding:0 2px; } /* "Last updated" belongs to the technical card PANEL only (bottom of the left column). On COLLAPSED list rows the other fields are display:none — hide the updated line + its rule there too, so it doesn't leak onto every row. */ .doc-card:not(.is-expanded) .dc-updated, .doc-card:not(.is-expanded) .dc-updated-sep{ display: none !important; } /* ── 20 · SEARCH-HISTORY DROPDOWN — match the search box (shared, every site). The search field flips to ivory #F6F1E7 + charcoal text when focused (the state in which the dropdown is shown), but the dropdown hard-codes a dark navy gradient. Recolour it to the SAME ivory + charcoal so the popover reads as a continuation of the field. Gold edge/hover kept. ───────────────────── */ .doc-search-history{ background: #F6F1E7 !important; border-color: rgba(40,51,58,.20) !important; } .doc-search-history .dsh-head{ border-bottom-color: rgba(40,51,58,.14) !important; } .doc-search-history .dsh-label, .doc-search-history .dsh-clear, .doc-search-history .dsh-del, .doc-search-history .dsh-when, .doc-search-history .dsh-empty{ color: rgba(40,51,58,.60) !important; } .doc-search-history .dsh-clear{ border-color: rgba(40,51,58,.25) !important; } .doc-search-history .dsh-item{ color: #28333A !important; } .doc-search-history .dsh-row:hover .dsh-item, .doc-search-history .dsh-item:focus-visible{ color: #1A2228 !important; } /* ═══════════════════════════════════════════════════════════════════════ 21 · LONG-LIST READABILITY (document libraries, list view) — ⟲ REVERSIBLE. To revert: delete this whole §21 block (and the `--ent-accent` on .doc-entity in 08/index.php). Lifts each file row off the page (deeper sand + clearer border/shadow) and separates rows with a THICK line in the FILE's entity colour (--ent-accent → brown Brands · blue Holdings · green Maroc · ink DARMASTER). A file looks the same in its own library and in DARMASTER. ═══════════════════════════════════════════════════════════════════════ */ .doc-views[data-view="list"] .doc-card{ /* background inherits the §19 light entity wash; rows are set apart by the border + shadow + the thick entity divider below. */ border: 1px solid rgba(74,74,76,.32) !important; border-bottom: 3px solid var(--ent-accent, rgba(74,74,76,.45)) !important; box-shadow: 0 2px 5px rgba(40,32,16,.16) !important; } .doc-views[data-view="list"] .doc-card.is-expanded{ border-bottom-width: 4px !important; } /* ── 22 · PER-CARD DROPDOWN MENUS → light DARMASTER (match the cards). The Entity/Section/Dept facet popover (.facet-pop) is position:fixed, outside the card subtree, and hard-codes a dark navy; the status menu (.dss-menu) is already lit by §19. Recolour the facet popover to the same light sand + ink. */ .facet-pop{ background: #F6F1E6 !important; border-color: rgba(74,74,76,.25) !important; box-shadow: 0 16px 36px -10px rgba(40,32,16,.35), 0 0 0 1px rgba(74,74,76,.12) !important; } .facet-pop .fp-head{ color:#8A7647 !important; border-bottom-color: rgba(74,74,76,.16) !important; } .facet-pop .fp-opt{ color: rgba(51,49,46,.66) !important; } .facet-pop .fp-opt:hover, .facet-pop .fp-opt[aria-checked="true"]{ color:#33312E !important; } .facet-pop .fp-box{ background:#FFFFFF !important; border-color: rgba(74,74,76,.50) !important; } .facet-pop .fp-opt[aria-checked="true"] .fp-box{ background:#8A7647 !important; border-color:#8A7647 !important; } /* ── 23 · SELECTOR FONT/COLOUR CONSISTENCY (shared — every entity, same CSS). The Status menu hard-coded 'Montserrat'/full-ink while the Entity/Section/Dept popover used the mono font/muted-ink, and the two carets differed. Unify all selector menu OPTIONS (mono · 11px · 500 · ink) + both CARETS so every selector in the technical panel reads identically. Selection still reads via the gold wash + gold checkbox, not the font weight. ─────────────────────── */ .doc-card .dss-opt, .facet-pop .fp-opt, .facet-pop .fp-lab{ font-family: var(--type-mono, var(--font-mono)) !important; font-size: var(--ui-fs-value) !important; font-weight: 500 !important; letter-spacing: .02em !important; color: #33312E !important; } .doc-card .dss-car, .doc-card .facet-chip .fc-car{ font-size: var(--ui-fs-label) !important; font-weight: 400 !important; color: rgba(51,49,46,.55) !important; } /* ── 25 · ENTITY-COLOURED BANDS — the 4 stacked layout layers ──────────────── Each of the 4 doc-library band layers carries a shade of the FILE'S ENTITY colour, the SAME everywhere it is shown (its own site AND DARMASTER): L1 BAND ENTITY → .doc-section-label (--band-entity) L2 SUB BAND SECTION → .doc-subcat-label (--band-section) L3 SUB BAND DEPARTMENT→ .doc-dept-label (--band-dept) L4 SUB BAND FILE-ROW → .doc-card (header) (--band-filerow) The shades are DEFINED per-entity in the site-specific css (css/skins/ entity-.css, as --band-*). DARMASTER doesn't load those files, so each rule falls back to the same shade computed from the per-band --ent → a DARH band is DARH-blue, a DARX band DARX-brown, anywhere. Text stays ink; only the file DETAIL panel (.dc-band) stays light. PAGE BACKGROUND untouched. */ /* MONOTONIC colour weight = hierarchy: entity STRONGEST → dept LIGHTEST, computed straight from --ent so the scale is one source for every entity (was the non-monotonic 46/58/38 via --band-*). A faint top-light sheen over each gives a tactile "physical label" depth without competing with the text. */ .doc-views[data-view] .doc-section-label{ background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.05)), color-mix(in srgb, var(--ent, var(--doc-gold)) 44%, #F6F1E6) !important; color: #33312E !important; border-left: 5px solid var(--ent, var(--doc-gold)) !important; } .doc-views[data-view] .doc-subcat-label{ background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.05)), color-mix(in srgb, var(--ent, var(--doc-gold)) 30%, #F6F1E6) !important; color: #33312E !important; border-color: color-mix(in srgb, var(--ent, var(--doc-gold)) 40%, transparent) !important; border-left: 4px solid var(--ent, var(--doc-gold)) !important; } .doc-views[data-view] .doc-dept-label{ background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(0,0,0,.05)), color-mix(in srgb, var(--ent, var(--doc-gold)) 18%, #F6F1E6) !important; color: #33312E !important; border-left: 4px solid var(--ent, var(--doc-gold)) !important; } .doc-views[data-view="list"] .doc-card{ /* L4 FILE ROW = the actual "row holding a document title". It now shares the ONE platform list-row token (--row-bg, default = the near-white #F6F1E6) so it stays in sync with the section-page rows (.portal-row) and the small sitemap doc rows (.colsec-docs). The entity colour-coding lives on the GROUPING bands above (L1 entity / L2 section / L3 dept) + the status LED / icon chips — not on the file row itself. Set --row-bg per entity in the skin manager to retint. (Old entity-tinted fill, for revert: var(--band-filerow, color-mix(in srgb, var(--ent-accent, var(--ent, var(--doc-gold))) 20%, #F6F1E6))). */ background: var(--row-bg, var(--surface-color, #F6F1E6)) !important; } /* band TEXT → ink. (All three counts are now the §6 debossed chip with the entity-colour numeral — the old entity-count muted-ink override was removed.) */ .doc-section-label .band-name, .doc-subcat-label .band-name, .doc-dept-label .band-name{ color: #33312E !important; } /* ── 26 · HEADER ICON CHIPS + STATUS LED — ONE reusable design element ─────── The per-card header icons (file-type · purpose · info · status LED · arrow) are a SINGLE element, defined once here and reused IDENTICALLY in list rows AND tile headers (view-agnostic .doc-card selectors). Each is a dark nav-bg chip + gold (--nav-gold) hairline + ivory glyph, matching the toolbar .dtool buttons; entity-adaptive (--nav-bg/--nav-gold survive §19's neutralisation). The status LED is that SAME chip housing a glassy lit DOME (the ::before), coloured per status. Change it here → every view + every entity updates. */ .doc-card .doc-ico, .doc-card .dc-led, .doc-card .doc-card-arrow{ /* 2026-06-19 (user): row icons EXACTLY identical to the header / footer / toolbar buttons (.darx-foot-btn / .dtool recipe): bevel gradient over --nav-bg, --nav-gold edge, bevel highlight, --nav-text glyph. */ background: linear-gradient(180deg, color-mix(in srgb, var(--nav-bg, #2E2A24) 80%, #000) 0%, color-mix(in srgb, var(--nav-bg, #2E2A24) 90%, #fff) 100%) !important; border: 1px solid color-mix(in srgb, var(--nav-gold, var(--gold)) 38%, transparent) !important; box-shadow: inset 0 1px 0 rgba(246,241,231,0.10), inset 0 -1px 0 rgba(0,0,0,0.30) !important; color: var(--nav-text, rgba(246,241,231,.92)) !important; } .doc-card .doc-ico-type svg, .doc-card .doc-ico-info, .doc-card .doc-ico-info svg, .doc-card .doc-ico-purpose, .doc-card .doc-ico-purpose svg, .doc-card .doc-ico-parse-ok, .doc-card .doc-ico-parse-ok svg, .doc-card .doc-ico-parse-warn, .doc-card .doc-ico-parse-warn svg, .doc-card .doc-card-arrow{ color: var(--nav-text, rgba(246,241,231,.92)) !important; } /* HOVER = identical to the header/toolbar button hover: brighter bevel, --nav-gold edge, --nav-text-hover glyph. (parse ✓/⚠ + the status LED keep their own colours.) */ .doc-card .doc-ico:hover, .doc-card .doc-card-arrow:hover{ border-color: var(--nav-gold, var(--gold)) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--nav-bg, #2E2A24) 72%, #fff) 0%, color-mix(in srgb, var(--nav-bg, #2E2A24) 86%, #fff) 100%) !important; color: var(--nav-text-hover, #F6F1E7) !important; } .doc-card .doc-ico:hover svg, .doc-card .doc-card-arrow:hover svg{ color: var(--nav-text-hover, #F6F1E7) !important; } /* Parse status icons — checkmark for OK, warning for errors. */ .doc-card .doc-ico-parse-ok{ color: #6FBF73 !important; } .doc-card .doc-ico-parse-warn{ color: #E07A3F !important; } .doc-card .doc-ico-parse-ok:hover, .doc-card .doc-ico-parse-warn:hover{ filter: brightness(1.2); } /* LED chip — LIST already sizes .dc-led as a 26x24 chip; size the TILE one the same so the LED matches the other header icons in both views. */ .doc-views[data-view="tiles"] .doc-card .dc-led{ box-sizing: border-box; display: inline-flex; position: relative; width: 26px; height: 24px; border-radius: 3px; box-shadow: none !important; } /* LED dome — ONE definition for BOTH views (the ::before dot inside the chip). */ .doc-card .dc-led::before{ content: ""; position: absolute; inset: 0; margin: auto; width: 9px; height: 9px; border-radius: 50%; --led: var(--doc-public-red); background: radial-gradient(circle at 38% 30%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.55) 12%, var(--led) 46%, color-mix(in srgb, var(--led) 62%, #000) 100%) !important; box-shadow: 0 0 7px 1px color-mix(in srgb, var(--led) 72%, transparent), inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1.5px 2px color-mix(in srgb, var(--led) 45%, #000) !important; } .doc-card[data-status="live"] .dc-led::before{ --led: var(--doc-public); } .doc-card[data-status="review"] .dc-led::before{ --led: var(--doc-review); } .doc-card[data-status="unpublished"] .dc-led::before{ --led: var(--doc-public-red); } .doc-card[data-status="archived"] .dc-led::before{ --led: var(--doc-archived); } /* ── 27 · INFO-ICON (the ⓘ logotype) HOVER TOOLTIP → the FILE's entity colour. The summary bubble (.doc-card[data-purpose]:has(.doc-ico-info:hover)::after, defined in css/webpage_section_generic.css) was a fixed deep blue. Re-point ONLY its BACKGROUND to the file's entity colour (--ent-accent, which stays live inside .doc-card), so a DARX file's bubble is brown, DARH blue, DARM green — wherever the file is shown. The ivory text + gold hairline are kept. This affects icon #2 only; icons #1 (type), #3 (LED), #4 (arrow) are unchanged on hover. */ .doc-views[data-view="list"] .doc-card[data-purpose]:has(.doc-ico-info:hover)::after{ background: var(--ent-accent, var(--doc-deep)) !important; } /* §28–§29 folded into §26 above: the LED dome + the tile icons are now part of the ONE shared icon/LED element (view-agnostic), not separate duplicated blocks. One definition, identical in list rows and tile headers. */ /* ── 30 · TIC READ ⇄ EDIT MODE ────────────────────────────────────────────── The technical card opens READ-ONLY: editable fields render as plain text and the selectors can't be opened. The "Edit" button adds .tic-edit → fields + selectors go live; "Save" writes to the registry and flips back. ⟲ Reversible: delete this §30 + the markup buttons + the JS ticSetMode handlers. */ .doc-card .tic-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:10px; } .doc-card .tic-edit-btn, .doc-card .tic-save-btn{ font: 700 var(--ui-fs-micro)/1 var(--type-mono,var(--font-mono)); letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:3px; cursor:pointer; background: color-mix(in srgb, var(--nav-bg) 90%, #000000) !important; border:1px solid color-mix(in srgb, var(--nav-gold, var(--brand-accent)) 53%, transparent) !important; color: rgba(246,241,231,.92) !important; } .doc-card .tic-edit-btn:hover, .doc-card .tic-save-btn:hover{ filter:brightness(1.18); } .doc-card .tic-save-btn{ display:none; } .doc-card.tic-edit .tic-edit-btn{ display:none; } .doc-card.tic-edit .tic-save-btn{ display:inline-block; } .doc-card .tic-save-btn.is-saved{ outline:2px solid #36b37e; outline-offset:1px; } .doc-card .tic-save-btn.is-error{ outline:2px solid #d4503e; outline-offset:1px; } /* READ mode: the editable TEXT fields (title · filename · page presentation) render as PLAIN TEXT — no input box, no resize grip, no reserved empty height, no placeholder. High specificity so it beats the field-chrome rules above; field-sizing:content collapses an empty Page Presentation to nothing. */ .doc-views[data-view="list"] .doc-card.is-expanded:not(.tic-edit) .dcb-meta .m-input, .doc-views[data-view="list"] .doc-card.is-expanded:not(.tic-edit) .dcb-meta .m-fname{ background: transparent !important; border-color: transparent !important; box-shadow:none !important; padding-left:2px !important; cursor:default; resize:none !important; height:auto !important; min-height:0 !important; field-sizing:content; } .doc-views[data-view="list"] .doc-card.is-expanded:not(.tic-edit) .dcb-meta .m-input::placeholder{ color:transparent !important; } /* … and the SELECTORS can't be opened/changed until Edit. */ .doc-card:not(.tic-edit) .dc-statusbar, .doc-card:not(.tic-edit) .facet-chip{ pointer-events:none; } .doc-card:not(.tic-edit) .dss-car, .doc-card:not(.tic-edit) .fc-car{ opacity:0; } /* ── 31 · TILE PREVIEW — text snippet + eye icon for hover popup, TILE VIEW ONLY ──── All docs show text snippet on the tile. HTML/TXT docs add eye icon that shows large popup preview on hover (lazy-loaded). Hidden in list view. */ .doc-thumb{ display:none; } /* off in list view */ .doc-views[data-view="tiles"] .doc-card .doc-thumb{ display:block; position:relative; width:100%; aspect-ratio:7/8; margin:8px 0 10px; border-radius:4px; overflow:hidden; background:#fff; border:1px solid color-mix(in srgb, var(--ent-accent, #6E6A60) 30%, rgba(0,0,0,.16)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 1px 3px rgba(40,32,16,.18); } /* Text snippet fills the tile */ .doc-views[data-view="tiles"] .doc-card .dt-snippet{ position:absolute; inset:0; padding:13px 15px; overflow:hidden; /* 2026-06-25 (user): snippets use the body SANS (Inter, a loaded web font) — was var(--font-body) = Alegreya, which isn't loaded → fell back to Georgia. */ font: 400 var(--ui-fs-label)/1.65 var(--font-sans, sans-serif); color:#3a3833; background:#F6F1E6; white-space:normal; word-break:break-word; -webkit-mask-image:linear-gradient(#000 72%, transparent); mask-image:linear-gradient(#000 72%, transparent); } /* HTML tiles: a LIVE mini-render of the page fills the thumb box (the box itself IS the preview — no floating eye). The iframe is laid out at 400% of the tile and scaled to 0.25, so the page renders at a near-desktop width (~4× the small tile) then shrinks to a crisp thumbnail. pointer-events:none keeps the whole card a single clickable . While the src is still deferred (data-src present) a soft sand fill stands in so the tile is never a stark white void. */ .doc-views[data-view="tiles"] .doc-card .dt-frame{ position:absolute; top:0; left:0; width:400%; height:400%; border:0; background:#fff; transform:scale(.25); transform-origin:top left; pointer-events:none; } .doc-views[data-view="tiles"] .doc-card .dt-frame[data-src]{ background:#F6F1E6; } /* Preview button (eye icon) — REMOVED from tiles per user request (the snippet box / live thumbnail itself is the preview; the floating eye was an overlapping eyesore). */ .doc-views[data-view="tiles"] .doc-card .dt-preview-btn{ display:none !important; position:absolute; top:6px; right:6px; width:28px; height:28px; padding:0; border-radius:3px; cursor:pointer; align-items:center; justify-content:center; color:#EFE7D6; background:#3A3835; border:1px solid #262421; transition:background .12s ease, color .12s ease, box-shadow .12s ease; z-index:10; } .doc-views[data-view="tiles"] .doc-card .dt-preview-btn:hover{ background:var(--nav-gold, #B8832A); color:#1c1205; box-shadow:0 0 8px rgba(184,131,42,.4); } .doc-views[data-view="tiles"] .doc-card .dt-preview-btn:active{ transform:translateY(1px); } /* Shared hover popup preview (ONE iframe, repositioned per hover) */ .doc-views-popup{ position:fixed; z-index:9999; display:none; width:460px; height:600px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); background:#F6F1E6; border:1px solid var(--nav-gold, #8A7647); border-radius:6px; box-shadow:0 14px 44px rgba(0,0,0,.55); overflow:hidden; } .doc-views-popup iframe{ width:1150px; height:1500px; border:0; background:#fff; transform:scale(0.4); transform-origin:0 0; } /* ── 32 · TILES VIEW — the ONLY thing that differs from list is the card grid ── The bands, their widths, and their spacing are ALL governed by the shared view-agnostic rules (§5/§6/§12/§25 use [data-view]); the document column width is the shared §11 700px in BOTH views. So a band edit in list shows IDENTICALLY in tiles — there is NO tiles-specific band rule here, by design. This block only swaps the innermost .doc-grid from list-rows to a 3-up card grid, makes each card a portrait stack, and trims the tile to the thumbnail + status LED. ⟲ Reversible: delete §32 and restore [data-view="list"] on §5/§6/§12/§25. */ /* The card grid is the one genuinely view-specific layer. RESPONSIVE: as many ~190px columns as fit — 3-up on a wide column, 2-up around 470–600px, 1-up if very narrow — so tiles never cram into slivers at a zoomed/narrow viewport. */ .doc-views[data-view="tiles"] .doc-grid{ grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 12px !important; align-items: start; } /* PORTRAIT tile — stack header · big thumbnail · panel vertically. NOT !important on display: the type/status FILTER hides cards via inline `display:none`, and an !important here would override it (cards would never filter out). */ .doc-views[data-view="tiles"] .doc-card{ display: flex; flex-direction: column; overflow: hidden; /* hard containment — nothing bleeds outside the card */ } /* TITLE — MONO, CENTRED, fixed 2-line height. Every title in a row occupies the same vertical space (truncated with an ellipsis past 2 lines), so the thumbnails below all start at the same y and the row aligns. Icons/LED are removed in tiles, so the title spans the full tile width. */ .doc-views[data-view="tiles"] .doc-card .doc-card-title{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 11px !important; word-break: normal; overflow-wrap: anywhere; hyphens: auto; font-family: var(--font-sans, var(--font-body)); /* readable sans, matches the snippet — fewer fonts (user 2026-06-26) */ font-size: var(--ui-fs-value); line-height: 1.35; text-align: left; /* left-align to match the action row + chips */ min-height: calc(2 * 1.35em); /* reserve 2 lines so 1-line titles still align */ } /* PURPOSE/description — dropped in tiles: the thumbnail right after the title already conveys the document, so the prose summary is redundant (user request). */ .doc-views[data-view="tiles"] .doc-card .doc-card-purpose{ display: none !important; } /* Tile header is trimmed to the title + thumbnail: the file-type / purpose / info icons, the open-arrow, the status LED, and the search-result snippet all repeat what the thumbnail + panel already show, so they are dropped in tiles (still present + useful in the thumbnail-less list). */ .doc-views[data-view="tiles"] .doc-card .doc-ico, .doc-views[data-view="tiles"] .doc-card .dc-led, .doc-views[data-view="tiles"] .doc-card .doc-card-snippet, .doc-views[data-view="tiles"] .doc-card .doc-card-arrow{ display: none !important; } /* Parse status in tiles is shown by the ORANGE BORDER around the preview box (see the [data-parser-error] rule below), so the ✓/⚠ icon is hidden in tiles to remove the title-overlapping eyesore. Icons remain in LIST view. */ .doc-views[data-view="tiles"] .doc-card .doc-ico-parse-ok, .doc-views[data-view="tiles"] .doc-card .doc-ico-parse-warn{ display: none !important; } /* PARSE ERROR FLAG — a solid orange border around the tile's preview box marks any TXT document that failed to parse (data-parser-error="true"). Overrides the 1px default border on .doc-thumb. */ .doc-views[data-view="tiles"] .doc-card[data-parser-error="true"] .doc-thumb{ border: 3px solid #E8741E !important; } /* De-duplicate TXT tiles: the text snippet already fills the thumbnail, so drop the repeated purpose line below it. HTML tiles KEEP it (their thumb is the live page, so the purpose line is the only prose summary). Keyed on .dt-snippet, which the renderer emits for TXT docs only. */ .doc-views[data-view="tiles"] .doc-card:has(.dt-snippet) .doc-card-purpose{ display: none !important; } /* TILES: the STATUS selector AND the entity/section/dept facet chips are directly EDITABLE — quick toggles that persist to the registry on change (no TIC edit-mode needed; the title/page fields still use the list-view TIC). Overrides §30's read-mode lock for these controls in tiles. */ .doc-views[data-view="tiles"] .doc-card .dc-statusbar, .doc-views[data-view="tiles"] .doc-card .facet-chip{ pointer-events: auto; } .doc-views[data-view="tiles"] .doc-card .dss-toggle, .doc-views[data-view="tiles"] .doc-card .facet-chip{ cursor: pointer; } .doc-views[data-view="tiles"] .doc-card .dss-car, .doc-views[data-view="tiles"] .doc-card .facet-chip .fc-car{ opacity: .55; } /* ── 33 · PROFESSIONAL BAND HIERARCHY (shared, both views) ──────────────────── A calm, scannable outline. Hierarchy reads three ways at once — SIZE, INDENT and colour weight all step down with depth (entity flush-left + strongest → section indented → department indented more + lightest, §25). ONE left scan- anchor: every label left-aligned on the entity-colour spine. ONE right column: every count chip right-aligned. Decoration is recessive — the §25 sheen for depth, a single soft shadow, a quiet caret — so the LABEL is the focal point. One source → every entity, list + tiles. ⟲ Reversible: restore the prior §33. */ /* labels LEFT, count chip RIGHT → strong left anchor + a comparable number column */ .doc-views[data-view] .doc-section-label, .doc-views[data-view] .doc-subcat-label{ justify-content: flex-start; text-align: left; } .doc-views[data-view] .doc-section-label .band-files, .doc-views[data-view] .doc-subcat-label .band-files{ margin-left: auto; } /* INDENT shows nesting at a glance; right edges stay aligned (→ the chip column) */ .doc-views[data-view] .doc-subcat-label:not(.doc-dept-label){ margin-left: 22px !important; } .doc-views[data-view] .doc-dept-label{ margin-left: 44px !important; } /* DOCUMENT ROWS align on the department line (2026-06-12, user): the row grid starts at the same 44px indent as the dept label — one vertical scan line through every band + its rows, in every entity's library (shared skin). */ .doc-views[data-view] .doc-grid{ margin-left: 44px !important; } /* SIZE + WEIGHT step down with depth (entity stays the base 18px) */ .doc-views[data-view] .doc-subcat-label:not(.doc-dept-label){ font-size: var(--ui-fs-title); font-weight: 600; padding-top: 8px; padding-bottom: 8px; } .doc-views[data-view] .doc-dept-label{ font-size: var(--ui-fs-value); font-weight: 500; padding-top: 6px; padding-bottom: 6px; } /* COLLAPSED bands stay FULL-WIDTH (steady rhythm — no shrinking to 3-up tabs) */ .doc-views[data-view] .doc-section-grp.is-collapsed, .doc-views[data-view] .doc-dept.is-collapsed{ grid-column: 1 / -1 !important; display: block !important; min-width: 0; } /* ── 34 · TOOLBAR ROW 3 — Collapse All / Expand All ────────────────────────── Third .dh-row inside .doc-header. Same §11 column constraint as rows 1 & 2. Buttons sit LEFT-aligned in the column; same typography as other toolbar controls. */ .dh-actions{ display: flex; align-items: center; gap: 2px; padding-top: 4px; padding-bottom: 4px; } /* SEARCH fills the rest of Row 3 (right of Collapse/Expand) and sits flush to the right edge — lift the 380px cap and let it grow. 2026-06-24 user. */ .dh-actions .doc-search-field{ flex: 1 1 auto; max-width: none; } .dha-btn{ display: inline-flex; align-items: center; gap: 5px; height: 24px; box-sizing: border-box; /* uniform Row-3 control height — nothing taller (user 2026-06-24) */ padding: 0 11px; background: transparent; border: 1px solid rgba(255,255,255,.13); border-radius: 3px; font-family: var(--type-mono, var(--font-mono)); font-size: var(--ui-fs-value); font-weight: var(--ctrl-fw); letter-spacing: .07em; text-transform: uppercase; color: rgba(246,241,231,.62); cursor: pointer; transition: color .15s ease, background .15s ease, border-color .15s ease; } .dha-btn:hover{ color: rgba(246,241,231,.96); background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); } .dha-btn svg{ flex-shrink: 0; } /* ── TOOLBAR BUTTONS = the SAME skin-button language as the header / footer nav buttons (.darx-nav-link / .darx-foot-btn): a bevel gradient over --nav-bg, a --nav-gold edge, --nav-text label, lit highlight + --nav-text-hover on hover. They were dissolving into the band (flat --bp-band2 / transparent) — now they read as proper buttons in the skin colour. (2026-06-19 user) */ .dha-btn, .doc-header .dtool, .doc-header .cbx > summary, .doc-header .dh-assembly > .doc-export-btn, .doc-header .dh-assembly > .reset-btn{ background: linear-gradient(180deg, color-mix(in srgb, var(--nav-bg, #2E2A24) 80%, #000) 0%, color-mix(in srgb, var(--nav-bg, #2E2A24) 90%, #fff) 100%) !important; border: 1px solid color-mix(in srgb, var(--nav-gold, var(--gold)) 38%, transparent) !important; color: var(--nav-text, #F4EFE5) !important; box-shadow: inset 0 1px 0 rgba(246,241,231,.10), inset 0 -1px 0 rgba(0,0,0,.30) !important; } .dha-btn:hover, .doc-header .dtool:hover, .doc-header .cbx > summary:hover, .doc-header .dh-assembly > .doc-export-btn:hover, .doc-header .dh-assembly > .reset-btn:hover{ border-color: var(--nav-gold, var(--gold)) !important; color: var(--nav-text-hover, #F6F1E7) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--nav-bg, #2E2A24) 72%, #fff) 0%, color-mix(in srgb, var(--nav-bg, #2E2A24) 86%, #fff) 100%) !important; } /* SELECTED toggle (HTML / TXT type, view, purpose…) → its gold left-edge marker + a full --nav-gold border, so the active state reads clearly. The .dtool rule above (its bevel box-shadow) had been flattening the original .dtool.is-active marker; this restores it on the skin accent. (2026-06-20 user) */ .doc-header .dtool.is-active{ border-color: var(--nav-gold, var(--gold)) !important; box-shadow: inset 3px 0 0 0 var(--nav-gold, var(--doc-gold, var(--gold))), inset 0 1px 0 rgba(246,241,231,.10), inset 0 -1px 0 rgba(0,0,0,.30) !important; } /* one soft, consistent shadow (replaces the heavy directional drop) + quiet caret */ .doc-views[data-view] .doc-section-label, .doc-views[data-view] .doc-subcat-label{ box-shadow: 0 1px 2px rgba(40,32,16,.13) !important; } .doc-views[data-view] .doc-section-label::after, .doc-views[data-view] .doc-subcat-label::before{ opacity: .58; } /* ── 35 · TILE EDITOR-BLOCK REDESIGN ───────────────────────────────────────── New tile anatomy, top → bottom: 1. TITLE — the page title; if none, "Section | Department" (PHP fallback). 2. THUMB — full tile width, tall PORTRAIT aspect so a vertical slice reads. 3. EDITOR BLOCK — the whole .dc-band, now a collapsible panel. Collapsed it shows ONLY an "Edit" button; "Edit" expands it (adds .tic-edit) to reveal the editable Title + Description fields and the Status / Entity / Section / Dept selectors stacked ONE PER LINE; "Save" persists to the registry and collapses it again. Reuses the list-view TIC edit/save JS + persistence. Tiles only — list view is untouched. ⟲ Reversible: delete this §35. */ /* 1+2 · order TITLE → THUMB → EDITOR; thumbnail goes tall portrait. */ .doc-views[data-view="tiles"] .doc-card .doc-card-title{ order: 0; } .doc-views[data-view="tiles"] .doc-card .doc-thumb{ order: 1; aspect-ratio: 3 / 4; } .doc-views[data-view="tiles"] .doc-card .dc-band{ order: 2; } /* 3 · EDITOR BLOCK — .dc-band becomes a real panel (was display:contents). */ .doc-views[data-view="tiles"] .doc-card .dc-band{ display: flex; flex-direction: column; gap: 7px; margin-top: 6px; padding: 10px; border-radius: 4px; background: color-mix(in srgb, var(--nav-bg, #2b2118) 55%, transparent); border: 1px solid color-mix(in srgb, var(--ent-accent, #6E6A60) 26%, rgba(0,0,0,.18)); } /* inner wrappers stay transparent so their leaves flow into the panel column */ .doc-views[data-view="tiles"] .doc-card .dcb-meta, .doc-views[data-view="tiles"] .doc-card .dcb-sel, .doc-views[data-view="tiles"] .doc-card .dc-statusrow, .doc-views[data-view="tiles"] .doc-card .dc-chips, .doc-views[data-view="tiles"] .doc-card .dcs-facets, .doc-views[data-view="tiles"] .doc-card .dcm-grp, .doc-views[data-view="tiles"] .doc-card .dcm-edit{ display: contents; } /* order inside the panel: Title · Description · Status · Entity/Section/Dept · actions */ .doc-views[data-view="tiles"] .doc-card .dc-band .m-fld:has(.m-title){ order: 1; } .doc-views[data-view="tiles"] .doc-card .dc-band .m-fld:has(.m-intro){ order: 2; } .doc-views[data-view="tiles"] .doc-card .dc-statusrow .dc-statusbar{ order: 3; } .doc-views[data-view="tiles"] .doc-card .facet-chip{ order: 4; } .doc-views[data-view="tiles"] .doc-card .tic-actions{ order: 5; } /* leaves the new tile DOESN'T show: filename field + id/size/meta lines */ .doc-views[data-view="tiles"] .doc-card .dc-band .m-fld:has(.m-fname){ display: none !important; } .doc-views[data-view="tiles"] .doc-card .doc-row-meta, .doc-views[data-view="tiles"] .doc-card .dc-idline, .doc-views[data-view="tiles"] .doc-card .dc-fileline, .doc-views[data-view="tiles"] .doc-card .dc-uidrow, .doc-views[data-view="tiles"] .doc-card .dcm-size, .doc-views[data-view="tiles"] .doc-card .m-date, .doc-views[data-view="tiles"] .doc-card .dcs-metrics{ display: none !important; } /* selectors STACK one per line — full-width rows */ .doc-views[data-view="tiles"] .doc-card .dc-band .dc-statusbar, .doc-views[data-view="tiles"] .doc-card .dc-band .facet-chip{ width: 100%; box-sizing: border-box; } .doc-views[data-view="tiles"] .doc-card .dc-band .dss-toggle{ width: 100%; justify-content: flex-start; } /* COLLAPSED (read) — show ONLY the Edit button */ .doc-views[data-view="tiles"] .doc-card:not(.tic-edit) .dc-band .m-fld, .doc-views[data-view="tiles"] .doc-card:not(.tic-edit) .dc-statusrow, .doc-views[data-view="tiles"] .doc-card:not(.tic-edit) .dc-chips{ display: none !important; } .doc-views[data-view="tiles"] .doc-card:not(.tic-edit) .dc-band{ gap: 0; padding: 8px 10px; } /* EXPANDED (edit) — editable fields look like inputs */ .doc-views[data-view="tiles"] .doc-card.tic-edit .dc-band .m-fld{ display: flex; flex-direction: column; gap: 3px; width: 100%; } .doc-views[data-view="tiles"] .doc-card.tic-edit .dc-band .m-fld-lbl{ font: 700 var(--ui-fs-label)/1 var(--type-mono,var(--font-mono)); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--doc-text,#F6F1E7) 55%, transparent); } .doc-views[data-view="tiles"] .doc-card.tic-edit .dc-band .m-input{ display: block; width: 100%; box-sizing: border-box; color: var(--doc-text, #F4EFE5); background: color-mix(in srgb, var(--nav-bg, #2b2118) 80%, #000 20%); border: 1px solid color-mix(in srgb, var(--ent-accent,#6E6A60) 38%, rgba(255,255,255,.12)); border-radius: 3px; padding: 5px 7px; font: 400 var(--ui-fs-value)/1.4 var(--font-body,var(--font-body)); } .doc-views[data-view="tiles"] .doc-card.tic-edit .dc-band textarea.m-intro{ resize: vertical; min-height: 64px; } /* Edit / Save toggle — full-width button at the foot of the panel */ .doc-views[data-view="tiles"] .doc-card .tic-actions{ justify-content: stretch; margin-top: 2px; } .doc-views[data-view="tiles"] .doc-card .tic-edit-btn, .doc-views[data-view="tiles"] .doc-card .tic-save-btn{ width: 100%; justify-content: center; text-align: center; } /* ── 36 · TILE ACTION ROW (user 2026-06-26) ────────────────────────────────── ONE row sitting where the old full-width EDIT button was (order:2): the type badge · eye (branded viewer) · teletype-open (clean route) · EDIT/Save. The icons left, EDIT/Save pinned right. EDIT/Save are the same delegated .tic-edit-btn/.tic-save-btn, so the edit→save flow is unchanged. Supersedes the thumbnail icon overlays AND the in-panel full-width EDIT in tiles. */ .dt-actionrow{ display: none; } .doc-views[data-view="tiles"] .doc-card .dt-actionrow{ display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; order: 2; padding: 6px 11px 1px; min-width: 0; } /* type badge — was an absolute overlay on the thumb; now a static inline chip */ .doc-views[data-view="tiles"] .doc-card .dt-actionrow .dt-type{ position: static; top: auto; left: auto; flex: 0 0 auto; padding: 2px 5px; } /* eye + open — forced visible + inline (the default tiles rule hides .dt-preview-btn) */ .doc-views[data-view="tiles"] .doc-card .dt-actionrow .dt-preview-btn, .doc-views[data-view="tiles"] .doc-card .dt-actionrow .doc-ico-open{ display: inline-flex !important; position: static !important; align-items: center; justify-content: center; width: 21px; height: 21px; padding: 0; border-radius: 4px; cursor: pointer; flex: 0 0 auto; color: #EFE7D6; background: #3A3835; border: 1px solid #262421; } .doc-views[data-view="tiles"] .doc-card .dt-actionrow .dt-preview-btn:hover, .doc-views[data-view="tiles"] .doc-card .dt-actionrow .doc-ico-open:hover{ background: var(--nav-gold, #B8832A); color: #1c1205; } .doc-views[data-view="tiles"] .doc-card .dt-actionrow svg{ width: 13px; height: 13px; } /* EDIT/Save in the row are COMPACT (not the old full-width button) and pinned right */ .doc-views[data-view="tiles"] .doc-card .dt-actionrow .tic-edit-btn, .doc-views[data-view="tiles"] .doc-card .dt-actionrow .tic-save-btn{ width: auto; margin-left: auto; flex: 0 0 auto; padding: 2px 7px; white-space: nowrap; text-align: center; } /* the row replaces the in-panel EDIT/Save and the now-empty read-mode editor box */ .doc-views[data-view="tiles"] .doc-card .dc-band .tic-actions{ display: none !important; } .doc-views[data-view="tiles"] .doc-card:not(.tic-edit) .dc-band{ display: none !important; } /* ── 36 · BULK STATUS MANAGER ───────────────────────────────────────────── An overlay that lists every document as a portal-style row (mono, parchment, entity-coloured left bar + entity tag) with a left checkbox, plus a Check-all + "Set status:" selector header — to set one publish status across many docs at once. Rows mirror the master portal row look 1:1. ⟲ Reversible: delete §36 + the #bulkOverlay markup + its