/* ==========================================================================
   LUMORIA Console — the document composer's own stylesheet.

   Separate from app.css on purpose (ADR-032): this feature owns its files,
   and app.css is shared. Loaded after app.css in index.html, so where the
   two touch the same class the composer wins.

   Everything here uses app.css's tokens — no new colours are invented, and
   nothing is hard-coded that the brand owns.
   ========================================================================== */

/* -------------------------------------------------------- the wide drawer
   A document is a table, not a two-field form. 620px was the width every
   other drawer wanted and the one thing that made the line grid impossible:
   at 620 the description column got 270px, which is not enough to read
   "Property photography — 3–4 bed house" while a price sits beside it. */
.drawer.wide { width: min(880px, 100%); }
@media (max-width: 900px) { .drawer.wide { width: 100%; } }

/* ------------------------------------------------------------- the lines */
.dl-lab { display: flex; align-items: baseline; gap: 12px; margin: 20px 0 8px; }
.dl-lab label { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.dl-lab .muted { font-size: 12px; margin-left: auto; }

/* One grid template, declared once and shared by the header and every row,
   which is the entire reason the columns line up. */
.dl-h, .dl-r {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 64px 104px 96px 52px;
  gap: 10px;
  align-items: start;
}
.dl-h {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 700; padding: 0 2px 8px;
  border-bottom: 1px solid var(--line);
}
.dl-h .c { text-align: center; }
.dl-h .r { text-align: right; }

.dl-b { display: grid; gap: 2px; padding: 6px 0; }

.dl-r {
  padding: 7px 2px; border-radius: 11px; position: relative;
  transition: background .18s var(--ease);
}
.dl-r:hover { background: var(--sand); }
.dl-r:focus-within { background: var(--sand); }
.dl-r.drag { opacity: .45; background: var(--sand-deep); }

/* The grip only earns its space on hover — a column of dots on every row is
   noise until the moment you want to move something. */
.dl-grip {
  display: grid; place-items: center; height: 38px; cursor: grab;
  opacity: 0; transition: opacity .18s var(--ease);
}
.dl-r:hover .dl-grip, .dl-r:focus-within .dl-grip { opacity: .4; }
.dl-grip:active { cursor: grabbing; }
.dl-grip svg { width: 14px; height: 14px; stroke: var(--ink-soft); fill: none; stroke-width: 2; }

.dl-desc { display: grid; gap: 4px; min-width: 0; }
.dl-r input {
  width: 100%; padding: 9px 11px; font-size: 14px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; font-family: inherit; color: var(--ink);
}
.dl-r input:focus { outline: 2px solid var(--brass); outline-offset: 1px; border-color: transparent; }
/* Subordinate to the description it belongs under, and bound to it rather
   than sitting a field-gap away. Quieter than the description, but still
   visibly a box you can type in — the first version dropped the border
   entirely and it read as a caption nobody could tell was editable. */
.dl-r .l-detail {
  font-size: 12.5px; padding: 7px 11px; color: var(--ink-soft);
  background: transparent; border-style: dashed; border-color: var(--line-2);
}
.dl-r:hover .l-detail, .dl-r .l-detail:focus { background: var(--surface); }
.dl-r .l-detail:focus { border-style: solid; }

/* Qty and unit both wear their operator, so the pair reads as "× 2 · £275.00"
   with no column header to lean on — which is what makes the mobile reflow
   below legible after the header row is dropped. */
.dl-qty, .dl-unit { position: relative; display: block; }
.dl-qty span, .dl-unit span {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 12.5px; color: var(--ink-soft); pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.dl-qty input { padding-left: 22px; text-align: right; font-variant-numeric: tabular-nums; }

/* Native spinners eat ~16px off the right of a 104px box, which is enough to
   clip "275.00" into "275.0(" — the number you are about to invoice, cut in
   half by a control nobody uses on a price. */
.dl-r input[type=number]::-webkit-outer-spin-button,
.dl-r input[type=number]::-webkit-inner-spin-button { appearance: none; margin: 0; }
.dl-r input[type=number] { appearance: textfield; -moz-appearance: textfield; }

/* The unit box wears its currency, so a USD invoice cannot be typed as if it
   were pounds. */
.dl-unit input { padding-left: 26px; text-align: right; font-variant-numeric: tabular-nums; }
/* AED is three characters — give it the room rather than overlapping. */
.dl-unit:has(span:not(:empty)) input { padding-left: max(26px, 2.6em); }

/* THE COLUMN THAT WAS MISSING. */
.dl-amt {
  display: block; text-align: right; padding: 10px 2px 0 0;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; color: var(--ink);
}
.dl-amt.neg { color: var(--bad); }

.dl-tools { display: flex; gap: 2px; padding-top: 4px; justify-content: flex-end; }
.dl-ic {
  width: 24px; height: 24px; border: 0; background: none; border-radius: 7px;
  display: grid; place-items: center; cursor: pointer; opacity: 0;
  transition: opacity .18s var(--ease), background .18s var(--ease);
}
.dl-r:hover .dl-ic, .dl-r:focus-within .dl-ic { opacity: .55; }
.dl-ic:hover, .dl-ic:focus-visible { opacity: 1; background: var(--sand-deep); }
.dl-ic:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.dl-ic svg { width: 13px; height: 13px; stroke: var(--ink); fill: none; stroke-width: 2; stroke-linecap: round; }
.dl-ic.danger:hover svg { stroke: var(--bad); }

.dl-add { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ------------------------------------------------------- the small screen
   The five fixed columns come to 386px before gaps, which is wider than the
   331px a 375px drawer actually has — so on a phone the grid became a
   sideways scroll through the numbers you are trying to check. Each line
   becomes a small card instead: description on its own row, then the
   arithmetic on one line beneath it. The header row goes, which is why qty
   and unit carry their own "×" and currency marks. */
@media (max-width: 620px) {
  .dl-h { display: none; }
  .dl-b { gap: 8px; }
  .dl-r {
    grid-template-columns: 78px minmax(0, 1fr) auto auto;
    grid-template-areas: "desc desc desc desc" "qty unit amt tools";
    gap: 8px; padding: 10px; align-items: center;
    background: var(--surface); box-shadow: 0 0 0 1px var(--line) inset;
  }
  .dl-r:hover { background: var(--surface); }
  .dl-grip { display: none; }
  .dl-desc { grid-area: desc; }
  .dl-qty { grid-area: qty; }
  .dl-unit { grid-area: unit; }
  .dl-amt { grid-area: amt; padding: 0 4px 0 0; }
  .dl-tools { grid-area: tools; padding: 0; }
  /* No hover on a touch screen — the controls have to be there already. */
  .dl-ic { opacity: .5; }
  .dl-r .l-detail { border-style: dashed; }
  .dt { max-width: none; }
}

/* ------------------------------------------------------------- the totals
   Right-aligned and narrow, so the eye lands on one column of figures
   instead of scanning a full-width row. */
.dt {
  margin-top: 18px; margin-left: auto; max-width: 380px;
  background: var(--surface); border-radius: 14px;
  box-shadow: 0 0 0 1px var(--line) inset; padding: 14px 16px;
}
.dt-r { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 5px 0; font-size: 13.5px; color: var(--ink-soft); }
.dt-r b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dt-r span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dt-r svg { width: 13px; height: 13px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.7; }

.dt-r.blk { color: var(--brass); }
.dt-r.blk b { color: var(--brass); }
.dt-r.off { color: var(--ink-soft); opacity: .75; }
.dt-r.warn { color: var(--bad); }
.dt-r.warn b { color: var(--bad); }

.dt-r.tot {
  margin-top: 8px; padding-top: 11px; border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink); font-weight: 700;
}
.dt-r.tot b { font-size: 20px; letter-spacing: -.02em; }

.dt-more { margin-top: 10px; }
.dt-more summary {
  cursor: pointer; font-size: 12.5px; color: var(--ink-soft);
  list-style: none; padding: 4px 0;
}
.dt-more summary::-webkit-details-marker { display: none; }
.dt-more summary::before { content: "+ "; color: var(--brass); font-weight: 700; }
.dt-more[open] summary::before { content: "− "; }
.dt-more summary:hover { color: var(--ink); }
.dt-disc { padding-top: 6px; }

/* The total, repeated in the footer beside the save button — the composer is
   taller than the drawer on a real document, so the figure you are deciding
   on must not be the thing that scrolls out of view. */
.dt-foot { font-size: 13px; color: var(--ink-soft); display: flex; align-items: baseline; gap: 8px; }
.dt-foot b { font-size: 17px; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.015em; }

/* ================================================================= BLACK */

/* The strip in the composer. Onyx and brass, because it is the one thing on
   this form that is not admin — it is the membership showing up where it is
   worth money. */
.blkstrip {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--onyx); color: var(--paper);
  border-radius: 13px; padding: 13px 15px; margin: -4px 0 16px;
}
.blkstrip.warn { box-shadow: 0 0 0 1px rgba(140, 47, 47, .55) inset; }
.blkstrip.quiet { background: var(--sand); color: var(--ink); }

.bs-i { flex: none; width: 26px; height: 26px; border-radius: 999px; background: rgba(205, 160, 85, .18); display: grid; place-items: center; }
.bs-i svg { width: 13px; height: 13px; stroke: var(--brass-bright); fill: none; stroke-width: 1.8; }
.blkstrip.quiet .bs-i { background: rgba(34, 26, 17, .07); }
.blkstrip.quiet .bs-i svg { stroke: var(--brass); }

.bs-t { min-width: 0; flex: 1; }
.bs-t b { display: block; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.bs-t span { display: block; font-size: 12.5px; line-height: 1.55; color: rgba(251, 248, 241, .66); margin-top: 3px; max-width: 62ch; }
.blkstrip.quiet .bs-t span { color: var(--ink-soft); }
.blkstrip.warn .bs-t b { color: var(--brass-bright); }

.bs-tog { flex: none; display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; color: rgba(251, 248, 241, .8); }
.bs-tog input { width: 16px; height: 16px; accent-color: var(--brass); }

/* The card in the client drawer — the answer to "don't ask me to invite
   someone who is already a member". */
.blkcard {
  margin-top: 20px; border-radius: 14px; padding: 16px 18px 14px;
  background: var(--onyx); color: var(--paper);
}
.bc-h { display: flex; align-items: center; gap: 9px; font-size: 14.5px; }
.bc-h svg { width: 15px; height: 15px; stroke: var(--brass-bright); fill: none; stroke-width: 1.8; }
.bc-seat { font-family: var(--mono); font-size: 12px; color: var(--brass-bright); letter-spacing: .04em; }
.bc-h .tag { margin-left: auto; }
.bc-g { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 14px 0 10px; }
.bc-g span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: rgba(251, 248, 241, .5); }
.bc-g b { display: block; font-size: 16px; font-weight: 700; margin-top: 3px; letter-spacing: -.015em; }
.bc-g b.warn { color: var(--brass-bright); }
.bc-s { font-size: 12.5px; line-height: 1.6; color: rgba(251, 248, 241, .66); max-width: 60ch; }
.bc-s b { color: var(--brass-bright); }

.blkpill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px;
  border-radius: 999px; background: var(--sand-deep); font-size: 12.5px; color: var(--ink-soft);
}
.blkpill svg { width: 12px; height: 12px; stroke: var(--brass); fill: none; stroke-width: 1.8; }

