/* Seder Yom — styles copied from the approved prototype (design/prototype.html) */
:root{
  --bg:#EEF1F4; --surface:#FFFFFF; --ink:#16202A; --muted:#5B6976; --line:#D9E0E7;
  --accent:#1D6A52; --accent-ink:#FFFFFF; --accent-soft:#E1F0EA;
  --late:#B13F14; --late-soft:#FBE9E0;
  --new:#C2410C;
  --c-work:#2E5BA6; --c-home:#9A5C0B; --c-money:#0B7682; --c-family:#86357A; --c-personal:#4A7626; --c-general:#5B6976;
  --shadow:0 1px 2px rgba(22,32,42,.06),0 6px 24px rgba(22,32,42,.06);
  --f-display:"Secular One","Assistant",system-ui,sans-serif;
  --f-body:"Assistant",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#10151A; --surface:#182027; --ink:#E5EBF0; --muted:#93A1AD; --line:#29333D;
  --accent:#53C29A; --accent-ink:#0C1A14; --accent-soft:#1A3128;
  --late:#F28B5E; --late-soft:#3A2118;
  --new:#FB923C;
  --c-work:#7FA6EA; --c-home:#E0A55A; --c-money:#4FC3CF; --c-family:#D886C9; --c-personal:#95C86C; --c-general:#93A1AD;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.25); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#10151A; --surface:#182027; --ink:#E5EBF0; --muted:#93A1AD; --line:#29333D;
  --accent:#53C29A; --accent-ink:#0C1A14; --accent-soft:#1A3128;
  --late:#F28B5E; --late-soft:#3A2118;
  --new:#FB923C;
  --c-work:#7FA6EA; --c-home:#E0A55A; --c-money:#4FC3CF; --c-family:#D886C9; --c-personal:#95C86C; --c-general:#93A1AD;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 24px rgba(0,0,0,.25); color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.45;direction:rtl}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app{max-width:860px;margin:0 auto;padding-block:calc(18px + env(safe-area-inset-top,0px)) 120px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

.top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.brand{font-family:var(--f-display);font-size:26px;letter-spacing:.2px}
.brand small{font-family:var(--f-body);font-size:14px;color:var(--muted);font-weight:600;margin-inline-start:8px}

/* login gate */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.gate-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:28px 24px;max-width:440px;width:100%;box-shadow:var(--shadow);text-align:center}
.gate-card .brand{color:var(--accent);margin-bottom:10px}
.gate-card h1{font-family:var(--f-display);font-weight:400;font-size:22px;margin:0 0 8px;text-wrap:balance}
.gate-card p{color:var(--muted);margin:0}
.gate-card a{color:var(--accent);font-weight:700}

.hello{font-size:14px;color:var(--accent);font-weight:800;letter-spacing:.3px;margin-bottom:2px}
.sharetag{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--accent)}
.fromtag{display:inline-flex;align-items:center;gap:4px;font-weight:700;color:var(--ink)}
.newtag{display:inline-flex;align-items:center;padding:0 8px;border-radius:99px;background:var(--new);color:var(--surface);font-weight:800;font-size:12px;letter-spacing:.2px}

/* ---------- day page ---------- */
.page{min-width:0;max-width:820px;margin:0 auto}
.dayhead{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow)}
.dayrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.daytitle{min-width:0}
.daytitle h1{font-family:var(--f-display);font-weight:400;font-size:30px;margin:0;line-height:1.15;text-wrap:balance}
.daytitle .sub{color:var(--muted);font-size:14px;margin-top:2px}
.daynav{margin-inline-start:auto;display:flex;gap:6px;align-items:center}
.iconbtn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0}
.iconbtn:hover{border-color:var(--accent)}
.pill{height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface);font-weight:700}
.pill[disabled]{opacity:.45;cursor:default}
.stats{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.stats strong{color:var(--ink);font-size:18px;margin-inline-end:4px}
.stats .late strong{color:var(--late)}
.bar{height:6px;border-radius:99px;background:var(--line);margin-top:10px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .3s}

.views{display:flex;gap:4px;margin:18px 0 6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:4px;width:max-content;max-width:100%}
.views button{border:0;background:none;padding:7px 16px;border-radius:9px;font-weight:700;color:var(--muted)}
.views button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}

