/* Lura Ops — lifted from the prototype so the built app reads the same as the
   thing that was signed off. Light and dark both, following the device. */

:root {
  --bg: #f6f7f9; --fg: #16181d; --card: #fff; --line: #e3e5ea; --muted: #767c88;
  --field: #fbfbfc; --field-line: #d3d7de; --soft: #f0f1f4;
  --exp-bg: #fffaf9; --exp-line: #e8b4ad;
  --note-bg: #fffdf5; --note-line: #e8d9a8; --note-fg: #6b5a1f; --note-b: #4a3f10;
  --purple: #6b28b8; --purple-bg: #f3e8fd;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1114; --fg: #e8eaee; --card: #181b20; --line: #2a2f37; --muted: #8b93a1;
    --field: #12151a; --field-line: #333944; --soft: #242931;
    --exp-bg: #211614; --exp-line: #5c2a24;
    --note-bg: #1d1a12; --note-line: #4a3f10; --note-fg: #d8c98f; --note-b: #f0e4b8;
    --purple: #c9a6f5; --purple-bg: #2a1b3d;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg); color: var(--fg);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

.top { background: #16181d; color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 14px; }
.top h1 { margin: 0; font-size: 16px; font-weight: 600; }
.top a { text-decoration: none; }
.sp { flex: 1; }
.whoami { background: #2a2f37; color: #fff; border-radius: 7px; padding: 6px 10px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.whoami form { display: flex; }
.signout { background: none; border: 0; color: #8b93a1; font: inherit; font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.signout:hover { color: #fff; }

nav { background: var(--card); border-bottom: 1px solid var(--line); padding: 0 16px; display: flex; gap: 2px; overflow-x: auto; }
nav a { padding: 13px; font-size: 14px; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; }
nav a.on { color: var(--fg); border-bottom-color: var(--fg); font-weight: 600; }
nav a .pip { display: inline-block; background: #d1483a; color: #fff; border-radius: 9px; font-size: 11px; padding: 0 6px; margin-left: 5px; font-weight: 700; vertical-align: 1px; }

main { max-width: 780px; margin: 0 auto; padding: 20px 14px 70px; }
h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 4px; }
h3 { font-size: 15px; margin: 26px 0 8px; }
.lead { margin: 0 0 16px; font-size: 13px; color: var(--muted); }

.pcard, .card, .row { background: var(--card); border: 1px solid var(--line); border-radius: 10px; }
.pcard { padding: 14px; margin-bottom: 10px; display: block; text-decoration: none; color: inherit; }
.pcard:hover { border-color: var(--muted); }
.ph { display: flex; align-items: center; margin-bottom: 9px; }
.ph b { font-size: 15px; }
.ph .jt { font-size: 12px; color: var(--muted); margin-left: 8px; }
.cnt { margin-left: auto; font-size: 12px; color: var(--muted); }

.bars { display: flex; height: 7px; border-radius: 4px; overflow: hidden; gap: 2px; margin-bottom: 9px; background: var(--soft); }
.bars span { display: block; }
.s-new { background: #c9ced7; } .s-on { background: #4a86e8; }
.s-blk { background: #e8a33d; } .s-exp { background: #d1483a; }
.leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted); }
.leg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }

.card { padding: 14px; margin-bottom: 10px; }
.src { font-size: 11.5px; color: var(--muted); margin-bottom: 7px; font-family: ui-monospace, monospace; }
.src.sp { color: var(--purple); font-family: inherit; font-weight: 600; }
.purple { color: var(--purple); font-weight: 600; }

textarea.item { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 9px; font: inherit; font-size: 14.5px; resize: vertical; min-height: 50px; background: var(--field); color: var(--fg); }

.ctl { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; align-items: flex-end; }
.ctl label { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.ctl select, .ctl input, .ctl textarea { border: 1px solid var(--field-line); border-radius: 6px; padding: 6px 8px; font: inherit; font-size: 13px; background: var(--card); color: var(--fg); }
.ctl input { width: 150px; }

.btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.btns button { border: 0; border-radius: 7px; padding: 8px 15px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.ok { background: var(--fg); color: var(--bg); }
.no { background: var(--soft); color: var(--muted); }
button:disabled { opacity: .5; cursor: default; }
form.inline { display: inline-flex; align-items: center; margin: 0; }

.row { padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; }
.row.r-done { opacity: .5; }
.row.r-exp { border-color: var(--exp-line); background: var(--exp-bg); }
.tw { flex: 1; min-width: 0; }
.row p { margin: 0 0 6px; font-size: 14.5px; }
.meta { display: flex; gap: 7px; flex-wrap: wrap; font-size: 12px; align-items: center; }
.badge { border-radius: 5px; padding: 1px 7px; font-weight: 600; }
.b-new { background: #eef0f3; color: #5a616e; }
.b-on { background: #e6eefc; color: #1c4fa1; }
.b-blk { background: #fdf0d9; color: #8a5a00; }
.b-done { background: #dff2e5; color: #186b38; }
.b-exp { background: #fde5e2; color: #a3251a; }
.b-adm { background: var(--purple-bg); color: var(--purple); }
.due { color: var(--muted); }
.due.od { color: #a3251a; font-weight: 600; }
.tagd { background: var(--purple-bg); color: var(--purple); border-radius: 5px; padding: 1px 7px; font-weight: 600; }
.nt { margin-top: 7px; font-size: 12.5px; color: var(--muted); border-left: 2px solid var(--line); padding-left: 8px; }
.ra { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; }
.mini { border: 1px solid var(--field-line); background: var(--card); border-radius: 6px; padding: 4px 9px; font-size: 12px; color: var(--fg); cursor: pointer; font-weight: 600; font-family: inherit; text-decoration: none; display: inline-block; }
.mini:hover { background: var(--soft); }
.mini.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
select.tiny { border: 1px solid var(--field-line); border-radius: 6px; padding: 2px 6px; font: inherit; font-size: 12px; background: var(--card); color: var(--fg); margin-left: 4px; }

.note { background: var(--note-bg); border: 1px dashed var(--note-line); border-radius: 8px; padding: 11px 13px; margin: 0 0 16px; font-size: 13.5px; color: var(--note-fg); }
.note b { color: var(--note-b); }
.note code { font-family: ui-monospace, monospace; font-size: 12.5px; }
.err { background: #fde5e2; border: 1px solid #e8b4ad; color: #a3251a; border-radius: 8px; padding: 10px 13px; margin: 0 0 14px; font-size: 13.5px; }
.good { background: #dff2e5; border: 1px solid #a9d9bd; color: #186b38; border-radius: 8px; padding: 10px 13px; margin: 0 0 14px; font-size: 13.5px; }
.empty { color: var(--muted); font-size: 13.5px; padding: 18px 0; text-align: center; }

dialog { border: 0; border-radius: 12px; padding: 0; max-width: 440px; width: calc(100% - 32px); background: var(--card); color: var(--fg); }
dialog::backdrop { background: rgba(12, 14, 18, .55); }
.mbox { padding: 18px; }
.mbox h3 { margin: 0 0 4px; font-size: 16px; }
.mbox .lead { margin-bottom: 14px; }
.mbox label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.mbox textarea, .mbox input[type=text], .mbox select { width: 100%; border: 1px solid var(--field-line); border-radius: 7px; padding: 9px; font: inherit; font-size: 14px; margin-bottom: 12px; background: var(--card); color: var(--fg); }
.mbox .pair { display: flex; gap: 8px; }
.req { color: #a3251a; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg); margin: 4px 0 14px; }
label.check input { width: 17px; height: 17px; margin: 0; }
label.check.small { font-size: 12.5px; color: var(--muted); margin: 0; }

.gridwrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }
table.grid { border-collapse: collapse; font-size: 13px; }
table.grid th, table.grid td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--line); }
table.grid th.rowh, table.grid td.rowh { text-align: left; font-weight: 600; white-space: nowrap; }
table.grid th { font-weight: 600; color: var(--muted); font-size: 12px; }
table.grid td.self { color: var(--muted); }
table.grid input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #4a86e8; }

.login { max-width: 380px; margin: 14vh auto; padding: 0 20px; text-align: center; }
.login h1 { font-size: 22px; margin: 0 0 6px; }
.slackbtn { display: inline-flex; align-items: center; gap: 9px; background: #4a154b; color: #fff; border-radius: 9px; padding: 12px 20px; text-decoration: none; font-weight: 600; font-size: 15px; margin-top: 18px; }

/* setup wizard */
.setup { max-width: 560px; margin: 6vh auto; padding: 0 20px 60px; }
.setup h1 { font-size: 22px; margin: 0 0 4px; }
.setup .card label { display: block; font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.setup .card input[type=text], .setup .card input[type=password] { width: 100%; border: 1px solid var(--field-line); border-radius: 7px; padding: 9px; font: inherit; font-size: 14px; margin-bottom: 12px; background: var(--card); color: var(--fg); }
.setup ol { padding-left: 20px; font-size: 13.5px; color: var(--muted); }
.setup ol li { margin-bottom: 6px; }
table.counts { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.counts td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.counts td:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.chk { font-size: 13px; padding: 3px 0; display: flex; gap: 8px; }
.chk .m { color: var(--muted); flex: 1; }
.chk .v { font-variant-numeric: tabular-nums; }
.pass { color: #186b38; font-weight: 700; }
.fail { color: #a3251a; font-weight: 700; }

@media (max-width: 620px) {
  .row { flex-direction: column; }
  .ra { width: 100%; }
  .ra .mini, .ra form.inline { flex: 1; }
  .ra form.inline .mini { width: 100%; text-align: center; }
}

/* ── v3: bottom tab bar, pickers, streaks, logbook ───────────────────────── */
nav.tabs{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:780px;
  background:var(--card);border-top:1px solid var(--line);border-bottom:0;display:flex;
  padding:0 0 env(safe-area-inset-bottom,0px);z-index:6;overflow:visible}
nav.tabs a{flex:1;padding:8px 2px 7px;font-size:10.5px;text-align:center;border-bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:3px;position:relative}
nav.tabs a.on{border-bottom:0;color:var(--fg)}
nav.tabs .ic{font-size:17px;line-height:1}
nav.tabs .pip{position:absolute;top:2px;right:calc(50% - 22px);margin:0}
main.withtabs{padding-bottom:calc(96px + env(safe-area-inset-bottom,0px))}

label.fl{display:block;font-size:11.5px;color:var(--muted);font-weight:600;margin:14px 0 6px}
.tiny{font-size:11.5px;color:var(--muted);margin:6px 0 0}
.who{display:flex;gap:7px;flex-wrap:wrap}
.whobtn{border:1.5px solid var(--field-line);background:var(--card);border-radius:20px;
  padding:8px 13px;font-size:13px;font-weight:600;color:var(--fg);cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;user-select:none}
.whobtn input{position:absolute;opacity:0;width:0;height:0}
.whobtn.on,.whobtn:has(input:checked){background:#e6eefc;border-color:#1c4fa1;color:#1c4fa1}
.whobtn:has(input:checked):before{content:"✓";font-weight:700}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:6px}
.chip{border:1px solid var(--field-line);background:var(--card);border-radius:20px;padding:8px 14px;
  font-size:12.5px;font-weight:600;color:var(--fg);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;user-select:none}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip.on,.chip:has(input:checked){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.chip.sm{padding:6px 11px;font-size:12px}
.whendate{margin-top:8px}

.rep{background:#e6eefc;color:#1c4fa1;border-radius:5px;padding:1px 7px;font-weight:600;font-size:12px}
.streak{background:#fdf0d9;color:#8a5a00;border-radius:5px;padding:1px 7px;font-weight:700;font-size:12px}
.streak.hot{background:#fde5e2;color:#a3251a}
.nt.warn{border-color:#8a5a00;color:#8a5a00}
@media(prefers-color-scheme:dark){
  .rep{background:#16243d;color:#8db4f0}
  .streak{background:#2b2110;color:#e8bd6d}
  .streak.hot{background:#2a1614;color:#ff9c8f}
  .nt.warn{border-color:#e8bd6d;color:#e8bd6d}
  .whobtn.on,.whobtn:has(input:checked){background:#16243d;border-color:#8db4f0;color:#8db4f0}
}

/* approvals, collapsed */
.qrow{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
.qhead{display:flex;gap:11px;align-items:flex-start;padding:12px 14px;text-decoration:none;color:inherit}
.qhead .txt{flex:1;min-width:0}
.qhead p{margin:0 0 5px;font-size:14.5px;line-height:1.4}
.qhead .caret{color:var(--muted);font-size:13px;padding-top:2px}
.qbody{padding:0 14px 4px;border-top:1px solid var(--line);padding-top:12px}
.qfoot{padding:12px 14px}
.qbody textarea{width:100%;border:1px solid var(--line);border-radius:7px;padding:9px;font:inherit;
  font-size:14.5px;background:var(--field);color:var(--fg);min-height:52px}
.qbody select,.qbody input[type=date],.qbody input[type=time]{width:100%;border:1px solid var(--field-line);
  border-radius:8px;padding:9px;font:inherit;font-size:14px;background:var(--card);color:var(--fg)}

/* logbook */
.issue{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px;
  margin-bottom:8px;display:block;text-decoration:none;color:inherit}
.issue.hot{border-color:#e8b4ad}
.issue p{margin:0 0 6px;font-size:14.5px;line-height:1.4}
.count{background:var(--soft);color:var(--fg);border-radius:20px;padding:3px 10px;font-weight:700;font-size:12px}
.count.warm{background:#fdf0d9;color:#8a5a00}
.count.hot{background:#fde5e2;color:#a3251a}
.spark{display:flex;gap:3px;align-items:flex-end;height:20px;margin-top:8px}
.spark i{flex:1;background:var(--field-line);border-radius:2px;min-height:2px;display:block}
.spark i.h{background:#8a5a00}
.inst{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.inst p{margin:0 0 6px;font-size:14px;line-height:1.45}
.inst img{width:100%;max-height:220px;object-fit:cover;border-radius:9px;margin:4px 0 8px;display:block}
.back{display:inline-block;color:var(--muted);font-size:13px;font-weight:600;text-decoration:none;margin-bottom:10px}
.ok.wide{width:100%;border-radius:9px;padding:13px;border:0;font:inherit;font-size:14px;font-weight:700;cursor:pointer}