/* The marker on a client row. Small, and it means something different in
   each colour — hover tells you which. */
.blkdot { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 999px; background: var(--onyx); vertical-align: -3px; margin-left: 5px; }
.blkdot svg { width: 9px; height: 9px; stroke: var(--brass-bright); fill: none; stroke-width: 2.2; }
.blkdot.warn { background: var(--bad); }
.blkdot.warn svg { stroke: #fff; }
.blkdot.pend { background: var(--sand-deep); }
.blkdot.pend svg { stroke: var(--ink-soft); }
.blkdot.lapsed { background: var(--sand-deep); opacity: .6; }
.blkdot.lapsed svg { stroke: var(--ink-soft); }

/* The member line on a saved document, marked as what it is rather than
   left as an unexplained negative number. */
.items-t tr.blk-line td { color: var(--brass); }
.blk-tick { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 999px; background: var(--onyx); vertical-align: -3px; margin-right: 6px; }
.blk-tick svg { width: 8px; height: 8px; stroke: var(--brass-bright); fill: none; stroke-width: 2.2; }

/* ==================================================== the catalogue picker
   A sheet pinned to the bottom of the DRAWER — not to the form, and not
   inside `.drawer-b`, which scrolls and would clip it. documents.js appends
   it as a direct child of `.drawer` for exactly that reason.

   Inline was the old shape and the old problem: opening the picker pushed
   the totals and the notes field down the page, so the thing you were
   looking at moved the moment you reached for it. */
#docCat {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--surface); border-top: 1px solid var(--line);
  border-radius: 16px 16px 0 0; box-shadow: 0 -20px 50px -28px rgba(34, 26, 17, .5);
  max-height: 66%; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .32s var(--ease);
  pointer-events: none; margin: 0; overflow: hidden;
}
#docCat.on { transform: none; pointer-events: auto; }
#docCat .cat-h { display: flex; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--line); flex: none; }
#docCat .cat-b { overflow-y: auto; flex: 1; }
#docCat .cat-f { flex: none; padding: 9px 13px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); background: var(--paper); }
#docCat .cat-none { padding: 22px 14px; font-size: 13.5px; color: var(--ink-soft); }