/* The page kit: the pieces every V4 page is built from.

   One shape everywhere — a title and one sentence, tabs, tiles that are also
   the filter, one table whose rows carry their next step — so a person who has
   learnt one page has learnt them all. Colours come from the tokens in
   base.html; each has one job:
     teal        where you are, what you can press
     leaf green  it is going well (a fill; never text)
     orange-red  needs you — nothing else
     amber       watch it
*/

/* ── Buttons: one teal per page, everything else the soft pill ───────── */
.k-btn, .k-btn-soft{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:999px; border:0;
  font:inherit; font-size:15.5px; font-weight:700; line-height:1; white-space:nowrap;
  text-decoration:none; cursor:pointer; box-sizing:border-box;
  transition:background-color .12s ease, box-shadow .12s ease;
}
.k-btn{background:var(--accent); color:#fff}
.k-btn:hover{background:#12545a}
.k-btn-soft{background:var(--pill); color:var(--ink); padding:0 20px}
.k-btn-soft:hover{background:#d5e3de}
.k-btn--sm, .k-btn-soft.k-btn--sm{height:38px; padding:0 16px; font-size:14.5px}
.k-btn--md, .k-btn-soft.k-btn--md{height:42px; padding:0 18px; font-size:14.5px}
.k-btn--wide{width:100%; height:52px; font-size:16.5px}
.k-btn .ms, .k-btn-soft .ms{font-size:19px}
.k-btn[disabled], .k-btn-soft[disabled]{opacity:.55; cursor:not-allowed}
.k-link{display:inline-flex; align-items:center; gap:3px; font-weight:700; font-size:14.5px; color:var(--act-text); text-decoration:none; white-space:nowrap}
.k-link:hover{text-decoration:underline}
.k-link-u{font-weight:700; color:var(--act-text); text-decoration:underline; text-underline-offset:2px}
/* The same link, when the action has to be a POST (archive, put back). */
button.k-link-u{background:none; border:0; padding:0; cursor:pointer; font-family:inherit; font-size:14.5px}

/* ── Tiles: a count that explains itself, and is the filter ─────────── */
.k-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px}
/* A row of two or three: they read as figures, not as banners. */
/* Filter chips under the tiles (one per machine on Spares): they wrap here and swipe on a phone. */
.k-chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
.k-chips > a{white-space:nowrap}
.k-tiles--few{grid-template-columns:repeat(auto-fit, minmax(190px, 260px))}
/* A row of seven (Orders: six stages and Done today) keeps to one line on a laptop. */
.k-tiles--seven{grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))}
.k-tiles--five{grid-template-columns:repeat(auto-fit, minmax(170px, 1fr))}
.k-tile{
  display:block; min-width:0; padding:17px 20px 15px; border-radius:16px; box-sizing:border-box;
  background:var(--card); border:1px solid var(--line); color:var(--ink); text-decoration:none; text-align:left;
  transition:border-color .12s ease, box-shadow .12s ease;
}
a.k-tile:hover{border-color:#b9cbc4}
.k-tile__label{display:block; font-size:14.5px; color:var(--ink-2)}
.k-tile__num{display:block; margin:4px 0 3px; font-size:24px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.2}
.k-tile__sub{display:block; font-size:13.5px; color:var(--ink-2)}
.k-tile__link{display:block; font-size:13.5px; font-weight:700; color:var(--hot)}
.k-tile.is-selected{border:2px solid var(--act-text); padding:16px 19px 14px}
.k-tile.is-selected .k-tile__label{font-weight:600; color:var(--ink)}
.k-tile.is-hot{border:1.5px solid var(--hot)}
.k-tile.is-hot .k-tile__num{color:var(--hot)}
.k-tile.is-hot.is-selected{border-width:2px}
.k-tile.is-quiet .k-tile__num{color:var(--ink-3)}

/* ── A strip of joined figures (Today) ─────────────────────────────── */
.k-strip{display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.k-strip__cell{display:block; min-width:0; padding:17px 20px 15px; color:var(--ink); text-decoration:none; border-left:1px solid var(--line)}
.k-strip__cell:first-child{border-left:0}
a.k-strip__cell:hover{background:var(--head)}
.k-strip__label{display:block; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.k-strip__num{display:block; margin:6px 0 4px; font-size:25px; font-weight:800; letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.2}
.k-strip__sub{display:block; font-size:13.5px; color:var(--ink-2)}
.k-strip__sub.is-hot{color:var(--hot); font-weight:600}
.k-strip__spark{display:block; height:22px; width:64px; margin-top:6px; color:var(--accent)}
.k-strip--5{grid-template-columns:repeat(5, minmax(0, 1fr))}
.k-strip__num.is-quiet{color:var(--ink-3); font-size:19px}
.k-headline-link{text-decoration:none}
.k-headline-link:hover{text-decoration:underline; text-underline-offset:4px}
.k-day__link{color:inherit; text-decoration:none}
.k-day__link:hover{text-decoration:underline; text-underline-offset:2px}
.k-people__cell{display:block; color:var(--ink); text-decoration:none}
.k-people__cell + .k-people__cell{border-left:1px solid var(--line-soft)}
a.k-people__cell:hover{background:var(--head)}
@media (max-width:1180px){ .k-strip{grid-template-columns:repeat(3, minmax(0,1fr))} .k-strip__cell:nth-child(4){border-left:0} .k-strip__cell:nth-child(n+4){border-top:1px solid var(--line)} }
@media (max-width:639px){ .k-strip{grid-template-columns:repeat(2, minmax(0,1fr))} .k-strip__cell{border-left:0; border-top:1px solid var(--line)} .k-strip__cell:nth-child(-n+2){border-top:0} .k-strip__cell:nth-child(even){border-left:1px solid var(--line)} }
@media (max-width:639px){ .k-strip--5 .k-strip__cell:last-child{grid-column:1 / -1} }

/* ── The line under the tiles: search on the left, how it is sorted on the right ── */
.k-toolbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; margin:18px 0 14px}
.k-toolbar__note{font-size:14px; color:var(--ink-2)}
.k-toolbar__right{display:flex; align-items:center; gap:16px}
.k-search{
  width:min(360px, 100%); height:44px; padding:0 16px 0 42px; border-radius:12px; box-sizing:border-box;
  border:1px solid #c7d5d0; background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235F7274' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 14px center;
  font:inherit; font-size:15px; color:var(--ink);
}
.k-search:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}

/* ── Boxes, section heads ─────────────────────────────────────────── */
.k-box{background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden}
.k-box--pad{padding:18px 20px}
.k-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 12px}
.k-head h2{margin:0; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.k-head__note{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.k-cap{font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:0 0 10px}
.k-foot-note{margin:12px 2px 0; font-size:14px; color:var(--ink-2)}
.k-gap{height:26px}

/* ── The table: rows carry their next step ────────────────────────── */
.k-table-wrap{overflow-x:auto}
.k-table{width:100%; border-collapse:collapse; font-size:15px}
.k-table thead th{
  height:44px; padding:0 18px; background:var(--head) !important; text-align:left; white-space:nowrap;
  font-family:inherit !important; font-size:14px !important; font-weight:500 !important; letter-spacing:0 !important;
  text-transform:none !important; color:var(--ink-2) !important;
}
.k-table td{padding:12px 18px; border-top:1px solid var(--line-soft); vertical-align:middle}
.k-table tbody tr:first-child td{border-top:0}
.k-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.k-table .act{text-align:right; white-space:nowrap; width:1%}
.k-table tr.is-row-link{cursor:pointer}
.k-table tr.is-row-link:hover td{background:#f8fbf9}
.k-table tr.is-open td{background:var(--accent-soft)}
.k-main{display:block; font-size:15.5px; font-weight:700; color:var(--ink); text-decoration:none}
a.k-main:hover{text-decoration:underline}
.k-sub{display:block; font-size:13.5px; color:var(--ink-2)}
.k-late{display:block; font-size:13.5px; color:var(--hot); font-weight:600}
.k-strong{font-weight:700}
.k-hot-text{color:var(--hot) !important}
.k-muted{color:var(--ink-2)}
.k-empty{padding:40px 20px; text-align:center}
.k-empty__title{font-size:16px; font-weight:800; color:var(--ink)}
.k-empty__why{margin:4px auto 0; max-width:440px; font-size:14px; color:var(--ink-2)}

/* ── Chips: a state, in words, with a dot ─────────────────────────── */
.k-chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:999px; font-size:12.5px; font-weight:700; white-space:nowrap; background:var(--line-soft); color:var(--ink-2); box-sizing:border-box}
.k-chip::before{content:""; width:6px; height:6px; border-radius:999px; background:#7c8f8c; flex-shrink:0}
.k-chip--green{background:var(--greenbg); color:var(--green)}
.k-chip--green::before{background:var(--good)}
.k-chip--amber{background:var(--amberbg); color:var(--amber)}
.k-chip--amber::before{background:#b7791f}
.k-chip--hot{background:var(--hot-soft); color:var(--hot)}
.k-chip--hot::before{background:var(--hot)}
.k-chip--blue{background:var(--accent-soft); color:var(--act-text)}
.k-chip--blue::before{background:var(--act-text)}
/* A state with its notes under it, in a cell that also holds the row's button. */
.k-stack{display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; flex:1 1 auto}
.k-stack .k-chip{max-width:100%; height:auto; min-height:24px; padding-top:3px; padding-bottom:3px; white-space:normal; line-height:1.3}

/* ── Progress meter ───────────────────────────────────────────────── */
.k-meter{height:7px; border-radius:999px; background:var(--line-soft); overflow:hidden}
.k-meter > span{display:block; height:100%; border-radius:999px; background:var(--accent)}
.k-meter.is-amber > span{background:var(--amber-bar)}
.k-meter.is-hot > span{background:var(--hot)}

/* ── Notices: something to finish, with the button that finishes it ─ */
.k-notice{display:flex; align-items:center; gap:16px; padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px}
.k-notice__icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; flex-shrink:0; border-radius:999px; background:var(--amberbg); color:var(--amber)}
.k-notice__icon .ms{font-size:20px}
.k-notice__icon.is-hot{background:var(--hot-soft); color:var(--hot)}
.k-notice__body{flex-grow:1; min-width:0}
.k-notice__title{font-size:16px; font-weight:700; color:var(--ink)}
.k-notice__why{font-size:14px; color:var(--ink-2)}
.k-notices{display:flex; flex-direction:column; gap:10px}
@media (max-width:639px){ .k-notice{flex-wrap:wrap} .k-notice > .k-btn-soft, .k-notice > .k-btn{margin-left:52px} }

/* ── Needs you: one card per decision ─────────────────────────────── */
.k-need{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px}
.k-need__tag{display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--pill); font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.k-need__title{margin-top:9px; font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink)}
.k-need__why{margin-top:2px; font-size:14px; color:var(--ink-2)}
.k-need.is-lapsed{border-color:#efc3b3}
.k-need.is-lapsed .k-need__tag{background:var(--hot-soft); color:var(--hot)}
@media (max-width:639px){ .k-need{flex-direction:column; align-items:flex-start} }
/* Approvals: what decides a card, under its title (money rehearsal, 24 Oct 2026). */
.k-need--decide{align-items:flex-start}
.k-need__facts{margin:8px 0 6px; padding:0; list-style:none; display:grid; gap:4px; font-size:14px; color:var(--ink)}
.k-need__facts li{padding-left:14px; position:relative; overflow-wrap:anywhere}
.k-need__facts li::before{content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--ink-3)}
.k-need__facts li.is-warn{color:var(--hot); font-weight:600}
.k-need__facts li.is-warn::before{background:var(--hot)}
.k-need__photo{display:block; margin-top:6px; width:max-content; max-width:100%}
.k-need__photo img{display:block; max-width:min(240px,100%); max-height:160px; border:1px solid var(--line); border-radius:10px; object-fit:cover}

/* ── Stepper: where a record is in its life ───────────────────────── */
.k-steps{position:relative; display:grid; grid-template-columns:repeat(var(--n, 6), minmax(0, 1fr))}
.k-steps::before{content:""; position:absolute; top:13px; left:calc(50% / var(--n, 6)); right:calc(50% / var(--n, 6)); height:2px; background:#d2deda}
.k-steps__fill{position:absolute; top:13px; left:calc(50% / var(--n, 6)); height:2px; background:var(--accent)}
.k-step{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 4px}
.k-step__dot{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:999px; box-sizing:border-box; background:var(--card); color:var(--ink-3); border:2px solid #d2deda; font-size:13px; font-weight:800}
.k-step__dot .ms{font-size:16px; font-variation-settings:'wght' 600}
.k-step.is-done .k-step__dot{background:var(--accent); border-color:var(--accent); color:#fff}
.k-step.is-now .k-step__dot{border:2.5px solid var(--act-text); color:var(--act-text)}
.k-step.is-late .k-step__dot{border:2.5px solid var(--hot); color:var(--hot)}
.k-step__name{margin-top:7px; font-size:14px; font-weight:500; color:var(--ink-3)}
.k-step.is-done .k-step__name, .k-step.is-now .k-step__name, .k-step.is-late .k-step__name{font-weight:700; color:var(--ink)}
.k-step__sub{min-height:18px; font-size:13px; color:var(--ink-2)}
.k-step.is-late .k-step__sub{color:var(--hot)}
/* A batch's stations can be six or seven steps: on a phone the names shrink and wrap rather than run together. */
@media (max-width:639px){ .k-step{padding:0 1px} .k-step__name{font-size:12px; line-height:1.25; overflow-wrap:anywhere} .k-step__sub{font-size:11.5px; overflow-wrap:anywhere} }

/* ── The check that answers "can it go?" ──────────────────────────── */
.k-check{display:flex; gap:12px; padding:15px 17px; border-radius:16px; background:var(--greenbg)}
.k-check__icon{display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0; border-radius:999px; background:var(--good); color:var(--on-good)}
.k-check__icon .ms{font-size:16px; font-variation-settings:'wght' 700}
.k-check__title{font-size:16px; font-weight:700; color:#2c4d08}
.k-check__why{margin-top:2px; font-size:14px; color:#3f6b0c}
.k-check__why a{color:inherit; font-weight:700; text-decoration:underline}
.k-check.is-amber{background:var(--amberbg)}
.k-check.is-amber .k-check__icon{background:#f3dfae; color:var(--amber)}
.k-check.is-amber .k-check__title{color:#4f3500}
.k-check.is-amber .k-check__why{color:#6b4a06}
.k-check.is-hot{background:var(--hot-soft)}
.k-check.is-hot .k-check__icon{background:var(--hot); color:#fff}
.k-check.is-hot .k-check__title{color:#7a2a10}
.k-check.is-hot .k-check__why{color:#8f3a1c}

/* ── Next step: the one thing to do, and the other things you might ─ */
.k-next{padding:18px; border-radius:16px; background:var(--bg); border:1px solid var(--line)}
.k-next__why{margin:9px 2px 12px; font-size:14px; color:var(--ink-2)}
.k-next__more{display:flex; flex-wrap:wrap; gap:8px}

/* ── Label/value rows ─────────────────────────────────────────────── */
.k-rows > .k-row{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; border-top:1px solid var(--line-soft)}
.k-rows > .k-row:first-child{border-top:0}
.k-row__label{font-size:14px; color:var(--ink-2)}
.k-row__value{font-size:15px; font-weight:700; text-align:right; color:var(--ink)}
.k-row__value a{color:inherit}
.k-rows--boxed > .k-row{padding:0 20px; min-height:46px}
.k-row__big{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums}

/* ── History with undo ────────────────────────────────────────────── */
.k-hist{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; border-top:1px solid var(--line-soft); font-size:14.5px}
.k-hist:first-child{border-top:0}
.k-hist__when{color:var(--ink-2); font-size:13.5px}
.k-undo{display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:700; color:var(--act-text); text-decoration:underline; background:none; border:0; padding:0; cursor:pointer; font-family:inherit}
.k-undo .ms{font-size:16px}

/* ── The side sheet: a record opens beside the list ───────────────── */
.k-scrim{position:fixed; inset:0; z-index:60; background:rgba(8,32,34,.38)}
.k-sheet{
  position:fixed; top:0; right:0; bottom:0; z-index:61; width:min(600px, 100vw); overflow-y:auto;
  display:flex; flex-direction:column; gap:18px; padding:24px 30px 26px; box-sizing:border-box;
  background:var(--card); border-radius:28px 0 0 28px; box-shadow:-24px 0 70px rgba(8,32,34,.28);
}
.k-sheet__top{display:flex; align-items:center; justify-content:space-between}
.k-sheet__kicker{font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.k-sheet__close{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:999px; border:0; background:var(--pill); color:var(--ink); cursor:pointer}
.k-sheet h2{margin:0; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--ink)}
.k-sheet__meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:6px; font-size:15.5px; color:var(--ink-2)}
.k-sheet__correct{display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; font-size:14.5px; font-weight:700; color:var(--act-text); text-decoration:underline}
@media (max-width:639px){ .k-sheet{border-radius:0; padding:18px 18px 22px} .k-sheet h2{font-size:25px} }
/* The same record as a page of its own: no scrim, sat in the content column. */
.k-record{display:flex; flex-direction:column; gap:18px; max-width:640px}

/* ── Make: one card per line ──────────────────────────────────────── */
.k-lines{display:grid; grid-template-columns:repeat(auto-fit, minmax(440px, 1fr)); gap:14px}
@media (max-width:639px){ .k-lines{grid-template-columns:1fr} }
.k-line{padding:18px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px; min-width:0}
.k-line__top{display:flex; align-items:flex-start; justify-content:space-between; gap:12px}
.k-line__name{font-size:18px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.k-line__meta{font-size:13.5px; color:var(--ink-2)}
.k-stations{display:flex; align-items:stretch; gap:6px; margin:14px 0}
.k-stations__arrow{display:inline-flex; align-self:center; color:#c3d1cc}
.k-stations__arrow .ms{font-size:16px}
.k-station{flex:1 1 0; min-width:0; padding:11px 13px; border-radius:12px; background:var(--bg); border:1px solid var(--line)}
.k-station__name{font-size:13.5px; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.k-station__num{font-size:16.5px; font-weight:800; font-variant-numeric:tabular-nums; color:var(--ink)}
.k-station__num small{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.k-station__state{font-size:13px; color:var(--ink-2)}
.k-station.is-running{border-color:#a9cfd1; background:#f1f8f8}
.k-station.is-waiting .k-station__num{color:var(--ink-3); font-weight:600; font-size:14.5px}
.k-station.is-issue{background:#fff8ec; border-color:#e6c98f}
.k-station .k-chip{margin-top:6px}
.k-line__bar{display:flex; justify-content:space-between; margin-bottom:7px; font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.k-line__bar strong{color:var(--ink)}
.k-line__foot{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; font-size:13.5px; color:var(--ink-2)}
@media (max-width:639px){ .k-stations{flex-direction:column} .k-stations__arrow{transform:rotate(90deg); align-self:center} }

/* ── Forms: plain questions, big fields, hints that answer back ───── */
.k-form-sect{padding:24px 26px 26px; border-top:1px solid var(--line-soft)}
.k-form-sect:first-child{border-top:0}
.k-form-sect h2{margin:0 0 16px; font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--ink)}
.k-label{display:block; margin-bottom:7px; font-size:14.5px; font-weight:700; color:var(--ink)}
.k-label .k-opt{font-weight:500; color:var(--ink-3)}
.k-field, .k-form select, .k-form input[type=text], .k-form input[type=number], .k-form input[type=date], .k-form input[type=tel], .k-form input[type=time], .k-form input[type=datetime-local], .k-form textarea{
  width:100%; height:48px; padding:0 14px; border-radius:12px; border:1px solid #c7d5d0; background:var(--card);
  font:inherit; font-size:16px; color:var(--ink); box-sizing:border-box;
}
.k-form textarea{height:auto; min-height:78px; padding:12px 14px; line-height:1.45; resize:vertical}
.k-field:focus, .k-form select:focus, .k-form input:focus, .k-form textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:transparent}
.k-field.num, .k-form input.num{text-align:right; font-variant-numeric:tabular-nums}
.k-hint{display:flex; align-items:flex-start; gap:7px; margin-top:8px; font-size:14px; color:var(--ink-2)}
.k-hint .ms{font-size:17px; margin-top:1px}
.k-hint.is-ok{color:var(--green)}
.k-hint.is-warn{color:var(--amber)}
.k-hint.is-hot{color:var(--hot)}
.k-error{margin-top:7px; font-size:14px; font-weight:600; color:var(--hot)}
/* Two questions side by side; one above the other on a phone. */
.k-pair{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); gap:16px}
@media (max-width:639px){ .k-pair{grid-template-columns:minmax(0, 1fr)} }
.k-picks{display:flex; flex-wrap:wrap; gap:8px}
.k-pick{height:46px; padding:0 18px; border-radius:999px; border:1px solid #c7d5d0; background:var(--card); color:var(--ink); font:inherit; font-size:15px; font-weight:700; cursor:pointer}
.k-pick[aria-pressed=true], .k-pick.is-on{background:var(--accent); color:#fff; border-color:var(--accent)}
.k-savebar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:20px 26px; border-top:1px solid var(--line-soft); background:var(--bg)}
.k-savebar__note{margin-left:auto; font-size:14px; color:var(--ink-2)}
.k-steplist > div{display:flex; gap:12px; padding:9px 20px; font-size:14.5px; color:var(--ink-2)}
.k-steplist b{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0; border-radius:999px; background:var(--pill); color:var(--ink); font-size:12.5px; font-weight:800}
.k-banner{display:flex; flex-wrap:wrap; align-items:center; gap:14px 16px; padding:16px 20px; border-radius:16px; background:var(--amberbg); border:1px solid #ead6a6}
.k-banner__icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:999px; background:#f3dfae; color:var(--amber); flex-shrink:0}
.k-banner__title{font-size:16px; font-weight:700; color:#4f3500}
.k-banner__why{font-size:14.5px; color:#6b4a06}
.k-banner__body{flex:1 1 320px; min-width:0}

/* ── Two-column page body ─────────────────────────────────────────── */
.k-cols{display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); gap:28px; align-items:start}
.k-cols--side{grid-template-columns:minmax(0, 1fr) 340px}
.k-cols--even{grid-template-columns:repeat(2, minmax(0, 1fr))}
.k-cols--trucks{grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr)}
@media (max-width:1100px){ .k-cols, .k-cols--side, .k-cols--even, .k-cols--trucks{grid-template-columns:minmax(0, 1fr)} }

/* ── The day, left to right (Today) ───────────────────────────────── */
.k-day{position:relative; margin-top:6px}
.k-day__grid{display:grid; grid-template-columns:repeat(var(--n, 5), minmax(0, 1fr))}
.k-day__cell{position:relative; min-width:0; padding:0 18px 16px}
.k-day__cell + .k-day__cell{border-left:1px solid var(--line-soft)}
.k-day__seg{display:block; height:4px; margin:0 -18px 14px; background:var(--line-soft)}
.k-day__cell.is-done .k-day__seg{background:var(--accent)}
.k-day__cell.is-missed .k-day__seg{background:var(--hot)}
.k-day__row{display:flex; align-items:flex-start; gap:10px}
.k-day__dot{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex-shrink:0; border-radius:999px; box-sizing:border-box; border:2px solid #c3d1cc}
.k-day__cell.is-next .k-day__dot{border-color:var(--act-text)}
.k-day__cell.is-done .k-day__dot{border:0; background:var(--good); color:var(--on-good)}
.k-day__cell.is-missed .k-day__dot{border:0; background:var(--hot); color:#fff; font-size:14px; font-weight:800}
.k-day__dot .ms{font-size:14px; font-variation-settings:'wght' 700}
.k-day__title{font-size:15.5px; font-weight:700; color:var(--ink)}
.k-day__sub{font-size:13.5px; color:var(--ink-2); font-variant-numeric:tabular-nums}
.k-day__cell.is-missed .k-day__title, .k-day__cell.is-missed .k-day__sub{color:var(--hot)}
.k-day__act{margin:10px 0 0 32px}
.k-day__now{position:absolute; top:-11px; transform:translateX(-50%); display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 10px; border-radius:999px; background:var(--accent); color:#fff; font-size:12px; font-weight:700; white-space:nowrap}
.k-day__now::before{content:""; width:6px; height:6px; border-radius:999px; background:var(--good)}
@media (max-width:900px){ .k-day__grid{grid-template-columns:1fr} .k-day__cell + .k-day__cell{border-left:0; border-top:1px solid var(--line-soft); padding-top:12px} .k-day__seg{display:none} .k-day__now{display:none} }

/* The owner's Today. On a desk: the day, the figures, then Needs you beside the
   lines and people. On a phone the headline promises "4 things need you", so what
   needs you comes straight after the day, and every part is drawn tighter: the
   page was 2,900 px with Needs you starting 1,600 px down. */
.k-today{display:grid; grid-template-columns:minmax(0, 1.55fr) minmax(0, 1fr); column-gap:28px; row-gap:14px; grid-template-areas:"day day" "money money" "figures figures" "main side"; align-items:start}
.k-today__moneyarea{grid-area:money; display:grid; gap:12px}
/* Cash & bank, account by account: the figure the owner opened Today for (25 Oct 2026). */
.k-cashbox{display:grid; gap:12px; padding:16px 20px; background:var(--card); border:1px solid var(--line); border-radius:16px; color:var(--ink); text-decoration:none}
.k-cashbox:hover{border-color:var(--accent)}
.k-cashbox__head{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px}
.k-cashbox__head .k-strip__label{flex-basis:100%}
.k-cashbox__head .k-strip__num{margin:0}
.k-cashbox__accounts{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px 16px; padding-top:10px; border-top:1px solid var(--line-soft)}
.k-cashbox__account{display:flex; justify-content:space-between; gap:10px; min-width:0; font-size:14px}
.k-cashbox__name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.k-cashbox__held{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.k-cashbox__held.is-hot{color:var(--hot)}
.k-cashbox__more{color:var(--ink-3)}
/* The jobs others have not done: one line, opened in place. */
.k-today__chores{margin-top:16px; padding:0; overflow:hidden}
.k-chores__line{display:flex; align-items:center; gap:14px; min-height:56px; padding:12px 18px; cursor:pointer; list-style:none}
.k-chores__line::-webkit-details-marker{display:none}
.k-chores__line > .ki{margin-left:auto; flex-shrink:0; color:var(--ink-3); transition:transform .15s}
.k-today__chores[open] .k-chores__line > .ki{transform:rotate(180deg)}
.k-chores__count{display:grid; place-items:center; flex-shrink:0; min-width:32px; height:32px; padding:0 8px; border-radius:999px; background:var(--amberbg); color:var(--amber); font-weight:800; font-variant-numeric:tabular-nums}
.k-today__chores .k-rows{border-top:1px solid var(--line-soft); padding:0 18px}
.k-today__day{grid-area:day}
.k-today__ready{margin-top:24px}
.k-ready__phone{display:none}
.k-ready__name{white-space:nowrap}
/* Each figure in cases, and under it the same stock in bottles (the owner, 3 Oct). */
.k-ready__bottles{display:block; margin-top:1px; font-size:12.5px; font-weight:400; color:var(--ink-2)}
.k-ready__total td{border-top:2px solid var(--line)}
.k-today__figures{grid-area:figures; min-width:0}
.k-today__main{grid-area:main; margin-top:14px}
.k-today__side{grid-area:side; margin-top:14px}
.k-today__money{margin-top:10px}
.k-today__gap{height:24px}
.k-today__cap{display:none}
.k-people__cell{padding:14px 18px}
.k-people__num{display:block; font-size:22px; font-weight:800}
/* One column (tablet and phone): what needs you straight after the day, the figures under their own captions. */
@media (max-width:1100px){
  .k-today{grid-template-columns:minmax(0, 1fr); grid-template-areas:"money" "ready" "needs" "chores" "day" "figures" "side"; row-gap:12px}
  /* The main column's parts take their own places: the money, then what is ready to sell, what needs you, the jobs others have not done, then the day. */
  .k-today__main{display:contents}
  .k-today__needs{grid-area:needs; margin-top:6px; min-width:0}
  .k-today__ready{grid-area:ready; margin-top:6px; min-width:0}
  .k-today__chores{grid-area:chores; margin-top:0; min-width:0}
  .k-today__day{margin-top:6px}
  .k-today__side{margin-top:6px}
  .k-today__cap{display:block; margin:6px 2px 8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
  .k-today__money{margin-top:0}
}
/* Three across, the money's fifth figure takes the last two places rather than leave one empty. */
@media (min-width:640px) and (max-width:1180px){ .k-strip--5 .k-strip__cell:last-child{grid-column:span 2} }
@media (max-width:639px){
  .k-headline{font-size:23px; line-height:1.2}
  .k-greet{display:block; margin-bottom:4px; font-size:15px; font-weight:600; letter-spacing:0; color:var(--ink-2)}
  .k-today__gap{height:18px}
  .k-today .k-day__cell{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 14px}
  .k-today .k-day__cell + .k-day__cell{padding-top:11px}
  .k-today .k-day__act{margin:0; flex-shrink:0}
  .k-today .k-day__title{font-size:15px}
  .k-today .k-day__sub{font-size:13px}
  .k-today .k-strip__cell{padding:12px 14px 11px}
  .k-today .k-strip__label{font-size:11px; letter-spacing:.08em}
  .k-today .k-strip__num{margin:4px 0 2px; font-size:19px; line-height:1.2}
  .k-today .k-strip__num.is-quiet{font-size:16px}
  .k-today .k-table--cards .k-ready__phone{display:inline; color:var(--ink-2)}
  .k-today .k-table--cards td.num[data-card=line]{text-align:left; font-size:13.5px}
  .k-today .k-table--cards td[data-card=line] .k-ready__bottles{display:inline; font-size:inherit}
  .k-today .k-table--cards td[data-card=line] .k-ready__bottles::before{content:" · "}
  .k-today .k-table--cards tr.k-ready__total{border-top:2px solid var(--line)}
  /* With no order waiting, what is in the store is what is left: said once, on the right. */
  .k-today .k-table--cards td.k-ready__same{display:none}
  .k-cashbox{padding:14px 16px}
  .k-cashbox__accounts{grid-template-columns:minmax(0, 1fr)}
  .k-today .k-strip__sub{font-size:12.5px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .k-today .k-need{gap:10px; padding:14px 16px}
  .k-today .k-need__title{margin-top:6px; font-size:16px}
  .k-today .k-need__why{font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
  .k-today .k-need > .k-btn, .k-today .k-need > .k-btn-soft{height:40px; padding:0 16px; font-size:14.5px}
  .k-today .k-notices{gap:10px}
  .k-today .k-head{margin-bottom:8px}
  .k-today .k-head h2{font-size:17px}
  .k-people__cell{padding:12px 14px}
  .k-people__num{font-size:20px}
}

/* ── Checklist (a desk's Today) ───────────────────────────────────── */
.k-task{display:grid; grid-template-columns:26px minmax(0, 1fr) auto; gap:14px; align-items:center; min-height:68px; padding:8px 20px; border-top:1px solid var(--line-soft)}
.k-task:first-child{border-top:0}
.k-task__box{width:24px; height:24px; border-radius:999px; border:2px solid #c3d1cc; box-sizing:border-box}
.k-task.is-done .k-task__box{border:0; background:var(--good); color:var(--on-good); display:inline-flex; align-items:center; justify-content:center}
.k-task__box .ms{font-size:15px; font-variation-settings:'wght' 700}
.k-task__title{font-size:16.5px; font-weight:700; color:var(--ink)}
.k-task.is-done .k-task__title{color:var(--ink-3); text-decoration:line-through}
.k-task__why{font-size:14px; color:var(--ink-2)}
@media (max-width:639px){ .k-task{grid-template-columns:26px minmax(0,1fr)} .k-task > :last-child{grid-column:2} }

/* Money ▸ Today (10 Oct 2026): where the money stands across the top, then the
   day's calls — a row each, ending in a payment or a date — and what was
   entered today, read as figures and not struck through. */
.k-money{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px}
.k-money .k-tile{display:flex; flex-direction:column; gap:4px}
.k-money .k-tile__num{margin:2px 0; font-size:28px}
.k-money .k-chip{align-self:flex-start; margin-top:2px}
.k-money__line{font-size:14.5px; font-weight:600; color:var(--ink)}
.k-money__door{font-size:14.5px; font-weight:700; color:var(--act-text); text-decoration:underline; text-underline-offset:2px}
@media (max-width:639px){
  .k-money{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
  .k-money .k-tile{padding:14px 15px 12px}
  .k-money .k-tile__num{font-size:20px}
  .k-money__line, .k-money__door{font-size:13.5px}
}
.k-call{display:grid; grid-template-columns:26px minmax(0, 1fr) auto auto; gap:6px 16px; align-items:center; min-height:72px; padding:12px 20px; border-top:1px solid var(--line-soft)}
.k-call:first-child{border-top:0}
.k-call__name{font-size:16.5px; font-weight:800; color:var(--ink)}
.k-call__name a{color:inherit; text-decoration:none}
.k-call__name a:hover{text-decoration:underline}
.k-call__why{font-size:14px; color:var(--ink-2)}
.k-call__why a{color:var(--act-text); white-space:nowrap}
.k-call__nophone{font-weight:700; color:var(--amber); white-space:nowrap}
.k-call__owes{font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
.k-call__owes .k-sub{font-size:12.5px; font-weight:500}
.k-call__do{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}
.k-call.is-done .k-task__box{border:0; background:var(--good); color:var(--on-good); display:inline-flex; align-items:center; justify-content:center}
.k-call.is-done .k-call__owes{grid-column:3 / -1; color:var(--ink-2); font-size:16px; font-weight:700}
.k-call__ask{grid-column:2 / -1; display:grid; grid-template-columns:minmax(150px, 190px) minmax(120px, 160px) minmax(0, 1fr) auto; gap:12px; align-items:end; padding:10px 0 6px}
.k-call__rest{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 18px; padding:14px 20px; border-top:1px solid var(--line); background:var(--bg); font-size:14.5px; color:var(--ink-2)}
.k-call__rest > div{flex:1 1 320px; min-width:0}
@media (max-width:899px){
  .k-call{grid-template-columns:26px minmax(0, 1fr) auto}
  .k-call__do{grid-column:2 / -1; justify-content:flex-start}
  .k-call.is-done .k-call__owes{grid-column:3}
  .k-call__ask{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
  .k-call__said{grid-column:1 / -1}
  .k-call__ask > button{justify-self:start}
}
@media (max-width:639px){
  .k-call{padding:12px 16px}
  .k-call__do, .k-call__ask{grid-column:1 / -1}
}
.k-dayline{display:flex; align-items:center; gap:14px; min-height:60px; padding:8px 20px; border-top:1px solid var(--line-soft); color:var(--ink); text-decoration:none}
.k-dayline:first-child{border-top:0}
a.k-dayline:hover{background:var(--line-soft)}
.k-dayline > .min-w-0{flex:1 1 auto}
.k-dayline__tick{flex:0 0 24px; height:24px; border-radius:999px; background:var(--good); color:var(--on-good); display:inline-flex; align-items:center; justify-content:center}
.k-dayline__title{display:block; font-size:15.5px; font-weight:700}
.k-dayline__amount{font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; white-space:nowrap}
.k-dayline__none{margin:0; padding:16px 20px; font-size:14.5px; color:var(--ink-2)}

/* ── Strength switch (Rules) ──────────────────────────────────────── */
.k-seg{display:inline-flex; padding:3px; border-radius:999px; background:var(--pill)}
.k-seg button{height:34px; padding:0 14px; border-radius:999px; border:0; background:transparent; font:inherit; font-size:14px; font-weight:700; color:var(--ink-2); cursor:pointer}
.k-seg button[aria-pressed=true]{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(8,32,34,.16)}
.k-seg button[aria-pressed=true].is-warn{color:var(--amber)}
.k-seg__item{display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--ink-2); text-decoration:none}
.k-seg__item.is-on{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(8,32,34,.16)}
.k-seg a{display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px; font-size:14px; font-weight:700; color:var(--ink-2); text-decoration:none}
.k-seg a[aria-current=page]{background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(8,32,34,.16)}
.k-seg button[aria-pressed=true].is-block{color:var(--hot)}
.k-callout{padding:16px 20px; border-radius:16px; background:var(--accent-soft); color:#0f4448; font-size:15px}
.k-callout strong{color:var(--ink)}

/* ── Dark theme ───────────────────────────────────────────────────── */
html.theme-dark .k-btn-soft:hover{background:#2a3a3a}
html.theme-dark .k-table tr.is-row-link:hover td{background:#1e252d}
html.theme-dark .k-station.is-running{background:#15282a; border-color:#285a5e}
html.theme-dark .k-station.is-issue{background:#2c2413; border-color:#6b5222}
html.theme-dark .k-check__title, html.theme-dark .k-check__why{color:#cde6a6}
html.theme-dark .k-check.is-amber .k-check__title, html.theme-dark .k-check.is-amber .k-check__why,
html.theme-dark .k-banner__title, html.theme-dark .k-banner__why{color:#f0d9a2}
html.theme-dark .k-check.is-hot .k-check__title, html.theme-dark .k-check.is-hot .k-check__why{color:#ffc4b0}
html.theme-dark .k-banner{border-color:#6b5222}
html.theme-dark .k-callout{color:#bfe3e5}
html.theme-dark .k-sheet{box-shadow:-24px 0 70px rgba(0,0,0,.6)}
html.theme-dark .k-field, html.theme-dark .k-form select, html.theme-dark .k-form input, html.theme-dark .k-form textarea, html.theme-dark .k-search, html.theme-dark .k-pick{border-color:#34404a}

/* ── The line icons ───────────────────────────────────────────────── */
.ki{display:inline-block; flex-shrink:0; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle}

/* ── A question asked on top of the page ──────────────────────────── */
.k-dialog{
  position:fixed; z-index:61; left:50%; top:max(8vh, 40px); transform:translateX(-50%);
  width:min(600px, calc(100vw - 32px)); max-height:calc(100vh - 16vh); overflow-y:auto; box-sizing:border-box;
  padding:28px 30px 26px; border-radius:24px; background:var(--card); box-shadow:0 30px 80px rgba(8,32,34,.3);
}
@media (min-width:1024px){ .k-dialog{left:calc(50% + 44px)} }
.k-dialog__title{margin:0; font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--ink)}
.k-dialog__why{margin:8px 0 18px; font-size:15px; line-height:1.5; color:var(--ink-2)}
.k-dialog__acts{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
@media (max-width:639px){
  .k-dialog{left:0; right:0; top:auto; bottom:0; transform:none; width:100%; max-height:92vh; border-radius:24px 24px 0 0; padding:24px 16px 28px}
  .k-dialog::before{content:""; display:block; width:44px; height:5px; border-radius:999px; background:var(--line); margin:-8px auto 16px}
  .k-dialog__title{font-size:23px}
  .k-dialog__acts{flex-direction:column}
  .k-dialog__acts > *{width:100%}
}
/* A choice of one, as big rows. */
.k-choices{display:flex; flex-direction:column; gap:8px}
.k-choice{display:flex; align-items:center; gap:14px; min-height:52px; padding:12px 16px; border-radius:14px; border:1px solid var(--line); background:var(--card); cursor:pointer; font-size:15px; box-sizing:border-box}
.k-choice input{appearance:none; width:20px; height:20px; flex-shrink:0; margin:0; border-radius:999px; border:2px solid #b8c8c3; box-sizing:border-box}
.k-choice input:checked{border:6px solid var(--act-text)}
.k-choice:has(input:checked){border:2px solid var(--act-text); background:var(--accent-soft); font-weight:600; padding:11px 15px}
.k-choice__main{flex-grow:1; min-width:0}
.k-choice__main > span{display:block}
.k-choice__title{font-size:15.5px; font-weight:700; color:var(--ink)}
.k-choice__sub{font-size:13.5px; color:var(--ink-2)}
.k-choice__side{font-size:14px; font-weight:700; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.k-choice__good{font-size:13.5px; font-weight:600; color:var(--green); margin-top:2px}
/* The same big row as a button that picks (no radio inside): the page marks the chosen one. */
button.k-choice{width:100%; text-align:left; font:inherit; color:inherit}
.k-choice.is-on{border:2px solid var(--act-text); background:var(--accent-soft); padding:11px 15px}

/* Live search inside a kit toolbar: the kit's size, the shared behaviour. */
.k-toolbar input[data-live-search-source]{height:44px; border-radius:12px; font-size:15px; border-color:#c7d5d0}
/* Only the search box's form is held wide; a one-button form (a download) stays its own size. */
.k-toolbar form:has(input[type=search], input[type=text], input[data-live-search-source]){min-width:min(360px, 100%)}

/* ── Phones: tiles become a strip you swipe; rows become cards ────── */
@media (max-width:639px){
  .k-tiles{display:flex; overflow-x:auto; gap:10px; margin-right:-16px; padding-right:16px; scroll-snap-type:x proximity; scrollbar-width:none}
  .k-tiles::-webkit-scrollbar{display:none}
  .k-chips{flex-wrap:nowrap; overflow-x:auto; margin-right:-16px; padding-right:16px; scrollbar-width:none}
  .k-chips::-webkit-scrollbar{display:none}
  .k-chips > a{flex:0 0 auto}
  .k-tiles > .k-tile{flex:0 0 158px; scroll-snap-align:start; padding:14px 15px 12px}
  .k-tiles > .k-tile.is-selected{padding:13px 14px 11px}
  .k-tile__num{font-size:21px}
  .k-table--cards thead{display:none}
  .k-table--cards, .k-table--cards tbody{display:block}
  .k-table--cards tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:14px 16px; border-top:1px solid var(--line-soft)}
  .k-table--cards tbody tr:first-child{border-top:0}
  .k-table--cards td{display:block; padding:0; border:0}
  .k-table--cards td[data-card=main]{grid-column:1; grid-row:1}
  .k-table--cards td[data-card=right]{grid-column:2; grid-row:1; text-align:right}
  .k-table--cards td[data-card=line]{grid-column:1 / -1}
  .k-table--cards td[data-card=foot]{grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px}
  .k-table--cards td[data-card=hide]{display:none}
}
html.has-sheet{overflow:hidden}
/* Make ▸ Packed: a column per product on a desk; on a phone the products read as one line under the day. */
.k-packed td.k-packed__phone, .k-packed__phone-label{display:none}
.k-packed tbody tr.is-quiet td{color:var(--ink-3)}
.k-packed tbody tr.is-open{background:var(--head)}
.k-packed tfoot td{border-top:2px solid var(--line); padding:12px 18px}
@media (max-width:639px){ .k-table--cards.k-packed td.k-packed__phone{display:block} .k-packed__phone-label{display:inline} .k-table--cards tfoot{display:block} .k-table--cards tfoot tr{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 12px; padding:14px 16px} .k-table--cards tfoot td{display:block; padding:0; border:0} .k-table--cards tfoot td[data-card=right]{text-align:right} .k-table--cards tfoot td[data-card=line]{grid-column:1 / -1} .k-table--cards tfoot td[data-card=hide]{display:none} }
.k-only-phone{display:none !important}
/* Keyboard-only help (letter keys, Enter, Ctrl+Enter): a touch screen has no keys to press (25 Oct 2026). */
@media (hover:none) and (pointer:coarse){ .k-keys{display:none !important} }
@media (max-width:639px){ .k-only-phone{display:inline-flex !important} span.k-sub.k-only-phone{display:block !important} }

/* ── Receipt lines: one material per line; the boxes work out the quantity ── */
.k-rline{padding:14px 0 16px; border-top:1px solid var(--line-soft)}
.k-rline:first-of-type{border-top:0; padding-top:0}
.k-rline__grid{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px}
.k-rline__grid > div{flex:0 0 132px; min-width:0}
.k-rline__grid > .k-rline__material{position:relative; flex:1 1 260px}
.k-rline__grid input{width:100%; box-sizing:border-box}
.k-rline__list{position:absolute; z-index:30; left:0; right:0; top:calc(100% + 4px); max-height:288px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 16px 40px rgba(8,32,34,.16)}
.k-rline__option{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; min-height:46px; padding:9px 14px; border:0; border-top:1px solid var(--line-soft); background:transparent; font:inherit; font-size:15px; color:var(--ink); text-align:left; cursor:pointer}
.k-rline__option:first-child{border-top:0}
.k-rline__option:hover, .k-rline__option:focus{background:var(--accent-soft); outline:none}
.k-rline__none{padding:12px 14px; font-size:14px; color:var(--ink-2)}
@media (max-width:639px){ .k-rline__grid > div{flex:1 1 120px} .k-rline__grid > .k-rline__material{flex-basis:100%} }
/* A form section that opens when there is something in it. */
details.k-more > summary{cursor:pointer; list-style:none}
details.k-more > summary::-webkit-details-marker{display:none}
details.k-more > summary::after{content:"＋"; float:right; color:var(--ink-3); font-weight:700}
details.k-more[open] > summary::after{content:"－"}

/* ── Order lines: a row per product, with what the store says under it ── */
.k-lines-head{display:grid; grid-template-columns:minmax(0,1.5fr) 84px 84px 116px 96px 108px 40px; gap:12px; padding-bottom:9px; font-size:13.5px; color:var(--ink-2)}
.k-lines-head .num{text-align:right}
.k-line-row{display:grid; grid-template-columns:minmax(0,1.5fr) 84px 84px 116px 96px 108px 40px; gap:12px; align-items:center; padding:12px 0 14px; border-top:1px solid var(--line-soft)}
.k-line-amount{font-size:16px; font-weight:800; text-align:right}
.k-line-remove{width:40px; height:48px; border:0; background:transparent; color:var(--ink-3); cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.k-line-remove:hover{color:var(--hot)}
.k-line-hints{grid-column:1 / -1}
.k-line-row > *{min-width:0}
.k-line-row select, .k-line-row input{width:100%; box-sizing:border-box}
/* Each box's name: read out on a wide screen, where the column heads say it; shown on a phone, where they are hidden. */
.k-line-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.k-lines-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid var(--line-soft)}
@media (max-width:899px){
  .k-lines-head{display:none}
  .k-line-row{grid-template-columns:1fr 1fr 1fr; gap:10px}
  .k-line-row > div:first-of-type{grid-column:1 / -1}
  .k-line-amount{grid-column:2; text-align:right}
  .k-line-remove{grid-column:3; justify-self:end}
  .k-line-label{position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal; display:block; margin-bottom:4px; font-size:12.5px; color:var(--ink-2)}
}

/* ── Make: the batch page ─────────────────────────────────────────── */
/* The polled station fragment carries its own status pill; the station row already says it. */
[data-batch-page] [id^="stage-activity-"] > span:last-child{display:none}
[data-batch-page] [id^="stage-activity-"]{margin-top:4px}
.k-station-row{padding:14px 20px; border-top:1px solid var(--line-soft); scroll-margin-top:20px}
.k-station-row:first-child{border-top:0}
.k-station-row.is-running{background:#f1f8f8; box-shadow:inset 3px 0 0 var(--act-text)}
html.theme-dark .k-station-row.is-running{background:#15282a}

/* ── Settings: a list of destinations, each saying what it is ───────── */
/* Fourteen identical count tiles told a person nothing about which list they
   wanted. A row gives the name the plant uses, one line on what it is for, and
   the count — so the page can be read rather than clicked through. */
.k-entry{display:flex; align-items:center; gap:18px; padding:15px 20px; border-top:1px solid var(--line-soft); color:var(--ink); text-decoration:none}
.k-entry:first-child{border-top:0}
a.k-entry:hover{background:#f8fbf9}
.k-entry__body{flex:1 1 auto; min-width:0}
.k-entry__name{display:block; font-size:15.5px; font-weight:700; letter-spacing:-.005em}
.k-entry__what{display:block; margin-top:2px; font-size:14px; line-height:1.45; color:var(--ink-2)}
.k-entry__right{display:flex; align-items:center; gap:14px; flex-shrink:0}
.k-entry__count{text-align:right}
.k-entry__num{display:block; font-size:19px; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.2}
.k-entry__word{display:block; font-size:15px; font-weight:700; line-height:1.25}
.k-entry__sub{display:block; margin-top:1px; font-size:13px; color:var(--ink-2)}
.k-entry__go{display:inline-flex; color:var(--ink-3)}
a.k-entry:hover .k-entry__go{color:var(--act-text)}
.k-group{margin-top:26px}
.k-group:first-child{margin-top:0}
.k-group__what{margin:0 2px 11px; font-size:14px; color:var(--ink-2)}
/* On a phone the count and its note cannot sit beside the sentence — a long one
   ("Messages are written down, not sent") squeezed the name into a column four
   words wide. It drops to its own line under the text instead. */
@media (max-width:639px){
  .k-entry{flex-wrap:wrap; gap:7px 12px; padding:14px 16px}
  .k-entry__body{flex:1 1 100%}
  .k-entry__what{font-size:13.5px}
  .k-entry__right{width:100%; justify-content:flex-start; gap:10px}
  .k-entry__count{display:flex; align-items:baseline; gap:8px; text-align:left; min-width:0}
  .k-entry__num, .k-entry__word{flex:0 0 auto; font-size:15.5px}
  .k-entry__sub{margin-top:0}
  .k-entry__go{display:none}
}
html.theme-dark a.k-entry:hover{background:#15282a}

/* ── Scan a bill: the drop zone, and the picture kept beside the form ─ */
.k-drop{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; min-height:220px; padding:28px 20px; border:2px dashed #b8c8c3; border-radius:18px; background:var(--card); text-align:center; cursor:pointer; transition:border-color .12s, background .12s}
.k-drop:hover, .k-drop.is-over, .k-drop:focus-within{border-color:var(--act-text); background:var(--accent-soft)}
.k-drop__icon{display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:999px; background:var(--accent-soft); color:var(--act-text)}
.k-drop__title{font-size:17px; font-weight:800; color:var(--ink)}
.k-drop__why{max-width:420px; font-size:14px; color:var(--ink-2)}
.k-drop input[type=file]{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden}
.k-drop__name{font-size:14px; font-weight:700; color:var(--act-text); overflow-wrap:anywhere}
.k-scan--stick{position:sticky; top:12px}
.k-scan__frame{display:block; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:#f4f6f5}
.k-scan__frame img{display:block; width:100%; height:auto; max-height:70vh; object-fit:contain; background:#f4f6f5}
.k-scan__frame iframe{display:block; width:100%; height:70vh; border:0}
.k-scan__meta{display:flex; flex-wrap:wrap; gap:6px 12px; margin-top:8px; font-size:13px; color:var(--ink-2)}
.k-scan__reading{display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:16px; background:var(--accent-soft); color:var(--ink)}
.k-scan__spin{width:22px; height:22px; flex-shrink:0; border-radius:999px; border:3px solid #b8c8c3; border-top-color:var(--act-text); animation:k-spin .9s linear infinite}
@keyframes k-spin{to{transform:rotate(360deg)}}
.k-read{display:inline-flex; align-items:center; gap:4px; padding:1px 7px; border-radius:999px; background:var(--accent-soft); color:var(--act-text); font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle}
.k-cols--scan{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr)}
@media (max-width:1100px){ .k-cols--scan{grid-template-columns:minmax(0, 1fr)} .k-scan--stick{position:static} .k-scan__frame img{max-height:48vh} .k-scan__frame iframe{height:48vh} }
html.theme-dark .k-drop{border-color:#34404a}
html.theme-dark .k-scan__frame, html.theme-dark .k-scan__frame img{background:#0f1a1c}

/* Forms pattern (6 Oct 2026): the essentials first, repeat buttons, the usual answers on one line, the books folded away. */
.k-eyebrow{margin:0 0 8px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.k-repeats{display:flex; flex-wrap:wrap; gap:8px}
.k-repeats[hidden]{display:none}
.k-repeat{display:inline-flex; align-items:center; min-height:38px; max-width:100%; padding:0 14px; border-radius:999px; background:var(--line-soft); color:var(--ink); font-size:14px; font-weight:700; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.k-repeat:hover, .k-repeat:focus-visible{background:var(--accent-soft); color:var(--act-text)}
.k-pair--lead{grid-template-columns:minmax(0, 2fr) minmax(0, 1fr)}
@media (max-width:639px){ .k-pair--lead{grid-template-columns:minmax(0, 1fr)} }
.k-form input.k-field--big{font-size:22px; font-weight:800}
.k-usual{border-top:1px solid var(--line-soft)}
.k-usual__line{display:flex; align-items:center; gap:12px; margin:18px 26px; padding:12px 14px 12px 16px; border:1px dashed var(--line); border-radius:12px; background:var(--accent-soft); cursor:pointer; list-style:none}
.k-usual__line::-webkit-details-marker{display:none}
.k-usual__tick{display:inline-flex; color:var(--act-text)}
.k-usual__words{flex:1 1 auto; min-width:0; font-size:15px; font-weight:700; color:var(--ink)}
.k-usual[open] .k-usual__line{margin-bottom:6px}
.k-usual[open] .k-usual__change{visibility:hidden}
.k-usual__why{margin:0 26px; min-height:0}
.k-usual__why:empty{display:none}
.k-fold{border:1px solid var(--line); border-radius:16px; background:var(--bg); padding:14px 18px}
.k-fold > summary{cursor:pointer; font-size:15px; font-weight:800; color:var(--ink)}
.k-fold[open] > summary{margin-bottom:10px}
/* clip, not hidden: hidden makes the box its own scroller and the save bar could never stick. */
.k-box:has(> .k-savebar--stick){overflow:clip}
@media (max-width:639px){
  .k-savebar--stick{position:sticky; bottom:0; z-index:5; flex-wrap:nowrap; gap:8px; padding:12px 16px; box-shadow:0 -6px 16px rgba(16,36,38,.08)}
  .k-savebar--stick > a, .k-savebar--stick .k-savebar__note{display:none}
  .k-savebar--stick > button{flex:1 1 auto; min-width:0; padding-left:12px; padding-right:12px}
  .k-usual__line{margin:14px 16px}
  .k-usual__why{margin:0 16px}
}

/* New order as one pad (6 Oct 2026): every product on a line, the decision in a panel beside it. */
.order-who__label{display:block; margin:0 0 10px; font-size:19px; font-weight:800; color:var(--ink)}
.k-form select.order-who__pick{height:56px; font-size:17px; font-weight:600; border:2px solid var(--act-text)}
/* The customer box as drawn: a search field with its icon, "+ A new customer" inside on the right, no arrow. */
.order-who__box{position:relative}
.order-who__box .choice-field{display:block; width:100%}
.order-who__box .choice-trigger{min-height:58px; width:100%; padding:0 190px 0 50px; border:2px solid var(--act-text); border-radius:14px; font-size:17px; font-weight:600;
  background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317656B' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 16px center / 22px}
.order-who__box .choice-arrow{display:none}
.order-who__box .account-create-link{position:absolute; top:29px; right:18px; transform:translateY(-50%); z-index:2; margin:0; font-size:14px; font-weight:700}
@media (max-width:639px){
  .order-who__box .choice-trigger{padding-right:16px}
  .order-who__box .account-create-link{position:static; transform:none; display:inline-block; margin-top:8px}
}
.order-pad__top{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:8px 16px; padding:18px 24px 10px}
.order-pad__top h2{margin:0; font-size:19px; font-weight:800; color:var(--ink)}
.order-pad__head, .order-pad__row{display:grid; grid-template-columns:minmax(0, 2.1fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.5fr) minmax(0, 1fr); gap:12px; padding:10px 24px}
.order-pad__head{background:var(--head, #EDF3EF); font-size:13px; font-weight:700; color:var(--ink-2)}
.order-pad__head .num{text-align:right}
.order-pad__row{align-items:start; border-top:1px solid var(--line-soft)}
.order-pad__row.is-on{background:var(--accent-soft)}
.order-pad__row > *{min-width:0}
.order-pad__product{padding-top:10px}
.order-pad__product .k-strong{display:block}
.order-pad__qty, .order-pad__price{display:grid; gap:2px; justify-items:end}
.k-form .order-pad__row input{width:100%; max-width:120px; text-align:right}
.k-form .order-pad__row input[data-cases]{font-size:18px; font-weight:800}
.order-pad__price .k-sub{text-align:right; max-width:180px}
.order-pad__price .k-sub.is-warn{color:var(--amber); font-weight:700}
.order-pad__bottles, .order-pad__amount{padding-top:12px; text-align:right; font-variant-numeric:tabular-nums}
.order-pad__bottles .k-sub{display:block; font-size:12px}
.order-pad__amount{font-size:16px; font-weight:800; color:var(--ink)}
.order-pad__more{background:none; border:0; padding:0; cursor:pointer; font-size:12.5px}
@media (pointer:coarse){ .order-pad__more{min-height:40px; padding:0 4px; font-size:14px} }
.order-pad__hints{grid-column:1 / -1}
.order-pad__hints:empty{display:none}
.order-pad__foot{padding:12px 24px; margin:0; border-top:1px solid var(--line-soft)}
@media (max-width:639px){
  .order-pad__head{display:none}
  .order-pad__row{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); padding:12px 16px}
  .order-pad__product{grid-column:1 / -1; padding-top:0}
  .order-pad__qty, .order-pad__price{justify-items:stretch}
}
.order-bar{display:none}
@media (max-width:1100px){
  .order-bar{position:sticky; bottom:8px; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:0 6px 24px rgba(12,50,53,.16)}
  .order-bar[hidden]{display:none}
  .order-bar__sum{display:grid; min-width:0; font-variant-numeric:tabular-nums; line-height:1.25}
  .order-bar__sum > b:first-child{font-size:13.5px; font-weight:700; color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .order-bar__total{font-size:19px; font-weight:800; color:var(--ink)}
  .order-bar__go{flex-shrink:0; gap:6px}
}
.order-panel{padding:20px 22px; display:grid; grid-template-columns:minmax(0, 1fr); gap:14px; scroll-margin-top:84px}
.order-panel > *{min-width:0}
.order-panel__day{display:grid; gap:8px}
.order-panel__day[hidden]{display:none}
.order-panel__head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px}
.order-panel__head h2{margin:0; font-size:18px; font-weight:800; color:var(--ink)}
.order-panel__sum{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px 12px; padding:12px 14px; border-radius:12px; background:var(--bg)}
.order-panel__sum .num{text-align:right}
.order-panel__sum b{display:block; font-size:17px; color:var(--ink)}
.order-panel__total{font-size:22px !important}
.order-panel__ways{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px}
.order-panel__ways .k-choice{padding:10px 12px; gap:10px}
.order-panel__trucks{display:flex; flex-wrap:wrap; gap:6px}
.order-truck{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:6px 10px; border:1px solid var(--line); border-radius:10px; cursor:pointer; background:var(--card)}
.order-truck:has(input:checked){border:2px solid var(--act-text); background:var(--accent-soft)}
.order-truck b{display:block; font-size:14px; font-family:'IBM Plex Mono', ui-monospace, monospace; font-weight:600}
.order-truck .k-sub{display:block; font-size:12px}
.order-panel__checks{display:grid; gap:8px}
.order-check{font-size:14px; color:var(--ink-2); line-height:1.45}
.order-check.is-warn{padding:10px 12px; border-radius:10px; background:var(--amberbg); color:#6B4600}
.order-check.is-ok{color:var(--green)}
.order-panel__save{width:100%; height:54px; font-size:16px}
.order-panel__usual .k-usual__line{margin:6px 0 0}