/* Layout: work-queue app. Client rail on the left, filtered review queue on the right; editor opens as a sheet. */
:root{
  --bg:#f5f6f8; --surface:#ffffff; --sunk:#eceef3; --line:#dce0e7; --line-strong:#c4cad5;
  --fg:#1a2030; --muted:#5b6476; --faint:#8a92a3;
  --accent:#c47f14; --accent-ink:#8a5508; --accent-soft:#fbefd9; --on-accent:#1c1404;
  --danger:#b3242d; --danger-soft:#fbe4e5; --warn:#8f6200; --warn-soft:#fff2cc;
  --ok:#22704a; --ok-soft:#dff1e7; --info:#2e5996; --info-soft:#e3ebf7;
  --scrim:rgba(18,22,32,.45); --shadow:0 12px 40px rgba(18,22,32,.18);
  --f-display:"Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --f-body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#10131a; --surface:#171b24; --sunk:#0c0f15; --line:#272d3a; --line-strong:#3a4252;
  --fg:#e6e8ee; --muted:#9ba3b4; --faint:#6f7789;
  --accent:#e8a53b; --accent-ink:#f0b95c; --accent-soft:#36270f; --on-accent:#1c1404;
  --danger:#f0757d; --danger-soft:#3a191c; --warn:#e6c15c; --warn-soft:#332910;
  --ok:#6bcf97; --ok-soft:#15301f; --info:#8fb1ea; --info-soft:#19243a;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 40px rgba(0,0,0,.5); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#10131a; --surface:#171b24; --sunk:#0c0f15; --line:#272d3a; --line-strong:#3a4252;
  --fg:#e6e8ee; --muted:#9ba3b4; --faint:#6f7789;
  --accent:#e8a53b; --accent-ink:#f0b95c; --accent-soft:#36270f; --on-accent:#1c1404;
  --danger:#f0757d; --danger-soft:#3a191c; --warn:#e6c15c; --warn-soft:#332910;
  --ok:#6bcf97; --ok-soft:#15301f; --info:#8fb1ea; --info-soft:#19243a;
  --scrim:rgba(0,0,0,.6); --shadow:0 12px 40px rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:14px; line-height:1.45}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.wrap{max-width:1240px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); padding-block:20px 48px}

header.top{display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; justify-content:space-between; margin-bottom:18px}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.lamp{width:34px; height:34px; border-radius:9px; background:var(--accent-soft); display:grid; place-items:center; flex:none}
.lamp svg{width:20px; height:20px}
h1{font-family:var(--f-display); font-weight:700; font-size:22px; letter-spacing:-.01em; margin:0; line-height:1.1}
.sub{color:var(--muted); font-size:13px; margin:2px 0 0}

.btn{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); border-radius:8px; padding:7px 12px; cursor:pointer; font-weight:600; font-size:13px; white-space:nowrap}
.btn:hover{background:var(--sunk)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.05); background:var(--accent)}
.btn.ghost{border-color:transparent; background:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--sunk); color:var(--fg)}
.btn.danger{color:var(--danger); border-color:var(--line)}
.btn.danger.armed{background:var(--danger); border-color:var(--danger); color:var(--surface)}
.btn:disabled{opacity:.5; cursor:not-allowed}

.notice{border:1px solid var(--line); background:var(--warn-soft); color:var(--fg); border-radius:10px; padding:10px 14px; margin-bottom:16px; font-size:13px}

.summary{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.stat{display:flex; align-items:baseline; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--muted); cursor:pointer}
.stat b{font-family:var(--f-mono); font-weight:500; font-size:14px; color:var(--fg); font-variant-numeric:tabular-nums}
.stat.overdue b{color:var(--danger)}
.stat.week b{color:var(--warn)}
.stat:hover{border-color:var(--line-strong)}

.shell{display:grid; grid-template-columns:250px minmax(0,1fr); gap:20px; align-items:start}

