/* =====================================================================
   Noor Alteneiji — working notes
   A stacked-notes ("Miller columns for prose") digital garden, in the
   spirit of notes.andymatuschak.org. No build step, no dependencies.

   Structure of the page:
     .topbar         slim persistent chrome (brand · nav · theme)
     .stack          horizontal scroll canvas that holds the columns
       .note         one open note = one sticky column
         .note-spine vertical title, shown only when the column collapses
         .note-content  the scrollable prose

   The stacking trick: every .note is position:sticky with a per-index
   `left` and `right` offset (set in app.js). As you scroll the canvas,
   earlier notes pin to the left edge and later notes pin to the right,
   each collapsing to a thin spine that shows its title vertically.
   ===================================================================== */

/* ---- Design tokens: light is the default, dark redefines the values.
        Carried over from the previous landing page so the brand colour
        (deep petrol) stays consistent. ------------------------------- */
:root{
  --paper:#eef0f1;        /* pale cool ground */
  --raise:#f7f8f8;        /* lifted surface */
  --ink:#161a1c;          /* near-black, cool bias */
  --muted:#5b6469;        /* secondary text */
  --faint:#8a9297;        /* captions, spines */
  --line:#d6dadb;         /* hairlines */
  --accent:#1e4c57;       /* deep petrol — the one bold spend */
  --accent-ink:#163b44;
  --accent-tint:#dde7ea;
  --focus:#1e4c57;
  --spine:44px;           /* width of a collapsed note = sticky step */
  --note-w:min(92vw, 620px);
  --bar-h:56px;
  --shadow-stack:-10px 0 30px -20px rgba(20,25,28,.55);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#101315; --raise:#171b1e; --ink:#e7eae9; --muted:#9aa3a6;
    --faint:#727b7f; --line:#262c2f; --accent:#74b6c4; --accent-ink:#9fd0da;
    --accent-tint:#193036; --focus:#74b6c4;
    --shadow-stack:-12px 0 34px -20px rgba(0,0,0,.75);
  }
}
/* viewer/manual override wins in both directions */
:root[data-theme="light"]{
  --paper:#eef0f1; --raise:#f7f8f8; --ink:#161a1c; --muted:#5b6469; --faint:#8a9297;
  --line:#d6dadb; --accent:#1e4c57; --accent-ink:#163b44; --accent-tint:#dde7ea; --focus:#1e4c57;
  --shadow-stack:-10px 0 30px -20px rgba(20,25,28,.55);
}
:root[data-theme="dark"]{
  --paper:#101315; --raise:#171b1e; --ink:#e7eae9; --muted:#9aa3a6; --faint:#727b7f;
  --line:#262c2f; --accent:#74b6c4; --accent-ink:#9fd0da; --accent-tint:#193036; --focus:#74b6c4;
  --shadow-stack:-12px 0 34px -20px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
/* On the interactive app page, the canvas scrolls, not the page — but only
   once JS is running. Without JS the page scrolls the pre-rendered content. */
.js body.app{overflow:hidden}
.serif{font-family:var(--serif)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:2px}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:3px}

/* ---- top bar ------------------------------------------------------- */
.topbar{
  position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(14px,3vw,26px); gap:16px;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(1.3) blur(9px);
  border-bottom:1px solid var(--line);
}
.brand{font-weight:600; font-size:1.02rem; letter-spacing:.01em; color:var(--ink)}
.brand:hover{text-decoration:none; color:var(--accent)}
.topnav{display:flex; align-items:center; gap:18px}
.navlink{color:var(--muted); font-size:.9rem}
.navlink:hover{color:var(--ink); text-decoration:none}
.theme-toggle{
  appearance:none; border:1px solid var(--line); background:var(--raise); color:var(--muted);
  width:32px; height:32px; border-radius:8px; cursor:pointer; font-size:14px; line-height:1;
  display:grid; place-items:center;
}
.theme-toggle:hover{color:var(--ink); border-color:var(--muted)}

