/*
 * Scale Brand 2.0 tokens (brand.scale.com, fetched 2026-09-04; ADR-0017).
 * Light-first. Black and white do the work; Evergreen Core is the single
 * brand colour used for actions/selection/focus; Foundry Tan marks the dev
 * environment; Scale Labs semantic colours carry success/caution/error and
 * nothing else. Grays are structure. No gradients, no glass, no glow.
 *
 * Every colour literal in this file lives in this block — the one exception is
 * the `::backdrop` fallback at the end of the file, because `::backdrop` only
 * inherits custom properties in Chromium ≥ 122 / Safari ≥ 17.4. Components
 * consume the semantic tokens below it. Light on bare `:root`; dark under `@media`
 * guarded by `:root:not([data-theme="light"])` and again under
 * `:root[data-theme="dark"]` so the toggle wins both ways — the two dark
 * blocks are byte-identical and `theme-css.test.mjs` enforces it
 * (ADR-0017 amendment, 2026-09-04).
 */
:root {
  color-scheme: light;

  /* Brand 2.0 palette */
  --scale-white: #ffffff;
  --scale-off-white: #f3f3f3; /* light page canvas (brand off-white) */
  --scale-black: #000000;
  --scale-graphite: #0d0d0d; /* Brand 2.0 --color-scale-graphite: dark canvas */
  --scale-ink: #f2f2f2; /* Brand 2.0 --color-scale-ink: dark inverse chrome */
  --scale-gray-10: #212121; /* Grey 10: light inverse chrome, dark floating surface */
  --scale-evergreen: #193a29; /* Evergreen Core (PMS 2408) — the app's one brand colour */
  --scale-atlas: #273252; /* Atlas Blue — reserved, unused */
  --scale-tan: #a8927c; /* Foundry Tan — dev-environment marker only */
  --scale-purple: #79648c; /* Archive Purple — reserved, unused */
  --scale-slate: #839cb2; /* Cloud Slate — reserved */
  --scale-gray-60: #929292; /* Soft Gray — control borders, disabled text */
  --scale-gray-80: #c7c7c7; /* Medium Gray — card borders (light), muted text (dark) */
  --scale-gray-90: #eaeaea; /* Whisper Gray — dividers, sunken backdrop */
  --scale-lockup-gray: #727272; /* unit-name gray measured from ScaleInternalLogo_*.png */
  --scale-text-2: #575757; /* light secondary text: AA on every light surface */

  /* Scale Labs semantic colours — states only, never decoration */
  --labs-positive: #79c96e;
  --labs-neutral: #ede272;
  --labs-negative: #d95358;

  /* Semantic tokens consumed by components — LIGHT */
  --bg: var(--scale-off-white);
  --surface: var(--scale-white);
  --surface-strong: var(--scale-white);
  --surface-soft: rgba(0, 0, 0, 0.04);
  --surface-sunken: var(--scale-gray-90); /* recessed fills inside a surface: icon chips, badges, disabled buttons */
  --well: var(--scale-gray-90); /* the well: viewer stage, thumbnail frame (dark: black) */
  --paper: var(--scale-white); /* rendered content ground: PDF canvas, thumbnails, images. Never themed. */
  --fg: var(--scale-black);
  --text: var(--fg);
  --muted: var(--scale-text-2);
  --muted-strong: var(--fg);
  --muted-soft: var(--scale-lockup-gray); /* placeholders; --surface only (4.34:1 on the canvas — never there) */
  --disabled: var(--scale-gray-60);
  --accent: var(--scale-evergreen);
  --accent-fg: var(--scale-white); /* text on --accent fills */
  --accent-strong: var(--scale-evergreen);
  --accent-highlight: var(--scale-evergreen);
  --accent-hover: #3c5849; /* evergreen 85 % over white */
  --accent-tint: rgba(25, 58, 41, 0.12); /* selection; #e3e7e5 over white */
  --hover: rgba(0, 0, 0, 0.05);
  --focus: var(--scale-evergreen);
  --chrome-inverse-bg: var(--scale-gray-10); /* avatar, "me" chips, pressed segment */
  --chrome-inverse-fg: var(--scale-white);
  --warn: var(--labs-negative);
  --negative: var(--labs-negative);
  --negative-fg: var(--scale-black); /* text on a coral fill: 5.33:1; white would be 3.94 */
  --negative-tint: rgba(217, 83, 88, 0.16);
  --positive: var(--labs-positive);
  --positive-tint: rgba(121, 201, 110, 0.2);
  --caution: var(--labs-neutral);
  --caution-tint: rgba(237, 226, 114, 0.3);
  --border: var(--scale-gray-90);
  --border-strong: #8a8a8a; /* control borders: 3.11:1 on the #f3f3f3 canvas, 3.45 on white (Soft Gray #929292 fails 1.4.11 on the canvas at 2.80) */
  --border-card: var(--scale-gray-80);
  --button-bg: var(--scale-white);
  --button-bg-hover: var(--hover);
  --backdrop: rgba(0, 0, 0, 0.48);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-paper: 0 0 0 1px var(--scale-gray-80), 0 2px 8px rgba(0, 0, 0, 0.1);
  --scrollbar-thumb: var(--scale-gray-80);
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E");
  --toggle-track: var(--scale-gray-80);
  --toggle-track-hover: var(--scale-gray-60);
  --toggle-knob: var(--scale-white);
  --mark-filter: none; /* dark: invert(1) turns the black lockup into the official white variant */
  --watermark-ink: rgba(0, 0, 0, 0.18); /* panel cue drawn over --paper: theme-invariant, not redefined below */
  --env-dev-bg: var(--scale-tan);
  --env-dev-fg: var(--scale-black);

  /* Type + shape + motion */
  --font-sans: "Aeonik", "Host Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "Aeonik Mono", "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-control: 0;
  --radius-card: 0;
  --motion-fast: 160ms ease;
  --motion-standard: 240ms ease;
}

