/* Eitz HaChaim Software — app styles. Layout: top bar · side nav · work area · tree chat bottom-right */
:root{
  --bg:#F1F4F1;--panel:#FFFFFF;--sunk:#E7ECE8;--fg:#13241B;--muted:#5A6D62;--line:#D4DED7;
  --trunk:#1E5B3F;--leaf:#2F8A5E;--node:#C99A2E;--accent:#1E5B3F;--accent-ink:#FFFFFF;--accent-soft:#DCEBE2;
  --ok:#1B7F4C;--warn:#A86E12;--bad:#C0392B;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;--f-body:"IBM Plex Sans",system-ui,-apple-system,sans-serif;--f-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C1510;--panel:#121F18;--sunk:#0A120D;--fg:#E3EDE6;--muted:#92A699;--line:#21352A;
  --trunk:#5FBF8E;--leaf:#86D8AE;--node:#E8BE5A;--accent:#5FBF8E;--accent-ink:#0A120D;--accent-soft:#183026;
  --ok:#4CC587;--warn:#E2A640;--bad:#EF6B5E;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1510;--panel:#121F18;--sunk:#0A120D;--fg:#E3EDE6;--muted:#92A699;--line:#21352A;
  --trunk:#5FBF8E;--leaf:#86D8AE;--node:#E8BE5A;--accent:#5FBF8E;--accent-ink:#0A120D;--accent-soft:#183026;
  --ok:#4CC587;--warn:#E2A640;--bad:#EF6B5E;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--f-body)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
h1,h2,h3{font-family:var(--f-display);margin:0;text-wrap:balance}
h1{font-size:26px}h2{font-size:19px}h3{font-size:15px}
.muted{color:var(--muted)}.small{font-size:12px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* banners (Chaim's messages to everyone) */
#banners .banner{padding:9px max(16px,env(safe-area-inset-left,0px));font-weight:500;display:flex;gap:10px;align-items:center}
.banner.info{background:var(--accent-soft);color:var(--fg)}
.banner.warning{background:#F6E3B8;color:#3D2A05}
.banner.urgent{background:var(--bad);color:#fff}

.top{display:flex;align-items:center;gap:14px;padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.topbrand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:18px;background:none;border:0;padding:4px 6px;border-radius:10px;cursor:pointer}
.topbrand:hover{background:var(--sunk)}
.oldshell.navoff{grid-template-columns:minmax(0,1fr)}
.oldshell.navoff .oldside{display:none}
.mark{width:34px;height:34px}
.spacer{flex:1}
.topwho{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.topwho span{font-size:12px;font-weight:600}
.topwho small{font-size:11px;color:var(--muted)}

.oldshell{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:calc(100% - 56px)}
.oldside{border-right:1px solid var(--line);padding:14px 10px;display:flex;flex-direction:column;gap:2px;background:var(--panel)}
.oldside a{padding:8px 12px;border-radius:7px;color:inherit;text-decoration:none;font-weight:500}
.oldside a:hover{background:var(--sunk)}
.oldside a.on{background:var(--accent-soft);color:var(--accent)}
.oldside .label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:14px 12px 4px}
.main{padding:24px max(16px,env(safe-area-inset-right,0px)) 96px 24px;display:flex;flex-direction:column;gap:20px;min-width:0}
.center{min-height:100%;display:grid;place-items:center;padding:24px 16px}

.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:14px;min-width:0}
.authcard{width:100%;max-width:380px}
.authcard .mark{width:64px;height:64px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label{font-size:12px;color:var(--muted)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--sunk);border-radius:7px;padding:8px 10px;min-width:0}
.checks{display:flex;flex-wrap:wrap;gap:8px 18px}
.checks label{display:flex;gap:6px;align-items:center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:7px;padding:8px 14px;cursor:pointer;font-weight:500}
.btn:hover{border-color:var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.ghost{background:transparent}
.btn.sm{padding:5px 10px;font-size:13px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.55;cursor:default}
.error{color:var(--bad);font-size:13px}

.table-wrap{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;color:var(--muted);font-weight:500}
td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right}
.pill{display:inline-block;font-family:var(--f-mono);font-size:11px;padding:1px 8px;border-radius:999px;border:1px solid currentColor;white-space:nowrap}
.p-active,.p-done,.p-auto_ok{color:var(--ok)}
.p-suspended,.p-declined{color:var(--bad)}
.p-new,.p-in_progress{color:var(--accent)}
.p-needs_chaim{color:var(--warn)}
.p-urgent{color:#fff;background:var(--bad);border-color:var(--bad)}
.stats{display:flex;gap:28px;flex-wrap:wrap}
.stat b{display:block;font-family:var(--f-display);font-size:28px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}

/* tree chat */
.treebtn{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:72px;height:72px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center;z-index:8}
.treebtn svg{width:72px;height:72px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));transition:transform .15s}
.treebtn:hover svg{transform:scale(1.08)}
.treebtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:50%}
.aitabs{display:flex;gap:4px;flex:1}
.aitabs button{border:0;background:none;padding:6px 10px;border-radius:8px;font:inherit;font-weight:600;color:var(--muted);cursor:pointer}
.aitabs button[aria-selected="true"]{background:var(--sunk);color:var(--ink,inherit)}
.chathead{gap:6px}
.chat{position:fixed;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(100px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 32px));height:min(560px,calc(100% - 120px));background:var(--panel);border:1px solid var(--line);border-radius:14px;display:flex;flex-direction:column;box-shadow:0 12px 40px rgba(0,0,0,.2);z-index:9}
.chathead{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line)}
.chathead b{font-family:var(--f-display);font-size:16px}
.x{border:0;background:none;font-size:22px;line-height:1;cursor:pointer;color:var(--muted)}
.msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{padding:9px 11px;border-radius:10px;max-width:90%;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink)}
.msg.ai{align-self:flex-start;background:var(--sunk)}
.msg .meta{display:block;font-size:11px;opacity:.75;margin-top:4px}
.draft{border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;background:var(--panel)}
.draft .row{margin:0;gap:6px;flex-wrap:wrap}
.diff{display:flex;flex-direction:column;gap:4px;max-height:420px;overflow:auto}
.diff pre{margin:0;padding:6px 8px;border-radius:6px;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.diff pre.del{background:color-mix(in srgb,var(--bad) 14%,transparent)}
.diff pre.add{background:color-mix(in srgb,var(--ok) 16%,transparent)}
.memrow{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--line)}
.memrow .memtext{flex:1;white-space:pre-wrap;overflow-wrap:anywhere}
.memrow.done .memtext{text-decoration:line-through;opacity:.6}
.memrow .meta{display:block;font-size:11px;color:var(--muted)}
.memdot{width:16px;text-align:center;color:var(--muted)}
.loading{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 12px}
.loading svg{width:96px;height:96px}
.loading p{margin:0;font-size:13px;color:var(--muted)}
.lt circle{transform-box:fill-box;transform-origin:center}
.compose{border-top:1px solid var(--line);padding:10px;display:flex;gap:8px;align-items:flex-end}
.compose textarea{flex:1;border:1px solid var(--line);background:var(--sunk);border-radius:8px;padding:8px;resize:none;min-width:0}

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

