/* Wall screen for an old iPad (iOS 12): top row of job delivery, quotations and partners, then stock
   below. Same tokens as /shared/style.css, kept to what Safari 12 understands (grid-gap, no flex gap). */
:root{
  --bg:#FFFCF0;--paper:#FFFFFF;--band:#FFDD47;--pale:#FFF3BF;
  --ink:#2B2E31;--muted:#5F5C52;--rule:rgba(43,46,49,.2);--rule-soft:rgba(43,46,49,.1);
  --problem:#B3261E;--problem-pale:#FBE9E7;--ok:#3E6B2A;--ok-pale:#E8F0E1;
  --font-display:"Kanit","Arial Black","Helvetica Neue",sans-serif;
  --font-body:"Figtree","Helvetica Neue",Arial,sans-serif;
}
*,*:before,*:after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.4 var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
.mono{font-variant-numeric:tabular-nums}

/* Header stays on top while the page scrolls down to the stock. */
.head{position:-webkit-sticky;position:sticky;top:0;z-index:5;background:var(--bg);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;
  padding:10px 14px;padding-top:calc(10px + env(safe-area-inset-top));border-bottom:2px solid var(--ink)}
.head .logo{width:38px;height:38px;margin-right:12px}
.head-title h1{font:600 21px/1.1 var(--font-display);white-space:nowrap}
.head-title p{color:var(--muted);font-size:13px;margin-top:2px}
.kpis{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}
.kpi{display:block;border:1.5px solid var(--ink);background:var(--paper);padding:4px 8px;margin:0 3px;text-align:center;min-width:78px}
.kpi b{display:block;font:600 21px/1.1 var(--font-display)}
.kpi span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.kpi.hot{background:var(--band)}
.kpi.bad{background:var(--problem);color:#fff;border-color:var(--problem)}
.kpi.bad span{color:#fff}
.clock{text-align:right;min-width:112px}
.clock .time{font:600 28px/1 var(--font-display)}
.sync{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap}
.sync .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:5px;vertical-align:1px}
.sync.stale .dot{background:var(--problem)}
.sync.stale{color:var(--problem)}

.page{padding:12px 14px 40px}
.cols{display:grid;grid-template-columns:1fr 1fr 1fr;grid-column-gap:12px;-webkit-align-items:start;align-items:start}
.col{min-width:0}
.col h2,.block-head h2{font:600 15px/1 var(--font-display);text-transform:uppercase;letter-spacing:.05em;padding:7px 10px;background:var(--ink);color:var(--bg)}
.col h2 .count{float:right;color:var(--band)}
.body{padding-top:8px}

.group{font:600 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:10px 0 6px}
.group:first-child{margin-top:2px}
.empty{color:var(--muted);font-size:14px;padding:10px 0}

/* Cards */
.card{display:block;background:var(--paper);border:1.5px solid var(--ink);padding:9px 11px;margin-bottom:8px}
.card.today{border-left:8px solid var(--band)}
.card.alert{border-color:var(--problem)}
.row{display:-webkit-flex;display:flex;-webkit-align-items:baseline;align-items:baseline}
.row .grow{-webkit-flex:1;flex:1;min-width:0}
.ref{font-size:12px;color:var(--muted);margin-right:6px}
.title{font-weight:700;font-size:16px;line-height:1.25;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pill{display:inline-block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:2px 6px;border:1.5px solid var(--ink);white-space:nowrap;margin-left:6px}
.pill.band{background:var(--band)}
.pill.ink{background:var(--ink);color:var(--bg)}
.pill.bad{background:var(--problem);border-color:var(--problem);color:#fff}
.pill.ok{background:var(--ok-pale);border-color:var(--ok);color:var(--ok)}
.pill.soft{border-color:var(--rule);color:var(--muted)}
.amount{font:600 17px/1 var(--font-display);white-space:nowrap;margin-left:8px}

.bar{display:-webkit-flex;display:flex;height:12px;border:1.5px solid var(--ink);background:var(--paper);margin:8px 0 5px}
.bar i{display:block;height:100%}
.bar .done{background:var(--ink)}
.bar .partly{background:var(--band)}
.bar .rework{background:var(--problem)}
.facts{font-size:13px;color:var(--muted)}
.facts b{color:var(--ink)}
.facts .warn{color:var(--problem);font-weight:700}
.facts span{margin-right:10px;white-space:nowrap;display:inline-block}
.who{font-size:13px;color:var(--muted);margin-top:2px}
.tile .where{margin-top:6px}
.lines{font-size:13px;margin-top:5px;border-top:1px solid var(--rule-soft);padding-top:5px}
.lines div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lines .ref{font-size:12px}

/* Partners: tiles grouped by trade */
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:10px}
.ptile{background:var(--paper);border:1.5px solid var(--ink);padding:10px 12px;min-width:0}
.ptile.today{border-left:8px solid var(--band)}
.ptile.alert{border-color:var(--problem)}
.nums{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:6px;margin:9px 0 4px}
.num{border-top:1.5px solid var(--ink);padding-top:4px}
.num b{display:block;font:600 19px/1.1 var(--font-display);white-space:nowrap}
.num span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.num.owe b{color:var(--problem)}
.trades{margin-top:3px}
.detail{font-size:12.5px;color:var(--muted);margin-bottom:4px}
.trades .pill{margin:3px 4px 0 0;font-size:10px}

/* Stock */
.block{margin-top:22px;padding-top:4px}
.block-head{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-flex-wrap:wrap;flex-wrap:wrap;background:var(--ink);padding:6px 8px}
.block-head h2{padding:4px 6px 4px 2px;margin-right:8px;background:none}
.chips{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap}
.chip{font:600 13px/1 var(--font-body);color:var(--bg);background:none;border:1.5px solid rgba(255,252,240,.45);padding:8px 12px;margin:3px 6px 3px 0;-webkit-appearance:none;border-radius:0}
.chip.on{background:var(--band);color:var(--ink);border-color:var(--band)}
#stock-search{margin-left:auto;font:400 15px/1 var(--font-body);padding:9px 10px;border:1.5px solid var(--bg);background:var(--paper);color:var(--ink);width:210px;border-radius:0;-webkit-appearance:none;margin:3px 0}
.sub-head{font:600 14px/1 var(--font-display);text-transform:uppercase;letter-spacing:.05em;margin:22px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--ink)}
.cat{font:600 12px/1 var(--font-body);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:16px 0 8px}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px}
.tile{background:var(--paper);border:1.5px solid var(--ink);padding:10px 11px 9px;min-width:0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column}
.tile.low{background:var(--pale)}
.tile.short{background:var(--problem-pale);border-color:var(--problem)}
.tile .name{font-weight:700;font-size:14px;line-height:1.25;min-height:35px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-wrap:break-word}
.tile .big{margin-top:6px}
.tile .big b{font:600 30px/1 var(--font-display)}
.tile .big span{font-size:13px;color:var(--muted);margin-left:4px}
.tile.short .big b{color:var(--problem)}
.tile .free-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.level{position:relative;height:8px;background:var(--rule-soft);margin:8px 0 6px}
.level i{position:absolute;top:0;bottom:0;left:0;display:block}
.level .f{background:var(--ink)}
.tile.low .level .f{background:#C99A00}
.tile.short .level .f{background:var(--problem)}
.level .r{background:var(--band)}
.level .mark{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--problem)}
.where{font-size:12.5px;color:var(--muted)}
.where b{color:var(--ink)}
.held{font-size:12px;color:var(--ink);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .status{margin-top:auto;padding-top:6px}
.tile .status .pill{margin-left:0}

table.moves{width:100%;border-collapse:collapse;font-size:14px;background:var(--paper);border:1.5px solid var(--ink)}
.moves th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:600;padding:7px 8px;border-bottom:1.5px solid var(--ink)}
.moves td{padding:7px 8px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.moves td.q{text-align:right;font-weight:700;white-space:nowrap}
.moves th.q{text-align:right}
.moves td.q.in{color:var(--ok)}
.moves td.q.out{color:var(--problem)}
.moves .unit{color:var(--muted);font-size:12px;font-weight:400}

.signed-out{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;background:rgba(43,46,49,.55);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}
.signed-out .box{background:var(--bg);border:2px solid var(--ink);padding:28px 32px;text-align:center;max-width:360px}
.signed-out h2{font:600 24px/1.2 var(--font-display);margin-bottom:8px}
.signed-out p{color:var(--muted);margin-bottom:18px}
.btn{display:inline-block;background:var(--ink);color:var(--bg);font-weight:700;padding:13px 28px;border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--band)}

