/* HCTC DAM app styles.
   The fleet standard (hctc-fleet.css v0.3) owns tokens, sidebar, topbar,
   tiles and KPIs. This file adds only what the fleet file has no class for:
   the brand block, the asset grid and the search bar.

   Rules carried over from the fleet README, because they were found broken
   in every app anyone checked:
     - coloured text uses the *-text tokens, never a raw accent hue
       (raw green is 2.28:1 on white and fails even the 3:1 large-text bar)
     - card and tile headers carry no separator line and no second background
*/

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--fl-bg); color: var(--fl-text); }

/* ---- sidebar brand ------------------------------------------------------ */
.aq-brand {
  display: flex; align-items: center; gap: 10px;
  padding: var(--fl-sp-5) 20px;
  border-bottom: 1px solid var(--fl-border);
}
.aq-brand svg {
  width: 26px; height: 26px; flex-shrink: 0;
  stroke: var(--fl-primary); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.aq-brand strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.aq-brand span   { display: block; font-size: 11px; color: var(--fl-text-muted); }

/* ---- sidebar user ------------------------------------------------------- */
.aq-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.aq-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: var(--fl-radius-pill);
  background: var(--fl-primary); color: var(--fl-text-inverse);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600; text-transform: uppercase;
}
.aq-user-meta { min-width: 0; }
.aq-user-meta strong {
  display: block; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aq-user-meta span { display: block; font-size: 11px; color: var(--fl-text-muted); }

/* ---- page header --------------------------------------------------------
   The fleet's .fl-topbar is the MOBILE header and is display:none above
   1024px, so it cannot carry the page title. This is the desktop header, and
   it lives inside .fl-page.                                                */
.aq-pagehead {
  display: flex; align-items: center; gap: var(--fl-sp-3);
  margin-bottom: var(--fl-sp-5);
}
.aq-pagehead h1 {
  margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
}
.aq-pagehead .aq-icon-btn { margin-left: auto; }
.aq-icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
  background: var(--fl-surface); color: var(--fl-text-secondary);
  cursor: pointer; transition: var(--fl-transition-fast);
}
.aq-icon-btn:hover { background: var(--fl-surface-2); color: var(--fl-primary); border-color: var(--fl-border-strong); }
.aq-icon-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- search ------------------------------------------------------------- */
.aq-searchbar { display: flex; gap: var(--fl-sp-3); margin-bottom: var(--fl-sp-5); }
.aq-searchfield { position: relative; flex: 1; }
.aq-searchfield svg {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; stroke: var(--fl-text-faint);
  fill: none; stroke-width: 2; stroke-linecap: round;
}
.aq-searchfield input {
  width: 100%; padding: 12px 14px 12px 40px;
  font: inherit; font-size: 14px;
  color: var(--fl-text); background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
  transition: var(--fl-transition-fast);
}
.aq-searchfield input::placeholder { color: var(--fl-text-faint); }
.aq-searchfield input:focus {
  outline: none; border-color: var(--fl-primary);
  box-shadow: 0 0 0 3px var(--fl-primary-dim);
}
.aq-btn {
  padding: 12px 18px; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--fl-text-inverse); background: var(--fl-primary);
  border: 1px solid var(--fl-primary); border-radius: var(--fl-radius-md);
  cursor: pointer; transition: var(--fl-transition-fast);
}
.aq-btn:hover { background: var(--fl-primary-hover); border-color: var(--fl-primary-hover); }
.aq-btn--ghost {
  color: var(--fl-text-secondary); background: var(--fl-surface);
  border-color: var(--fl-border);
}
.aq-btn--ghost:hover { background: var(--fl-surface-2); color: var(--fl-text); }

