/* New surfaces — mastery map, assessment, review session
   Same Swiss design language: achromatic + accent, hairline rules, mono meta. */

/* ───────────────────────────────────────── MASTERY MAP */
.mm {
  font-family: var(--font-ui);
  background: var(--paper);
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.mm__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 48px; height: 56px;
}
.mm__top-l { display: flex; align-items: center; gap: 10px; }
.mm__top-r { display: flex; align-items: center; gap: 14px; font-size: 13px; }
.mm__domain {
  font: 500 12px/1 var(--font-ui);
  background: var(--paper); border: 1px solid var(--rule);
  padding: 6px 10px; color: var(--ink);
}

.mm__layout { display: grid; grid-template-columns: 280px 1fr 320px; flex: 1; min-height: 0; }
.mm__rail {
  padding: 24px;
  display: flex; flex-direction: column; gap: 22px;
  font-size: 12px;
}
.mm__rail--l { border-right: 1px solid var(--rule); }
.mm__rail--r { border-left: 1px solid var(--rule); }

.mm__what-card { padding: 14px 0 4px; }
.mm__what-card + .mm__what-card { border-top: 1px solid var(--rule-3); margin-top: 14px; padding-top: 14px;}
.mm__what-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mm__what-time { margin-left: auto; color: var(--ink-4); }
.mm__what-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.mm__what-item {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 6px 8px; border-left: 2px solid var(--rule-2);
  background: var(--paper-2);
  cursor: pointer; transition: border-color 120ms ease;
}
.mm__what-card--review .mm__what-item { border-left-color: var(--accent); }
.mm__what-card--frontier .mm__what-item { border-left-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--paper)); }
.mm__what-item:hover { border-left-width: 4px; }
.mm__what-label { font-weight: 500; color: var(--ink); }
.mm__what-meta { font-size: 10px; color: var(--ink-4); }

.mm__legend-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; }
.mm__legend-list li { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.mm__legend-n { margin-left: auto; color: var(--ink-4); }

.mm__filter { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mm__filter-btn {
  font: 500 10px/1 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink-3);
  padding: 6px 8px; cursor: pointer;
}
.mm__filter-btn.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.mm__stage {
  position: relative;
  background: var(--paper);
  overflow: hidden;
}
.mm__svg { width: 100%; height: 100%; display: block; }

.mm__sel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mm__sel-title { margin: 4px 0; }
.mm__sel-id { color: var(--ink-4); font-size: 11px; }
.mm__sel-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 12px; }
.mm__sel-mastery { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.mm__sel-empty { color: var(--ink-3); }

/* ───────────────────────────────────────── ASSESSMENT */
.as {
  font-family: var(--font-ui);
  background: var(--paper);
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.as__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px; height: 52px;
  background: var(--ink); color: var(--paper);
}
.as__top-l { display: flex; align-items: center; gap: 14px; }
.as__top-r { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.as__mode {
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.16em;
  padding: 5px 8px; background: var(--accent); color: var(--paper);
}
.as__mode-sep { color: var(--ink-4); }
.as__top-id { color: rgba(255,255,255,0.6); font-size: 11px; }
.as__top-context { color: rgba(255,255,255,0.85); }
.as__top-time { font-weight: 500; }
.as__top-stake { color: rgba(255,255,255,0.7); }
.as__divider-d { background: rgba(255,255,255,0.2) !important; }
.as__btn-d { background: var(--accent); color: var(--paper); border: none; padding: 8px 16px; font: 600 12px/1 var(--font-ui); cursor: pointer; }

.as__layout { display: grid; grid-template-columns: 240px 1fr 300px; flex: 1; min-height: 0; }
.as__steps { padding: 24px 20px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; font-size: 12px; }
.as__steps-h { margin-bottom: 4px; }
.as__steplist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.as__step {
  display: grid; grid-template-columns: 32px 1fr auto; align-items: start;
  gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule-3);
}
.as__step-n { font-size: 11px; color: var(--ink-4); padding-top: 2px; }
.as__step-label { font-size: 10px; }
.as__step-title { font-size: 12px; color: var(--ink); }
.as__step--done .as__step-n { color: var(--ink); }
.as__step--current { background: color-mix(in oklab, var(--accent) 5%, var(--paper)); border-left: 2px solid var(--accent); padding-left: 6px; margin-left: -8px; }
.as__step--current .as__step-n { color: var(--accent); font-weight: 600; }
.as__step--locked .as__step-title { color: var(--ink-4); }
.as__step--locked .as__step-n { color: var(--ink-5); }
.as__step-tick { color: var(--ink); font-size: 11px; }
.as__step-tick--cur { color: var(--accent); }
.as__concepts { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.as__concepts li { display: flex; align-items: center; gap: 8px; }

.as__main { padding: 32px 40px; overflow: hidden; }
.as__prob-head { display: flex; align-items: center; gap: 12px; }
.as__prob-id { color: var(--ink-4); }
.as__prob-elo { color: var(--ink-4); margin-left: auto; }
.as__prob-title { margin: 14px 0 8px; }
.as__prob-lead { color: var(--ink-2); }
.as__prob-em { color: var(--accent); font-style: italic; font-weight: 500; }

.as__step-active-head { display: flex; align-items: center; gap: 10px; margin: 18px 0 14px; }
.as__step-mark { background: var(--accent); color: var(--paper); padding: 2px 8px; font-weight: 700; }
.as__construct { display: flex; flex-direction: column; gap: 16px; }
.as__field { display: flex; flex-direction: column; gap: 6px; }
.as__field--active label { color: var(--accent); }
.as__field-input {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--rule); padding: 14px 16px;
  font: 500 18px/1 var(--font-mono);
  min-height: 48px;
}
.as__field-input--filled { background: var(--paper-2); }
.as__field-input--editing { border-color: var(--accent); border-width: 1.5px; box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 15%, transparent); }
.as__field-input--locked { background: var(--paper-2); border-style: dashed; color: var(--ink-5); }
.as__field-tick { margin-left: auto; color: var(--ink); }
.as__field-status { margin-left: auto; color: var(--ink-4); font-size: 11px; font-style: italic; }
.as__field-typed { color: var(--ink); }
.as__field-hint { color: var(--ink-3); }

