/* ===== Leyline — sidebar layout on top of the shared NothingOS core =====
   core.css owns the palette and base elements. This file owns layout only, so a
   change to the shared theme still flows through.
   Sizes come from CSS variables set by base.html before first paint and by the
   Settings page at runtime: --base-fs --nav-fs --data-fs --sidebar-w --content-w. */

html{font-size:var(--base-fs,16px)}
body{display:flex;min-height:100vh;font-size:1rem}

/* --- sidebar --- */
.sidebar{
  width:var(--sidebar-w,250px);flex-shrink:0;position:sticky;top:0;height:100vh;
  padding:26px 0;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column}
.brand{font-family:var(--ndot);text-transform:uppercase;letter-spacing:.12em;
  font-size:1.5rem;color:var(--accent);padding:0 24px 22px}
.sidebar a{
  display:block;padding:13px 24px;color:var(--muted);border-left:4px solid transparent;
  font-family:var(--ndot);text-transform:uppercase;letter-spacing:.04em;
  font-size:var(--nav-fs,18px);transition:.15s}
.sidebar a:hover{color:var(--text);background:var(--card2)}
.sidebar a.active{color:var(--accent);border-left-color:var(--accent);background:var(--card2)}
.nav-sep{color:var(--line2);font-family:var(--ndot);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.1em;padding:18px 24px 4px}
.sidebar .whoami{margin-top:auto;padding:18px 24px 0;font-size:.75rem;color:var(--muted);
  border-top:1px solid var(--line);word-break:break-all}

/* --- main --- */
main{flex:1;min-width:0;padding:32px 36px 64px;display:flex;flex-direction:column;
  align-items:center}
main>*{width:100%;max-width:var(--content-w,820px)}
main h1{font-size:1.6rem;margin-bottom:22px;color:var(--text)}

/* --- cards --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 18px 16px;margin-bottom:14px}
.card>h2{font-size:1.05rem;color:var(--text);margin-bottom:4px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sub{font-size:.78rem;color:var(--muted);margin-bottom:14px;line-height:1.5}
.count{font-family:var(--ndot);color:var(--accent);font-size:1rem;letter-spacing:.06em}

/* --- today tiles --- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;
  margin-bottom:14px}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 16px 14px;text-decoration:none;display:block;transition:border-color .15s}
.tile:hover{border-color:var(--accent)}
.tile-k{font-family:var(--ndot);text-transform:uppercase;letter-spacing:.07em;
  font-size:.72rem;color:var(--muted)}
.tile-v{font-family:var(--ndot);font-size:1.7rem;color:var(--accent);margin:8px 0 2px}
.tile-m{font-size:.72rem;color:var(--muted)}

/* --- checklist rows --- */
.row{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:none}
.box{flex:0 0 auto;width:18px;height:18px;border-radius:6px;border:1px solid var(--line2);
  margin-top:2px;position:relative}
.box.on{background:var(--accent);border-color:var(--accent)}
.box.on::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--accent-ink);border-width:0 2px 2px 0;transform:rotate(43deg)}
.row .label{flex:1;min-width:0;font-size:var(--data-fs,15px);line-height:1.35}
.row.is-done .label{color:var(--muted);text-decoration:line-through}
.row .meta{font-size:.72rem;color:var(--muted);margin-top:3px}
.row .val{flex:0 0 auto;font-family:var(--ndot);font-size:.85rem;color:var(--muted);
  letter-spacing:.05em;padding-top:1px}

.bar{height:6px;border-radius:999px;background:var(--bg2);overflow:hidden;margin:10px 0 2px}
.bar>span{display:block;height:100%;background:var(--accent);border-radius:999px}
.pill.tick{font-family:var(--mono);text-transform:none;letter-spacing:0;color:var(--muted)}

/* --- materials --- */
details.cat{border-top:1px solid var(--line)}
details.cat summary{cursor:pointer;padding:11px 0;font-size:var(--data-fs,15px);
  display:flex;justify-content:space-between;align-items:center;gap:12px;list-style:none}
details.cat summary::-webkit-details-marker{display:none}
details.cat summary::before{content:"▸";color:var(--muted);margin-right:8px;
  display:inline-block;transition:transform .15s}