/* Dark theme. Not redefined (inherit light on purpose): --paper, --watermark-ink,
   --negative-fg, the --warn/--negative/--positive/--caution hues, --env-dev-*.
   The body below is pasted verbatim into both guards — the @media block for the
   OS default and the attribute block for an explicit choice — and
   frontend/tests/theme-css.test.mjs fails if they ever drift. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--scale-graphite); /* #0d0d0d canvas: topbar, sidebar, landing ground */
    --surface: #171717; /* raised sheets, buttons, inputs, viewer topbar */
    --surface-strong: var(--scale-gray-10); /* floating: menus, dialogs, toast */
    --surface-soft: rgba(255, 255, 255, 0.06);
    --surface-sunken: rgba(255, 255, 255, 0.06); /* recessed fills stay inside the surface system: #252525 over raised, #2e2e2e over floating */
    --well: var(--scale-black); /* viewer stage, thumbnail well: 21:1 behind the white page */
    --fg: var(--scale-white);
    --muted: var(--scale-gray-80); /* 10.6:1 on raised, 9.5:1 on floating */
    --muted-soft: var(--scale-gray-60); /* placeholders: 5.76:1 on raised */
    --disabled: var(--scale-lockup-gray); /* 3.73:1 — disabled, informative only */
    --accent: var(--scale-white); /* on dark the accent is white: primary fills, bars, focus, checkbox */
    --accent-fg: var(--scale-black);
    --accent-strong: var(--scale-white);
    --accent-highlight: var(--scale-white);
    --accent-hover: var(--scale-gray-90); /* #eaeaea */
    --accent-tint: rgba(25, 58, 41, 0.6); /* the one Evergreen use in dark: #182c22 over raised */
    --hover: rgba(255, 255, 255, 0.06);
    --focus: var(--scale-white);
    --chrome-inverse-bg: var(--scale-ink); /* #f2f2f2 */
    --chrome-inverse-fg: var(--scale-black);
    --negative-tint: rgba(217, 83, 88, 0.26);
    --positive-tint: rgba(121, 201, 110, 0.22);
    --caution-tint: rgba(237, 226, 114, 0.22);
    --border: rgba(255, 255, 255, 0.12); /* #333 over raised */
    --border-strong: rgba(255, 255, 255, 0.36); /* #6b6b6b over raised: 3.36:1 (0.32 fails at 2.89) */
    --border-card: rgba(255, 255, 255, 0.14);
    --button-bg: rgba(255, 255, 255, 0.04); /* a translucent lift so buttons read raised on canvas, sheet and floating surfaces alike */
    --button-bg-hover: var(--hover);
    --backdrop: rgba(0, 0, 0, 0.64);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.6);
    --scrollbar-thumb: rgba(255, 255, 255, 0.36);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
    --toggle-track: rgba(255, 255, 255, 0.36);
    --toggle-track-hover: rgba(255, 255, 255, 0.5);
    --toggle-knob: var(--surface);
    --mark-filter: invert(1); /* #000000 → #ffffff (the brand's white lockup geometry), #727272 → #8d8d8d (5.86:1 on graphite) */
  }
}
/* Indented to match its @media twin so the two bodies stay byte-identical. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: var(--scale-graphite); /* #0d0d0d canvas: topbar, sidebar, landing ground */
    --surface: #171717; /* raised sheets, buttons, inputs, viewer topbar */
    --surface-strong: var(--scale-gray-10); /* floating: menus, dialogs, toast */
    --surface-soft: rgba(255, 255, 255, 0.06);
    --surface-sunken: rgba(255, 255, 255, 0.06); /* recessed fills stay inside the surface system: #252525 over raised, #2e2e2e over floating */
    --well: var(--scale-black); /* viewer stage, thumbnail well: 21:1 behind the white page */
    --fg: var(--scale-white);
    --muted: var(--scale-gray-80); /* 10.6:1 on raised, 9.5:1 on floating */
    --muted-soft: var(--scale-gray-60); /* placeholders: 5.76:1 on raised */
    --disabled: var(--scale-lockup-gray); /* 3.73:1 — disabled, informative only */
    --accent: var(--scale-white); /* on dark the accent is white: primary fills, bars, focus, checkbox */
    --accent-fg: var(--scale-black);
    --accent-strong: var(--scale-white);
    --accent-highlight: var(--scale-white);
    --accent-hover: var(--scale-gray-90); /* #eaeaea */
    --accent-tint: rgba(25, 58, 41, 0.6); /* the one Evergreen use in dark: #182c22 over raised */
    --hover: rgba(255, 255, 255, 0.06);
    --focus: var(--scale-white);
    --chrome-inverse-bg: var(--scale-ink); /* #f2f2f2 */
    --chrome-inverse-fg: var(--scale-black);
    --negative-tint: rgba(217, 83, 88, 0.26);
    --positive-tint: rgba(121, 201, 110, 0.22);
    --caution-tint: rgba(237, 226, 114, 0.22);
    --border: rgba(255, 255, 255, 0.12); /* #333 over raised */
    --border-strong: rgba(255, 255, 255, 0.36); /* #6b6b6b over raised: 3.36:1 (0.32 fails at 2.89) */
    --border-card: rgba(255, 255, 255, 0.14);
    --button-bg: rgba(255, 255, 255, 0.04); /* a translucent lift so buttons read raised on canvas, sheet and floating surfaces alike */
    --button-bg-hover: var(--hover);
    --backdrop: rgba(0, 0, 0, 0.64);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-paper: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.6);
    --scrollbar-thumb: rgba(255, 255, 255, 0.36);
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
    --toggle-track: rgba(255, 255, 255, 0.36);
    --toggle-track-hover: rgba(255, 255, 255, 0.5);
    --toggle-knob: var(--surface);
    --mark-filter: invert(1); /* #000000 → #ffffff (the brand's white lockup geometry), #727272 → #8d8d8d (5.86:1 on graphite) */
}

/* Aeonik (Regular + Medium) and Aeonik Mono (Regular), self-hosted because the
   production CSP is `font-src 'self'` (local-dev: `default-src 'self'`). Light
   and Bold are not part of Brand 2.0 hierarchy ("nearly everything is Regular")
   and are not shipped. */
