:root{
  /* The ESS Maintenance palette, verbatim, so the two apps read as one system.
     That app is dark by default and flips to light when the machine is, and this
     one now does the same — a tech's phone in the sun goes light on its own. */
  --bg:#0f1216; --panel:#171b21; --panel2:#1e242c; --line:#2a323c;
  --ink:#e6eaef; --muted:#8d99a8;
  --accent:#4f9cf9; --accent2:#2b6fc4; --accent-soft:#1b2a3a;
  /* Text that sits ON an accent fill. Blue is light enough that this has to be
     stated rather than assumed white. */
  --on-accent:#fff;
  --ok:#3fb950; --ok-soft:#16281a;
  --warn:#d29922; --warn-soft:#2b2414;
  --danger:#f85149; --danger-soft:#2b1a1a;
  --bar:#171b21; --bar-line:#2a323c;
  --field:#0f1216;                 /* an input's own background */
  --radius:10px;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f6f8; --panel:#fff; --panel2:#f0f3f6; --line:#dce1e7;
    --ink:#1b2028; --muted:#66717f;
    --accent:#1f6feb; --accent2:#1a5cc4; --accent-soft:#e8f0fd;
    --ok:#1a7f37; --ok-soft:#e6f4ea;
    --warn:#9a6700; --warn-soft:#fdf5e6;
    --danger:#cf222e; --danger-soft:#fdecea;
    --field:#fff;
    --shadow:0 1px 2px rgba(20,28,40,.06),0 4px 14px rgba(20,28,40,.05);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* One knob for the whole interface: every font-size below is in rem, so changing
   this root value scales all of it. Setup → Company writes it per device. */
html{font-size:19.5px}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:1rem;line-height:1.45;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
/* Not `color:inherit` — a control inside any coloured panel would take that
   panel's text colour and disappear against its own white background. */
input,select,textarea{font:inherit;color:var(--ink)}
a{color:var(--accent)}

/* ---- app chrome */
/* The header follows the panel colour, exactly as ESS Maintenance does, so in
   light mode it is a white bar and in dark mode it is the same near-black. The
   wordmark has two colourways and swaps with it. */
.topbar{position:sticky;top:0;z-index:30;background:var(--panel);color:var(--ink);padding:10px 14px;
  display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line)}
.topbar h1{font-size:0.875rem;margin:0;font-weight:500;letter-spacing:.2px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;color:var(--muted)}
.topbar .logo{height:24px;width:auto;flex:0 0 auto;display:block}
.topbar .logo.light{display:block}
.topbar .logo.dark{display:none}
@media (prefers-color-scheme: light){
  .topbar .logo.light{display:none}
  .topbar .logo.dark{display:block}
}
.topbar .who{font-size:0.84rem;opacity:.85;white-space:nowrap}
.topbar button{background:var(--panel2);border:1px solid var(--line);color:var(--ink);border-radius:6px;
  padding:5px 10px;font-size:0.8125rem;cursor:pointer}
.topbar button:hover{border-color:var(--accent)}
.tabs{display:flex;gap:2px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:51px;z-index:29;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs button{flex:0 0 auto;background:none;border:0;border-bottom:3px solid transparent;padding:11px 15px;
  font-size:0.875rem;color:var(--muted);cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0}
/* Which screen you are on should be readable from across the shop, not inferred
   from a hairline. Tint, weight and a thick rule, all saying the same thing. */
.tabs button.on{color:var(--on-accent);background:var(--accent);border-bottom-color:var(--accent2);font-weight:700}
.tabs button:hover:not(.on){background:var(--accent-soft);color:var(--accent)}
/* Forms stay in a readable measure; data-heavy screens take the whole window. */
main{max-width:1100px;margin:0 auto;padding:16px 14px 80px}
main.wide{max-width:none;padding:16px 20px 80px}
/* A 1500px-wide text input is no easier to fill in than a 500px one. */
main.wide .formish .row > *{max-width:420px}

/* ---- primitives */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px;box-shadow:var(--shadow)}
.card h2{margin:0 0 10px;font-size:0.9375rem;font-weight:650}
.card h3{margin:14px 0 8px;font-size:0.82rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>*{flex:1 1 150px;min-width:0}
label{display:block;font-size:0.8rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);font-weight:700;margin:0 0 4px}
input,select,textarea{width:100%;padding:10px 11px;border:1px solid var(--line);border-radius:8px;
  background:var(--field);color:var(--ink);-webkit-text-fill-color:var(--ink);font-size:1rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
textarea{min-height:76px;resize:vertical}
.field{margin-bottom:11px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:11px 16px;font-size:0.9375rem;font-weight:600;cursor:pointer}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
.btn.wide{width:100%}
.btn.sm{padding:7px 11px;font-size:0.8438rem}
.muted{color:var(--muted)}
.small{font-size:0.875rem}
.tiny{font-size:0.8rem}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:0.8rem;font-weight:650;background:var(--accent-soft);color:var(--accent)}
.pill.warn{background:var(--warn-soft);color:var(--warn)}
.pill.danger{background:var(--danger-soft);color:var(--danger)}
.pill.grey{background:var(--panel2);color:var(--muted)}
.spacer{height:10px}
.right{text-align:right}
.hr{height:1px;background:var(--line);margin:12px 0}

