/* Layout: one working surface. Header and view switch on top, columns scroll sideways, editing happens in a side sheet. */
:root{
  --bg:#e8edeb; --surface:#f6f8f7; --card:#ffffff; --ink:#17231f; --muted:#566763;
  --line:#c9d3cf; --accent:#1b5a62; --accent-ink:#ffffff; --colbg:#dce4e1; --danger:#9b2c2c;
  --cs:58%; --cl:30%;
  --font-ui:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-text:'Spectral',Georgia,'Times New Roman',serif;
  --font-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --font-ipa:'Gentium Plus','Charis SIL','Doulos SIL','Noto Serif','Spectral',Georgia,serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#101817; --surface:#17211f; --card:#1e2a27; --ink:#e6eeeb; --muted:#9bb0aa;
    --line:#2f403c; --accent:#72c4ca; --accent-ink:#0b1514; --colbg:#151f1d; --danger:#f0a0a0;
    --cs:62%; --cl:72%; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#101817; --surface:#17211f; --card:#1e2a27; --ink:#e6eeeb; --muted:#9bb0aa;
  --line:#2f403c; --accent:#72c4ca; --accent-ink:#0b1514; --colbg:#151f1d; --danger:#f0a0a0;
  --cs:62%; --cl:72%; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font:15px/1.45 var(--font-ui);
  padding-block:20px 40px;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));}