@font-face {
  font-family: "Aeonik";
  src: url("/static/brand/fonts/aeonik/Aeonik-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik";
  src: url("/static/brand/fonts/aeonik/Aeonik-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Mono";
  src: url("/static/brand/fonts/aeonik-mono/Aeonik-Mono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  /* Longhands only — the `font:` shorthand resets font-feature-settings to
     `normal`, which would drop the straight-tailed a (ss02) the brand requires.
     Form controls do not inherit the face or the feature; see `button` and
     `input` below. */
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-feature-settings: "ss02" 1;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.shell {
  position: relative;
}

body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Globals: one focus ring, one emphasis weight, calm motion. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

::placeholder {
  color: var(--muted-soft);
  opacity: 1;
}

strong,
b {
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.muted {
  color: var(--muted);
}

.error {
  color: var(--fg);
  border-left: 3px solid var(--negative);
  padding-left: 0.6rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   Landing card
   --------------------------------------------------------------------------- */

.landing {
  width: min(92vw, 26rem);
  margin: auto;
  padding: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: none;
}

.landing-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
}

/* On dark the lockup renders as the brand's white variant: logo.svg has only
   #000000 and #727272 fills, so invert(1) yields the official white lockup
   geometry with the unit name at #8d8d8d (5.86:1 on graphite). Light: none. */
[data-brand-mark] {
  filter: var(--mark-filter);
}

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.landing-copy {
  margin: 0;
}

.landing button {
  width: 100%;
  margin-top: 1.25rem;
}

/* ---------------------------------------------------------------------------
   Viewer topbar
   --------------------------------------------------------------------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.topbar-mark {
  flex-shrink: 0;
  height: 20px;
  width: auto;
  border-radius: 0;
  box-shadow: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  min-width: 0;
}

.title-stack {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
}

/* The viewer's title row holds only the environment badge; when the badge is
   hidden (prod), collapse the row so the title stack keeps no empty gap.
   `:empty` never matched because the hidden <span> is still an element child. */
.title-row:not(:has(:not([hidden]))) {
  display: none;
}

.env-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0;
  border: 0;
  background: var(--surface-sunken);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.env-badge[hidden] {
  display: none;
}

.env-badge-compact {
  min-height: 1.3rem;
  padding: 0.16rem 0.46rem;
}

/* Dev = black type on Foundry Tan (7.07:1). Logos never carry environment
   decoration; the badge, favicon and Okta tile canvas do. */
.env-badge[data-environment-tone="dev"] {
  background: var(--env-dev-bg);
  color: var(--env-dev-fg);
}

.env-badge[data-environment-tone="staging"],
.env-badge[data-environment-tone="nonprod"] {
  background: var(--surface-sunken);
  color: var(--fg);
}

.identity {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-caption {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0;
}

.controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.viewer-tools {
  display: inline-flex;
  align-items: center;
  gap: 0.18rem;
  min-height: 36px;
  padding: 0.18rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.viewer-select-label {
  width: 8.6rem;
}

.viewer-tools select {
  min-height: 2.05rem;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--fg);
  padding: 0.35rem 1.7rem 0.35rem 0.7rem;
  font-size: 13px;
}

.viewer-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  min-width: 2.05rem;
  height: 2.05rem;
  min-height: 0; /* explicit box: opt out of the 36px floor */
  padding: 0;
  border-color: transparent;
  background: transparent;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

.page-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 8rem;
  min-height: 36px;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--button-bg);
  color: var(--fg);
  font-family: var(--font-sans); /* controls do not inherit the face */
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: "ss02" 1; /* controls do not inherit the feature either */
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--motion-fast),
    border-color var(--motion-fast),
    color var(--motion-fast);
}

/* The base rule sets `display`, so restate the UA `[hidden]` behaviour. */
button[hidden],
.button-link[hidden] {
  display: none;
}

button:hover:not(:disabled),
.button-link:hover {
  background: var(--button-bg-hover);
  border-color: var(--fg);
}

button:focus-visible,
.button-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

button:disabled {
  color: var(--disabled);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 1;
}

button.secondary,
.button-link.secondary-link {
  background: var(--button-bg);
}

.button-link {
  min-width: 6.5rem;
}

/* Compact controls: an explicit box must opt out of the 36px floor, because
   min-height beats height. */
.icon-button {
  min-width: 0;
}

/* Deliberate 30px/13px floor (brand.md §5.6 lists 28px/12px): the header
   "Delete folder" / "Empty trash" buttons sit beside `.sort-control select`
   and `.compact-select`, both 30px, so the row stays one height. */
.compact-button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 13px;
}

.row-action-button {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.row-action-button:hover:not(:disabled) {
  border-color: transparent;
  background: var(--hover);
}

/* Primary: the one brand colour. */
.primary-action,
.sidebar-upload,
#upload-submit,
#share-submit,
#transfer-submit,
#folder-form button[type="submit"],
#rename-form button[type="submit"],
#move-form button[type="submit"],
.landing #action {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
}

.primary-action:hover:not(:disabled),
.sidebar-upload:hover:not(:disabled),
#upload-submit:hover:not(:disabled),
#share-submit:hover:not(:disabled),
#transfer-submit:hover:not(:disabled),
#folder-form button[type="submit"]:hover:not(:disabled),
#rename-form button[type="submit"]:hover:not(:disabled),
#move-form button[type="submit"]:hover:not(:disabled),
.landing #action:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.primary-action:disabled,
#upload-submit:disabled,
#share-submit:disabled,
#transfer-submit:disabled {
  background: var(--surface-sunken);
  border-color: var(--surface-sunken);
  color: var(--disabled);
}

/* Danger: the outline carries the signal; text stays black. */
button.danger-button,
.danger-button {
  border-color: var(--negative);
  background: var(--button-bg);
  color: var(--fg);
}

button.danger-button:hover:not(:disabled),
.danger-button:hover:not(:disabled) {
  border-color: var(--negative);
  background: var(--negative-tint);
  color: var(--fg);
}

/* Destructive confirm inside the two confirm dialogs: filled, black type in both
   themes (5.33:1 on coral; white would be 3.94). */
#confirm-delete-folder,
#confirm-empty-trash {
  background: var(--negative);
  border-color: var(--negative);
  color: var(--negative-fg);
}

#confirm-delete-folder:hover:not(:disabled),
#confirm-empty-trash:hover:not(:disabled) {
  background: var(--negative);
  border-color: var(--fg);
  color: var(--negative-fg);
}

/* Disabled danger buttons ("Empty trash" on an empty Trash, "Delete folder"
   on a folder you do not own) must read as disabled: the danger rules above
   share `button:disabled`'s specificity and come later, so they would
   otherwise keep the coral outline and black label. */
button.danger-button:disabled,
.danger-button:disabled,
#confirm-delete-folder:disabled,
#confirm-empty-trash:disabled {
  border-color: var(--border);
  background: var(--button-bg);
  color: var(--disabled);
}

/* ---------------------------------------------------------------------------
   Inputs, selects, textarea
   --------------------------------------------------------------------------- */

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--fg);
  padding: 0 10px;
  font-family: var(--font-sans); /* controls do not inherit the face */
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  font-feature-settings: "ss02" 1; /* nor the feature */
  letter-spacing: -0.005em;
}

textarea {
  padding: 8px 10px;
}

input[type="file"] {
  padding: 0.45rem 0.7rem;
}