.as__trace { margin-top: 10px; }
.as__trace-summary { display: flex; gap: 10px; align-items: center; cursor: pointer; padding: 10px 0; }
.as__trace-body { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.as__trace-row {
  display: grid; grid-template-columns: 60px 1fr 80px; gap: 12px;
  align-items: baseline; font-size: 12px; padding: 6px 8px;
  border-left: 2px solid var(--rule-2);
}
.as__trace-row--err { border-left-color: var(--accent); background: color-mix(in oklab, var(--accent) 4%, transparent); }
.as__trace-row--ok { border-left-color: var(--ink); }
.as__trace-t { color: var(--ink-4); }
.as__trace-flag { color: var(--accent); text-align: right; }
.as__trace-flag--ok { color: var(--ink-3); }

.as__actions { display: flex; gap: 8px; margin-top: 24px; }
.btn--accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }

.as__support { padding: 24px 20px; border-left: 1px solid var(--rule); font-size: 12px; }
.as__support-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.as__support-meta { color: var(--ink-4); font-size: 10px; }
.as__related-text { padding: 10px; background: color-mix(in oklab, var(--accent) 6%, var(--paper)); border-left: 2px solid var(--accent); }
.as__related-list { list-style: none; padding: 0; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; }
.as__related-item { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--rule-3); }
.as__related-item .t-mono { color: var(--ink-4); font-size: 10px; }
.as__related-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.as__calib { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.as__calib-row { display: flex; justify-content: space-between; padding: 2px 0; }
.as__calib-bar { position: relative; height: 4px; background: var(--rule-2); margin-top: 6px; }
.as__calib-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.as__calib-mark { position: absolute; top: -3px; width: 2px; height: 10px; background: var(--accent); transform: translateX(-1px); }

.as__reward { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.as__reward li { display: flex; justify-content: space-between; padding: 4px 0; font-size: 11px; }
.as__reward .t-mono { color: var(--ink-4); }

/* ───────────────────────────────────────── REVIEW SESSION */
.rs {
  font-family: var(--font-ui);
  background: var(--paper);
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
}
.rs__top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 32px; height: 52px;
}
.rs__top-l { display: flex; align-items: center; gap: 12px; }
.rs__top-r { display: flex; align-items: center; gap: 14px; font-size: 12px; }
.rs__mode {
  font: 700 11px/1 var(--font-mono); letter-spacing: 0.16em;
  padding: 5px 8px; background: var(--ink); color: var(--paper);
}
.rs__mode-sep { color: var(--ink-4); }

.rs__queue { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 10px 32px; }
.rs__queue-h { letter-spacing: 0.08em; }
.rs__queue-bar { display: flex; gap: 4px; flex: 1; }
.rs__queue-item {
  display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--rule); background: var(--paper);
  padding: 8px 10px; min-width: 70px; flex: 1;
}
.rs__queue-item--done { background: var(--paper-2); color: var(--ink-3); }
.rs__queue-item--current { border-color: var(--ink); border-width: 1.5px; background: var(--ink); color: var(--paper); }
.rs__queue-item--upcoming { border-style: dashed; color: var(--ink-4); }
.rs__queue-n { font-size: 10px; color: inherit; opacity: 0.7; }
.rs__queue-shape { font-family: var(--font-serif); font-size: 16px; }
.rs__queue-now { font-size: 9px; letter-spacing: 0.1em; color: var(--accent); margin-left: auto; }
.rs__queue-rate { font-size: 9px; letter-spacing: 0.05em; margin-left: auto; }
.rs__queue-rate--good { color: var(--ink-3); }
.rs__queue-rate--hard { color: var(--accent); }
.rs__queue-meta { color: var(--ink-4); white-space: nowrap; }