.aq-modes { display: flex; gap: 6px; margin-bottom: var(--fl-sp-5); }
.aq-mode {
  padding: 6px 14px; font-size: 12px; font-weight: 500;
  color: var(--fl-text-secondary); background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-pill);
  cursor: pointer; transition: var(--fl-transition-fast);
}
.aq-mode[aria-pressed="true"] {
  background: rgba(9,122,191,0.15); color: var(--fl-primary);
  border-color: var(--fl-primary); font-weight: 600;
}
.aq-mode:disabled { opacity: .5; cursor: not-allowed; }
.aq-modenote {
  align-self: center; margin-left: 4px;
  font-size: 11.5px; color: var(--fl-text-muted);
}
.aq-card-score {
  margin: 4px 0 0; font-family: var(--fl-font-mono);
  font-size: 10.5px; color: var(--fl-cyan-text);
}

/* ---- asset grid --------------------------------------------------------- */
.aq-grid {
  display: grid; gap: var(--fl-sp-4);
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
/* ---- upload --------------------------------------------------------------
   Progress and state colours use the *-text tokens, never a raw accent hue.
   Raw green is 2.28:1 on white; the fleet README records that defect in
   every app anyone checked.                                                */
.aq-drop {
  padding: var(--fl-sp-12) var(--fl-sp-6); text-align: center; cursor: pointer;
  background: var(--fl-surface);
  border: 2px dashed var(--fl-border-strong); border-radius: var(--fl-radius-lg);
  transition: var(--fl-transition-fast);
}
.aq-drop:hover, .aq-drop:focus-visible, .aq-drop.over {
  border-color: var(--fl-primary); background: var(--fl-primary-dim); outline: none;
}
.aq-drop.over { border-style: solid; }
.aq-drop svg {
  width: 38px; height: 38px; margin-bottom: var(--fl-sp-4);
  stroke: var(--fl-primary); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.aq-drop h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; }
.aq-drop p  { margin: 0; font-size: 13px; color: var(--fl-text-muted); }
.aq-link { color: var(--fl-blue-text); font-weight: 600; text-decoration: underline; }

.aq-queue { display: flex; flex-direction: column; gap: 8px; margin-top: var(--fl-sp-5); }
.aq-q {
  display: flex; align-items: center; gap: var(--fl-sp-4);
  padding: 12px var(--fl-sp-4);
  background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
}
.aq-q-main { flex: 1; min-width: 0; }
.aq-q-name {
  margin: 0 0 6px; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aq-q-bar {
  height: 4px; border-radius: var(--fl-radius-pill);
  background: var(--fl-surface-3); overflow: hidden;
}
.aq-q-bar span {
  display: block; height: 100%; width: 0;
  background: var(--fl-primary); border-radius: inherit;
  transition: width 0.2s ease;
}
.aq-q-status { margin: 6px 0 0; font-size: 11.5px; color: var(--fl-text-muted); }
.aq-q[data-state="done"]   .aq-q-bar span { background: var(--fl-green-text); }
.aq-q[data-state="done"]   .aq-q-status   { color: var(--fl-green-text); }
.aq-q[data-state="dup"]    .aq-q-bar span { background: var(--fl-amber-text); }
.aq-q[data-state="dup"]    .aq-q-status   { color: var(--fl-amber-text); }
.aq-q[data-state="failed"] .aq-q-status   { color: var(--fl-red-text); }
.aq-q-cancel {
  flex-shrink: 0; width: 28px; height: 28px; line-height: 1;
  font-size: 18px; color: var(--fl-text-muted);
  background: none; border: 1px solid transparent; border-radius: var(--fl-radius-sm);
  cursor: pointer; transition: var(--fl-transition-fast);
}
.aq-q-cancel:hover { color: var(--fl-red-text); border-color: var(--fl-border); }

.aq-done {
  margin-top: var(--fl-sp-5); padding: 12px var(--fl-sp-4);
  font-size: 13px; line-height: 1.6;
  color: var(--fl-green-text); background: var(--fl-green-dim);
  border: 1px solid var(--fl-green); border-radius: var(--fl-radius-md);
}
.aq-done code {
  font-family: var(--fl-font-mono); font-size: 12px;
  background: var(--fl-surface); padding: 2px 6px; border-radius: var(--fl-radius-sm);
}
.aq-done a { color: inherit; font-weight: 600; }

.aq-card {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg);
  overflow: hidden; transition: var(--fl-transition-fast);
}
.aq-card:hover { border-color: var(--fl-border-strong); box-shadow: var(--fl-shadow-md); }
/* Previews are CONTAINED, never cropped.
   `cover` fills the tile more attractively and is wrong for a DAM: it is a
   crop, and a crop of an asset is a misrepresentation of it. A portrait shot
   loses the head and feet, a 16:9 screenshot loses the top and bottom bands
   that tell two screenshots apart, and a logo with margin loses the margin
   that is part of the artwork. The person scanning this grid is trying to
   identify a file; showing them a confidently-framed lie costs them a click
   each time. Letterboxing against surface-2 is the honest version.
   Applies to every preview surface in the app - see .aq-rev-thumb. */
.aq-thumb {
  aspect-ratio: 4 / 3; background: var(--fl-surface-2);
  display: grid; place-items: center; color: var(--fl-text-faint);
  /* min-height:0 is what makes the aspect-ratio above actually bind.
     A grid container's automatic minimum size is its content's min-content
     height, and that minimum WINS over aspect-ratio - so a 400x600 portrait
     stretched its tile to 202x299 and the declared 4:3 did nothing. The
     symptom was a grid of ragged, mismatched tile heights that looked like a
     gap bug; the declaration was there the whole time and simply had no
     effect. Measured: 202x299 before, 202x152 after. */
  min-height: 0; overflow: hidden;
}
.aq-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* The same automatic-minimum-size trap as the tile above, one level down:
     the img is itself a grid item, so its min-content height (the image's
     intrinsic height) overrode height:100%. It was laid out at 205x304
     inside a 205x154 tile and simply clipped - object-fit:contain was
     working perfectly, on the wrong box. Both mins are needed. */
  min-width: 0; min-height: 0;
  /* Keeps a full-bleed photo off the tile border, so the edge of the image
     reads as the edge of the image rather than the edge of the card. */
  padding: 4px; box-sizing: border-box;
}
/* Extreme aspect ratios get CROPPED instead of contained.
   `contain` is right for the ordinary range and wrong at the extremes: a
   400x2400 page screenshot shrinks to a 24px-wide sliver in a 4:3 tile -
   uniform, honest, and completely unreadable, which is not a useful
   trade. Past roughly 1.8:1 the tile stops being a preview and starts
   being a thin line.

   Tall images crop to the TOP because that is where a screenshot keeps
   its title bar, a document its heading, a poster its headline - the part
   that identifies it. Wide ones crop to the centre, where a banner's
   subject usually sits.

   The threshold is deliberately loose. Ordinary portrait photos (2:3,
   ratio 1.5) and 16:9 screenshots (0.56) stay contained, so the common
   case is still never cropped; only genuinely extreme shapes are. */