input[type="checkbox"] {
  width: auto;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

select {
  appearance: none;
  padding-right: 30px;
  background-image: var(--select-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}

/* ---------------------------------------------------------------------------
   Viewer canvas + previews
   --------------------------------------------------------------------------- */

.canvas-host {
  position: relative;
  flex: 1;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 2.5vw, 2rem);
  background: var(--well);
}

#pdf-canvas {
  background: var(--paper);
  border-radius: 0;
  box-shadow: var(--shadow-paper);
  /* Block drag-to-save. */
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none; /* the canvas isn't interactive in the MVP */
}

.file-preview {
  --preview-zoom: 1;
  width: min(960px, 100%);
  min-height: min(720px, 100%);
  display: grid;
  place-items: center;
  transform-origin: top center;
}

.file-preview[hidden] {
  display: none;
}

.image-file-preview {
  max-width: 100%;
  max-height: calc(100vh - 190px);
  object-fit: contain;
  zoom: var(--preview-zoom);
  border-radius: 0;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  -webkit-user-drag: none;
  user-select: none;
}

.text-file-preview {
  width: 100%;
  min-height: min(720px, calc(100vh - 190px));
  max-height: calc(100vh - 190px);
  margin: 0;
  overflow: auto;
  padding: 1.1rem;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-paper);
  font-family: var(--font-mono);
  font-size: calc(13px * var(--preview-zoom));
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

/* ---------------------------------------------------------------------------
   Status lines and toasts
   --------------------------------------------------------------------------- */

.status-panel,
.status-line {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 0;
  border: 1px solid var(--border-card);
  border-left: 3px solid var(--fg);
  background: var(--surface);
  color: var(--fg);
}

.status-panel {
  position: absolute;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  padding: 0.55rem 0.9rem;
}

.status-panel[hidden] {
  display: none;
}

.status-line[hidden] {
  display: none;
}

.status-line {
  gap: 0.5rem;
  margin: 1rem auto 0;
  padding: 0.45rem 0.8rem;
}

/* Semantic fills carry black type; the left bar and the copy say which state. */
.status-line.success {
  border-left-color: var(--positive);
  background: var(--positive-tint);
  color: var(--fg);
}

.status-line.error {
  border-left-color: var(--negative);
  background: var(--negative-tint);
  color: var(--fg);
}

.status-action {
  min-width: 0;
  min-height: 0;
  padding: 0.22rem 0.55rem;
  border-radius: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
}

.footerbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 12px;
  background: var(--surface);
  flex-shrink: 0;
}

.app-shell {
  overflow: hidden;
}

/* Build marker. Shown in the viewer footer, the landing card and the account
   menu so deploys are identifiable without being visually loud. */
.app-version {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 1;
  user-select: text;
  -webkit-user-select: text;
}

.app-version:empty {
  display: none;
}

.app-version::before {
  content: "·";
  margin-right: 0.55rem;
}

.landing-version {
  display: block;
  margin-top: 1.75rem;
}

.landing-version::before {
  content: none;
}

@media (max-width: 800px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .controls {
    width: 100%;
    justify-content: space-between;
  }

  .viewer-tools {
    order: -2;
    flex: 1 1 100%;
    width: 100%;
    justify-content: center;
  }

  .viewer-select-label {
    flex: 1 1 auto;
    max-width: 14rem;
  }

  .viewer-tools button {
    flex: 0 0 2.05rem;
  }

  .page-pill {
    flex: 1 1 100%;
    order: -1;
  }

  button {
    flex: 1 1 auto;
  }
}

@media (max-width: 700px) {
  .button-link {
    width: 100%;
  }
}

/* ---------------------------------------------------------------------------
   Dialog form pieces (shared by upload / share / transfer / folder / rename)
   --------------------------------------------------------------------------- */

.sidebar-kicker {
  display: inline-flex;
  width: fit-content;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
  color: var(--fg);
  font-size: 13px;
}

.share-target-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7rem, 0.24fr);
  gap: 0.7rem;
}

.target-role-field {
  min-width: 7rem;
}

.role-note {
  display: block;
  max-width: 15rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--fg);
  font-size: 12px;
  line-height: 1.4;
}

.role-note[hidden] {
  display: none;
}

.directory-field {
  position: relative;
}

.people-field {
  gap: 0.45rem;
}

.people-picker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.32rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  transition:
    border-color var(--motion-fast),
    background var(--motion-fast);
}

.people-picker:focus-within {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 0;
  box-shadow: none;
}

.people-picker.disabled {
  border-color: var(--border);
  color: var(--disabled);
  cursor: not-allowed;
}

.people-picker input {
  flex: 1 1 11rem;
  width: auto;
  min-width: 8rem;
  min-height: 1.95rem;
  padding: 0.2rem 0.35rem;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* The wrapper draws the ring (.people-picker:focus-within). */
.people-picker input:focus-visible {
  outline: none;
}

.people-picker input[type="search"]::-webkit-search-cancel-button,
.people-picker input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

.people-picker input::-webkit-contacts-auto-fill-button,
.people-picker input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  display: none !important;
  pointer-events: none;
  position: absolute;
  right: 0;
  height: 0;
  width: 0;
  margin: 0;
}

.selected-people {
  display: contents;
}

.selected-people[hidden] {
  display: none;
}

.selected-person {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 0.35rem;
  padding: 0.18rem 0.22rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}

.selected-person.group {
  background: var(--surface-soft);
}

.selected-person-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 0;
  background: var(--chrome-inverse-bg);
  color: var(--chrome-inverse-fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.selected-person-avatar.group {
  background: var(--surface-sunken);
  color: var(--fg);
}

.selected-person-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selected-person-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.35rem;
  width: 1.35rem;
  height: 1.35rem;
  min-height: 0; /* explicit box: opt out of the 36px floor */
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.selected-person-remove:hover:not(:disabled) {
  background: var(--hover);
  color: var(--fg);
}

/* Directory suggestions stay in normal flow: the dialog is `overflow: auto`, so
   an absolutely positioned list would be clipped by its bottom edge (e2e
   "share picker keeps directory suggestions visible inside the access dialog"
   pins this). */
.directory-results {
  position: static;
  display: grid;
  gap: 0.25rem;
  width: 100%;
  max-height: min(16rem, 36vh);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0.35rem;
  border: 1px solid var(--border-card);
  border-radius: 0;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.directory-results[hidden] {
  display: none;
}

.directory-option {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-height: 3.15rem;
  padding: 0.55rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.directory-results-summary {
  padding: 0.25rem 0.45rem 0.35rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.directory-option:hover,
.directory-option:focus {
  background: var(--hover);
  border-color: transparent;
  outline: none;
}

.directory-option:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.directory-option-copy {
  display: grid;
  min-width: 0;
  gap: 0.1rem;
}

.directory-option-copy strong,
.directory-option-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.directory-option-copy strong {
  font-size: 13px;
}

.directory-option-copy span,
.directory-empty {
  color: var(--muted);
  font-size: 12px;
}

.directory-empty {
  padding: 0.65rem;
}

.toggle-field {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  padding: 0.75rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}

.toggle-field[hidden] {
  display: none;
}

.toggle-field input {
  width: auto;
  min-height: 0;
}

.watermark-info-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--fg);
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--fg);
}

.watermark-info-card[hidden] {
  display: none;
}

.watermark-info-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 0;
  background: var(--surface-sunken);
  color: var(--fg);
}

