/*
    ServiceDesk App — the components from the owner's Claude Design project
    (claude.ai/design/p/fbe67883… · "ServiceDesk App.dc.html").

    That project supersedes the earlier prototype for anything it defines: the rail, the top bar,
    the plate, the pill, the stat and the empty state. Loaded after servicedesk-design-system.css
    so those definitions win; anything it does not define still comes from the design system.

    Every value here is transcribed from the .dc.html components, not invented:
      Rail.dc.html · TopBar.dc.html · Plate.dc.html · Pill.dc.html · Stat.dc.html

    The colours are written as the design system's tokens rather than as the hex the components
    were drawn in. Each one is the same colour — every literal here *was* a copy of that token's
    default value — but a copy cannot be themed, and because this file is loaded last those copies
    were what the whole product was actually painted with. Eleven palettes sat in the design system
    unreachable, and the rail came out #101318 whichever one was chosen.

    Two exceptions, both deliberate. The number plate is a physical object — white, black border,
    blue IND badge — and looks the same under every theme because plates do. The attendance key's
    colours mean present, leave and absent rather than card or line.
*/

/* ---------- Rail.dc.html ---------- */

.rail {
    width: 244px;
    flex: 0 0 244px;
    align-self: stretch;
    background: var(--carbon);
    display: flex;
    flex-direction: column;
    font-family: 'Public Sans', system-ui, sans-serif;
    border-right: 0;
}

.rail-head { padding: 18px 16px 14px; display: flex; align-items: center; gap: 10px; }

.rail-mark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--orange);
    color: var(--on-acc);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: -.015em;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rail-head .t1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    letter-spacing: -.015em;
    color: var(--rail-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rail-head .t2 { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--slate); margin-top: 2px; }

/* The branch box: a label, the branch, and the switch glyph on the right. */
.rail-branch {
    margin: 0 12px 14px;
    padding: 9px 10px;
    border: 1px solid var(--carbon-3);
    border-radius: 8px;
    background: var(--carbon-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rail-branch .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--slate); }
.rail-branch .v { font-size: 13px; font-weight: 600; color: var(--rail-strong); margin-top: 3px; }
.rail-branch .glyph { color: var(--rail-tx); font-size: 13px; }

.rail-branch select {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--rail-strong);
    font-size: 13px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}

.rail-branch select option { background: var(--carbon-2); color: var(--rail-strong); }

.rail-nav { flex: 1; overflow: auto; padding: 0 8px; }
.rail-nav .grp { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: #5C6773; padding: 0 10px 6px; }
.rail-nav .set { margin-bottom: 14px; }

.rail-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 8px;
    margin-bottom: 1px;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--rail-tx);
    background: transparent;
}

.rail-nav a:hover { color: var(--rail-strong); background: var(--carbon-2); }

/* Active: the accent wash plus a 2px strip drawn inside the left edge. */
.rail-nav a.on {
    /* A wash rather than a token, and it stays one: sixteen per cent of the accent is a dark rust
       over a black rail and a pale peach over a white one, which is the same idea drawn twice. */
    background: rgba(240, 78, 35, .16);
    box-shadow: inset 2px 0 0 0 var(--orange);
    color: var(--rail-strong);
    font-weight: 600;
}

.rail-nav .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.rail-nav .badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10.5px;
    color: #8B96A4;
    background: transparent;
    padding: 1px 6px;
    border-radius: 20px;
}

.rail-nav a.on .badge { color: var(--rail-strong); background: var(--carbon-3); }

/* "next in line" — a screen a later phase brings. Dimmed, never hidden. */
.rail-nav a.soon { color: #5C6773; }
.rail-nav a.soon:hover { color: var(--rail-tx); }

.rail-foot { border-top: 1px solid var(--carbon-3); padding: 12px 14px; display: flex; align-items: center; gap: 10px; }

.rail-foot .avatar {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background: var(--violet);
    color: var(--on-acc);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rail-foot .nm { font-size: 13px; font-weight: 600; color: var(--rail-strong); }
.rail-foot .rl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--slate); }