.aq-thumb--tall img {
  object-fit: cover;
  object-position: top center;
  padding: 0;
}
.aq-thumb--wide img {
  object-fit: cover;
  object-position: center;
  padding: 0;
}

.aq-thumb svg { width: 28px; height: 28px; stroke: currentColor; fill: none; stroke-width: 1.5; }
/* ---- content links -------------------------------------------------------
   These had no style whatsoever, so every link inside a panel fell back to
   the browser default #0000EE: measured at 2.03:1 against the dark page
   background, against a 4.5:1 requirement. Not a near miss - unreadable,
   and it had been that way on every "not built yet" panel and every back
   link in the app.

   --fl-blue-text, not --fl-primary. The raw accent as text is the defect
   the fleet README says was found in every app anyone checked, and
   --fl-primary-text (which this app's notes refer to) does not exist in
   the vendored stylesheet at all - the real tokens are *-blue-text and
   friends. Those carry a light and a dark value, so this works in both
   themes without a second rule.                                          */
.aq-modenote a,
.aq-empty a,
.aq-link {
  color: var(--fl-blue-text);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
}
.aq-modenote a:hover,
.aq-empty a:hover,
.aq-link:hover { border-bottom-color: currentColor; }

/* A card is itself an <a>; without this it inherits the link colour and
   every tile title turns blue. */