/* ---- lists */
.list{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
.item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;width:100%;text-align:left}
.item:last-child{border-bottom:0}
.item:hover{background:var(--panel2)}
.item .grow{flex:1;min-width:0}
/* A row whose main body is tappable while a Directions link sits beside it */
.rowmain{flex:1 1 0;min-width:0;max-width:100%;display:block;text-align:left;background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit}
.item .godir{flex:0 0 auto;text-decoration:none;padding:7px 14px}
/* Title over detail. As inline spans these ran together — "4102 Sunnyside RdEdina". */
.item .t{font-weight:600;font-size:0.9375rem;display:block;min-width:0}
.item .s{font-size:0.875rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;min-width:0}
/* Inside a row button these are inline, and an inline box cannot ellipsis — the
   text just ran off the card and under the Go button on a phone. */
/* A plan's detail line carries the next date, which must not be ellipsised away
   on a phone — let these wrap instead. */
.planrow .s{white-space:normal}
.rowmain .t,.rowmain .s{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis}
.rowmain .t{white-space:normal}
/* When and what the tech is doing should not be the part that gets truncated. */
.rowmain .when{color:var(--ink)}
.empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:0.875rem}

/* ---- tables */
table{width:100%;border-collapse:collapse;font-size:0.9rem}
th{text-align:left;font-size:0.78rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- station chips */
.station{border:1px solid var(--line);border-radius:var(--radius);padding:11px 12px;margin-bottom:9px;background:var(--panel)}
.station.done{border-color:var(--line);background:var(--accent-soft)}
.station .hd{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.station .no{font-weight:700;font-size:0.9375rem}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:7px 13px;font-size:0.8438rem;cursor:pointer;white-space:nowrap}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.chip.on.act{background:var(--warn);border-color:var(--warn)}
.chip.on.bad{background:var(--danger);border-color:var(--danger)}

/* ---- pin */
.center{min-height:72vh;display:flex;align-items:center;justify-content:center;padding:20px}
.pinbox{max-width:340px;width:100%}
.pindots{display:flex;gap:9px;justify-content:center;margin:16px 0}
.pindots i{width:13px;height:13px;border-radius:50%;background:var(--line);display:block}
.pindots i.on{background:var(--accent)}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.keys button{padding:17px 0;font-size:1.3125rem;border:1px solid var(--line);background:var(--panel);border-radius:10px;cursor:pointer}

/* ---- misc */
.banner{padding:11px 13px;border-radius:8px;font-size:0.875rem;margin-bottom:12px}
.banner.ok{background:var(--accent-soft);color:var(--accent)}
.banner.err{background:var(--danger-soft);color:var(--danger)}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.sticky-save{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:10px;z-index:25}
.sticky-save .btn{flex:1}
.photos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.photos img{width:74px;height:74px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.appl{border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:8px;background:var(--panel2);font-size:0.875rem}
.appl b{font-size:0.9062rem}
@media (min-width:700px){ main{padding:20px 18px 80px} }
@media (min-width:1500px){ main.wide{padding-left:28px;padding-right:28px} }

/* Logo on the white sign-in / setup card */
/* The sign-in mark, in the colourway that shows against the panel behind it —
   the black wordmark on a near-black card is the logo not being there at all. */
.logo-mark{display:block;width:auto;max-width:210px;height:auto;margin:2px auto 14px}
.logo-mark.light{display:block}
.logo-mark.dark{display:none}
@media (prefers-color-scheme: light){
  .logo-mark.light{display:none}
  .logo-mark.dark{display:block}
}

/* ---- dispatch board */
.dispatch{font-size:0.875rem}
.dispatch th{white-space:nowrap;position:sticky;top:0;background:var(--panel);z-index:2}
.dispatch td{vertical-align:middle}
.dispatch tr.picked td{background:var(--accent-soft)}
.dispatch tr.totals td{background:var(--panel2);border-top:2px solid var(--line);border-bottom:0}
.dispatch .ordbox{width:40px;padding:5px 6px;text-align:center;font-size:0.8125rem}
.dispatch .godir{padding:5px 10px;font-size:0.84rem}
.linky{background:none;border:0;padding:0;font:inherit;color:var(--accent);font-weight:600;cursor:pointer;text-align:left}
.linky:hover{text-decoration:underline}
.dispatch-cards{display:none}
.dispatch-cards .item{gap:10px}
.dispatch-cards .item.picked{background:var(--accent-soft)}
/* A twelve-column table is unreadable on a phone, so the same rows become cards. */
@media (max-width:760px){
  .dispatch-table{display:none}
  .dispatch-cards{display:block}
}
.pinnum{width:26px;height:26px;border-radius:50%;color:#fff;font-size:0.7812rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--panel);box-shadow:0 1px 4px rgba(0,0,0,.35)}
.flash{animation:flash 1.4s ease-out}
@keyframes flash{0%{background:var(--warn-soft)}100%{background:transparent}}
.dispatch tr.flash td{animation:flash 1.4s ease-out}
.dispatch tr.closed td{opacity:.62}
.dispatch tr.closed .linky{color:var(--muted)}
.item.closed .t{color:var(--muted);font-weight:600}
.item.closed{opacity:.75}
.pill.ok{background:var(--accent-soft);color:var(--accent)}

/* The role grid: a wide left column of what the capability is, then one narrow
   tick column per role. */
.rolegrid td,.rolegrid th{vertical-align:top;padding:9px 8px}
.rolegrid tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.rolegrid input[type=checkbox]{transform:scale(1.35);margin-top:3px}

/* The date picker is the control on this screen that gets used most, and on a
   white card with a hairline border it disappears. Give it its own tinted block
   and an accent edge so the eye lands on it. */
.daypick{flex:0 0 auto;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px 10px}
.daypick label{color:var(--accent);margin-bottom:5px}
.daypick-row{display:flex;gap:8px;align-items:center}
.daypick input[type=date]{width:auto;min-width:165px;border:1.5px solid var(--accent);
  background:var(--panel);font-weight:600;padding:9px 11px}
.daypick input[type=date]:focus{outline:2px solid var(--accent);outline-offset:1px}
.daypick .btn.sec{border-color:var(--accent);color:var(--accent);font-weight:700;white-space:nowrap}
/* The arrow between the two ends of the range does the work a "to" label would,
   without a second line of text in a control that is already two boxes wide. */
.daypick .tothe{color:var(--accent);font-weight:700;flex:0 0 auto;font-size:0.95rem}
/* Presets sit under the boxes: the common spans are one click, the odd ones are
   still typed. Same chip styling as the week strip so the panel reads as one. */
.daypick .rangepresets{gap:5px;margin-top:7px}
.daypick .rangepresets .chip{background:var(--panel);border-color:var(--line);
  padding:4px 9px;font-size:0.72rem;font-weight:700}
.daypick .rangepresets .chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
@media (max-width:760px){
  .daypick{width:100%}
  .daypick input[type=date]{flex:1;min-width:0}
}

.nowrap{white-space:nowrap}

/* Estimate line editor: inputs sit flush in the cells so the row reads as a row. */
.estlines td{padding:5px 6px}
.estlines input,.estlines select{padding:8px 9px}
.estlines input.right{text-align:right}

/* The week strip is the other control this screen lives on, so it gets the same
   treatment as the date picker rather than floating loose on the white card. */
.weekpick{flex:1 1 auto;min-width:0;background:var(--accent-soft);border:1px solid var(--line);
  border-radius:10px;padding:9px 11px 10px}
.weekpick label{color:var(--accent);margin-bottom:6px}
.weekpick .chips{gap:5px}
.weekpick .chip.day{background:var(--panel);border-color:var(--line);min-width:46px;padding:5px 9px;
  text-align:center;line-height:1.15;font-weight:600}
.weekpick .chip.day .dow{display:block;font-size:0.6rem;letter-spacing:.4px;color:var(--muted);font-weight:700}
.weekpick .chip.day.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.weekpick .chip.day.on .dow{color:rgba(255,255,255,.72)}
/* Today is worth finding even when you are looking at another day. */
.weekpick .chip.day.istoday:not(.on){border-color:var(--accent);border-width:2px;color:var(--accent)}
.weekpick .chip.day.istoday:not(.on) .dow{color:var(--accent)}
.weekpick .chip.nav{background:var(--panel);border-color:var(--line);color:var(--accent);font-weight:700;padding:7px 11px}
/* A range can run past the seven days the strip shows. Without this the arrow
   looks inert and the range looks as though it stops on Saturday. */
.weekpick .chip.nav.contd{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}

.hint{color:var(--muted);font-size:0.8rem;margin:4px 0 0;line-height:1.4}

/* The book's filter bar and tab strip — one row on a desktop, stacked on a phone. */
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.filterbar input{flex:1 1 260px;min-width:0;margin:0}
.subtabs{display:flex;gap:6px;margin:12px 0 10px;flex-wrap:wrap}
.subtab{background:var(--panel);border:1px solid var(--line);border-bottom-width:2px;border-radius:9px 9px 0 0;
  padding:9px 15px;font:inherit;font-size:0.9rem;font-weight:600;color:var(--muted);cursor:pointer;
  display:flex;align-items:center;gap:7px}
.subtab.on{background:var(--accent-soft);border-color:var(--line);border-bottom-color:var(--accent);color:var(--accent)}
.subtab .pill{font-size:0.7rem;padding:1px 7px}

/* Tags and the selection bar. */
.tickcol{width:40px;text-align:center;padding-left:10px;padding-right:0}
.tickcol input{width:17px;height:17px;margin:0;cursor:pointer;accent-color:var(--accent)}
.tagrow{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.tagchip{display:inline-flex;align-items:center;gap:5px;background:var(--tc,var(--muted));color:var(--on-accent);
  border-radius:999px;padding:2px 9px;font-size:0.68rem;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.tagchip .x{background:none;border:0;color:rgba(255,255,255,.75);font-size:0.9rem;line-height:1;
  padding:0 0 0 1px;cursor:pointer}
.tagchip .x:hover{color:#fff}
.tagchip .n{background:rgba(255,255,255,.28);border-radius:999px;padding:0 5px;font-size:0.62rem}
.selbar{position:sticky;top:104px;z-index:28;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--accent);color:var(--on-accent);border-radius:10px;padding:9px 12px;margin:0 0 10px;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.selbar b{font-size:0.9rem}
/* The bar sets white text for its own labels; the input sits on white, so it
   has to say otherwise or you are typing in invisible ink. */
.selbar input{flex:0 1 190px;margin:0;padding:7px 10px;font-size:0.85rem;border-radius:8px;border:0;
  background:var(--field);color:var(--ink);-webkit-text-fill-color:var(--ink)}
.selbar input::placeholder{color:var(--muted);opacity:1}
.selbar input:focus{outline:2px solid #fff;outline-offset:1px}
.selbar .btn.sec{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.35);color:#fff}
.selbar .btn:not(.sec){background:var(--panel);color:var(--accent);border-color:var(--panel);font-weight:700}

/* Dispatch week calendar. Eight columns that scroll sideways rather than
   squeezing: a 90px-wide day column is unreadable, and a phone should swipe. */
.calhint{margin:0 0 8px}
.calgrid{display:grid;grid-template-columns:minmax(200px,1fr) repeat(7,minmax(190px,1fr));gap:8px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px;align-items:start}
.calcol{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  min-height:180px;display:flex;flex-direction:column}
.calcol.backlogcol{background:var(--panel2)}
.calcol.istoday{border-color:var(--accent);border-width:2px}
.calcol.dropping{background:var(--accent-soft);border-color:var(--accent);border-style:dashed;border-width:2px}
.calhead{display:flex;align-items:center;gap:7px;padding:9px 10px;border-bottom:1px solid var(--line);
  font-size:0.84rem;position:sticky;top:0;background:inherit;border-radius:var(--radius) var(--radius) 0 0}
.calhead .n{background:var(--panel2);border:1px solid var(--line);border-radius:999px;
  padding:0 7px;font-size:0.7rem;font-weight:700;color:var(--muted)}
.calcol.istoday .calhead b{color:var(--accent)}
.calbody{padding:8px;display:flex;flex-direction:column;gap:7px;flex:1}
.calempty{color:var(--muted);font-size:0.78rem;text-align:center;padding:12px 0}
.jobcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--muted);
  border-radius:8px;padding:8px 9px;cursor:grab;touch-action:none;user-select:none;
  -webkit-user-drag:none;-webkit-user-select:none}
.jobcard:hover{border-color:var(--accent)}
.jobcard .t{font-weight:700;font-size:0.82rem;line-height:1.25}
.jobcard .s{font-size:0.74rem;color:var(--muted);line-height:1.3}
.jobcard .meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:5px}
.jobcard .meta .pill{font-size:0.64rem;padding:1px 6px}
.jobcard.p-high{border-left-color:var(--danger)}
.jobcard.p-low{border-left-color:var(--line)}
.jobcard.closed{opacity:.55;cursor:default}
.jobcard.dragging{opacity:.35}
.jobcard.ghost{position:fixed;z-index:999;pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.35);
  transform:rotate(1.5deg);opacity:.95;cursor:grabbing}

/* Reordering. A grip rather than the whole row, so dragging can never be
   confused with editing the stop number sitting next to it. */
.ordcell{display:flex;align-items:center;gap:5px}
.grip{cursor:grab;color:var(--muted);font-size:0.9rem;line-height:1;touch-action:none;user-select:none;
  padding:2px 1px;letter-spacing:-2px}
.grip:hover{color:var(--accent)}
tr.dragging{opacity:.4}
tr.insert-before > td{box-shadow:inset 0 2px 0 var(--accent)}
tr.insert-before[data-after="1"] > td{box-shadow:inset 0 -2px 0 var(--accent)}
.jobcard .stop{display:inline-block;min-width:16px;margin-right:5px;color:var(--muted);font-weight:700;
  font-size:0.7rem}
.jobcard.insert-before{box-shadow:0 -3px 0 var(--accent)}
.calcol.dropping.append .calbody{box-shadow:inset 0 -3px 0 var(--accent)}

/* Saved views: one row of chips, the way the filters above them read. */
.viewbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.chip.view .star{color:var(--warn);font-size:0.7rem}
.chip.view.on .star{color:#fff}
.consentline{display:flex;align-items:center;gap:8px;margin:10px 0 0;text-transform:none;
  letter-spacing:0;font-weight:400;color:var(--ink);font-size:0.85rem}
.consentline input{width:18px;height:18px;flex:0 0 auto;accent-color:var(--accent)}

/* Job notes with an audience, and photos. */
.notebox{border-radius:8px;padding:9px 11px;font-size:0.85rem;line-height:1.45;
  border-left:3px solid var(--line);background:var(--panel2)}
.notebox .lbl{display:block;font-size:0.64rem;text-transform:uppercase;letter-spacing:.6px;
  font-weight:700;color:var(--muted);margin-bottom:3px}
.notebox.sched{border-left-color:var(--accent)}
.notebox.sched .lbl{color:var(--accent)}
.notebox.internal{border-left-color:var(--warn);background:var(--warn-soft)}
.notebox.internal .lbl{color:var(--warn)}
.photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.shot{margin:0;position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:8px;
  overflow:hidden}
.shot img{display:block;width:100%;height:120px;object-fit:cover;background:var(--panel2)}
.shot figcaption{padding:6px 7px}
.shot figcaption input{padding:5px 7px;font-size:0.76rem;margin:0}
.shot .x{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.6);color:#fff;border:0;
  border-radius:6px;padding:2px 7px;font-size:0.72rem;cursor:pointer}
.shot .x:hover{background:var(--danger)}

/* Backup: a key you copy once, and a command you paste. */
.codeblock{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.78rem;overflow-x:auto;margin:8px 0}
.keyline{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:0.8rem;
  word-break:break-all;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:8px 10px;margin-top:7px;user-select:all}