/* Silo Ops additions on top of grip.css (the Field Ops surface system as
   TRIMATRON ports it). grip.css owns tokens, the carbon ground, .top, the
   status board, plates, panels, stat wells, and the tab bar. Everything here
   is what a hold advisor needs that those apps do not have, marked (SILO). */

/* room for the fixed tab bar, and the top safe area: in standalone mode (and in
   Safari with its chrome collapsed) the page starts under the status bar, so
   the header pads down by the inset (iPhone 17 simulator, 2026-09-16). */
.wrap { padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.screen { animation: fadeUp .22s ease; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .screen { animation: none; } }

/* (SILO) estimate banner: amber chip tone, full width, until the drift rate is calibrated */
.est-banner { border: 1px solid rgba(255,204,102,0.45); background: rgba(255,204,102,0.07); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px;
  font: 500 12px/1.45 var(--sans); color: var(--amber); }
.est-banner b { font: 700 9px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; margin-right: 8px; }

/* (SILO) status board cells that carry a range: smaller numeral, never wraps */
.db-num.range { font-size: 15px; white-space: nowrap; letter-spacing: -0.01em; }
.db-num.range span { overflow: hidden; text-overflow: ellipsis; }

/* (SILO) the verdict plate: a tall machined plate carrying the level word and the one instruction */
.verdict { position: relative; border-radius: 12px; padding: 16px 16px 14px; margin: 0 0 10px;
  background: linear-gradient(180deg, #262a31 0%, #191c22 55%, #14171d 100%); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.09), inset 0 -2px 5px -2px rgba(0,0,0,0.7), 0 3px 7px -3px rgba(0,0,0,0.8); }
.verdict .level { font: 800 20px/1.1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.verdict .lamp { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.verdict.safe { border-color: rgba(102,229,142,0.55); } .verdict.safe .level { color: var(--green); } .verdict.safe .lamp { background: var(--green); box-shadow: 0 0 8px rgba(102,229,142,0.7); }
.verdict.adjust { border-color: rgba(255,204,102,0.6); } .verdict.adjust .level { color: var(--amber); } .verdict.adjust .lamp { background: var(--amber); box-shadow: 0 0 8px rgba(255,204,102,0.7); }
.verdict.unload { background: linear-gradient(180deg, #e04a38 0%, #cc3f2e 55%, #9a2d20 100%); border-color: rgba(255,255,255,0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), inset 0 -2px 5px -2px rgba(0,0,0,0.6), 0 3px 7px -3px rgba(0,0,0,0.8); }
.verdict.unload .level { color: #fff5f2; } .verdict.unload .lamp { background: #fff5f2; }
.verdict .rec { font: 600 19px/1.35 var(--disp); color: var(--bone); margin: 10px 0 6px; letter-spacing: 0.01em; }
.verdict.unload .rec, .verdict.unload .why, .verdict.unload .recheck { color: #fff5f2; }
.verdict .why { font: 400 14px/1.5 var(--sans); color: var(--bone-2); }
.verdict .recheck { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.1); font: 600 10px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* (SILO) form controls in the suite's field idiom: deep well, hairline, bone text, mono numerals */
.fld { display: block; min-width: 0; }
.fld > span { display: block; font: 700 9px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.fld > span small { text-transform: none; letter-spacing: 0; color: var(--faint); font-weight: 500; margin-left: 6px; }
.fld input, .fld select { width: 100%; min-height: 50px; background: var(--ink-2); border: 1px solid var(--line-hi); border-radius: 10px; color: var(--bone);
  padding: 10px 12px; font: 500 18px/1.2 var(--mono); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; }
.fld input[type=text] { font-family: var(--sans); font-size: 16px; }
.fld select { font-family: var(--sans); font-size: 16px; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.fld input::placeholder { color: var(--faint); font-family: var(--sans); font-size: 14px; }
.fld input:focus-visible, .fld select:focus-visible, .seg button:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 400px) { .grid3 { grid-template-columns: 1fr 1fr; } }
.stack > * + * { margin-top: 12px; }

/* (SILO) segmented control, the Field Ops .segmented read: mono uppercase, copper when chosen */
.seg { display: flex; gap: 4px; background: var(--ink-2); border: 1px solid var(--line-hi); border-radius: 10px; padding: 3px; }
.seg button { flex: 1 1 0; min-width: 0; min-height: 42px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted);
  font: 700 10px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; padding: 4px 6px; }
.seg button[aria-pressed="true"] { background: rgba(184,82,30,0.14); border-color: var(--blue); color: var(--blue-hi); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.chips .chip { cursor: pointer; color: var(--bone-2); border-color: var(--line-hi); background: rgba(15,18,24,0.5); font-size: 9px; padding: 8px 10px; min-height: 34px; display: inline-flex; align-items: center; }
.chips .chip:active { transform: scale(0.96); }

/* (SILO) collapsible groups inside a panel */
details.grp { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 4px; }
details.grp summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 10px; font: 700 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-2); }
details.grp summary::-webkit-details-marker { display: none; }
details.grp summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; margin-left: 2px; }
details.grp[open] summary::before { transform: rotate(45deg); }
details.grp .body { padding: 6px 0 4px; }

/* (SILO) plan blocks */
.blocks { display: flex; flex-direction: column; gap: 8px; }
.block { border-radius: 9px; border: 1px solid var(--line); background: rgba(15,18,24,0.55); padding: 10px 12px;
  box-shadow: inset 0 2px 4px -2px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.045); }
.block .when { font: 700 9px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.block .what { font: 600 15px/1.35 var(--disp); color: var(--bone); margin-top: 5px; }
.block .note { font: 400 12.5px/1.45 var(--sans); color: var(--bone-2); margin-top: 4px; }
.block.flag { border-color: rgba(255,204,102,0.5); }
.block.bad { border-color: rgba(255,92,74,0.6); }

/* (SILO) stat wells with a two-line value */
.env-grid.two { grid-template-columns: 1fr 1fr; }
.env-tile b.small { font-size: 14px; }
.env-tile i { display: block; font: 500 10px/1.3 var(--mono); color: var(--muted-2); font-style: normal; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* (SILO) watch list */
.watch { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font: 400 13px/1.5 var(--sans); color: var(--bone-2); }
.watch:first-of-type { border-top: 0; padding-top: 2px; }
.watch .dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: var(--faint); }
.watch.unload .dot { background: var(--heat); box-shadow: 0 0 6px rgba(255,92,74,0.6); }
.watch.adjust .dot { background: var(--amber); }
.watch.info .dot { background: var(--water); }

/* (SILO) tables */
table.t { width: 100%; border-collapse: collapse; font: 500 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
table.t th, table.t td { text-align: left; padding: 7px 4px; border-bottom: 1px solid var(--line); }
table.t th { font: 700 8.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
table.t td.num, table.t th.num { text-align: right; }
table.t td.bad { color: var(--heat); font-weight: 700; } table.t td.ok { color: var(--green); }
table.t td.opt { font-family: var(--sans); color: var(--bone-2); }

/* (SILO) charts */
.chart svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; font: 700 8.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.legend span::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.foot-note { font: 400 12px/1.5 var(--sans); color: var(--muted); margin-top: 8px; }

/* (SILO) key / value rows */
.kv { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font: 500 13px/1.4 var(--sans); }
.kv .k { color: var(--muted); } .kv .v { color: var(--bone); text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* (SILO) action rail: deck plates already exist; a full-width variant for forms */
.rail { display: flex; gap: 8px; margin-top: 12px; }
.rail .deck-plate { flex: 1; }
.deck-plate.ghost { color: var(--muted); }
.deck-plate:disabled { opacity: 0.45; }

/* (SILO) log rows */
.logrow { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font: 500 13px/1.4 var(--sans); align-items: center; }
.logrow:first-of-type { border-top: 0; }
.logrow .t { font: 600 10px/1.4 var(--mono); color: var(--muted); white-space: nowrap; }
.logrow .d { font-variant-numeric: tabular-nums; color: var(--bone); }
.logrow .d .muted { color: var(--muted); }
.logrow .x { background: none; border: 1px solid var(--line-hi); color: var(--muted); border-radius: 8px; width: 34px; height: 34px; font-size: 15px; cursor: pointer; }

/* (SILO) source lines in Setup */
.src { font: 400 12px/1.5 var(--sans); color: var(--muted); margin: 2px 0 8px; }
.src b { color: var(--bone-2); font-family: var(--mono); font-size: 11px; }
.ph { font: 700 8.5px/1 var(--mono); letter-spacing: 0.14em; color: var(--amber); margin-right: 6px; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.wx-status { font: 500 12.5px/1.45 var(--sans); color: var(--bone-2); }
.cell-hint { font: 500 12px/1.4 var(--sans); color: var(--muted); margin: 6px 2px 0; }