/* ==========================================================================
   EVERY CLASS HERE IS PREFIXED qo- OR IS UNIQUE TO THIS FILE.
   base.css is a whole app's stylesheet and its names are not namespaced:
   `.sheet` there is a modal dialog clamped to 440px, and naming the main
   content container `.sheet` silently squeezed every page in this app to
   dialog width. Check a new class against base.css before using it.

   Quill Order - the document shell, plus what base.css has no equivalent of

   base.css supplies the parts: tokens, .btn, .field, .lbl, .msg, the keypad.
   Those are used unchanged - no new heights, radii or button styles.

   What is NOT reused is its page shell. That app pins every screen with
   position:fixed so a camera viewfinder cannot move; this one is a
   scrolling document with wide tables. Trying to live inside the fixed
   shell is what made the login card jump between steps and squeezed every
   table into a phone-width column.
   ========================================================================== */

/* ---- document shell -------------------------------------------------- */

/* base.css sets html,body { height:100%; overflow:hidden } - installed as a
   PWA there is no browser chrome to absorb overflow, so its screens size
   themselves to the viewport and scroll internally. A quotation with forty
   lines has to scroll the page itself, and without this the review screen
   is simply cut off at the bottom with no way to reach the rest. */
html.doc, html.doc body {
  height: auto;
  min-height: 100%;
  overflow: visible;
  overscroll-behavior: auto;
}
body.doc { background: var(--bg); color: var(--ink); }

.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s3) var(--s5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar__brand { display: flex; align-items: center; gap: var(--s3);
                 text-decoration: none; color: var(--ink); }
/* Flat black always - never the gold bulb, never a gradient, anywhere. */
.topbar__brand img { height: 22px; width: auto; filter: brightness(0); }
.topbar__brand span { font-weight: 600; font-size: var(--t-body); }
.topbar__nav { margin-left: auto; display: flex; align-items: center;
               gap: var(--s5); }
.topbar__nav a { font-size: var(--t-sm); color: var(--dim); text-decoration: none; }
.topbar__nav a:hover { color: var(--ink); }
.topbar__who { font-size: var(--t-sm); font-weight: 600; }

.qo-wrap { display: block; max-width: 1160px; margin: 0 auto;
         padding: var(--s6) var(--s5) 120px; }

h1 { font-size: var(--t-title); font-weight: 650; margin: 0 0 var(--s2); }
h2 { font-size: var(--t-input); font-weight: 600; margin: var(--s6) 0 var(--s3); }
h2 .dim { font-weight: 400; font-size: var(--t-sm); margin-left: var(--s2); }
.lede { color: var(--dim); max-width: 68ch; margin: 0 0 var(--s5); }
.hint { color: var(--dim); font-size: var(--t-sm); margin: var(--s2) 0 0; }
.label { font-weight: 600; margin: 0 0 var(--s2); }
.dim { color: var(--dim); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace;
        font-size: var(--t-sm); }
.num { text-align: right; }

/* ---- login ----------------------------------------------------------- */
/* One rule only. The sign-in screen is base.css's in every other respect.
   Every other override tried here made it worse: capping the field and
   button pulled them out of line with their own label, and capping the
   keypad's height squashed the keys. If this screen looks wrong, compare
   it against the receiving app before adding a rule.

   base.css pushes the keypad to the bottom of the viewport with
   margin-top:auto, so it sits under a thumb on a phone. On a desktop
   window that leaves a chasm between the PIN dots and the keys. The keypad
   keeps its own height (base.css caps it at 420px, which is what makes the
   keys the right shape) - only the shove to the bottom is undone. */
.page--narrow .keypad {
  flex: 0 0 auto;
  height: min(420px, 48vh);
  margin-top: var(--s5);
}
/* base.css grows the active step to fill the viewport, which on a phone is
   what puts the keypad under a thumb and the button on the bottom edge. On
   a desktop window it just stretches a chasm through the middle of the
   card, so the group keeps its own height and stacks under the title. */
.page--narrow .page__body:not(.page__body--center) > .step.is-active {
  flex: 0 0 auto;
}

/* ---- notices --------------------------------------------------------- */

.notice {
  border-radius: var(--r-md); padding: var(--s3) var(--s4);
  margin: 0 0 var(--s4); font-size: var(--t-body);
  border: 1px solid var(--line-strong); background: var(--surface);
}
.notice--good { background: #eaf3ea; border-color: #cfe3cf; }
.notice--bad  { background: #fbeceb; border-color: var(--danger-line); }
.notice .dim { margin-left: var(--s2); }
.notice { position: relative; padding-right: var(--s6); transition: opacity .4s var(--ease); }
.notice.is-gone { opacity: 0; }
.notice__x {
  position: absolute; top: 50%; right: var(--s3); transform: translateY(-50%);
  background: none; border: 0; padding: 0 var(--s2); cursor: pointer;
  font: inherit; font-size: 18px; line-height: 1; color: var(--dim);
}
.notice__x:hover { color: var(--ink); }

/* ---- upload ---------------------------------------------------------- */

.drop {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s6);
  background: var(--surface);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: border-color .12s var(--ease);
}
.drop:hover, .drop.over, .drop.has-file { border-color: var(--ink); }
.drop.has-file { border-style: solid; }
.drop .btn { max-width: 280px; }
.drop-inner { text-align: center; }
.drop-title { font-size: var(--t-input); font-weight: 600; margin: 0 0 var(--s1);
              text-align: center; }
.drop-sub { color: var(--dim); margin: 0; font-size: var(--t-sm);
            text-align: center; }

/* ---- panels ---------------------------------------------------------- */

.panel {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4);
}
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }

