/*
 * Plain and legible. System font stack, no framework, no CDN, no build.
 * This will be redesigned; the job here is to be readable, usable on a phone,
 * and to make "no access" visually obvious without relying on colour alone.
 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --ink: #16191d;
  --ink-soft: #5b6472;
  --line: #dfe3e8;
  --accent: #0f766e;
  --danger-ink: #8c1d18;
  --danger-bg: #fdecea;
  --info-ink: #1c4a7a;
  --info-bg: #e8f1fb;
  --radius: 10px;
  --gap: 1rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1c2024;
    --ink: #e9edf1;
    --ink-soft: #a2acb9;
    --line: #2e343b;
    --danger-ink: #ffb4ab;
    --danger-bg: #3b1a17;
    --info-ink: #a8cdf5;
    --info-bg: #16293c;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
        Arial, "Noto Sans", sans-serif;
  -webkit-text-size-adjust: 100%;
}

.shell {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}

/* Keyboard users get a visible way past the header. */
.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  padding: .5rem .75rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  margin-bottom: 1.5rem;
}
.wordmark { font-weight: 650; letter-spacing: -.01em; }

h1 { font-size: 1.4rem; margin: 0 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .75rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}

.lede { margin: 0 0 1rem; color: var(--ink-soft); }
.aside { margin: 1rem 0 0; color: var(--ink-soft); font-size: .925rem; }
.sep { padding: 0 .35rem; }

/* --- forms ---------------------------------------------------------------- */

