/* profile.css -- layout for the profile page, the one progress-class surface.
 *
 * Every colour, radius, width and font family here is a token from
 * assets/tokens-b.css, which is the same token file every other surface in this
 * tree loads. No literal colour appears below, so a palette change reaches this
 * page by the same route it reaches the rooms.
 *
 * No @font-face and no font host. The token font stacks name Newsreader, Inter
 * Tight and IBM Plex Mono first and fall back to system faces, so a page served
 * from a plain local server makes zero network requests.
 *
 * THE BAND COLOURS ARE THE ROOM PAGE'S, ON PURPOSE. A student reads a band under
 * an idea in a room and then reads the same band on this page. Colour rising
 * with the level means a glance down 77 rows reads as a shape, and the two
 * floors stay in the low-emphasis chrome colour rather than reading as failure:
 * having built no task for an idea yet is a fact about the site, and not having
 * started one is not a mark against anybody.
 */

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

/* Any explicit `display` on an element defeats the [hidden] attribute, because
   the browser's own [hidden] rule is a low-specificity default. Every readout on
   this page ships hidden and is revealed only once it has been measured, so this
   rule is load-bearing here rather than defensive. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
}

h1, h2, h3, .eyebrow, .badge, .label, .level-band, .next-link, .foot-links {
  font-family: var(--font-display);
}

/* 32 of the 77 titles on this page name a Java identifier in a code span, so
   this rule carries a large part of the map rather than being an edge case. It
   is sized down slightly because the mono face runs large beside the body face
   at the same nominal size. */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 0.5rem; letter-spacing: -0.01em; }
h2 { font-size: 1.15rem; margin: 0 0 0.75rem; letter-spacing: -0.005em; }
h3 { font-size: 1rem; margin: 0 0 0.35rem; }

p { margin: 0 0 1rem; }
ul, ol { margin: 0; padding-left: 0; list-style: none; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.page {
  max-width: 52rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 5rem;
}

/* ---- head ---------------------------------------------------------------- */

.page-head { margin-bottom: 2.5rem; }

.eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 0.4rem;
}

.lede { color: var(--muted); margin-bottom: 1.25rem; }

/* The sentence that stands where the numbers will be. It is chrome, not an
   alarm: a page that has not read the record yet is the normal first frame. */
.evidence-note {
  margin: 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius);
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 0.92rem;
}

/* ---- badges. Always a label next to a value, never a bare bar. ----------- */

.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; }

.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-1);
  font-size: 0.82rem;
  line-height: 1.4;
}
.badge-label { color: var(--muted); }
.badge-value { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
.badge.gold { border-color: var(--highlight-line); background: var(--highlight-soft); }
.badge.gold .badge-value { color: var(--highlight); }

/* ---- blocks -------------------------------------------------------------- */

.block {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.help { color: var(--faint); font-size: 0.88rem; margin-bottom: 0; }

.next-up { border-top-style: dashed; }
.next-leaf { color: var(--muted); font-size: 0.95rem; }
.next-link { font-size: 0.9rem; }

.days-text { margin-bottom: 0.5rem; }

/* ---- the map ------------------------------------------------------------- */

.tree-note { color: var(--muted); font-size: 0.92rem; }

.area { margin-bottom: 2.5rem; }
.area h2 {
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--accent-line);
  color: var(--accent);
}

.concepts { counter-reset: concept; }

.concept {
  counter-increment: concept;
  padding: 0.9rem 0 0.9rem 2.4rem;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.concept:last-child { border-bottom: 0; }

/* The number is decoration, so it is generated rather than written into the
   page, and a screen reader reading the list does not have to hear it. */
.concept::before {
  content: counter(concept);
  position: absolute;
  left: 0;
  top: 0.95rem;
  width: 1.7rem;
  text-align: right;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.concept-name { color: var(--text); }
.concept-roll {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.leaf-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  padding: 0.25rem 0;
  font-size: 0.95rem;
}

/* min-width lets a long title shrink inside the flex row instead of pushing the
   band off the side, which is what puts a horizontal scrollbar on a phone. */
.leaf-name { min-width: 0; flex: 1 1 14rem; }

.leaf-level {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--muted);
}

.level-band {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius-sm);
  background: var(--neutral-soft);
  color: var(--neutral);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.level-band.band-named { border-color: var(--accent-line); color: var(--accent); }
.level-band.band-working {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.level-band.band-full {
  border-color: var(--highlight-line);
  background: var(--highlight-soft);
  color: var(--highlight);
}
.level-band.band-certified {
  border-color: var(--highlight);
  background: var(--highlight-soft);
  color: var(--highlight);
}

.level-count { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- saving and loading --------------------------------------------------
   Two controls that read as one pair. The file input is the browser's own,
   visually hidden behind its label rather than removed, so the keyboard still
   reaches it and the label is its accessible name. `focus-within` puts the ring
   on the label the eye is looking at, since the input itself has no box. */

.transfer {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 1rem;
}

.control {
  display: inline-block;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-1);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.4;
  cursor: pointer;
}
.control:hover { border-color: var(--accent-line); color: var(--accent); }
.control:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.transfer input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The one line both controls answer on. It is chrome the same way the evidence
   note is, and it is never an alarm: a refusal here means the record was left
   alone, which is the safe outcome. */
.transfer-status {
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--neutral-line);
  border-radius: var(--radius);
  background: var(--neutral-soft);
  color: var(--muted);
  font-size: 0.9rem;
}

.backup .help { margin-bottom: 0.75rem; }
.backup .help:last-child { margin-bottom: 0; }

/* ---- foot ---------------------------------------------------------------- */

.page-foot {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  color: var(--faint);
  font-size: 0.88rem;
}
.page-foot p { margin-bottom: 0.5rem; }

.foot-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; font-size: 0.9rem; }

/* ---- narrow screens ------------------------------------------------------
   Her directive asks for mobile friendly, and the width that matters is 375.
   The band moves under its own idea rather than competing with the title for a
   line, and the concept number moves out of the gutter so the whole row can use
   the full width. */

@media (max-width: 30rem) {
  .page { padding: 1.75rem 1rem 4rem; }
  h1 { font-size: 1.6rem; }

  .concept { padding-left: 0; }
  .concept::before {
    position: static;
    display: inline-block;
    width: auto;
    margin-right: 0.4rem;
  }

  .leaf-row { display: block; padding: 0.4rem 0; }
  .leaf-level { margin-top: 0.15rem; }
  .leaf-name { display: block; }

  /* A finger is not a mouse pointer. Both controls grow to a 44px target on a
     narrow screen, which is the smallest size a thumb hits reliably. */
  .control {
    min-height: 44px;
    padding: 0.7rem 1rem;
  }
}