/* MyNotesHelper — shared styling for the app shell and the sign-in page.
   Same tokens as the marketing page, so the two read as one product. */

:root{
  --bg:#000000; --surface:#0A0A09; --surface-2:#121210; --surface-3:#191917;
  --border:#232320; --border-strong:#38362F;
  --text:#EDEAE3; --text-dim:#9A968C; --text-faint:#8A867C;
  --accent:#D8C9A3; --accent-ink:#0A0A09;
  --ok:#7E9B6A; --warn:#C9A227; --crit:#CE624A; --crit-fill:#B34C36;
  --mono:"IBM Plex Mono",ui-monospace,"Courier New",monospace;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --r:4px;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE7; --surface-3:#E7E4DC;
    --border:#DEDBD2; --border-strong:#BEB9AC;
    --text:#16150F; --text-dim:#5E5B52; --text-faint:#67635A;
    --accent:#6B5A2E; --accent-ink:#FFFFFF;
    --ok:#4C6B3A; --warn:#7A610C; --crit:#A63B23; --crit-fill:#A63B23;
  }
}
:root[data-theme="light"]{
  --bg:#F6F5F1; --surface:#FFFFFF; --surface-2:#EFEDE7; --surface-3:#E7E4DC;
  --border:#DEDBD2; --border-strong:#BEB9AC;
  --text:#16150F; --text-dim:#5E5B52; --text-faint:#67635A;
  --accent:#6B5A2E; --accent-ink:#FFFFFF;
  --ok:#4C6B3A; --warn:#7A610C; --crit:#A63B23; --crit-fill:#A63B23;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:13px; line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (prefers-reduced-motion: reduce){*{transition:none!important}}

.btn{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim); background:transparent; border:1px solid var(--border);
  border-radius:var(--r); padding:8px 13px; cursor:pointer; text-decoration:none;
  display:inline-block; transition:.15s}
.btn:hover{color:var(--text); border-color:var(--border-strong)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.btn.primary:hover{opacity:.88}

.eyebrow{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint)}

/* ---------- sign-in ---------- */

.login{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-card{width:min(430px,100%); display:flex; flex-direction:column; gap:14px}
.login-mark{font-family:var(--serif); font-size:32px; line-height:1; text-decoration:none}
.login-mark em{font-style:italic; color:var(--text-dim)}
.login-card h1{font-family:var(--serif); font-weight:400; font-size:23px; margin:0}
.login-sub{font-size:12.5px; color:var(--text-dim); line-height:1.6; margin:0; max-width:60ch}

.login-note{border:1px solid var(--crit); border-radius:var(--r);
  background:color-mix(in srgb, var(--crit) 10%, transparent);
  color:var(--text); padding:11px 12px; font-size:12px; line-height:1.55}
.login-note b{color:var(--crit)}

/* THE SAME BOX WITHOUT THE ALARM (REQ-UX-010).
   Being signed out from another device is not a failure: somebody pressed a
   button on their laptop and this is the result of it working. The box in
   the critical colour says a thing has gone wrong, which is the reading UX
   asked not to give - ordinary style, in their words.

   --border and --surface-2, the two the WP-10b banner uses, because the dark
   palette here is near black and a surface chosen to be subtle in the light
   one disappears in it. */
.login-note.plain{border-color:var(--border);
  background:var(--surface-2)}
.login-note.plain b{color:var(--text)}

.login-choices{display:flex; flex-direction:column; gap:8px; margin-top:2px}
.login-wait{font-size:12px; color:var(--text-faint)}
.prov{display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  color:var(--text); font-family:var(--mono); font-size:13px; padding:12px 13px;
  cursor:pointer; text-decoration:none; transition:.15s}
.prov:hover{border-color:var(--border-strong); background:var(--surface-2)}
.prov .glyph{width:20px; height:20px; flex:none; display:grid; place-items:center;
  border:1px solid var(--border-strong); border-radius:3px; font-size:11px; color:var(--text-dim)}
.prov .pname{flex:1}
.prov .dest{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint);
  border:1px solid var(--border); border-radius:20px; padding:2px 8px; white-space:nowrap}
.prov .dest.none{color:var(--warn); border-color:color-mix(in srgb, var(--warn) 45%, transparent)}
.prov.off{opacity:.45; pointer-events:none}

.login-fine{font-size:11px; color:var(--text-faint); line-height:1.65; margin:4px 0 0; max-width:62ch}
.login-fine b{color:var(--text-dim); font-weight:500}

/* ---------- app shell ---------- */

.top{display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:13px 22px; border-bottom:1px solid var(--border)}
.brand{font-family:var(--serif); font-size:25px; line-height:1; text-decoration:none}
.brand em{font-style:italic; color:var(--text-dim)}
.top-right{display:flex; align-items:center; gap:9px}
.acct{display:flex; align-items:center; gap:8px; border:1px solid var(--border);
  border-radius:var(--r); padding:4px 10px 4px 5px; font-size:11px; color:var(--text-dim)}
.avatar{width:20px; height:20px; border-radius:50%; background:var(--accent);
  color:var(--accent-ink); display:grid; place-items:center; font-size:10px; flex:none;
  overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}

main.shell{max-width:760px; margin:0 auto; padding:34px 22px 60px}
.shell h1{font-family:var(--serif); font-weight:400; font-size:30px; margin:0 0 6px}
.shell .lede{font-family:var(--type); font-size:14.5px; color:var(--text-dim);
  margin:0 0 26px; max-width:62ch; line-height:1.62}

.panel{border:1px solid var(--border); border-radius:var(--r); background:var(--surface);
  padding:16px; margin-bottom:14px}
.panel h2{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; margin:0 0 13px}
dl.kv{display:grid; grid-template-columns:auto 1fr; gap:7px 18px; margin:0; font-size:12.5px}
dl.kv dt{color:var(--text-faint)}
dl.kv dd{margin:0; color:var(--text); overflow-wrap:anywhere}
.tick{color:var(--ok)} .cross{color:var(--crit)} .warnc{color:var(--warn)}

.actions{display:flex; gap:9px; flex-wrap:wrap; margin-top:18px}
.muted{font-size:11.5px; color:var(--text-faint); line-height:1.6; margin:14px 0 0}
.muted code{color:var(--text-dim)}