/* ---- the stack canvas ---------------------------------------------- */
/* Hidden until JS runs; the no-JS pre-render (#prerender) shows instead. */
.stack{
  position:fixed; inset:var(--bar-h) 0 0 0;
  display:none; align-items:stretch;
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;
  scrollbar-width:thin;
}
.js body.app .stack{display:flex}
.stack::-webkit-scrollbar{height:9px}
.stack::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}
.stack::-webkit-scrollbar-track{background:transparent}

/* ---- a note column ------------------------------------------------- */
.note{
  position:sticky; /* left / right offsets are set per-index in JS */
  flex:0 0 var(--note-w); width:var(--note-w); height:100%;
  background:var(--paper);
  border-left:1px solid var(--line);
  box-shadow:var(--shadow-stack);
}
.note:first-child{border-left:0}
.note.entering{opacity:0; transform:translateX(14px)}
.note{transition:opacity .32s ease, transform .32s ease}
@media (prefers-reduced-motion:reduce){
  .stack{scroll-behavior:auto}
  .note{transition:none}
  .note.entering{opacity:1; transform:none}
}

.note-content{
  height:100%; overflow-y:auto; overflow-x:hidden;
  position:relative; background:var(--paper);
  padding:clamp(30px,5vh,58px) clamp(26px,4.4vw,52px) 96px;
}
.note-content::-webkit-scrollbar{width:9px}
.note-content::-webkit-scrollbar-thumb{background:var(--line); border-radius:9px}

/* close affordance (hidden on the base note, handled in JS) */
.note-close{
  position:absolute; top:12px; right:14px; z-index:3;
  appearance:none; border:0; background:transparent; color:var(--faint);
  width:30px; height:30px; border-radius:8px; cursor:pointer;
  font-size:20px; line-height:1; display:grid; place-items:center;
}
.note-close:hover{background:var(--raise); color:var(--ink)}
.note[data-index="0"] .note-close{display:none}

/* ---- the collapsed spine ------------------------------------------- */
.note-spine{
  position:absolute; top:0; bottom:0; width:var(--spine); z-index:4;
  display:none; align-items:center; justify-content:center;
  background:var(--paper); cursor:pointer;
  color:var(--faint); font-family:var(--sans);
  font-size:.82rem; letter-spacing:.02em;
  border-right:1px solid var(--line);
}
.note.is-collapsed .note-spine{display:flex}
.note.collapsed-left .note-spine{left:0; border-right:1px solid var(--line); border-left:0}
.note.collapsed-right .note-spine{right:0; border-left:1px solid var(--line); border-right:0}
.note-spine span{
  writing-mode:vertical-rl; transform:rotate(180deg);
  white-space:nowrap; overflow:hidden; max-height:80%;
  text-overflow:ellipsis; text-align:left;
}
.note-spine:hover{color:var(--ink)}

/* ---- note prose ---------------------------------------------------- */
.note-content .note-doc{max-width:38em; margin:0 auto}
.note-eyebrow{
  font-family:var(--sans); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent); font-weight:600; margin:0 0 10px;
}
.note-doc h1{
  font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(1.7rem,3.4vw,2.3rem); line-height:1.12; margin:0 0 .1em;
  text-wrap:balance;
}
.note-doc h2{
  font-family:var(--serif); font-weight:600; font-size:1.28rem;
  margin:1.9em 0 .5em; letter-spacing:-.005em;
}
.note-doc h3{font-family:var(--serif); font-weight:600; font-size:1.08rem; margin:1.5em 0 .4em}
.note-doc p, .note-doc li{font-family:var(--serif); font-size:1.06rem; line-height:1.66}
.note-doc p{margin:0 0 1.05em}
.note-doc ul, .note-doc ol{margin:0 0 1.05em; padding-left:1.3em}
.note-doc li{margin:.2em 0}
.note-doc blockquote{
  margin:1.2em 0; padding:.2em 0 .2em 1.1em; border-left:3px solid var(--accent-tint);
  color:var(--muted); font-style:italic;
}
.note-doc hr{border:0; border-top:1px solid var(--line); margin:2em 0}
.note-doc code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.9em;
  background:var(--raise); border:1px solid var(--line); border-radius:5px; padding:.08em .38em;
}
.note-doc img{max-width:100%; height:auto; border-radius:10px; border:1px solid var(--line)}
.note-doc .meta{
  font-family:var(--sans); font-size:.82rem; color:var(--faint);
  margin:.2em 0 1.8em; letter-spacing:.01em;
}
.note-doc .lead{font-size:1.16rem; color:var(--muted); line-height:1.55}