.watermark-info-icon svg {
  width: 18px;
  height: 18px;
}

.watermark-info-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.watermark-info-copy strong {
  color: var(--fg);
  font-size: 13px;
}

.watermark-info-copy span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.62rem;
  border-radius: 0;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--fg);
  font-size: 12px;
}

.empty-state {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0;
  background: var(--surface);
}

.empty-state p {
  margin: 0;
}

.empty-state button {
  width: fit-content;
}

/* ---------------------------------------------------------------------------
   Workspace shell
   --------------------------------------------------------------------------- */

.workspace-app {
  background: var(--bg);
}

.workspace-topbar {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 220px;
  align-items: center;
  height: 56px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg); /* the L-frame: canvas, not sheet */
  z-index: 5;
}

.workspace-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.workspace-brand-mark {
  height: 24px;
  width: auto;
  flex-shrink: 0;
  border-radius: 0;
  box-shadow: none;
  user-drag: none;
  -webkit-user-drag: none;
}

.workspace-search {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.workspace-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  color: var(--muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.workspace-search input {
  width: 100%;
  height: 36px;
  padding: 0 46px 0 36px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
}

.workspace-search input:focus,
.workspace-search input:focus-visible {
  border-color: var(--focus);
  outline: 2px solid var(--focus);
  outline-offset: 0;
}

.workspace-search kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10px;
  transform: translateY(-50%);
}

.workspace-account {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.account-avatar {
  width: 32px;
  height: 32px;
  min-width: 0;
  min-height: 0; /* explicit box: opt out of the 36px floor */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--chrome-inverse-bg);
  color: var(--chrome-inverse-fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

.account-avatar:hover:not(:disabled) {
  background: var(--chrome-inverse-bg);
  border-color: transparent;
  color: var(--chrome-inverse-fg);
}

.account-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  display: grid;
  width: min(18rem, 82vw);
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.account-menu[hidden] {
  display: none;
}

.account-menu-label {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.account-menu strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.account-menu .app-version::before {
  content: none;
  margin: 0;
}

.workspace-shell {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  height: calc(100vh - 56px);
  min-height: 0;
}

.workspace-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px;
  border-radius: 0;
  background: var(--bg); /* the L-frame: canvas, not sheet; the sheet's own border marks the edge */
  box-shadow: none;
  overflow-y: auto;
}

.workspace-sidebar,
.preview-panel {
  scrollbar-color: var(--scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

.workspace-sidebar::-webkit-scrollbar,
.preview-panel::-webkit-scrollbar {
  width: 0.65rem;
}

.workspace-sidebar::-webkit-scrollbar-thumb,
.preview-panel::-webkit-scrollbar-thumb {
  border: 0.18rem solid transparent;
  border-radius: 0;
  background: var(--scrollbar-thumb);
  background-clip: padding-box;
}

.sidebar-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 8px);
  min-height: 40px;
  padding: 0 14px;
  margin: 0 4px 4px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 400;
  box-shadow: none;
}

.sidebar-upload svg {
  width: 14px;
  height: 14px;
}

.workspace-nav {
  display: grid;
  gap: 1px;
}

.nav-section-label {
  display: block;
  margin: 14px 8px 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
}

.nav-item:hover,
.nav-item.active {
  background: var(--hover);
  color: var(--fg);
}

/* Active = tint + 2px Evergreen bar (never colour alone). */
.nav-item.active {
  background: var(--accent-tint);
  box-shadow: inset 2px 0 0 var(--accent);
}

.nav-item.drop-target {
  outline: 1px dashed var(--accent);
  outline-offset: -1px;
  background: var(--accent-tint);
  color: var(--fg);
}

.nav-item strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-icon,
.nav-icon svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-count {
  margin-left: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* Main area = canvas with two inset sheets (the file table with its header, and
   the details panel), so white never meets a viewport edge — the owner's
   2026-09-04 "edge-to-edge #FFFFFF looks so aggressive" note. Gutter 16px,
   hairline border, 0 radius per brand; in dark the sheets are #171717 on
   graphite. */
.workspace-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0 16px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  background: var(--bg);
}

.workspace-main-header {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 11px 16px; /* matches the row gutter below */
  border: 1px solid var(--border);
  background: var(--surface);
}

.selection-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
}

.selection-toolbar[hidden] {
  display: none;
}

.selection-toolbar strong {
  padding: 0 8px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.selection-toolbar button {
  white-space: nowrap;
}

.workspace-breadcrumb {
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.workspace-main-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.workspace-main-actions .compact-button {
  white-space: nowrap;
}

.workspace-main-actions[hidden] {
  display: none;
}

/* UX #17: folder breadcrumb above the heading. The <h1> keeps only the view
   name so its text stays a stable test/aria anchor. */
.workspace-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.workspace-crumbs[hidden] {
  display: none;
}

.crumb-link {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.crumb-link:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.sort-control {
  width: min(13rem, 100%);
}

.sort-control select {
  min-height: 30px;
  padding: 0 28px 0 10px;
  font-size: 13px;
}

.segmented-control {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
}

.segmented-control button {
  min-width: 4.5rem;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0 10px;
  font-size: 13px;
}

.segmented-control button[aria-pressed="true"],
.segmented-control button[aria-checked="true"] {
  background: var(--chrome-inverse-bg);
  color: var(--chrome-inverse-fg);
}

.segmented-control button[aria-pressed="true"]:hover:not(:disabled),
.segmented-control button[aria-checked="true"]:hover:not(:disabled) {
  background: var(--chrome-inverse-bg);
  color: var(--chrome-inverse-fg);
}

/* Theme control (System / Light / Dark): a segmented control keyed on
   aria-checked. Full-width grid in the account menu; 36 px tall in the viewer
   topbar to match its neighbours. */
.theme-control button {
  min-width: 0;
  padding: 0 10px;
}

.account-menu .theme-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.topbar .theme-control button {
  min-height: 30px;
}

.workspace-content {
  display: contents;
}

.file-table-shell {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: 0; /* the header's bottom hairline is the divider */
  background: var(--surface);
}

/* Calm, product-oriented welcome shell rendered when the viewer has no real
   files yet. */
.workspace-empty-state {
  display: grid;
  align-content: start;
  gap: 12px;
  max-width: 38rem;
  margin: 24px auto;
  padding: 36px 28px 28px;
  border: 1px dashed var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
}

.workspace-empty-state[hidden] {
  display: none;
}

.workspace-empty-kicker {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.workspace-empty-heading {
  margin: 0;
  color: inherit;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.workspace-empty-heading:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 0;
}

.workspace-empty-body {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.workspace-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.workspace-empty-actions button {
  width: auto;
  min-width: 8rem;
}

/* ---------------------------------------------------------------------------
   File table
   --------------------------------------------------------------------------- */

.file-table {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.file-table[hidden] {
  display: none;
}

.file-table.is-unavailable .file-table-head {
  display: none;
}

.library-error-state {
  margin: 16px;
}

/* Row metrics are tuned for the inset sheet: the 16px canvas gutter replaces the
   20px inner gutter the edge-to-edge sheet needed, the column gap tightens to 12px
   and Modified narrows to 104px (its widest value, "Apr 23, 2026" in 12px mono, is
   86px). Together they hand the name column back the width the inset took, so a
   18-character title at 1280px with the details panel open renders unclipped on
   every platform's text metrics (Linux FreeType runs ~4% wider than CoreText —
   CI run 33927745181 clipped "Q3 Security Review" by 2px). */
.file-table-head,
.file-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 2.4fr) minmax(0, 1.3fr) 104px 132px 44px;
  align-items: center;
  gap: 0 12px;
  padding: 0 16px;
}

.file-table-head {
  height: 36px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.file-table.is-grid .file-table-head {
  display: none;
}

.file-table:not(.has-visible-files) .file-table-head .row-marker {
  visibility: hidden;
}

.file-table-body {
  min-height: 0;
  overflow-y: auto;
}

.file-row {
  height: 44px;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
}

.file-row:hover,
.file-row:focus-within {
  background: var(--hover);
}

/* Selected = tint + 2px bar + checked selector; starred = glyph + "Starred". */
.file-row.selected,
.file-row.bulk-selected {
  background: var(--accent-tint);
}

.file-row.selected {
  box-shadow: inset 2px 0 0 var(--accent);
}

.file-row.dragging {
  opacity: 0.55;
}

/* Rows sit in a scroll container: draw the ring inside so it is not clipped. */
.file-row:focus-visible {
  outline-offset: -2px;
}

.row-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
}

.row-selector {
  width: 14px;
  height: 14px;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  accent-color: var(--accent);
}

.file-name,
.owner-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.file-type-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
}

.filename {
  display: block; /* a block box so text-overflow: ellipsis applies */
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.filename:hover:not(:disabled) {
  background: transparent;
  border-color: transparent;
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.policy-icons-inline {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--fg);
}

.star-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg);
}

.star-indicator svg {
  width: 14px;
  height: 14px;
}

.owner-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.owner-avatar.me {
  background: var(--chrome-inverse-bg);
  color: var(--chrome-inverse-fg);
  border-color: var(--chrome-inverse-bg);
}

.owner-avatar.group {
  background: var(--surface-sunken);
  color: var(--fg);
  border-color: var(--surface-sunken);
}

.owner-name,
.access-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modified-cell {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.access-summary-cell {
  min-width: 0;
  overflow: hidden;
  color: var(--fg);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Roles are text-labelled outline chips; no colour per role. */
.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.row-actions {
  display: flex;
  justify-content: flex-end;
}

.file-table-body.grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 10px;
  padding: 12px;
}

.grid-view .file-row {
  grid-template-columns: 20px minmax(0, 1fr) 32px;
  grid-template-areas:
    "stripe name actions"
    "stripe owner actions"
    "stripe modified actions"
    "stripe chip actions";
  align-items: start;
  min-height: 132px;
  height: auto;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.grid-view .file-row:hover,
.grid-view .file-row:focus-within {
  background: var(--hover);
}

.grid-view .file-row.selected,
.grid-view .file-row.bulk-selected {
  background: var(--accent-tint);
}

.grid-view .row-marker {
  grid-area: stripe;
  align-self: stretch;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}

.grid-view .file-name {
  grid-area: name;
  align-items: flex-start;
}

.grid-view .filename {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.grid-view .owner-cell {
  grid-area: owner;
  margin-top: 10px;
}

.grid-view .modified-cell {
  grid-area: modified;
  margin-top: 8px;
}

.grid-view .file-row > div:nth-of-type(4) {
  grid-area: chip;
  margin-top: 8px;
}

.grid-view .row-actions {
  grid-area: actions;
}

/* ---------------------------------------------------------------------------
   Details panel
   --------------------------------------------------------------------------- */

.preview-panel {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  overflow-y: auto;
}

.folder-preview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.folder-preview-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 0;
  background: var(--surface-sunken);
  color: var(--fg);
}

.folder-preview-icon svg {
  width: 22px;
  height: 22px;
}

.folder-preview h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
}

.folder-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.panel-kicker,
.panel-section h4 {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-header h3 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: break-word;
}

.preview-star-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 5px;
  margin-top: 8px;
  color: var(--fg);
  font-size: 12px;
  font-weight: 400;
}

.preview-star-badge svg {
  width: 13px;
  height: 13px;
}

.document-preview {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 328px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
}

.document-preview-toolbar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 22px;
}

.document-preview-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.document-preview-page {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* White paper in the well (Whisper Gray in light, black in dark). */
.document-preview-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 286px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--well);
}

.document-preview-link {
  display: grid;
  min-height: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.document-preview-link:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.document-preview-canvas {
  display: block;
  max-width: calc(100% - 14px);
  max-height: calc(100% - 14px);
  border-radius: 0;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
}

.document-preview-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.document-preview-text {
  width: 100%;
  height: 100%;
  min-height: 286px;
  margin: 0;
  padding: 14px;
  overflow: hidden;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.document-preview-state {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.document-preview.is-loading .document-preview-frame {
  background:
    linear-gradient(90deg, transparent, var(--surface-soft), transparent),
    var(--well);
  background-size:
    220% 100%,
    auto;
  animation: preview-shimmer 1.4s linear infinite;
}

.document-preview.is-error {
  border-color: var(--negative);
}

@keyframes preview-shimmer {
  from {
    background-position:
      220% 0,
      0 0;
  }

  to {
    background-position:
      -220% 0,
      0 0;
  }
}

/* Panel-side watermark cue only; the real watermark is burned into the PDF
   server-side (pdf_watermark.py) and is untouched by CSS. */
.preview-watermark {
  position: absolute;
  left: 50%;
  top: 50%;
  color: var(--watermark-ink);
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 400;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-28deg);
}

.panel-section {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.panel-section h4 {
  margin: 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.section-head h4 {
  margin: 0;
}

.properties-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-size: 12px;
}

.properties-list dt {
  color: var(--muted);
}

.properties-list dd {
  min-width: 0;
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.access-overview {
  display: grid;
  gap: 10px;
}

.access-summary {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.access-summary-icon,
.activity-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  color: var(--fg);
  background: var(--surface-sunken);
}

.access-summary-icon {
  width: 34px;
  height: 34px;
}

.access-summary-icon svg,
.activity-icon svg {
  width: 16px;
  height: 16px;
}

.access-summary strong {
  display: block;
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
}

.access-summary p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.access-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.access-metric {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.access-metric span,
.activity-row span {
  color: var(--muted);
  font-size: 11px;
}

.access-metric strong {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.policy-list {
  display: grid;
  gap: 8px;
}

.policy-toggle-row,
.policy-info-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
}

.policy-info-row {
  border-left: 3px solid var(--fg);
  background: var(--surface-soft);
}

.policy-toggle-label,
.policy-toggle-help {
  display: block;
}

.policy-toggle-label {
  color: var(--fg);
  font-size: 13px;
  font-weight: 400;
}

.policy-toggle-help {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.policy-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  min-width: 0;
  min-height: 0; /* explicit box: opt out of the 36px floor */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--toggle-track);
}

.policy-toggle::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 0;
  background: var(--toggle-knob);
}

.policy-toggle.on {
  background: var(--accent);
}

.policy-toggle.on::after {
  left: 16px;
  background: var(--accent-fg);
}

.policy-toggle:hover:not(:disabled) {
  background: var(--toggle-track-hover);
  border-color: transparent;
}

.policy-toggle.on:hover:not(:disabled) {
  background: var(--accent-hover);
}

.policy-toggle:disabled {
  background: var(--surface-sunken);
  border-color: transparent;
}

.policy-toggle.on:disabled {
  background: var(--disabled);
}

.policy-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.access-list {
  display: grid;
  gap: 10px;
}

.access-group {
  display: grid;
  gap: 2px;
}

.access-group-heading {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 2px 4px 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.access-group-count {
  padding: 1px 6px;
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--fg);
  letter-spacing: 0;
}

.access-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 0;
  font-size: 12px;
}

.access-row .owner-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.access-identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.access-row-secondary {
  color: var(--muted);
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.access-role {
  color: var(--muted);
  font-size: 11px;
}

.access-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.compact-select {
  min-height: 30px;
  padding: 0 28px 0 8px;
  border-radius: 0;
  color: var(--fg);
  font-size: 12px;
}

.policy-toggle-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.4;
}

/* Compact "Recent activity" cues inside the right-panel Activity section. The
   per-row badge that used to share these rules was removed on 2026-09-04 (UX
   polish D1): it fired for every file through the updatedAt fallback and
   clipped file names. Do not re-add it from the roadmap. */
.recent-activity {
  display: grid;
  gap: 6px;
}

.activity-section {
  display: grid;
  gap: 12px;
}

.recent-activity-hint {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.recent-activity-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-activity-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
  border-radius: 0;
  background: var(--surface-soft);
  color: var(--fg);
  font-size: 12px;
}

.recent-activity-when {
  color: var(--muted);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.activity-feed {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 0;
  background: var(--surface-soft);
}

.activity-icon {
  width: 28px;
  height: 28px;
}

.activity-row strong {
  display: block;
  color: var(--fg);
  font-size: 12px;
}

.activity-row time {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.activity-feed .empty-state {
  padding: 10px 12px;
  border-radius: 0;
}

.panel-manage-button {
  min-width: 0;
  min-height: 24px;
  padding: 0 8px;
  font-size: 11px;
}

.panel-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.panel-actions > * {
  flex: 1;
  justify-content: center;
}

/* ---------------------------------------------------------------------------
   Dialogs and menus
   --------------------------------------------------------------------------- */

.permissions-list {
  display: grid;
  gap: 0.55rem;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--backdrop);
}

.modal-backdrop[hidden],
.workspace-dialog[hidden],
.context-menu[hidden] {
  display: none;
}

.workspace-dialog {
  width: min(96vw, 38rem);
  max-height: min(88vh, 44rem);
  overflow: auto;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-card);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

#upload-dialog,
#permissions-dialog,
#transfer-dialog {
  width: min(96vw, 44rem);
}

#permissions-dialog,
#transfer-dialog {
  max-height: min(90vh, 48rem);
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0;
}

.dialog-header .icon-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.dialog-header h2 {
  margin: 0.1rem 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.dialog-header p {
  margin: 0.3rem 0 0;
}

.dialog-form {
  display: grid;
  gap: 0.85rem;
  padding: 1rem;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.65rem;
}

/* The two confirm dialogs place help + actions directly in the dialog. */
.workspace-dialog > .dialog-help {
  margin: 0.85rem 1rem 0;
}

.workspace-dialog > .dialog-actions {
  padding: 1rem;
}

.drop-zone {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icon title action"
    "icon meta action"
    "icon summary action";
  align-items: center;
  gap: 0.25rem 0.75rem;
  min-height: 6.6rem;
  padding: 1rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

/* Drop target = dashed Evergreen outline + tint (an action, not a state). */
.drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-tint);
}

.file-table.drop-target .file-table-body {
  outline: 1px dashed var(--accent);
  outline-offset: -8px;
  background: var(--accent-tint);
}

.drop-zone-icon {
  grid-area: icon;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 0;
  background: var(--surface-sunken);
  color: var(--fg);
}

.drop-zone-icon svg {
  width: 1.35rem;
  height: 1.35rem;
}

.drop-zone-title {
  grid-area: title;
  color: var(--fg);
  font-size: 14px;
  font-weight: 400;
}

.drop-zone .muted {
  grid-area: meta;
  font-size: 13px;
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-zone-action {
  grid-area: action;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface);
  color: var(--fg);
  font-size: 13px;
  font-weight: 400;
  line-height: 1;
}

.upload-file-summary {
  grid-area: summary;
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.upload-progress {
  margin-right: auto;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.upload-progress[hidden] {
  display: none;
}

.dialog-help {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

/* Inline validation: black text, coral bar + tint (coral text fails AA). */
.dialog-error {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--negative);
  border-radius: 0;
  background: var(--negative-tint);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.45;
}

.dialog-error[hidden] {
  display: none;
}

/* UX #9: "Copy link" sits under the Manage access title instead of the footer. */
.share-copy-link {
  width: fit-content;
  margin-top: 8px;
}

.dialog-form textarea {
  min-height: 5.5rem;
  resize: vertical;
}

.context-menu {
  position: fixed;
  z-index: 30;
  display: grid;
  min-width: 13rem;
  padding: 0.35rem;
  border: 1px solid var(--border-card);
  border-radius: 0;
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.context-menu button {
  justify-content: flex-start;
  width: 100%;
  border-radius: 0;
  border: 0;
  background: transparent;
  text-align: left;
}

.context-menu button:hover:not(:disabled) {
  background: var(--hover);
  border-color: transparent;
}

.context-menu button:disabled {
  color: var(--disabled);
  opacity: 1;
}

.context-menu-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--border);
}

/* UX #2b: #app-status is a fixed toast above the modal backdrop (z 20). */
.workspace-app .status-line {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 40;
  max-width: min(42rem, calc(100vw - 32px));
  justify-content: center;
  margin: 0;
  background: var(--surface-strong); /* floats over the raised sheet in dark */
  box-shadow: var(--shadow);
  transform: translateX(-50%);
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */

@media (max-width: 1120px) {
  .workspace-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .workspace-main {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-panel {
    display: none;
  }
}

@media (max-width: 820px) {
  .workspace-topbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
    height: auto;
    min-height: 56px;
    padding: 10px 12px;
  }

  .workspace-search {
    grid-column: 1 / -1;
    order: 3;
    max-width: none;
  }

  /* UX #14: no keyboard hint on touch-sized layouts. */
  .workspace-search kbd {
    display: none;
  }

  .workspace-shell {
    grid-template-columns: 1fr;
    height: calc(100vh - 104px);
  }

  .workspace-sidebar {
    max-height: 13rem;
    border-bottom: 1px solid var(--border);
  }

  .workspace-main {
    padding: 12px;
  }

  .workspace-main-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .share-target-row {
    grid-template-columns: 1fr;
  }

  .directory-results {
    max-height: min(13rem, 32vh);
  }

  .drop-zone {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "icon title action"
      "icon meta action"
      "icon summary action";
    min-height: 5rem;
    padding: 0.75rem;
    text-align: left;
  }

  .drop-zone-action {
    justify-self: end;
  }

  .file-table-head {
    display: none;
  }

  .file-row {
    grid-template-columns: 20px minmax(0, 1fr) 40px;
    grid-template-areas:
      "stripe name actions"
      "stripe owner actions"
      "stripe modified actions"
      "stripe chip actions";
    height: auto;
    min-height: 84px;
    padding: 10px 14px;
  }

  .row-marker {
    grid-area: stripe;
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    gap: 8px;
  }

  .file-name {
    grid-area: name;
  }

  .owner-cell {
    grid-area: owner;
  }

  .modified-cell {
    grid-area: modified;
  }

  .file-row > div:nth-of-type(4) {
    grid-area: chip;
  }

  .row-actions {
    grid-area: actions;
  }
}

/* ==========================================================================
   External upload links (ExecPlan 2026-05-27, X.6). Self-contained block —
   Brand 2.0 tokens only: 0 radius, weight 400, Aeonik Mono for table heads and
   the link itself, Evergreen primary via .primary-action. Owned by
   external-links-ui.mjs.
   ========================================================================== */
dialog.external-links-dialog { padding: 0; color: var(--fg); background: var(--surface-strong); }
dialog.external-links-dialog:not([open]) { display: none; }
dialog.external-links-dialog[open] { display: block; }
/* Same veil as .modal-backdrop (--backdrop). The literal survives as the
   fallback because ::backdrop inherits custom properties only in Chromium ≥ 122 /
   Safari ≥ 17.4; where it does, dark gets the deeper 0.64 veil. */
dialog.external-links-dialog::backdrop { background: var(--backdrop, rgba(0, 0, 0, 0.48)); }
.external-links-form fieldset { border: 1px solid var(--border); border-radius: 0; padding: 0.75rem; margin: 0; min-width: 0; }
.external-links-form legend { color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; padding: 0 0.35rem; }
.external-links-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.4rem 1rem; }
.external-links-types label { display: flex; align-items: center; gap: 0.5rem; font-size: 13px; }
.external-links-types input[type="checkbox"] { width: auto; min-height: 0; margin: 0; }
.external-links-reveal { display: grid; gap: 0.75rem; padding: 1rem; border-top: 1px solid var(--border); }
.external-links-reveal h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.external-links-url-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 0.5rem; align-items: center; }
.external-links-url-label { grid-column: 1 / -1; font-size: 13px; color: var(--fg); }
.external-links-url-row input { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0; }
.external-links-meta { font-size: 13px; }
.external-links-list { padding: 0 1rem 1rem; display: grid; gap: 0.6rem; }
.external-links-list h3 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.3; letter-spacing: -0.01em; }
.external-links-filter { display: flex; gap: 1rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.external-links-filter label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 13px; }
.external-links-filter input[type="radio"] { width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.external-links-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.external-links-table th, .external-links-table td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); vertical-align: top; }
.external-links-table th { color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.external-link-row:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.external-link-folder.is-missing { color: var(--muted); }
/* Status chips follow .tag-chip: square, outlined, black type; the Labs state
   tints carry the signal (coral text alone fails AA, see .dialog-error). */
.external-link-status { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 0; background: var(--surface); color: var(--fg); font-size: 12px; font-weight: 400; line-height: 1.4; }
.external-link-status.is-active { border-color: var(--accent); color: var(--accent); }
.external-link-status.is-pending { background: var(--caution-tint); }
.external-link-status.is-done { background: var(--positive-tint); }
.external-link-status.is-muted { border-color: var(--border); color: var(--muted); }
.external-link-status.is-warn { border-color: var(--negative); background: var(--negative-tint); }
.external-link-sub { display: block; color: var(--muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }
.external-links-actions { white-space: nowrap; }
.external-links-confirm { display: grid; gap: 0.4rem; white-space: normal; min-width: 14rem; }
.external-links-confirm-text, .external-links-note { margin: 0; }
.external-links-confirm .dialog-actions { justify-content: flex-start; }
.external-links-empty { margin: 0; font-size: 13px; }
.external-links-footer { padding: 0 1rem 1rem; }
@media (max-width: 720px) { .external-links-table thead { display: none; } .external-links-table td { display: block; border-bottom: 0; } .external-link-row { border-bottom: 1px solid var(--border); } .external-links-actions { white-space: normal; } }