/* client rail */
.rail{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; position:sticky; top:calc(env(safe-area-inset-top, 0px) + 12px)}
.rail h2{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); font-weight:700; margin:6px 8px 8px}
.clients{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; max-height:60vh; overflow-y:auto}
.client-btn{width:100%; display:flex; align-items:center; gap:8px; background:none; border:0; padding:7px 8px; border-radius:7px; cursor:pointer; text-align:left}
.client-btn:hover{background:var(--sunk)}
.client-btn[aria-current="true"]{background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.client-btn .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.count{font-family:var(--f-mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.od-dot{min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--danger-soft); color:var(--danger); font-family:var(--f-mono); font-size:11px; display:inline-grid; place-items:center}
.rail-tools{display:flex; flex-direction:column; gap:6px; margin:0 2px 8px}
.rail-tools .row2{display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12px; color:var(--muted)}
.rail-tools label{display:inline-flex; align-items:center; gap:5px; cursor:pointer}
.sortbtn{background:none; border:0; padding:2px 4px; border-radius:5px; color:var(--accent-ink); font-weight:600; font-size:12px; cursor:pointer}
.sortbtn:hover{background:var(--sunk)}
.client-none{padding:8px; color:var(--faint); font-size:12px}
.add-client{display:flex; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.add-client input{flex:1; min-width:0}

input[type=text],input[type=search],input[type=date],select,textarea{background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:7px 10px; font-size:13px; width:100%}
textarea{resize:vertical; min-height:84px; line-height:1.45}

/* queue */
.queue{min-width:0}
.qhead{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.qhead h2{font-family:var(--f-display); font-weight:600; font-size:19px; margin:0; text-wrap:balance; min-width:0}
.qhead .acts{display:flex; gap:6px; flex-wrap:wrap}
.rename{display:flex; gap:6px; flex:1; min-width:220px}
.toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px}
.seg{display:inline-flex; background:var(--sunk); border-radius:9px; padding:3px; gap:2px; flex-wrap:wrap}
.seg button{border:0; background:none; padding:5px 11px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--muted); font-weight:500}
.seg button[aria-pressed="true"]{background:var(--surface); color:var(--fg); box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:600}
.toolbar .search{flex:1; min-width:180px}
.toolbar select{width:auto; min-width:150px}

.group{margin-bottom:18px}
.group-h{display:flex; align-items:baseline; gap:10px; margin:0 2px 6px; font-weight:600; font-size:13px}
.group-h button{background:none; border:0; padding:0; font-weight:700; cursor:pointer; font-size:14px}
.group-h button:hover{color:var(--accent-ink)}
.group-h .count{font-weight:400}
.list{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.row{display:grid; grid-template-columns:28px minmax(0,1fr) 120px 150px 130px; gap:12px; align-items:center; padding:10px 14px; border-top:1px solid var(--line); cursor:pointer; position:relative}
.row:first-child{border-top:0}
.row:hover{background:var(--sunk)}
.row.pri-high::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--danger)}
.row.is-done .ttl{text-decoration:line-through; color:var(--faint)}
.chk{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; cursor:pointer; padding:0}
.chk:hover{border-color:var(--ok)}
.chk svg{width:12px; height:12px; opacity:0}
.is-done .chk{background:var(--ok); border-color:var(--ok)}
.is-done .chk svg{opacity:1}
.ttl{font-weight:600; overflow-wrap:anywhere}
.meta{display:flex; flex-wrap:wrap; gap:4px 10px; color:var(--muted); font-size:12px; margin-top:2px}
.meta .note{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:46ch}
.tag{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted); background:var(--sunk); border-radius:5px; padding:1px 7px}
.due{font-family:var(--f-mono); font-size:12px; font-variant-numeric:tabular-nums; line-height:1.3}
.due small{display:block; font-family:var(--f-body); font-size:11px; color:var(--faint)}
.due.late{color:var(--danger)} .due.late small{color:var(--danger)}
.due.soon{color:var(--warn)}
.due.none{color:var(--faint)}
.who{display:flex; align-items:center; gap:7px; min-width:0; font-size:13px}
.who span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.who.none{color:var(--faint)}
.av{width:22px; height:22px; border-radius:50%; flex:none; object-fit:cover; background:var(--sunk)}
.pill{justify-self:start; font-size:12px; font-weight:600; padding:2px 9px; border-radius:999px; white-space:nowrap}
.st-open{background:var(--info-soft); color:var(--info)}
.st-progress{background:var(--accent-soft); color:var(--accent-ink)}
.st-waiting{background:var(--warn-soft); color:var(--warn)}
.st-done{background:var(--ok-soft); color:var(--ok)}

.empty{background:var(--surface); border:1px dashed var(--line-strong); border-radius:12px; padding:32px 24px; text-align:center; color:var(--muted)}
.empty h3{color:var(--fg); margin:0 0 6px; font-size:15px}
.empty p{margin:0 auto 14px; max-width:52ch}

/* editor */
dialog{border:0; padding:0; border-radius:14px; background:var(--surface); color:var(--fg); box-shadow:var(--shadow); width:min(620px, calc(100vw - 24px)); max-height:calc(100dvh - 24px)}
dialog::backdrop{background:var(--scrim)}
.ed{display:flex; flex-direction:column; max-height:calc(100dvh - 24px)}
.ed-h{display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line)}
.ed-h h3{margin:0; font-family:var(--f-display); font-size:18px; font-weight:600}
.ed-b{padding:16px 20px; overflow-y:auto; display:grid; grid-template-columns:1fr 1fr; gap:12px 14px}
.ed-f{display:flex; justify-content:space-between; gap:8px; padding:12px 20px; border-top:1px solid var(--line); flex-wrap:wrap}
.ed-f .r{display:flex; gap:8px; margin-left:auto}
.fld{display:flex; flex-direction:column; gap:5px; min-width:0}
.fld.full{grid-column:1/-1}
.fld label,.fld .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700}
.picker{position:relative}
.results{position:absolute; z-index:5; left:0; right:0; top:calc(100% + 4px); list-style:none; margin:0; padding:4px; background:var(--surface); border:1px solid var(--line-strong); border-radius:9px; box-shadow:var(--shadow); max-height:240px; overflow-y:auto}
.results button{width:100%; display:flex; align-items:center; gap:8px; background:none; border:0; padding:6px 8px; border-radius:6px; cursor:pointer; text-align:left}
.results button:hover{background:var(--sunk)}
.chosen{display:flex; align-items:center; gap:8px; padding:5px 6px 5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--sunk)}
.chosen span{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.hint{font-size:12px; color:var(--faint)}
.err{grid-column:1/-1; color:var(--danger); font-size:13px; margin:0}
.stamp{font-size:12px; color:var(--faint); grid-column:1/-1}

.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); background:var(--fg); color:var(--bg); padding:9px 16px; border-radius:9px; font-size:13px; font-weight:500; box-shadow:var(--shadow); z-index:50; max-width:calc(100vw - 32px)}