/* internal note links: a quiet dotted underline, filling in when the
   linked note is already open to the right (Andy's "you are here" cue) */
.note-doc a[data-note]{
  color:var(--accent); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  transition:border-color .15s ease, background .15s ease;
  border-radius:2px;
}
.note-doc a[data-note]:hover{border-bottom-color:var(--accent); background:var(--accent-tint)}
.note-doc a[data-note].is-open{
  background:var(--accent-tint);
  border-bottom-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);
}
/* external links get a tiny outward arrow */
.note-doc a[href^="http"]:not([data-note])::after{
  content:"\2197"; font-size:.72em; vertical-align:.2em; margin-left:.12em; color:var(--faint);
}

/* "see also" / backlinks block at the foot of a note */
.note-doc .see-also{
  margin-top:2.4em; padding-top:1.1em; border-top:1px solid var(--line);
  font-family:var(--sans);
}
.note-doc .see-also h4{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); font-weight:600; margin:0 0 .7em;
}
.note-doc .see-also ul{list-style:none; padding:0; margin:0}
.note-doc .see-also li{font-family:var(--sans); margin:.3em 0}
.note-doc .see-also a{font-size:.98rem}

/* the auto-generated index list */
.note-index{list-style:none; padding:0; margin:1.4em 0 0}
.note-index li{font-family:var(--serif); margin:0; padding:.75em 0; border-top:1px solid var(--line)}
.note-index li:last-child{border-bottom:1px solid var(--line)}
.note-index a{font-size:1.1rem}
.note-index .idx-summary{display:block; font-family:var(--sans); font-size:.9rem; color:var(--muted); margin-top:.2em}

/* small status / error card (e.g. file:// preview hint) */
.note-status{
  font-family:var(--sans); background:var(--raise); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; color:var(--muted); font-size:.95rem;
}
.note-status code{display:inline-block}

/* ---- noscript fallback --------------------------------------------- */
.noscript{max-width:40em; margin:14vh auto; padding:0 24px; font-family:var(--serif)}
.noscript h1{font-family:var(--serif)}

/* ---- no-JS pre-render (crawlers / scripting off) ------------------- */
/* Shown at the site root when JS is unavailable; hidden the moment JS runs.
   Search engines and AI crawlers read this real HTML instead of an empty app. */
#prerender{display:block; max-width:820px; margin:0 auto; padding:calc(var(--bar-h) + 24px) clamp(22px,5vw,40px) 80px}
.js #prerender{display:none}
#prerender .note-doc{max-width:38em; margin:0 auto 2.4em}
#prerender nav.note-doc h2{font-family:var(--serif); font-size:1.28rem; margin:0 0 .4em}

/* ---- standalone reader pages (per-note static HTML) ---------------- */
body.reader{min-height:100%}
.reader-main{max-width:44em; margin:0 auto; padding:calc(var(--bar-h) + 30px) clamp(22px,5vw,40px) 40px}
.reader-main .note-doc{max-width:38em; margin:0 auto}
.reader-cta{max-width:38em; margin:2.6em auto 0; padding-top:1.2em; border-top:1px solid var(--line);
  font-family:var(--sans); font-size:.96rem}
.reader-footer{
  max-width:38em; margin:0 auto; padding:26px clamp(22px,5vw,40px) 60px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  color:var(--faint); font-size:.85rem; border-top:1px solid var(--line);
}
.reader-footer a{color:var(--muted)}

/* ---- mobile: one note at a time, swipe between (scroll-snap) -------- */
@media (max-width:700px){
  :root{--note-w:100vw}
  .note{
    position:static; flex:0 0 100vw; width:100vw;
    scroll-snap-align:start; box-shadow:none;
  }
  .stack{scroll-snap-type:x mandatory}
  .note-spine{display:none !important}   /* no collapsed spines on mobile */
  .note-content{padding:26px 22px 90px}
  .topnav{gap:14px}
}