.sec{margin-top:22px}
.sechead{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.sechead h2{font-size:15px;font-weight:800;letter-spacing:.4px;margin:0}
.sechead .count{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.sechead .hint{font-size:13px;color:var(--muted);margin-inline-start:auto}
.sec.late .sechead h2{color:var(--late)}
.dot{width:10px;height:10px;border-radius:50%;background:var(--c);align-self:center}
.empty{font-size:14px;color:var(--muted);padding:12px 16px;border:1px dashed var(--line);border-radius:12px}

.list{display:flex;flex-direction:column;gap:8px}
.task{--c:var(--c-general);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;transition:border-color .2s,background .4s}
.task.is-late{border-color:color-mix(in srgb,var(--late) 40%,var(--line));background:linear-gradient(var(--late-soft),var(--late-soft)) right/4px 100% no-repeat,var(--surface)}
.task.is-new{border-color:color-mix(in srgb,var(--new) 55%,var(--line))}
.task.done .ttl{text-decoration:line-through;color:var(--muted)}
.task.flash{background:var(--accent-soft)}
.check{width:26px;height:26px;border-radius:50%;border:2px solid var(--c);background:transparent;display:grid;place-items:center;margin-top:1px;padding:0}
.task.done .check{background:var(--c)}
.check svg{opacity:0;color:var(--surface)}
.task.done .check svg{opacity:1}
.ttl{font-weight:700;font-size:16.5px;overflow-wrap:anywhere;display:block;width:100%;text-align:start;background:none;border:0;padding:0;line-height:inherit}
.ttl:hover{color:var(--accent)}
.meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-top:4px;font-size:13px;color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:5px;padding:1px 9px;border-radius:99px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);font-weight:700;font-size:12.5px}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--c)}
.latetag{color:var(--late);font-weight:700}
.src{display:inline-flex;align-items:center;gap:3px}
.note{margin-top:8px;font-size:14px;background:var(--bg);border-radius:10px;padding:7px 10px;display:flex;gap:6px;overflow-wrap:anywhere;white-space:pre-line}
.note svg{flex:none;margin-top:3px;color:var(--muted)}
.acts{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;max-width:260px}
.act{border:1px solid var(--line);background:var(--surface);border-radius:9px;padding:5px 10px;font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap}
.act:hover,.act[aria-expanded="true"]{color:var(--ink);border-color:var(--ink)}
.act.del:hover,.act.del[aria-expanded="true"]{color:var(--late);border-color:var(--late)}
.panel{grid-column:2 / 4;display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:10px;border-top:1px solid var(--line);margin-top:2px}
.panel .lbl{font-size:13px;color:var(--muted);font-weight:700}
.panel .lbl.soft{font-weight:600}
.opt{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:6px 12px;font-weight:700;font-size:14px}
.opt:hover{border-color:var(--accent);color:var(--accent)}
.opt.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.opt.danger{background:var(--late);border-color:var(--late);color:var(--surface)}
.opt.danger:hover{color:var(--surface);filter:brightness(1.08)}
.opt[disabled]{opacity:.6;cursor:default}
.panel input[type=date]{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:5px 8px}
.panel textarea{width:100%;min-height:64px;resize:vertical;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px}

/* timeline */
.tl{display:flex;flex-direction:column;gap:8px}
.tlrow{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:start}
.tltime{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px;padding-top:13px;text-align:center}
.tltime.past{color:var(--muted);font-weight:600}
.now{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:center}
.now span{font-size:12px;font-weight:800;color:var(--accent);text-align:center;font-variant-numeric:tabular-nums}
.now i{height:2px;background:var(--accent);border-radius:2px;position:relative}
.now i::before{content:"";position:absolute;right:-4px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--accent)}

.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--surface);padding:10px 16px;border-radius:12px;font-weight:600;display:flex;gap:12px;align-items:center;transition:.25s;z-index:40;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast button{background:none;border:0;color:var(--accent-soft);font-weight:800;text-decoration:underline}

.c-work{--c:var(--c-work)}.c-home{--c:var(--c-home)}.c-money{--c:var(--c-money)}.c-family{--c:var(--c-family)}.c-personal{--c:var(--c-personal)}.c-general{--c:var(--c-general)}

@media (max-width:560px){
  .task{grid-template-columns:auto minmax(0,1fr)}
  .acts{grid-column:2;justify-content:flex-start}
  .panel{grid-column:1 / 3}
  .daytitle h1{font-size:25px}
  .daynav{margin-inline-start:0;width:100%}
  .tlrow,.now{grid-template-columns:46px minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- add / edit task sheet ---------- */
.fab{position:fixed;left:calc(20px + env(safe-area-inset-left,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:15;background:var(--accent);color:var(--accent-ink);border:0;border-radius:99px;padding:14px 22px 14px 20px;font-weight:800;font-size:16px;box-shadow:0 6px 20px color-mix(in srgb,var(--accent) 35%,transparent);display:flex;gap:8px;align-items:center}
.fab:hover{filter:brightness(1.06)}
.scrim{position:fixed;inset:0;background:rgba(8,12,16,.5);z-index:30}
.sheet{position:fixed;z-index:31;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 32px));max-height:calc(100% - 40px);overflow:auto;background:var(--surface);color:var(--ink);border-radius:20px;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.sh-head{display:flex;align-items:center;gap:10px}
.sh-head h2{font-family:var(--f-display);font-weight:400;font-size:24px;margin:0}
.sh-head .iconbtn{margin-inline-start:auto;font-size:20px;line-height:1}
.fl{display:block;font-size:13px;font-weight:800;color:var(--muted);margin:16px 0 6px;letter-spacing:.3px}
.fl-opt{font-weight:600}
.inp{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;min-width:0}
textarea.inp{resize:vertical}
.quick{width:100%;border:2px solid var(--accent);background:var(--accent-soft);border-radius:12px;padding:12px 14px;font-size:17px;font-weight:600}
.quick::placeholder{color:color-mix(in srgb,var(--ink) 45%,transparent);font-weight:400}
.help{font-size:13px;color:var(--muted);margin:6px 2px 0}
.divider{display:flex;align-items:center;gap:10px;margin:18px 0 0;color:var(--muted);font-size:12.5px;font-weight:700}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chips .opt[aria-pressed="true"],.seg .opt[aria-pressed="true"],.timewrap .opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.chips .cat{--c:var(--c-general)}
.chips .cat[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 16%,transparent);border-color:var(--c);color:var(--c)}
.chips input[type=date]{border:1px solid var(--line);background:var(--bg);border-radius:9px;padding:5px 8px}
.chips input[type=date].on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.catnew{width:auto;flex:0 1 160px;padding:6px 10px}
.timewrap{display:flex;gap:6px;align-items:center}
.timewrap .inp{width:auto;flex:0 1 150px;font-variant-numeric:tabular-nums}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.sh-foot{display:flex;gap:8px;margin-top:22px}
.sh-foot .primary{flex:1;padding:12px;font-size:16px}
.err{color:var(--late);font-size:13px;font-weight:700;margin-top:6px}
@media (max-width:560px){
  .sheet{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:92%;border-radius:20px 20px 0 0;padding-block:18px calc(18px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .fab{padding:14px 18px}
}