/* Portrait: delivery across the top, quotations and partners side by side, stock tiles in threes. */
@media (orientation:portrait),(max-width:900px){
  .cols{grid-template-columns:1fr 1fr;grid-row-gap:14px}
  .cols .col:first-child{grid-column:1 / span 2}
  .tiles{grid-template-columns:repeat(3,1fr)}
  .ptiles{grid-template-columns:1fr 1fr}
  .kpi{min-width:0;padding:4px 7px;margin:0 3px}
  .kpi b{font-size:18px}
  .head .logo{display:none}
  .head-title{display:none}
  .kpis{-webkit-justify-content:flex-start;justify-content:flex-start}
  #stock-search{width:100%}
}
@media (max-width:600px){
  .cols{grid-template-columns:1fr}
  .cols .col:first-child{grid-column:auto}
  .tiles{grid-template-columns:1fr 1fr}
  .ptiles{grid-template-columns:1fr}
  .head{-webkit-flex-wrap:wrap;flex-wrap:wrap}
  .kpis{-webkit-order:3;order:3;width:100%;-webkit-flex:none;flex:none;margin-top:8px;-webkit-justify-content:space-between;justify-content:space-between}
  .kpi{-webkit-flex:1;flex:1}
  .head-title{-webkit-flex:1;flex:1}
}