@media (max-width:760px){
  .oldshell{grid-template-columns:1fr}
  .oldside{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:8px}
  .oldside .label{display:none}
  .oldside a{white-space:nowrap}
  .main{padding:18px max(16px,env(safe-area-inset-right,0px)) 96px max(16px,env(safe-area-inset-left,0px))}
}
.themebtn{font-size:16px;line-height:1;padding:6px 9px}
.floattheme{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:7}
.landing{max-width:760px;width:100%;display:flex;flex-direction:column;gap:18px;padding-block:24px}
.landing .mark{width:84px;height:84px}
.landing .heb{align-self:flex-start;font-family:"Frank Ruhl Libre",serif;font-weight:700;font-size:26px;color:var(--trunk)}
.hero{font-size:clamp(30px,6vw,46px);line-height:1.08;letter-spacing:-.02em}
.lead{font-size:17px;color:var(--muted);max-width:62ch;margin:0}
.btn.big{padding:12px 20px;font-size:16px}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-top:10px}
.feat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:4px}
.feat span{color:var(--muted);font-size:13px}
.stack{display:flex;flex-direction:column;gap:12px}

.authcard .brandlogo{max-width:200px;max-height:110px;object-fit:contain;align-self:flex-start;background:#fff;border-radius:14px;padding:8px 12px}
.topbrandinit{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font:800 30px/1 var(--f-display);color:#fff;background:var(--accent)}
.center a{color:var(--accent)}

/* Landing: the big welcome */
.welcome{display:flex;flex-direction:column;gap:2px;font-family:"Cinzel",Georgia,serif;text-transform:uppercase;line-height:1.02;margin:6px 0 4px}
.welcome{--hi:var(--fg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .welcome{--hi:#ffffff}}
:root[data-theme="dark"] .welcome{--hi:#ffffff}
.welcome span{font-weight:700;font-size:clamp(18px,3.4vw,28px);letter-spacing:.32em;color:var(--hi)}
.welcome strong{font-weight:900;font-size:clamp(46px,11vw,104px);letter-spacing:.04em;
  background:linear-gradient(100deg,var(--leaf) 0%,var(--hi) 48%,var(--node) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Phones: the chat header wraps so the × is always reachable */
.chathead{flex-wrap:wrap;row-gap:6px}
.chathead .x{margin-left:auto;font-size:24px;min-width:38px;min-height:38px}
@media (max-width:600px){.chat{right:8px!important;left:8px;width:auto!important;bottom:calc(84px + env(safe-area-inset-bottom,0px))!important;height:calc(100% - 100px)!important}}
.teamw{display:flex;gap:6px;align-items:center;padding:8px 12px 0;font-size:12.5px;color:var(--muted);cursor:pointer}.teamw[hidden]{display:none}

.chatlog{margin-top:12px}.chatmsg{margin:8px 0;max-width:80%}.chatmsg.me{margin-left:auto;text-align:right}.chatmsg .txt{display:inline-block;text-align:left;padding:8px 12px;border-radius:12px;background:var(--soft,#eef4f0);white-space:pre-wrap}.chatmsg.me .txt{background:var(--main,#1E5B3F);color:#fff}

.center.embed{max-width:none;padding:12px 16px}.center.embed .main{max-width:none}