/* ---------- TopBar.dc.html ---------- */

.appbar {
    height: 52px;
    flex: 0 0 52px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    gap: 12px;
    font-family: 'Public Sans', system-ui, sans-serif;
}

.appbar .crumb { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--slate-2); letter-spacing: .02em; }
.appbar .right { display: flex; align-items: center; gap: 10px; }

.appbar-search {
    width: 260px;
    height: 32px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card-2);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    text-decoration: none;
}

.appbar-search .g { color: var(--slate-2); font-size: 12px; }
.appbar-search .t { font-size: 12.5px; color: var(--slate-2); }
.appbar-search:hover { border-color: #CDD5DD; }

/* The three dots are the design switcher — the palette, shown as itself. */
.appbar-dots { display: flex; align-items: center; gap: 5px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 20px; }
.appbar-dots i { width: 13px; height: 13px; border-radius: 20px; display: block; }
.appbar-dots i:first-child { box-shadow: 0 0 0 2px var(--orange-w); }

.appbar-avatar {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    background: var(--violet);
    color: var(--on-acc);
    font-size: 11.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    flex-shrink: 0;
}

/* ---------- Plate.dc.html ---------- */

.plate {
    display: inline-flex;
    align-items: stretch;
    background: #FFFFFF;
    border: 2.5px solid #161A20;
    border-radius: 6px;
    overflow: hidden;
    height: 26px;
}

.plate .ind {
    background: #16456B;
    color: #FFFFFF;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 8px;
    letter-spacing: .04em;
    display: flex;
    align-items: center;
    padding: 0 4px;
}

.plate .no {
    color: #161A20;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .1em;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.plate.sm { height: 20px; }
.plate.sm .ind { font-size: 7px; padding: 0 3px; }
.plate.sm .no { font-size: 11px; letter-spacing: .08em; padding: 0 6px; }

.plate.lg { height: 44px; }
.plate.lg .ind { font-size: 10px; padding: 0 6px; }
.plate.lg .no { font-size: 22px; letter-spacing: .12em; padding: 0 14px; }

/* ---------- Pill.dc.html ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    font-family: 'Public Sans', system-ui, sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    white-space: nowrap;
    background: var(--line-2);
    color: var(--slate);
}

.pill:before { content: none; }

.pill.teal   { color: var(--teal); background: var(--teal-w); }
.pill.amber  { color: var(--amber); background: var(--amber-w); }
.pill.green  { color: var(--green); background: var(--green-w); }
.pill.violet { color: var(--violet); background: var(--violet-w); }
.pill.red    { color: var(--red); background: #FBE9E6; }
.pill.orange { color: var(--orange-d); background: var(--orange-w); }
.pill.slate  { color: var(--slate); background: var(--line-2); }
.pill.dark   { color: var(--on-acc); background: var(--ink); }

/* ---------- Stat.dc.html ---------- */

.stat {
    flex: 1;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 19, 24, .05);
    padding: 14px 16px;
}

.stat .chip {
    position: static;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    background: var(--line-2);
    color: var(--slate);
}

.stat .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--slate); }

.stat .v {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 26px;
    color: var(--ink);
    margin-top: 5px;
    letter-spacing: -.01em;
    line-height: 1.1;
}

.stat .n { font-size: 12px; color: var(--slate-2); margin-top: 4px; }

.stat.ink    .v { color: var(--ink); } .stat.ink    .chip { background: var(--line-2); color: var(--slate); }
.stat.amber  .v { color: var(--amber); } .stat.amber  .chip { background: var(--amber-w); color: var(--amber); }
.stat.green  .v { color: var(--green); } .stat.green  .chip { background: var(--green-w); color: var(--green); }
.stat.teal   .v { color: var(--teal); } .stat.teal   .chip { background: var(--teal-w); color: var(--teal); }
.stat.violet .v { color: var(--violet); } .stat.violet .chip { background: var(--violet-w); color: var(--violet); }
.stat.orange .v { color: var(--orange-d); } .stat.orange .chip { background: var(--orange-w); color: var(--orange-d); }
.stat.slate  .v { color: var(--slate-2); } .stat.slate  .chip { background: var(--line-2); color: var(--slate-2); }