.aq-card { color: inherit; text-decoration: none; }

/* ---- breadcrumbs ---------------------------------------------------------
   Folders nest, so the one thing the screen must always answer is "where
   am I and how do I get back". Every ancestor is a link; the current
   folder is not, because a link that reloads the page you are on reads as
   broken.                                                                 */
.aq-crumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2px; margin: 0 0 var(--fl-sp-4);
  font-size: 12.5px; color: var(--fl-text-muted);
}
.aq-crumbs a {
  color: var(--fl-text-secondary); text-decoration: none;
  padding: 3px 6px; border-radius: var(--fl-radius-sm);
}
.aq-crumbs a:hover { background: var(--fl-surface-2); color: var(--fl-text); }
.aq-crumbs span { padding: 3px 6px; color: var(--fl-text); font-weight: 600; }
/* The separator is its own element so it never picks up the link's hover
   background and never becomes part of the click target. */
.aq-crumbs i { font-style: normal; color: var(--fl-text-faint); padding: 0 1px; }

/* ---- collection mosaic cover ---------------------------------------------
   A collection tile shows up to three of its assets instead of one, which
   is the single thing that makes a grid of collections readable at a
   glance: "Team Pics" and "Brand Art" look identical as names and nothing
   alike as pictures.

   One large pane plus two stacked, which is the shape that survives having
   fewer items than panes - with two assets the right column simply holds
   one, with one asset the mosaic collapses to a full-bleed image, and
   none of those need a separate rule because grid-area assignment just
   stops being used.

   Covers here are CROPPED, and this is the one place in the app that is
   right. A 62x62 pane is an identifying glimpse, not a representation of
   the asset; `contain` would letterbox three images into three grey boxes
   and defeat the purpose. The full-size preview on the asset itself is
   still never cropped - see .aq-thumb img.                                */
.aq-mosaic {
  width: 100%; height: 100%;
  display: grid; gap: 2px;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  background: var(--fl-surface-2);
}
.aq-mosaic > * { min-width: 0; min-height: 0; overflow: hidden; }
.aq-mosaic > :first-child { grid-row: 1 / span 2; }
/* One item: no second column to fill, so span the whole tile. */
.aq-mosaic > :only-child { grid-column: 1 / span 2; }
/* Exactly two: the second takes the whole right column. Without this the
   bottom-right pane sits empty and the tile reads as a rendering failure
   rather than as a collection that happens to hold two things. */
.aq-mosaic > :nth-child(2):last-child { grid-row: 1 / span 2; }
.aq-mosaic img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  min-width: 0; min-height: 0;
}
.aq-mosaic .aq-mosaic-icon {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: var(--fl-surface-3); color: var(--fl-text-faint);
}
.aq-mosaic .aq-mosaic-icon svg {
  width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5;
}