.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
         gap: var(--s4) var(--s5); }
.facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.facts span { font-size: var(--t-sm); color: var(--dim); }
.facts strong { font-weight: 600; overflow-wrap: anywhere; }

.aside { border-left: 1px solid var(--line); padding-left: var(--s5); }
@media (max-width: 900px) {
  .aside { border-left: 0; border-top: 1px solid var(--line);
           padding-left: 0; padding-top: var(--s4); }
}

.supersede {
  background: #fff8e6; border: 1px solid #e8d9a8;
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s4);
}

.choices { display: flex; gap: var(--s2); flex-wrap: wrap; }
.choice { display: inline-flex; align-items: center; gap: var(--s2);
          min-height: var(--h-sm); padding: 0 var(--s4);
          border: 1px solid var(--line-strong); border-radius: var(--r-sm);
          cursor: pointer; font-size: var(--t-body); background: var(--surface);
          white-space: nowrap; }
.choice:has(input:checked) { border-color: var(--ink);
                             background: var(--surface-2); font-weight: 600; }
.choice.block { display: flex; margin-bottom: var(--s2);
                padding: var(--s3) var(--s4); white-space: normal; }

/* ---- tables ---------------------------------------------------------- */

.tablewrap { overflow-x: auto; border: 1px solid var(--line);
             border-radius: var(--r-md); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td {
  padding: var(--s3); text-align: left;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.table th { font-size: var(--t-sm); font-weight: 600; color: var(--dim);
            background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table .desc { font-size: var(--t-sm); color: var(--dim);
               min-width: 260px; max-width: 460px; }
.table .qo-thumb { width: 56px; }
.table .qo-thumb img { width: 40px; height: 40px; object-fit: contain;
                    border-radius: var(--r-sm); background: var(--surface-2);
                    display: block; }
.table .nowrap { white-space: nowrap; }
.table a { color: var(--ink); text-decoration: underline;
           text-underline-offset: 2px; font-size: var(--t-sm); }
.table a:hover { color: var(--dim); }

/* Compact variants of the shared field, sized for a table cell. */
.field--cell { height: var(--h-sm); width: 88px; text-align: right;
               padding: 0 var(--s2); font-size: var(--t-body); }
.field--slim { height: var(--h-sm); font-size: var(--t-body); padding: 0 var(--s3); }

.pill { display: inline-block; white-space: nowrap;
        font-size: var(--t-sm); padding: 3px var(--s3);
        border-radius: var(--r-full); }
.pill--ok   { background: #eaf3ea; color: var(--ok); }
.pill--wait { background: var(--surface-2); color: var(--dim); }
.pill--bad  { background: #fbeceb; color: var(--danger); }

/* ---- actions --------------------------------------------------------- */

/* base.css writes .btn for <button>, which centres its own label. An <a>
   does not: it needs a display and its own centring, or the text sits in
   the corner of a full-width box with an underline. Three links in this
   app use .btn, so it is fixed once here rather than per screen. */
a.btn {
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
}

.actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.actions .btn { width: auto; min-width: 220px; padding: 0 var(--s5); }

.rowacts { display: flex; flex-wrap: nowrap; gap: var(--s4);
           justify-content: flex-end; white-space: nowrap; }
.rowacts form { display: inline; }
.linkbtn { background: none; border: 0; padding: 0; font: inherit;
           font-size: var(--t-sm); color: var(--dim);
           text-decoration: underline; cursor: pointer; white-space: nowrap; }
.linkbtn:hover { color: var(--ink); }
.linkbtn--danger { color: var(--danger); }

/* ---- admin ----------------------------------------------------------- */

.newuser {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--s4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s5);
}
.newuser .formrow { flex: 1 1 220px; min-width: 200px; }
.newuser .formrow--role { flex: 0 0 170px; }
.newuser .btn { width: auto; flex: 0 0 auto; padding: 0 var(--s6); }

/* base.css puts .field on the input itself, so a labelled row needs its
   own wrapper rather than borrowing that class. */
.formrow { display: block; }
.formrow .lbl { white-space: nowrap; }
.formrow .field { width: 100%; }

.backline { display: inline-block; margin-bottom: var(--s3);
            font-size: var(--t-sm); color: var(--dim); text-decoration: none; }
.backline:hover { color: var(--ink); }