/* Fabrica-only styles, loaded after /static/mw/marswars.css by both base templates.
   Status chips use one vocabulary on the board, the part page, the machine queues and
   the admin dashboard, so a colour always means the same stage. */
.chip { display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .55rem; border-radius:6px;
        font-weight:600; font-size:.8rem; white-space:nowrap; }
.chip-design    { background:var(--mw-border); color:var(--mw-muted); }
.chip-cam       { background:var(--mw-tone-blue-bg); color:var(--mw-tone-blue-fg); }
.chip-ready     { background:var(--mw-surface-raised); color:var(--mw-text); border:1px solid var(--mw-border); }
.chip-queued    { background:var(--mw-tone-amber-bg); color:var(--mw-tone-amber-fg); }
.chip-running   { background:var(--mw-tone-green-bg); color:var(--mw-tone-green-fg); }
.chip-done      { background:var(--mw-red); color:#fff; }
.chip-blocked   { background:var(--mw-tone-red-bg); color:var(--mw-tone-red-fg); border:1px solid var(--mw-tone-red-edge); }
.chip-cancelled { background:var(--mw-surface-raised); color:var(--mw-muted); text-decoration:line-through; }
.prio { font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.prio-urgent { color:var(--mw-tone-red-fg); } .prio-high { color:var(--mw-tone-amber-fg); } .prio-low { color:var(--mw-muted); }
.overdue { color:var(--mw-tone-red-fg); font-weight:600; }
.partno { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.82rem; color:var(--mw-muted); }

/* Board: edge to edge and as tall as the window, each column scrolling on its own.
   Readability first: neutral cards and buttons with full-contrast text; the MARS/WARS red is
   the accent (New part, hover, focus, the Done edge), and each column's top edge carries its
   stage colour. Empty columns shrink to a labeled rail so the busy ones get the room. */
.board-page { padding: 0 1rem 1rem; }
.board-head { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; margin-bottom:.8rem; }
.board-title { font-size:1.35rem; font-weight:700; margin:0; white-space:nowrap; }
.board-title span { font-size:.9rem; font-weight:500; color:var(--mw-muted); margin-left:.25rem; }
.board-tools { flex:1 1 32rem; display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; min-width:0; }
.board-tools .form-select { width:auto; max-width:12rem; }
.board-search { position:relative; flex:1 1 14rem; min-width:10rem; max-width:24rem; margin:0; }
.board-search > i { position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--mw-muted); pointer-events:none; }
.board-search input { width:100%; padding:.4rem 2rem .4rem 2.1rem; border-radius:8px; border:1px solid var(--mw-border);
                      background:var(--mw-input-bg); color:var(--mw-text); font-size:.92rem; }
.board-search input:focus { outline:none; border-color:var(--mw-red-edge); box-shadow:0 0 0 3px var(--bs-focus-ring-color); }
.board-search kbd { position:absolute; right:.5rem; top:50%; transform:translateY(-50%); padding:.05rem .4rem; font-size:.72rem;
                    background:var(--mw-surface-raised); color:var(--mw-muted); border:1px solid var(--mw-border); border-radius:4px; }
.board-search input:focus ~ kbd, .board-search input:not(:placeholder-shown) ~ kbd { display:none !important; }
.toggle-chip { margin:0; cursor:pointer; }
.toggle-chip input { position:absolute; opacity:0; pointer-events:none; }
.toggle-chip span { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .7rem; border-radius:999px; font-size:.86rem;
                    border:1px solid var(--mw-border); color:var(--mw-text); background:var(--mw-surface); white-space:nowrap; }
.toggle-chip:hover span { border-color:var(--mw-track-edge); }
.toggle-chip input:checked + span { background:var(--mw-red-tint); border-color:var(--mw-red-edge); color:var(--mw-text-strong); font-weight:600; }
.toggle-chip input:focus-visible + span { box-shadow:0 0 0 3px var(--bs-focus-ring-color); }
.clear-filters { font-size:.86rem; color:var(--mw-muted); }
.clear-filters:hover { color:var(--mw-text); }
.board-new { margin-left:auto; }

.board { display:flex; gap:.6rem; height:calc(100vh - var(--board-top, 9rem) - 1rem); min-height:24rem; overflow-x:auto; padding-bottom:.25rem; }
.board.is-loading { opacity:.6; transition:opacity .15s .1s; }
.board-col { flex:1 1 11.5rem; min-width:11.5rem; height:100%; overflow-y:auto; background:var(--mw-surface);
             border:1px solid var(--mw-border); border-top:3px solid var(--col, var(--mw-border)); border-radius:10px; padding:0 .5rem .5rem;
             scrollbar-width:thin; }
.col-head { display:flex; align-items:center; gap:.45rem; position:sticky; top:0; z-index:3;
            background:var(--mw-surface); padding:.6rem .2rem .5rem; }
.board-col h2 { font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; font-weight:700; margin:0; color:var(--mw-text); }
.board-col .count { font-size:.75rem; font-weight:700; min-width:1.4rem; padding:.05rem .4rem; border-radius:999px; text-align:center;
                    background:var(--mw-surface-raised); color:var(--mw-muted); border:1px solid var(--mw-border); }
.col-toggle { margin-left:auto; border:0; background:none; color:var(--mw-muted); padding:.1rem .25rem; border-radius:6px; line-height:1; }
.col-toggle:hover { color:var(--mw-text); background:var(--mw-surface-raised); }
.col-empty { margin:.5rem .2rem; font-size:.82rem; color:var(--mw-muted); }
/* Rails: an empty column, and Done unless opened. */
.board-col.is-empty, .board-col.is-rail:not(.is-open) { flex:0 0 2.6rem; min-width:2.6rem; padding:0; overflow:hidden; }
.board-col.is-empty .col-head, .board-col.is-rail:not(.is-open) .col-head { flex-direction:column; height:100%; padding:.6rem 0; gap:.6rem; }
.board-col.is-empty h2, .board-col.is-rail:not(.is-open) h2 { writing-mode:vertical-rl; color:var(--mw-muted); white-space:nowrap; }
.board-col.is-empty .col-toggle, .board-col.is-rail:not(.is-open) .col-toggle { margin:0; order:-1; }
.board-col.is-rail:not(.is-open) .col-cards, .board-col.is-empty .col-cards { display:none; }
.board-col.is-rail:not(.is-open):not(.is-empty) { cursor:pointer; }
.board-col.is-rail:not(.is-open):not(.is-empty):hover { background:var(--mw-surface-raised); }
.board-col.is-rail.is-open .col-toggle i { transform:rotate(180deg); }
.board-col.col-done.is-open, .board-col.col-design:not(.is-empty) { flex-grow:.8; }
/* One accent. Columns share a neutral edge; only Blocked is red, because it's the one that
   needs someone. Red elsewhere on the board means the same: urgent, overdue, blocked. */
.board-col { --col:var(--mw-border); }
.col-blocked:not(.is-empty) { --col:var(--mw-tone-red-fg); }

.part-card { display:flex; flex-direction:column; gap:.35rem; background:var(--mw-surface-raised); border:1px solid var(--mw-border);
             border-radius:8px; padding:.6rem .7rem; color:var(--mw-text); margin-bottom:.5rem;
             transition:border-color .12s, box-shadow .12s, transform .12s; }
.part-card:hover { border-color:var(--mw-track-edge); box-shadow:0 2px 10px rgb(0 0 0 / .18); }
.part-card .card-top { display:flex; justify-content:space-between; align-items:flex-start; gap:.5rem; }
.part-card .title { font-weight:650; font-size:.98rem; line-height:1.25; color:var(--mw-text-strong); text-decoration:none; }
.part-card .title:hover { color:var(--mw-text-strong); }
.part-card .prio { flex:none; padding:.05rem .4rem; border-radius:4px; margin-top:.1rem; font-size:.66rem; }
.part-card .prio-urgent { background:var(--mw-tone-red-bg); }
.part-card .prio-high { color:var(--mw-text); border:1px solid var(--mw-track-edge); }
.card-tags { display:flex; flex-wrap:wrap; align-items:center; gap:.2rem .5rem; font-size:.78rem; min-width:0; }
.card-tags .partno { font-size:.76rem; }
.sub-tag { color:var(--mw-text); font-weight:500; }
.part-card .step { display:flex; gap:.4rem; align-items:baseline; font-size:.86rem; line-height:1.3; }
/* Steps to come, done and current, mixed from the text colour so every segment shows on the
   card in either theme; the current one is the accent. */
.step-bar { display:flex; gap:4px; }
.step-bar span { flex:1; height:5px; border-radius:3px; background:color-mix(in srgb, var(--mw-text) 22%, transparent); }
.step-bar .is-done { background:color-mix(in srgb, var(--mw-text) 60%, transparent); }
.step-bar .is-now { background:var(--mw-red); }
.blocked-why { font-size:.82rem; color:var(--mw-tone-red-fg); line-height:1.3; font-weight:500; }
.card-foot { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .55rem; font-size:.8rem; color:var(--mw-muted); margin-top:.1rem; }
.card-foot .due { white-space:nowrap; }
.card-foot .overdue { color:var(--mw-tone-red-fg); font-weight:600; }
.person { display:inline-grid; place-items:center; width:1.55rem; height:1.55rem; border-radius:50%; font-size:.66rem; font-weight:700;
          background:var(--mw-border); color:var(--mw-text); }
/* One outline button per card (design/README.md: repeated card buttons are btn-outline-primary). */
.card-action { z-index:2; margin-left:auto; }
.card-action form { display:inline; margin:0; }
.card-action .btn { display:inline-flex; align-items:center; white-space:nowrap; }
.card-action .btn.is-busy { opacity:.6; pointer-events:none; }

/* Dragging. Every column has to be able to take a drop, so the rails open while a card moves. */
.col-cards { min-height:calc(100% - 3rem); }
.part-card { cursor:grab; touch-action:manipulation; }
.part-card a, .part-card button, .part-card label { cursor:pointer; }
.card-chosen { cursor:grabbing; }
.card-ghost { opacity:.35; border-style:dashed; }
.card-dragging { opacity:.97; box-shadow:0 10px 28px rgb(0 0 0 / .35); transform:rotate(1.5deg); }
.board.is-dragging { user-select:none; }
.board.is-dragging .board-col.is-empty, .board.is-dragging .board-col.is-rail { flex:1 1 11.5rem; min-width:11.5rem; overflow-y:auto; padding:0 .5rem .5rem; }
.board.is-dragging .board-col.is-empty .col-head, .board.is-dragging .board-col.is-rail .col-head { flex-direction:row; height:auto; padding:.6rem .2rem .5rem; }
.board.is-dragging .board-col.is-empty h2, .board.is-dragging .board-col.is-rail h2 { writing-mode:horizontal-tb; }
.board.is-dragging .board-col.is-empty .col-cards, .board.is-dragging .board-col.is-rail .col-cards { display:block; }
.board.is-dragging .board-col.is-empty .col-empty { display:none; }
.board.is-dragging .board-col:has(.card-ghost) { border-color:var(--col, var(--mw-border)); background:var(--mw-surface-raised); }
.board.is-dragging .board-col:has(.card-ghost) .col-head { background:var(--mw-surface-raised); }

/* Phone: one column at a time, chosen from a row of tabs. board.js turns this on; without it
   the columns simply stack. */
.lane-tabs { display:flex; gap:.35rem; overflow-x:auto; margin:0 -1rem .6rem; padding:.1rem 1rem .4rem; scrollbar-width:none;
             position:sticky; top:0; z-index:5; background:var(--mw-bg); }
.lane-tabs::-webkit-scrollbar { display:none; }
.lane-tabs button { flex:none; display:inline-flex; align-items:center; gap:.35rem; min-height:40px; padding:.3rem .75rem; border-radius:999px;
                    border:1px solid var(--mw-border); background:var(--mw-surface); color:var(--mw-text); font-size:.86rem; font-weight:600; }
.lane-tabs button .n { font-size:.74rem; color:var(--mw-muted); font-weight:700; }
.lane-tabs button.is-empty { color:var(--mw-muted); font-weight:500; }
.lane-tabs button[aria-selected="true"] { background:var(--mw-surface-raised); border-color:var(--mw-red); color:var(--mw-text-strong); }
@media (max-width: 767.98px) {
  .board-head { gap:.5rem; }
  .board-title { flex:1; }
  .board-new { margin-left:0; }
  .board-tools { order:3; flex-basis:100%; }
  .board-search { flex-basis:100%; max-width:none; }
  .board-search input { font-size:16px; min-height:44px; }  /* 16px keeps iOS from zooming in */
  .toggle-chip span { min-height:36px; }
  .board-tools .form-select { flex:1 1 calc(50% - .25rem); max-width:none; min-height:36px; }
  .board { flex-direction:column; height:auto; min-height:0; overflow:visible; }
  .board-col, .board-col.is-empty, .board-col.is-rail:not(.is-open) { flex:none; min-width:0; height:auto; overflow:visible; padding:0 .55rem .55rem; }
  .board-col .col-head, .board-col.is-empty .col-head, .board-col.is-rail:not(.is-open) .col-head { position:static; flex-direction:row; height:auto; padding:.6rem .15rem .5rem; }
  .board-col.is-empty h2, .board-col.is-rail:not(.is-open) h2 { writing-mode:horizontal-tb; }
  .board-col.is-rail:not(.is-open) .col-cards, .board-col.is-empty .col-cards { display:block; }
  .col-toggle { display:none; }
  .board.lanes .board-col:not(.is-current) { display:none; }
  .board.lanes .board-col { border-top-width:1px; background:none; border:0; padding:0; }
  .board.lanes .col-head { display:none; }
  .part-card { padding:.75rem .8rem; }
  .part-card .title { font-size:1.02rem; }
  .card-action .btn { min-height:40px; }
}

/* Part page steps */
.op { border:1px solid var(--mw-border); border-radius:10px; padding:.85rem; background:var(--mw-surface); }
.op.current { box-shadow: inset 3px 0 0 var(--mw-red); border-color:var(--mw-border); }
.op + .op { margin-top:.6rem; }
.op-num { width:2rem; height:2rem; border-radius:50%; border:1px solid var(--mw-border); display:inline-grid;
          place-items:center; font-family:ui-monospace,monospace; font-size:.85rem; color:var(--mw-muted); flex:none; }
.op-num.done { background:var(--mw-tone-red-bg); border-color:var(--mw-red); color:var(--mw-tone-red-fg); }
.op-actions { display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.6rem; }
.op-actions .form-select, .op-actions .form-control { width:auto; min-width:10rem; }
.file-pill { display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .55rem; border:1px solid var(--mw-border);
             border-radius:6px; font-size:.85rem; background:var(--mw-surface); color:var(--mw-text); text-decoration:none; max-width:100%; }
.file-pill:hover { border-color:var(--mw-red); color:var(--mw-text-strong); }
.file-pill .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timeline { list-style:none; padding:0; margin:0; }
.timeline li { display:grid; grid-template-columns:.6rem 1fr; gap:.6rem; padding:.35rem 0; font-size:.92rem; }
.timeline li::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--mw-border); margin-top:.45rem; }
.timeline .when { font-size:.78rem; color:var(--mw-muted); }
.timeline .comment { background:var(--mw-surface-raised); border:1px solid var(--mw-border); border-radius:7px; padding:.4rem .6rem; margin-top:.25rem; white-space:pre-wrap; }
.steprow { display:grid; grid-template-columns:2rem minmax(0,1.5fr) minmax(0,1fr) 2.5rem; gap:.5rem; align-items:center; }
@media (max-width: 575.98px) { .steprow { grid-template-columns:2rem minmax(0,1fr) 2.5rem; } .steprow select { grid-column:2 / 3; } }
.stat-card .num { font-size:1.9rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.queue-item { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; align-items:center;
              padding:.6rem .7rem; border:1px solid var(--mw-border); border-radius:8px; background:var(--mw-surface); }
.queue-item + .queue-item { margin-top:.5rem; }
@media (max-width: 767.98px) { .btn-touch { min-height:44px; } }