.aq-card-body { padding: 10px 12px 12px; }
.aq-card-title {
  font-size: 12.5px; font-weight: 600; margin: 0 0 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aq-card-meta { font-size: 11px; color: var(--fl-text-muted); }

/* ---- empty / loading states --------------------------------------------- */
.aq-loading { padding: var(--fl-sp-8); color: var(--fl-text-muted); font-size: 13px; }
.aq-empty {
  padding: var(--fl-sp-12) var(--fl-sp-6); text-align: center;
  background: var(--fl-surface);
  border: 1px dashed var(--fl-border-strong); border-radius: var(--fl-radius-lg);
}
.aq-empty svg {
  width: 36px; height: 36px; margin-bottom: var(--fl-sp-4);
  stroke: var(--fl-text-faint); fill: none; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.aq-empty h3 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.aq-empty p  { margin: 0 auto; max-width: 48ch; font-size: 13px; color: var(--fl-text-muted); line-height: 1.6; }
.aq-empty code {
  font-family: var(--fl-font-mono); font-size: 12px;
  background: var(--fl-surface-2); padding: 2px 6px; border-radius: var(--fl-radius-sm);
  color: var(--fl-blue-text);
}

/* ---- asset detail --------------------------------------------------------
   Viewer on the left, everything editable on the right. Coloured text uses
   the *-text tokens throughout - never a raw accent hue, which the fleet
   README records as broken in every app anyone checked.                   */
.aq-crumb { margin: 0 0 var(--fl-sp-4); font-size: 12.5px; }
.aq-crumb a { color: var(--fl-text-muted); text-decoration: none; }
.aq-crumb a:hover { color: var(--fl-blue-text); }

.aq-detail {
  display: grid; gap: var(--fl-sp-5);
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.aq-viewer {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg);
  padding: var(--fl-sp-4);
  min-width: 0;
}
.aq-viewer-media {
  display: block; width: 100%; height: auto;
  max-height: 70vh; object-fit: contain;
  border-radius: var(--fl-radius-md); background: var(--fl-surface-2);
}
.aq-audio { display: block; width: 100%; margin-top: var(--fl-sp-4); }
.aq-viewer-none {
  display: grid; place-items: center; gap: var(--fl-sp-3);
  aspect-ratio: 4 / 3; color: var(--fl-text-faint);
  background: var(--fl-surface-2); border-radius: var(--fl-radius-md);
}
.aq-viewer-none svg {
  width: 40px; height: 40px; stroke: currentColor; fill: none; stroke-width: 1.5;
}
.aq-viewer-none p { margin: 0; font-size: 13px; }

.aq-side {
  display: flex; flex-direction: column; gap: var(--fl-sp-4);
  padding: var(--fl-sp-5);
  background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-lg);
  min-width: 0;
}

/* label + control stack */
.aq-field { display: block; }
.aq-field > span {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--fl-text-muted);
}
.aq-field input[type="text"],
.aq-field textarea,
.aq-field select,
.aq-tagadd input {
  width: 100%; padding: 9px 12px;
  font: inherit; font-size: 13px;
  color: var(--fl-text); background: var(--fl-surface);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
  transition: var(--fl-transition-fast);
}
.aq-field textarea { resize: vertical; min-height: 64px; }
.aq-field input[type="text"]::placeholder,
.aq-field textarea::placeholder,
.aq-tagadd input::placeholder { color: var(--fl-text-faint); }
.aq-field input[type="text"]:focus,
.aq-field textarea:focus,
.aq-field select:focus,
.aq-tagadd input:focus {
  outline: none; border-color: var(--fl-primary);
  box-shadow: 0 0 0 3px var(--fl-primary-dim);
}

.aq-saverow { display: flex; align-items: center; gap: var(--fl-sp-3); }
.aq-savenote { font-size: 12px; color: var(--fl-green-text); }
.aq-savenote[data-bad="1"] { color: var(--fl-red-text); }

.aq-dl { display: flex; flex-wrap: wrap; gap: 6px; }
.aq-dl .aq-btn { padding: 7px 12px; font-size: 12px; text-decoration: none; }

.aq-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.aq-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 6px 4px 10px; font-size: 12px;
  color: var(--fl-text); background: var(--fl-surface-2);
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-pill);
}
/* A machine-suggested tag nobody has confirmed. Dashed rather than a
   different hue, so it reads as provisional in both themes. */
.aq-tag--unconfirmed { border-style: dashed; color: var(--fl-text-secondary); }
.aq-tag i {
  font-style: normal; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--fl-text-muted);
}
.aq-tag button {
  width: 16px; height: 16px; line-height: 1;
  font-size: 14px; color: var(--fl-text-faint);
  background: none; border: 0; border-radius: var(--fl-radius-sm);
  cursor: pointer; transition: var(--fl-transition-fast);
}
.aq-tag button:hover { color: var(--fl-red-text); }
.aq-tagadd { display: flex; gap: 6px; margin-top: 8px; }
.aq-tagadd .aq-btn { flex-shrink: 0; padding: 9px 14px; font-size: 12px; }

