/* Mindweave home page: plain text, a sidebar that is the navigation, and the writing.
   The colours and fonts are the app's. Square corners, thin rules, no images, no animation. */
:root{
  --ground:#080A09;
  --line:rgba(220,240,232,.17);
  --text:#EEF2EF;
  --prose:#D6DDD9;
  --muted:#B4BEB9;
  --dim:#87928D;
  --hi:#52BF92;
  --accent-rgb:61,163,122;
  --display:'Fraunces',Georgia,serif;
  --mono:'IBM Plex Mono',Consolas,'Courier New',monospace;
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{background:var(--ground);-webkit-text-size-adjust:100%}
body{background:var(--ground);color:var(--prose);font:15px/1.6 var(--mono);padding:28px 32px}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hi);text-decoration:underline;text-underline-offset:4px}
::selection{background:rgba(var(--accent-rgb),.35)}
:focus-visible{outline:1px solid var(--hi);outline-offset:3px}
code{font-family:var(--mono)}

.layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;max-width:1560px;margin:0 auto;align-items:start}

/* the sidebar is the navigation: the white icon and name, the pages, and a few facts at the bottom */
.side{position:sticky;top:28px;display:flex;flex-direction:column;gap:20px;font-size:13px;border-right:1px solid var(--line);padding-right:26px;min-height:calc(100vh - 56px)}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.brand:hover{color:var(--text);text-decoration:none}
.brand img{width:18px;height:auto;filter:brightness(0) invert(1)}
.pages{list-style:none;display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:18px}
.pages a{color:var(--text);font-size:14px;font-weight:400;line-height:1.3;text-transform:uppercase;letter-spacing:.08em}
.pages a:hover{color:var(--hi)}
.pages a[aria-current="page"]{color:var(--text);text-decoration:underline;text-underline-offset:6px}
.facts{margin-top:auto;border-top:1px solid var(--line);padding-top:16px;color:var(--dim)}
.facts span{display:block}
.facts b{display:block;color:var(--muted);font-weight:500}
.facts span + span{margin-top:10px}

/* the writing */
.main{max-width:1140px;padding:56px 0 72px}
h1{font:400 clamp(30px,3.3vw,42px)/1.12 var(--display);color:var(--text);letter-spacing:-.015em;margin-bottom:18px}
h2{font:600 16px var(--mono);color:var(--text);margin:28px 0 10px}
p{max-width:100ch;margin-bottom:14px}
.note{border-left:3px solid rgba(var(--accent-rgb),.6);padding-left:18px;margin:22px 0;color:var(--muted)}
.small{font-size:13px;color:var(--dim)}

/* the downloads, in the reading flow, right after the first paragraph */
.get{margin:20px 0 22px}
.get h2{margin-top:0}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.btns a{display:flex;align-items:center;gap:10px;height:40px;padding:0 16px;border:1px solid var(--line);color:var(--text);font-size:14px}
.btns a:hover{border-color:rgba(var(--accent-rgb),.7);color:var(--text);text-decoration:none}
.btns svg{width:16px;height:16px;fill:#fff;flex:none}
.hint{margin:10px 0 0;font-size:13px;color:var(--dim)}

/* the command, with its copy button */
.cmd{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);padding:7px 8px 7px 14px;margin:12px 0 10px;max-width:520px;overflow-x:auto}
.cmd .sig{color:var(--dim)}
.copy{flex:none;border:0;background:transparent;color:var(--dim);font:13px var(--mono);cursor:pointer;padding:2px 8px}
.copy:hover,.copy[data-state="done"]{color:var(--hi)}

.end{border-top:1px solid var(--line);margin-top:28px;padding-top:12px;font-size:13px;color:var(--dim)}

/* on a phone the sidebar becomes the top of the page: icon and name, then the pages in a row */
@media (max-width:900px){
  body{padding:18px 16px 32px}
  .layout{grid-template-columns:minmax(0,1fr);gap:24px}
  .main{padding:4px 0 0}
  .side{position:relative;top:0;min-height:0;border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px;gap:12px}
  .pages{flex-direction:row;flex-wrap:wrap;gap:6px 22px;border-top:0;padding-top:0}
  .facts{display:none}
}
@media (max-width:560px){
  .btns{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .btns a{justify-content:center;padding:0 8px;gap:8px;font-size:13px}
  .btns a:last-child:nth-child(odd){grid-column:1/-1}
}

/* lists and steps in the writing */
.main ul,.main ol{max-width:100ch;margin:0 0 16px;padding-left:22px}
.main li{margin-bottom:8px}
.main li::marker{color:var(--dim)}
h3{font:600 14px var(--mono);color:var(--text);margin:22px 0 8px}
.main code{color:var(--text)}