.rs__layout { display: grid; grid-template-columns: 1fr 320px; flex: 1; min-height: 0; }
.rs__item { padding: 32px 48px; overflow: hidden; }
.rs__item-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
.rs__item-shape { display: flex; gap: 14px; align-items: center; }
.rs__item-glyph {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 28px;
  border: 1px solid var(--ink); background: var(--paper);
}
.rs__item-id { color: var(--ink-4); font-size: 11px; }
.rs__item-meta { display: flex; gap: 18px; }
.rs__item-meta-row { display: flex; flex-direction: column; gap: 2px; min-width: 70px; }
.rs__item-meta-row .t-mono { font-size: 13px; }

.rs__item-lead { margin: 18px 0 14px; }
.rs__derivation {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  margin: 8px 0 16px;
}
.rs__deriv-line {
  display: grid; grid-template-columns: 50px 1fr 110px;
  align-items: center; gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule-3);
  cursor: pointer;
  transition: background 120ms ease;
}
.rs__deriv-line:last-child { border-bottom: none; }
.rs__deriv-line:hover { background: var(--paper); }
.rs__deriv-line--selected {
  background: color-mix(in oklab, var(--accent) 8%, var(--paper));
  border-left: 3px solid var(--accent);
  padding-left: 13px;
}
.rs__deriv-line--muted .rs__deriv-body { color: var(--ink-4); }
.rs__deriv-n { color: var(--ink-4); font-size: 11px; }
.rs__deriv-body { font-size: 16px; }
.rs__deriv-mark { font-size: 10px; color: var(--ink-4); text-align: right; font-family: var(--font-mono); }
.rs__deriv-mark--selected { color: var(--accent); font-weight: 600; }

.rs__explain { margin: 18px 0 8px; }
.rs__explain-input {
  display: flex; align-items: baseline; gap: 4px;
  border: 1.5px solid var(--accent);
  padding: 14px 16px; min-height: 60px;
  font-family: var(--font-serif); font-size: 14px; line-height: 1.5;
  background: var(--paper);
  margin-top: 6px;
}
.rs__explain-meta { color: var(--ink-4); font-size: 10px; margin-top: 4px; }

.rs__rate { margin-top: 18px; }
.rs__rate-h { margin-bottom: 8px; }
.rs__rate-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rs__rate-btn {
  display: grid; grid-template-rows: auto 1fr auto;
  gap: 4px; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--rule);
  cursor: pointer; text-align: left;
  transition: border-color 120ms ease;
}
.rs__rate-btn:hover { border-color: var(--ink); }
.rs__rate-btn.is-on { border-color: var(--ink); border-width: 2px; padding: 11px 13px; background: var(--paper-2); }
.rs__rate-btn--again.is-on { border-color: var(--accent); }
.rs__rate-key {
  font-size: 10px; color: var(--paper); background: var(--ink);
  padding: 2px 6px; align-self: start; justify-self: start;
}
.rs__rate-btn--again .rs__rate-key { background: var(--accent); }
.rs__rate-label { font-size: 14px; font-weight: 600; color: var(--ink); }
.rs__rate-next { font-size: 11px; color: var(--ink-4); }
.rs__rate-meta { color: var(--ink-4); font-size: 11px; margin-top: 8px; }

.rs__rail { padding: 24px 20px; border-left: 1px solid var(--rule); font-size: 12px; }
.rs__shapes { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.rs__shape {
  display: grid; grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.rs__shape.is-on { border-color: var(--ink); border-width: 1.5px; background: var(--paper-2); padding: 7.5px 9.5px; }
.rs__shape-g { font-family: var(--font-serif); font-size: 18px; text-align: center; }
.rs__shape-l { font-weight: 500; }
.rs__shape-d { font-size: 10px; color: var(--ink-4); }
.rs__shape-n { color: var(--ink-4); }

.rs__rail-text { margin: 6px 0 8px; color: var(--ink-3); line-height: 1.5; }
.rs__implicates { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.rs__implicates li { display: flex; align-items: center; gap: 8px; }

.rs__impact { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.rs__impact li { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--rule-3); }
.rs__impact .t-mono { color: var(--ink-3); }

/* dot states already defined; ensure --frontier shows accent */
.mastery-dot--frontier { background: var(--accent); border-color: var(--accent); }

/* Japanese mastery map — language label */
.mmj__lang { font-family: var(--font-jp), var(--font-ui); font-weight: 500; }