h1{font:600 24px/1.1 var(--font-ui);letter-spacing:-.015em;margin:0}
.top{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:12px}
.sub{color:var(--muted);font-size:13px;margin:0}
.note{font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:8px 10px;margin:0 0 12px;max-width:70ch}
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:none;color:var(--ink);padding:8px 13px;font:inherit;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--ink);padding:7px 12px;border-radius:8px;font:inherit;cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn.danger{color:var(--danger)}
button:focus-visible,input:focus-visible,textarea:focus-visible,.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:14px;align-items:flex-start;scroll-snap-type:x proximity}
.col{flex:0 0 min(84vw,292px);background:var(--colbg);border-radius:10px;padding:10px;scroll-snap-align:start;min-width:0}
.col-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.col-title{flex:1;min-width:0;border:0;background:transparent;font:600 12px var(--font-ui);color:var(--ink);padding:5px 2px;text-transform:uppercase;letter-spacing:.07em}
.count{font:12px var(--font-mono);color:var(--muted)}
.list{display:flex;flex-direction:column;gap:8px;min-height:48px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px 11px;cursor:grab;display:flex;flex-direction:column;gap:7px;min-width:0}
.card .top{margin:0;flex-wrap:nowrap;gap:8px;align-items:baseline}
.card h3{font:600 14.5px/1.25 var(--font-ui);margin:0;min-width:0;overflow-wrap:anywhere}
.chap{font:500 12px var(--font-mono);color:var(--accent);border:1px solid var(--accent);border-radius:4px;padding:0 5px;flex:none}
.syn{font:14px/1.5 var(--font-text);margin:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.nm{background:none;font-weight:700;color:hsl(var(--h) var(--cs) var(--cl))}
.foot{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.pill{font-size:11.5px;padding:2px 9px;border-radius:99px;border:1px solid hsl(var(--h) var(--cs) var(--cl));color:hsl(var(--h) var(--cs) var(--cl))}
.pill.main{background:hsl(var(--h) var(--cs) var(--cl));color:var(--card);font-weight:600}
.pill.loc{border-style:dashed}
.dotc{width:10px;height:10px;border-radius:50%;background:hsl(var(--h) var(--cs) var(--cl))}
.sortable-ghost{opacity:.35}
.add,.addcol{border:1px dashed var(--line);background:transparent;color:var(--muted);border-radius:8px;padding:9px;font:inherit;cursor:pointer;width:100%;margin-top:8px}
.addcol{flex:0 0 130px;width:130px;margin-top:0;align-self:flex-start}
.add:hover,.addcol:hover{color:var(--ink);border-color:var(--accent)}

.tl{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.tl-grid{display:grid;min-width:max-content}
.tl .h{font:12px var(--font-mono);color:var(--muted);text-align:center;padding:8px 0;border-bottom:1px solid var(--line)}
.tl .rl{position:sticky;left:0;z-index:1;background:var(--surface);padding:10px 12px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;align-items:center}
.tl .rl small{font:12px var(--font-mono);color:var(--muted)}
.tl .cell{border-bottom:1px solid var(--line);border-left:1px dotted var(--line);min-height:50px;display:flex;align-items:center;justify-content:center}
.dot{width:34px;height:34px;border-radius:50%;border:0;background:hsl(var(--h) var(--cs) var(--cl));color:var(--card);font:500 12px var(--font-mono);cursor:pointer}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:20}
.panel{position:fixed;z-index:21;top:0;right:0;bottom:0;width:min(450px,100%);background:var(--surface);border-left:1px solid var(--line);overflow:auto;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) 16px}
@media (max-width:600px){
  .panel{top:auto;max-height:92%;width:100%;border-left:0;border-top:1px solid var(--line);border-radius:14px 14px 0 0}
}
.phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.phead h2{font:600 18px var(--font-ui);margin:0}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label,.lab{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.field small{color:var(--muted);font-size:12px}
input,textarea{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%;min-width:0}
textarea{font-family:var(--font-text);font-size:15px;line-height:1.5;resize:vertical}
.prev{font:14px/1.55 var(--font-text);border-left:3px solid var(--line);padding:2px 0 2px 10px;min-height:1.6em;white-space:pre-wrap;overflow-wrap:anywhere}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:13px;padding:5px 11px;border-radius:99px;cursor:pointer;background:transparent;color:hsl(var(--h) var(--cs) var(--cl));border:1px solid hsl(var(--h) var(--cs) var(--cl))}
.chip[aria-pressed="true"]{background:hsl(var(--h) var(--cs) var(--cl));color:var(--card);font-weight:600}
.chip.sug{border-style:dashed}
.addrow{display:flex;gap:6px}
.tlist{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.tlist li{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
select{font:inherit;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%;min-width:0}
.gl{background:none;color:inherit;font-weight:700;font-style:italic;cursor:help;border-bottom:1px dotted var(--muted)}
.pop{position:fixed;z-index:30;width:min(300px,calc(100vw - 24px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px;box-shadow:0 8px 28px rgba(0,0,0,.28)}
.pop b{font:italic 700 17px var(--font-text)}
.pop p{margin:6px 0 0;font:14px/1.45 var(--font-text)}
.gtools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px}
.gtools input{flex:1 1 200px;width:auto}
.gtools select{width:auto}
.glist{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.gitem{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 12px;cursor:pointer;display:grid;gap:6px;font:inherit;color:var(--ink);min-width:0;align-content:start}
.gitem:hover{border-color:var(--accent)}
.gterm{font:italic 700 17px var(--font-text)}
.gipa{font-family:var(--font-ipa);color:var(--muted);font-size:14px}
.gdesc{font:14px/1.45 var(--font-text)}
.tag{font-size:11.5px;padding:2px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted)}
.tag.inv{border-color:var(--accent);color:var(--accent)}
.gempty{color:var(--muted);padding:20px 2px}
.pal{display:flex;flex-wrap:wrap;gap:4px}
.pal button{min-width:38px;height:38px;padding:0 6px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:6px;font:17px var(--font-ipa);cursor:pointer}
.pal button:hover{border-color:var(--accent)}
.palh{font:12px var(--font-ui);color:var(--muted);margin:8px 0 4px}
#gIpa{font-family:var(--font-ipa);font-size:17px}
.bchip{font:inherit;font-size:13px;padding:5px 11px;border-radius:99px;cursor:pointer;background:transparent;color:var(--accent);border:1px solid var(--accent)}
.bchip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:600}
.bchip.sug{border-style:dashed}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ---- Added for the cloud app ---- */
body{min-height:100vh}
.login{max-width:380px;margin:12vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px}
.login h1{margin-bottom:4px}
.login form{display:grid;gap:14px;margin-top:18px}
.login .err{color:var(--danger);font-size:13.5px;min-height:1.2em;margin:0}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn[disabled]{opacity:.55;cursor:default}
.sync{font:12.5px var(--font-mono);color:var(--muted);display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:99px;padding:2px 10px;background:var(--surface);cursor:pointer}
.sync::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--muted)}
.sync[data-s="saved"]::before{background:#3a9a62}
.sync[data-s="saving"]::before,.sync[data-s="unsaved"]::before{background:#d19a2a}
.sync[data-s="offline"]::before,.sync[data-s="error"]::before,.sync[data-s="auth"]::before{background:var(--danger)}
.sync[data-s="offline"],.sync[data-s="error"],.sync[data-s="auth"]{color:var(--danger);border-color:var(--danger)}
.top select{width:auto;max-width:60vw;padding:5px 8px}
.top .grow{flex:1}
.banner{border:1px solid var(--danger);color:var(--danger);border-radius:8px;padding:8px 12px;margin:0 0 12px;font-size:13.5px}
.hrow{display:grid;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 11px}
.hrow b{font-weight:600}
.hrow small{color:var(--muted)}
.hrow .btn{justify-self:start;margin-top:4px}
.hlist{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.ent{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:8px;margin-bottom:8px}
.ent .r{display:flex;gap:8px;align-items:center}
.ent input[type=range]{padding:0}
.ent .sw{width:18px;height:18px;border-radius:50%;flex:none;background:hsl(var(--h) var(--cs) var(--cl))}
h3.sec{font:600 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:18px 0 8px}
.stack{display:grid;gap:8px;margin-bottom:16px}

/* ---- Projects home ---- */
.hh{font:600 20px var(--font-ui);margin:4px 0 4px}
.pgrid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-bottom:8px}
.pcard{text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;display:grid;gap:9px;font:inherit;color:var(--ink);min-width:0;align-content:start}
.pcard:hover{border-color:var(--accent)}
.pname{font:600 18px/1.2 var(--font-ui);overflow-wrap:anywhere}
.pbooks{display:flex;flex-wrap:wrap;gap:5px}
.top .btn{padding:4px 10px}

/* ---- Chart, outline, columns, status ---- */
.chartcell{min-height:38px}
.mk{width:18px;height:18px;border-radius:50%;border:2px solid hsl(var(--h) var(--cs) var(--cl));background:transparent;cursor:pointer;padding:0}
.mk.main{background:hsl(var(--h) var(--cs) var(--cl))}
.opt{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;cursor:pointer}
.opt input{width:auto}
.olist{display:grid;gap:4px;max-width:78ch}
.ostage{font:600 13px var(--font-ui);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:22px 0 4px;border-bottom:1px solid var(--line);padding-bottom:6px}
.ochap{padding:10px 0;cursor:pointer;border-radius:8px}
.ochap:hover{background:var(--surface)}
.ochap h3{font:600 17px/1.3 var(--font-ui);margin:0 0 4px;display:flex;gap:8px;align-items:baseline}
.ometa{font:italic 13.5px var(--font-text);color:var(--muted);margin:0 0 6px}
.osyn{font:15.5px/1.6 var(--font-text);margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.grip{cursor:grab;color:var(--muted);padding:2px 4px;user-select:none;touch-action:none;font-size:15px;line-height:1}
.xcol{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 4px;border-radius:4px}
.xcol:hover{color:var(--danger)}
.tag.st-drafted{border-color:#c79a2c;color:#a67c12}
.tag.st-revised{border-color:#3a9a62;color:#2a7a4c}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tag.st-drafted{color:#e0b84e}:root:not([data-theme="light"]) .tag.st-revised{color:#6fd09a}}
:root[data-theme="dark"] .tag.st-drafted{color:#e0b84e}
:root[data-theme="dark"] .tag.st-revised{color:#6fd09a}
.gtools .opt input{flex:none;width:16px;height:16px;padding:0}
.tl .rl small{white-space:nowrap}
.rl .nm{min-width:0;overflow-wrap:anywhere}