.field { margin-bottom: 1rem; }
.field label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 550;
  font-size: .925rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
  width: 100%;
  padding: .6rem .7rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
}
input:focus-visible,
.btn:focus-visible,
.linkbtn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Wide tracking makes a 6-digit code easy to proof-read before submitting. */
.otp-input {
  font-size: 1.4rem;
  letter-spacing: .35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.btn {
  display: inline-block;
  padding: .6rem 1rem;
  font: inherit;
  font-weight: 550;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}
.btn-primary { width: 100%; background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }

.btn-small { width: auto; padding: .4rem .75rem; font-size: .925rem; }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

/* A row whose action does not exist. Not a link, not clickable, and it says why. */
.btn[aria-disabled="true"],
.btn:disabled {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}

.btn[data-busy="true"] { opacity: .65; pointer-events: none; }

.linkbtn {
  padding: 0;
  font: inherit;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
a { color: var(--accent); }

/* --- messages ------------------------------------------------------------- */

.msg {
  margin: 0 0 1rem;
  padding: .7rem .8rem;
  border-radius: 8px;
  font-size: .95rem;
}
.msg-error { background: var(--danger-bg); color: var(--danger-ink); }
.msg-info  { background: var(--info-bg);  color: var(--info-ink); }
.msg a { color: inherit; font-weight: 600; }

/* --- services list -------------------------------------------------------- */

.applist { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.approw {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
}

/*
 * "No access" is signalled three ways, not one: reduced contrast, a text badge,
 * and a de-emphasised secondary action. Colour alone would be invisible to a
 * colourblind or greyscale reader, and the whole point of the state is that it
 * must be obvious at a glance.
 */
.approw.no-access { border-left-color: var(--line); background: transparent; }
.approw.no-access .app-name { color: var(--ink-soft); }

.app-main { flex: 1 1 auto; min-width: 0; }
.app-name { margin: 0; font-size: 1rem; font-weight: 600; }
.app-desc { margin: .25rem 0 0; color: var(--ink-soft); font-size: .925rem; }

.badge {
  display: inline-block;
  margin-left: .5rem;
  padding: .1rem .4rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  vertical-align: .1em;
}

.app-action { flex: 0 0 auto; }

@media (max-width: 26rem) {
  .approw { flex-direction: column; align-items: stretch; }
  .app-action .btn { width: 100%; }
}

/* --- account panel -------------------------------------------------------- */

.kv { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; margin: 0; }
.kv > div { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: .4rem 1rem; }
.kv dt { color: var(--ink-soft); font-size: .925rem; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* --- navigation ----------------------------------------------------------- */

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.nav a {
  padding: .25rem 0;
  color: var(--ink-soft);
  text-decoration: none;
  font-size: .95rem;
}
.nav a:hover { color: var(--ink); }
.nav a.is-active {
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Available to a screen reader, invisible on screen. Never display:none — that
   removes it from the accessibility tree and the announcement never happens. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- sessions ------------------------------------------------------------- */

.sessionlist { list-style: none; margin: 0 0 1.5rem; padding: 0; }

.session {
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: .75rem;
}
.session.is-current { border-left-color: var(--accent); }

.session-main { flex: 1 1 auto; min-width: 0; }
.session-name { margin: 0 0 .5rem; font-weight: 600; }

.session-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: .4rem 1rem;
  margin: 0;
  font-size: .9rem;
}
.session-meta dt { color: var(--ink-soft); font-size: .8rem; }
.session-meta dd { margin: 0; overflow-wrap: anywhere; }

/* The raw UA is reference material, not something to read — small and quiet. */
.session-ua {
  margin: .6rem 0 0;
  font-size: .75rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.badge-current {
  margin-left: .5rem;
  color: var(--accent);
  border-color: currentColor;
}

.session-action { flex: 0 0 auto; }

@media (max-width: 30rem) {
  .session { flex-direction: column; align-items: stretch; }
  .session-action .btn { width: 100%; }
}

/* --- password form -------------------------------------------------------- */

.hint { margin: .35rem 0 0; font-size: .85rem; color: var(--ink-soft); }

.meterwrap { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.meterwrap meter { flex: 1 1 auto; height: .5rem; }
.meterwrap .hint { margin: 0; min-width: 3.5rem; }

.suggestions {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  margin: .3rem 0 0;
  padding: 0;
  font-size: .85rem;
  color: var(--ink-soft);
}
/* The tick is a text character, so the state survives greyscale and screen readers. */
.suggestions li::before { content: "○ "; }
.suggestions li.met::before { content: "● "; }
.suggestions li.met { color: var(--ink); }

.notice {
  margin: 1rem 0;
  padding: .7rem .8rem;
  font-size: .9rem;
  background: var(--info-bg);
  color: var(--info-ink);
  border-radius: 8px;
}

.msg-ok { background: #e6f4ea; color: #14532d; }
@media (prefers-color-scheme: dark) {
  .msg-ok { background: #10291a; color: #a7e5bd; }
}

/* --- destructive ---------------------------------------------------------- */

.btn-danger { background: #b3261e; color: #fff; border-color: transparent; }
.btn-danger:hover { filter: brightness(1.1); }
.btn-danger:disabled,
.btn-danger[aria-disabled="true"] {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
  border-style: dashed;
  filter: none;
}

.danger-zone { margin-top: 1.5rem; border-color: #b3261e40; }
.danger-zone h2 { color: #b3261e; }
@media (prefers-color-scheme: dark) {
  .danger-zone h2 { color: #ffb4ab; }
}
.danger-zone p { margin: 0 0 .75rem; font-size: .95rem; }

/* --- dialog --------------------------------------------------------------- */

.dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.25rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.dialog::backdrop { background: rgb(0 0 0 / .5); }

.dialog-title { margin: 0 0 .75rem; font-size: 1.15rem; }
.dialog-body { font-size: .95rem; }
.dialog-body p { margin: 0 0 .75rem; }
.dialog-sub { margin-top: 1rem; font-weight: 550; }

.dialog-list { margin: 0 0 .75rem; padding-left: 1.1rem; }
.dialog-list li { margin-bottom: .35rem; }

.dialog-note {
  padding: .7rem .8rem;
  background: var(--info-bg);
  color: var(--info-ink);
  border-radius: 8px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.25rem;
}

@media (max-width: 26rem) {
  .dialog-actions { flex-direction: column-reverse; }
  .dialog-actions .btn { width: 100%; }
}