.aq-flat { margin: 0; font-size: 13px; color: var(--fl-text-secondary); line-height: 1.6; }

.aq-facts {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px var(--fl-sp-4); margin: 0; font-size: 12.5px;
}
.aq-facts dt { color: var(--fl-text-muted); }
.aq-facts dd { margin: 0; color: var(--fl-text); overflow-wrap: anywhere; }

.aq-meta > summary {
  font-size: 12px; font-weight: 600; color: var(--fl-text-secondary);
  cursor: pointer; padding: 4px 0;
}
.aq-meta > summary:hover { color: var(--fl-primary); }
.aq-meta pre {
  margin: 8px 0 0; padding: var(--fl-sp-3);
  max-height: 260px; overflow: auto;
  font-family: var(--fl-font-mono); font-size: 11px; line-height: 1.5;
  color: var(--fl-text-secondary); background: var(--fl-surface-2);
  border-radius: var(--fl-radius-sm);
}

/* The grid cards are links now; keep them looking like cards. */
a.aq-card { display: block; color: inherit; text-decoration: none; }

@media (max-width: 1024px) {
  .aq-detail { grid-template-columns: minmax(0, 1fr); }
}

/* Not-yet-built surfaces say so plainly rather than showing a fake panel. */
.aq-stub { border-style: dashed; }
.aq-stub h3::after {
  content: 'not built yet';
  display: inline-block; margin-left: 8px; vertical-align: 2px;
  font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fl-amber-text); background: var(--fl-amber-dim);
  padding: 2px 7px; border-radius: var(--fl-radius-pill);
}

.aq-error {
  padding: var(--fl-sp-4) var(--fl-sp-5);
  background: var(--fl-red-dim); color: var(--fl-red-text);
  border: 1px solid var(--fl-red); border-radius: var(--fl-radius-md);
  font-size: 13px;
}

@media (max-width: 1024px) {
  .fl-main { margin-left: 0; }
}

/* ---- rights and licensing ------------------------------------------------
   Alert colours use the *-text tokens on the matching -dim fill, never a raw
   accent hue as small text.                                                */
.aq-rights {
  border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
  background: var(--fl-surface-2); margin-bottom: var(--fl-sp-4);
}
.aq-rights > summary {
  padding: 10px 12px; cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--fl-text-secondary);
  list-style: none;
}
.aq-rights > summary::-webkit-details-marker { display: none; }
.aq-rights > summary::before { content: '▸ '; color: var(--fl-text-faint); }
.aq-rights[open] > summary::before { content: '▾ '; }
.aq-rights > summary:hover { color: var(--fl-text); }
.aq-rights-body { padding: 0 12px 12px; }
.aq-rights-dates { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fl-sp-3); }

.aq-rights-alert {
  margin: 0 0 10px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.5;
  border-radius: var(--fl-radius-sm); border: 1px solid transparent;
}
.aq-rights-alert--bad  {
  color: var(--fl-red-text);   background: var(--fl-red-dim);   border-color: var(--fl-red);
}
.aq-rights-alert--warn {
  color: var(--fl-amber-text); background: var(--fl-amber-dim); border-color: var(--fl-amber);
}

.aq-check { display: flex; align-items: center; gap: 8px; margin-bottom: var(--fl-sp-3); }
.aq-check span { font-size: 12px; color: var(--fl-text-secondary); }

.aq-btn.is-disabled,
a.aq-btn[aria-disabled="true"] {
  opacity: .45; cursor: not-allowed; pointer-events: auto;
}

.aq-muted { color: var(--fl-text-faint); }

/* A malware rejection is not an ordinary failure: it must not read as
   "try again", and it should be impossible to mistake for a red error
   about the network. */
.aq-q[data-state="infected"] .aq-q-status { color: var(--fl-red-text); font-weight: 600; }
.aq-q[data-state="infected"] { border-color: var(--fl-red); background: var(--fl-red-dim); }
.aq-q[data-state="infected"] .aq-q-bar span { background: var(--fl-red-text); width: 100% !important; }