details.cat[open] summary::before{transform:rotate(90deg)}
details.cat summary:hover{color:var(--accent)}
details.cat .row{padding-left:20px}
.strand{display:flex;flex-wrap:wrap;gap:6px;padding:0 0 12px 30px}
.chip{display:inline-flex;align-items:center;gap:6px;
  font-size:.74rem;color:var(--muted);background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:4px 11px 4px 5px;white-space:nowrap;max-width:100%}
.chip b{color:var(--text);font-weight:400}
img.ico,span.ico{width:22px;height:22px;flex:0 0 auto;border-radius:5px;
  background:var(--bg2);object-fit:contain}
.row img.ico,.row span.ico{margin-top:1px}
details.cat .row{padding-left:20px;gap:10px}

/* --- settings form --- */
.grid-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.grid-form label{display:flex;flex-direction:column;gap:6px;font-size:.78rem;
  color:var(--muted);min-width:190px;flex:1}
.grid-form input[type=color]{padding:4px;height:42px;cursor:pointer}
.btn.mini{font-size:12px;padding:8px 14px}
.btn.danger{border-color:#542024;color:var(--red)}
.btn.danger:hover{border-color:var(--red);color:var(--red)}

/* --- key gate --- */
.gate p{font-size:.85rem;line-height:1.55;color:var(--muted);margin-bottom:14px}
.gate input{width:100%;margin-bottom:12px;font-size:.8rem}
.gate ol{margin:0 0 16px 18px;font-size:.8rem;color:var(--muted);line-height:1.7}
code{background:var(--bg2);border:1px solid var(--line);border-radius:6px;
  padding:1px 6px;font-size:.78rem;color:var(--text)}

/* --- notices --- */
.notice{border-radius:var(--r-sm);padding:11px 14px;font-size:.8rem;line-height:1.5;
  margin-bottom:14px;border:1px solid var(--line)}
.notice.bad{background:var(--red-dim);border-color:#542024;color:var(--red)}
.notice.warn{background:var(--amber-dim);border-color:#574718;color:var(--amber)}
.notice.ok{background:var(--accent-dim);border-color:#1f4d31;color:var(--accent)}

/* --- health table --- */
table.health{width:100%;border-collapse:collapse;font-size:.72rem}
table.health td{padding:5px 6px;border-top:1px solid var(--line);color:var(--muted)}
table.health td:last-child{text-align:right}
.state-stale,.state-cold{color:var(--amber)}
.state-error,.state-missing{color:var(--red)}
.state-fresh{color:var(--accent)}

.skeleton{color:var(--muted);font-size:.85rem;padding:40px 0;text-align:center}

/* --- phone: sidebar becomes a scrolling top bar --- */
@media (max-width:760px){
  body{display:block}
  .sidebar{width:auto;height:auto;position:sticky;top:0;z-index:20;padding:12px 0 0;
    border-right:none;border-bottom:1px solid var(--line);flex-direction:row;
    align-items:center;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .brand{padding:0 14px;font-size:1.15rem;flex-shrink:0}
  .sidebar a{padding:10px 13px 14px;border-left:none;border-bottom:3px solid transparent;
    font-size:.85rem;white-space:nowrap;flex-shrink:0}
  .sidebar a.active{border-left-color:transparent;border-bottom-color:var(--accent);background:none}
  .nav-sep,.sidebar .whoami{display:none}
  main{padding:20px 14px 56px}
  main h1{font-size:1.3rem;margin-bottom:16px}
  .card{padding:15px 14px 13px;border-radius:18px}
}
.chip em.held{font-style:normal;color:var(--amber);font-size:.68rem;
  border-left:1px solid var(--line2);padding-left:7px;margin-left:2px}
.row .val .now{color:var(--accent)}
.card.now{border-color:var(--accent);background:linear-gradient(180deg,var(--accent-dim),var(--card) 60%)}
.now-k{font-family:var(--ndot);text-transform:uppercase;letter-spacing:.12em;
  font-size:.72rem;color:var(--accent);margin-bottom:6px}
.card.now h2{font-size:1.3rem;margin-bottom:8px}
.now-action{font-size:var(--data-fs,15px);line-height:1.5;color:var(--text);margin-bottom:12px}
.blocked{color:var(--amber)}
.row.is-dim .label{color:var(--muted)}