/* ---------- page furniture, from the app file ---------- */

.shell { min-height: 100vh; display: flex; align-items: stretch; background: var(--paper); }
.shell > .rail { position: sticky; top: 0; height: 100vh; }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.shell-main > .appbar { position: sticky; top: 0; z-index: 4; }
.content { flex: 1; padding: 24px 28px; max-width: none; width: auto; }

.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.phead .eyebrow { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 700; color: var(--slate); margin-bottom: 0; }

.phead h1 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-top: 5px;
    text-transform: none;
}

.phead .sub { font-size: 14px; color: var(--slate); margin-top: 3px; }

.btn {
    background: var(--card);
    color: var(--ink);
    border: 1px solid var(--line);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: none;
}

.btn.pri { background: var(--orange); color: var(--on-acc); border-color: var(--orange); }
.btn.pri:hover { background: var(--orange-d); border-color: var(--orange-d); }
.btn.sm { font-size: 12.5px; padding: 5px 10px; }

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 19, 24, .05);
    overflow: hidden;
}

.card .hd { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.card .hd h3 { font-size: 15px; font-weight: 600; color: var(--ink); font-family: 'Public Sans', system-ui, sans-serif; letter-spacing: 0; text-transform: none; }

/* The design lays its tables out on a grid rather than a <table>, so the columns line up across
   the header rule and every row keeps its own alignment. */
.rows { display: grid; }
.rows .rh, .rows .rr { display: grid; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line-2); align-items: center; }
.rows .rh { padding: 9px 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--slate); }
.rows .rr { font-size: 14px; color: var(--ink); }
.rows .rr:last-child { border-bottom: 0; }
.rows .rr:hover { background: var(--card-2); }
.rows a.rr { text-decoration: none; }
.rows .mono { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.rows .dim { color: var(--slate); }
.rows .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows .r { text-align: right; }

/* Rows the counter types into — `.rows.edit`.
   A text input's default width is about 177px, and a grid item will not shrink below its content,
   so a 90px column silently becomes 177px: the input spills across its neighbours and the row stops
   lining up with the header above it. Both halves are needed — the cell has to be allowed to
   shrink, and the input has to be told to fill what is left. Opt-in via the modifier, because the
   read-only rows everywhere else are laid out correctly already. */
.rows.edit .rr > div { min-width: 0; }
.rows.edit .rr input:not([type=checkbox]):not([type=radio]) {
    width: 100%;
    font: inherit;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: var(--r3);
    background: var(--card);
    color: var(--ink);
}
.rows.edit .rr input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-w); }
.rows.edit .rr .r input { text-align: right; }

/* The batch panel's toolbar under an expanded part.
   Two groups, not one run: what you can do to the part on the left, the physical count on the
   right. Run together, the count boxes sat among the buttons and read as though they belonged to
   whichever button happened to be nearest — and the boxes themselves were browser defaults, so
   they did not look like anything else on the screen. */
.lotbar {
    display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.lotbar-acts, .lotbar-count { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lotbar-lb { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); font-weight: 700; }
.lotbar-count input {
    font: inherit; padding: 7px 9px; border: 1px solid var(--line);
    border-radius: var(--r3); background: var(--card); color: var(--ink);
}
.lotbar-count input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-w); }
.lotbar-count input.qty { width: 88px; text-align: right; }
.lotbar-count input.why { width: 232px; }