/* ---- review and approval ------------------------------------------------- */
.aq-review-open {
  padding: 10px 12px; margin-bottom: var(--fl-sp-3);
  background: var(--fl-amber-dim); border: 1px solid var(--fl-amber);
  border-radius: var(--fl-radius-sm);
}
.aq-review-open p { margin: 0 0 3px; font-size: 12px; color: var(--fl-amber-text); }
.aq-review-open p:last-child { margin-bottom: 0; }
.aq-review-note { font-style: italic; }

.aq-history, .aq-comments { margin-top: var(--fl-sp-4); }
.aq-history-h {
  margin: 0 0 8px; font-size: 11px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--fl-text-muted);
}
.aq-history-row {
  padding: 8px 10px; margin-bottom: 6px;
  border-left: 3px solid var(--fl-border-strong);
  background: var(--fl-surface-2); border-radius: var(--fl-radius-sm);
}
.aq-history-row[data-d="approved"] { border-left-color: var(--fl-green-text); }
.aq-history-row[data-d="rejected"] { border-left-color: var(--fl-red-text); }
.aq-history-row strong { display: block; font-size: 12px; }
.aq-history-row[data-d="approved"] strong { color: var(--fl-green-text); }
.aq-history-row[data-d="rejected"] strong { color: var(--fl-red-text); }
.aq-history-row span { font-size: 11px; color: var(--fl-text-muted); }
.aq-history-row p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }

.aq-comment {
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--fl-surface-2); border-radius: var(--fl-radius-sm);
}
.aq-comment span { font-size: 11px; color: var(--fl-text-muted); }
.aq-comment p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; }

/* Review queue rows */
.aq-rev { text-decoration: none; color: inherit; align-items: flex-start; }
.aq-rev:hover { border-color: var(--fl-border-strong); background: var(--fl-surface-2); }
.aq-rev-thumb {
  width: 64px; height: 48px; flex-shrink: 0; overflow: hidden;
  border-radius: var(--fl-radius-sm); background: var(--fl-surface-3);
  display: grid; place-items: center; color: var(--fl-text-faint);
}
.aq-rev-thumb img {
  width: 100%; height: 100%; object-fit: contain;
  min-width: 0; min-height: 0;   /* see .aq-thumb img */
}
.aq-rev-thumb svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.aq-rev-note { margin: 4px 0 0; font-size: 11.5px; font-style: italic; color: var(--fl-text-secondary); }

/* ---- contractor accounts (#/vendors) -------------------------------------
   Staff screen for routes/vendor-admin.js. Contractors themselves use
   /contractor, styled by css/contractor.css.                               */
.vd-card {
  background: var(--fl-surface); border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-lg); padding: 18px 20px; margin: 14px 0;
}
.vd-new h3 { margin: 0 0 10px; font-size: 14px; font-weight: 600; }
.vd-head { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.vd-head strong { font-size: 14px; }
.vd-sub { font-size: 12px; margin-top: 2px; }
.vd-grants { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 6px; font-size: 13px; }
.vd-grants li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin-top: 10px; font-size: 13px; }
.vd-row .aq-field { min-width: 11rem; }
.vd-row select, .vd-row input[type="date"], .vd-new input[type="date"], .vd-url {
  padding: 8px 10px; font: inherit; font-size: 13px; color: var(--fl-text);
  background: var(--fl-surface); border: 1px solid var(--fl-border); border-radius: var(--fl-radius-md);
}
.vd-url { flex: 1; min-width: 18rem; font-family: var(--fl-font-mono); font-size: 12px; }
.vd-mini { padding: 7px 12px; font-size: 12px; }
.vd-spacer { flex: 1; }
.vd-link { margin-top: 12px; padding: 12px; border: 1px dashed var(--fl-border-strong); border-radius: var(--fl-radius-md); }
.vd-link[hidden], .vd-card .aq-error[hidden] { display: none; }