@media (max-width:900px){
  .row{grid-template-columns:28px minmax(0,1fr) 110px 120px; }
  .row .who{display:none}
}
@media (max-width:760px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .rail{position:static; padding:8px}
  .clients{max-height:240px}
  .row{grid-template-columns:28px minmax(0,1fr); gap:4px 12px}
  .row .due,.row .pill{grid-column:2}
  .row .due{display:flex; gap:8px; align-items:baseline}
  .row .due small{display:inline}
  .ed-b{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:no-preference){
  .row,.client-btn,.btn{transition:background-color .12s ease}
}

/* ---- standalone app additions ---- */
html,body{min-height:100%}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0}
.head-actions{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.me{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); padding:4px 6px 4px 4px; border:1px solid var(--line); border-radius:999px; background:var(--surface)}
.me .av{width:24px; height:24px; display:grid; place-items:center; font-size:11px; font-weight:700; color:var(--on-accent); background:var(--accent)}
.me span{max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.initials{width:22px; height:22px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:10px; font-weight:700; color:var(--fg); background:var(--sunk); border:1px solid var(--line)}

.gate{min-height:80vh; display:grid; place-items:center; padding-block:40px}
.gate-card{width:min(420px,100%); background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:32px 28px; text-align:center; box-shadow:var(--shadow)}
.gate-card .lamp{margin:0 auto 14px; width:48px; height:48px; border-radius:12px}
.gate-card .lamp svg{width:28px; height:28px}
.gate-card h1{font-size:26px; margin-bottom:6px}
.gate-card p{color:var(--muted); margin:0 0 20px}
.gbtn{display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; padding:11px 16px; border-radius:10px; border:1px solid var(--line-strong); background:var(--surface); font-weight:600; font-size:14px; cursor:pointer}
.gbtn:hover{background:var(--sunk)}
.gate-card .fine{font-size:12px; color:var(--faint); margin:16px 0 0}

.team-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; overflow:hidden; grid-column:1/-1}
.team-list li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:10px; align-items:center; padding:9px 12px; border-top:1px solid var(--line)}
.team-list li:first-child{border-top:0}
.team-list .nm{font-weight:600}
.team-list .em{font-size:12px; color:var(--muted); overflow-wrap:anywhere}
.team-list .off .nm{color:var(--faint); text-decoration:line-through}
.badge{font-size:11px; font-weight:700; padding:1px 7px; border-radius:5px; background:var(--accent-soft); color:var(--accent-ink)}
.check{display:inline-flex; align-items:center; gap:6px; font-size:13px}
.section-label{grid-column:1/-1; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin:6px 0 -4px}
@media (max-width:760px){ .me span{display:none} }
.auth-form{display:flex; flex-direction:column; gap:12px; text-align:left}
.auth-form .hint{margin:0; text-align:left}
.btn.wide{width:100%; justify-content:center; padding:10px 14px; font-size:14px}
.linkbtn{background:none; border:0; padding:4px; color:var(--accent-ink); font-weight:600; font-size:13px; cursor:pointer; align-self:center}
.linkbtn:hover{text-decoration:underline}
.codebox{grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; background:var(--accent-soft); color:var(--fg)}
.codebox code{font-family:var(--f-mono); font-size:18px; letter-spacing:.08em; font-weight:500; color:var(--accent-ink); user-select:all}
.codebox p{margin:0; flex-basis:100%; font-size:12px; color:var(--muted)}
.pending{font-size:11px; color:var(--warn); font-weight:600}
.team-list li{grid-template-columns:minmax(0,1fr) auto auto auto}
.team-list .acts{display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end}
@media (max-width:560px){ .team-list li{grid-template-columns:minmax(0,1fr)} .team-list .acts{justify-content:flex-start} }
[hidden]{display:none!important}
input[type=email],input[type=password]{background:var(--surface); border:1px solid var(--line-strong); border-radius:8px; padding:9px 10px; font-size:14px; width:100%}