/* Per-batch actions, and the correction form a batch opens into. */
.lotacts { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.lotedit { background: #FFF7F4; }
.lotform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lotform input {
    font: inherit; padding: 7px 9px; border: 1px solid var(--line);
    border-radius: var(--r3); background: var(--card); color: var(--ink);
}
.lotform input:focus { outline: 0; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-w); }
.lotform input.qty { width: 96px; text-align: right; }
.lotform input.why { flex: 1; min-width: 160px; }

/* A phone gets one column: side by side, the count form would push the buttons off the edge. */
@media (max-width: 767px) {
    .lotbar { flex-direction: column; align-items: stretch; }
    .lotbar-count input.why { flex: 1; width: auto; min-width: 140px; }
    .lotacts { justify-content: flex-start; }
}

.grid-3 { display: flex; gap: 16px; align-items: flex-start; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.col-side { width: 388px; flex: 0 0 388px; display: flex; flex-direction: column; gap: 16px; }
.stats { display: flex; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }

/* pEmpty — the design's own answer for a screen a later phase brings. */
.empty {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(16, 19, 24, .05);
    padding: 56px 20px;
    text-align: center;
}

.empty .ico {
    width: 44px;
    height: 44px;
    border-radius: 9px;
    background: var(--orange-w);
    color: var(--orange-d);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.empty h3 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
    font-size: 19px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 5px;
    text-transform: none;
}

.empty p { font-size: 13.5px; color: var(--slate); margin: 5px 0 14px; }

.attention { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); background: var(--amber-w); }

.attention .g {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 9px;
    background: var(--card);
    color: var(--amber);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.attention .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.attention .s { font-size: 12px; color: var(--amber); margin-top: 2px; }

@media (max-width: 1080px) {
    .shell { display: block; }
    .shell > .rail { position: static; height: auto; width: 100%; flex: none; }
    .rail-nav { display: flex; flex-wrap: wrap; gap: 4px; }
    .rail-nav .set { margin: 0; }
    .rail-nav .grp { display: none; }
    .grid-3 { flex-direction: column; }
    .col-side { width: 100%; flex: none; }
}

/* The design picker folded behind the three dots, so the bar stays as drawn. */
.design-menu { position: relative; }
.design-menu > summary { list-style: none; cursor: pointer; }
.design-menu > summary::-webkit-details-marker { display: none; }

.design-menu .themepick {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(16, 19, 24, .12);
    padding: 10px;
    margin: 0;
}

/* The intake screen: a matrix of checkboxes, so the checkbox itself has to read as one. */
.hide { display: none !important; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.check input[type="checkbox"] { width: auto; accent-color: var(--orange); margin: 0; }
.check input[type="number"] { padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--line); border-radius: 8px; }

/* ------------------------------------------------------- attendance calendar */
/* A month is up to 31 columns wide, so the cells are small and the colour does
   the reading. The letter inside is for anyone who cannot rely on the colour. */
.att { border-collapse: collapse; font-size: 11.5px; width: 100%; }
.att th, .att td {
  border: 1px solid var(--line-2); text-align: center; padding: 4px 0;
  min-width: 24px; color: var(--slate); font-weight: 600;
}
.att thead th { background: var(--card-2); font-size: 10.5px; letter-spacing: .04em; }
.att td.att-name, .att th.att-name {
  text-align: left; padding: 7px 12px; min-width: 190px; color: var(--ink); font-weight: 400;
}
.att .att-sum { min-width: 64px; padding: 4px 10px; text-align: right; }
.att tbody tr:hover td { background: var(--card-2); }

.att .att-full  { background: #FDE7E1; color: #A32C12; }
.att .att-half  { background: #FEF1DC; color: #8A5A08; }
.att .att-hours { background: #FEF7E6; color: #8A5A08; }
.att .att-paid  { background: #E4F5EC; color: var(--green); }
.att .att-work  { background: #E9F1FB; color: #16456B; }

.att-key {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  vertical-align: -1px; margin-right: 4px; border: 1px solid rgba(0,0,0,.06);
}
.att-key.att-full  { background: #FDE7E1; }
.att-key.att-half  { background: #FEF1DC; }
.att-key.att-hours { background: #FEF7E6; }
.att-key.att-paid  { background: #E4F5EC; }
.att-key.att-work  { background: #E9F1FB; }

/* The payroll preview opens a row rather than a page — the basis belongs beside
   the figure it explains, not one click away from it. */
.rows details.rr > summary::-webkit-details-marker { display: none; }
.rows details.rr[open] > summary { border-bottom: 1px solid var(--line-2); }
.rows details.rr > summary:hover { background: var(--card-2); }

/* ------------------------------------------------------------- the palette */
.appbar-kbd {
  margin-left: 10px; font: 600 10.5px/1 var(--mono, ui-monospace, monospace);
  color: var(--slate-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 5px; background: var(--card);
}
button.appbar-search { cursor: pointer; font: inherit; text-align: left; }

.find {
  position: fixed; inset: 0; z-index: 90; background: rgba(16, 19, 24, .48);
  display: grid; place-items: start center; padding: 12vh 20px 20px; backdrop-filter: blur(2px);
}
.find[hidden] { display: none; }

.find-box {
  width: min(680px, 100%); background: var(--card); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(16, 19, 24, .28); border: 1px solid var(--line);
}
.find-in { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.find-in span { color: var(--slate-2); font-size: 17px; }
.find-in input { flex: 1; border: 0; outline: 0; font-size: 15.5px; background: none; color: var(--ink); }
.find-in kbd {
  font: 600 10.5px/1 var(--mono, ui-monospace, monospace); color: var(--slate-2);
  border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px;
}

.find-out { max-height: 56vh; overflow-y: auto; padding: 6px 0 8px; }
.find-hint { padding: 22px 18px; color: var(--slate-2); font-size: 13px; text-align: center; }
.find-g {
  padding: 9px 16px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--slate-2);
}
.find-r {
  display: flex; align-items: baseline; gap: 10px; padding: 8px 16px;
  text-decoration: none; color: var(--ink); font-size: 13.5px;
}
.find-r.on { background: var(--orange-w); }
.find-r .find-t { font-weight: 600; }
.find-r .find-s { color: var(--slate); font-size: 12.5px; flex: 1; min-width: 0; }
.find-r .find-b {
  margin-left: auto; font: 600 11px/1 var(--mono, ui-monospace, monospace);
  color: #16456B; background: #E9F1FB; border-radius: 999px; padding: 4px 8px; white-space: nowrap;
}

/* --------------------------------------------------------------- bar chart */
/* Six bars and a peak. A chart library for this would be more code than the chart. */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 168px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar {
  width: 100%; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #F4703F, var(--orange));
  min-height: 2px; transition: filter .12s ease;
}
.bar-col:hover .bar { filter: brightness(1.08); }
.bar-v { font: 600 11px/1 var(--mono, ui-monospace, monospace); color: var(--slate); margin-bottom: 6px; }
.bar-k { font-size: 11px; color: var(--slate-2); margin-top: 7px; font-weight: 600; }

/* A share of a whole, as a line rather than a pie. */
.meter { height: 7px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 999px; background: var(--orange); }

/* ------------------------------------------------------------------ a number asked for on a row

   Two bare boxes at the end of a part row said nothing about themselves: which was the quantity and
   which the rate was a guess from their widths, and a row reading "1" and "250" could as easily be
   a rate of 1 and 250 of them. So each box was captioned.

   Captioning each box was the wrong half of the answer. These are columns, and a column is titled
   once: with the caption on every row, four parts meant QTY and RATE said four times each, and the
   list read as eight labelled fields rather than four rows of two numbers. It is what a table does
   — the head says it, the body counts — and the rows come out shorter for it.

   The widths are stated once for both the head and the cell, because a head that does not sit over
   its column is worse than no head at all. */

.p-head{display:flex;gap:9px;align-items:center;padding:0 10px 5px}
.numcap{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--slate-2);line-height:1}

.numcell{flex:none}
.numcell input{width:100%;padding:5px 7px}

/* The row's own 1px border and 9px padding, so the caption lands over the box and not beside it. */
.numcell.qty,.numcap.qty{width:66px}
.numcell.rate,.numcap.rate{width:98px}