/* css/weekly.css - the weekly loop (redesign R4): the aspect pages
   (views/aspect.js) and Goals (views/quests.js) as stage pages, and the
   Weekly Review (views/review.js) in the journey's mission panel. Ported from
   the approved prototype (docs/prototype/redesign/weekly.css). --px is the
   stage page's prototype pixel (css/stage-page.css). */

/* ============================================================ aspect page */

/* The top's mark is the region's emblem, a picture rather than a sprite. */
.aspect-page .page-top .mark img {
  border-radius: 18%;
  box-shadow: 0 calc(14 * var(--px)) calc(40 * var(--px)) rgba(0, 0, 0, 0.12);
}
/* Under the photograph: the grade and score beside where they stand. */
.aspect-top-read { display: flex; align-items: center; gap: calc(50 * var(--px)); }
.aspect-top-lines { display: grid; gap: 8px; min-width: 0; }
.aspect-page .aspect-standing .percentile-band { margin-left: 6px; vertical-align: 1px; }

/* The long sections carry prose and small print, not one statement each: a
   tighter measure than the Landing's. */
.aspect-page .statement p,
.aspect-page .statement li {
  max-width: calc(1400 * var(--px));
  margin: 0 0 calc(36 * var(--px));
  font-weight: 500;
  font-size: max(15px, calc(24 * var(--px)));
  line-height: 1.8;
  letter-spacing: normal;
}
.aspect-page .aspect-score-badge {
  border: 0;
  border-radius: calc(24 * var(--px));
  background: var(--frame-card);
  padding: max(12px, calc(30 * var(--px))) max(18px, calc(44 * var(--px)));
}
.aspect-page .aspect-theme { font-style: italic; }
.aspect-page .benchmark-detail { margin: 12px 0 0; font-size: max(14px, calc(22 * var(--px))); color: #444444; }
.aspect-page .grade-explainer { margin: calc(30 * var(--px)) 0 calc(30 * var(--px)); }
.aspect-page .grade-explainer-note,
.aspect-page .gauge-note,
.aspect-page .gauge-summary { color: #444444; }
.aspect-page .aspect-note { padding-left: calc(30 * var(--px)); border-left: 3px solid var(--frame-ink); }
.aspect-page .aspect-note strong { color: inherit; }
/* The guideline checks: a fold like the others, with their verdicts showing
   on it while it is closed. No boxed card. */
.aspect-page .criteria-card {
  margin: calc(40 * var(--px)) 0 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.aspect-page .criteria-card > summary {
  display: list-item;
  padding: 10px 0;
  cursor: pointer;
  line-height: 1.9;
}
.aspect-page .criteria-card > summary:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 3px; }
.aspect-page .criteria-card[open] > summary { margin-bottom: calc(24 * var(--px)); }
.aspect-page .criteria-card .card-header {
  display: inline;
  margin: 0 8px 0 0;
  padding: 0;
  border: 0;
  font-family: inherit;
  font-weight: 700;
  font-size: max(15px, calc(24 * var(--px)));
  color: var(--frame-ink);
}
.aspect-page .criteria-card > summary .criterion-chip { display: inline-block; vertical-align: 1px; }
.aspect-society .gauge-track { max-width: calc(1400 * var(--px)); }
.aspect-page .criteria-card details { margin-top: calc(40 * var(--px)); font-size: max(14px, calc(22 * var(--px))); }
/* The long explanations, one click away. */
.aspect-more { margin-top: calc(40 * var(--px)); }
.criteria-card + .aspect-more { margin-top: 0; }
.aspect-more summary {
  display: list-item;
  min-height: 44px;
  box-sizing: border-box;
  padding: 10px 0;
  font-weight: 700;
  font-size: max(15px, calc(24 * var(--px)));
  cursor: pointer;
}
.aspect-more summary:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 3px; }
.aspect-more[open] summary { margin-bottom: calc(24 * var(--px)); }
.aspect-page .statement .aspect-more p,
.aspect-page .statement .aspect-more li { font-size: max(14px, calc(21 * var(--px))); margin-bottom: calc(20 * var(--px)); }
.aspect-sources { padding-left: 1.2em; }

/* One row per component: name, score, a meter in the region's hue, and what
   it is made of. */
.part-rows { margin: 0; padding: 0; list-style: none; }
.part-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(200 * var(--px)) calc(420 * var(--px));
  gap: calc(10 * var(--px)) calc(40 * var(--px));
  align-items: center;
  padding: calc(26 * var(--px)) 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.part-row:first-child { padding-top: 0; }
.pr-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px calc(24 * var(--px)); }
.pr-name .card-title { margin: 0; font-size: max(15px, calc(26 * var(--px))); }
.aspect-page .statement .pr-score { display: flex; align-items: baseline; gap: 8px; margin: 0; }
.pr-score b { font-family: var(--frame-word); font-weight: 400; font-size: max(30px, calc(70 * var(--px))); line-height: 1; }
.pr-score small { font-size: max(11px, calc(15 * var(--px))); font-weight: 700; }
.part-row .meter { width: 100%; max-width: none; margin: 0; }
.aspect-page .statement .pr-desc { grid-column: 1 / -1; margin: 0; font-size: max(14px, calc(20 * var(--px))); color: #444444; }
.fact-list { margin: 0; padding: 0; list-style: none; }
.fact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px calc(40 * var(--px));
  padding: calc(30 * var(--px)) 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.fact-row:last-child { border-bottom: 0; }
.fact-label { font-weight: 700; font-size: max(15px, calc(24 * var(--px))); }
.fact-value { font-size: max(15px, calc(24 * var(--px))); }
.fact-detail { grid-column: 1 / -1; font-size: max(13px, calc(19 * var(--px))); line-height: 1.7; color: #444444; }

/* The trend: one strip of the last few weeks, oldest to newest. */
.trend-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(24 * var(--px)); max-width: calc(1400 * var(--px)); margin: 0; padding: 0; list-style: none; }
.aspect-page .statement .trend-cell {
  display: grid;
  gap: 4px;
  max-width: none;
  margin: 0;
  padding: calc(24 * var(--px));
  border-radius: calc(20 * var(--px));
  background: var(--frame-card);
  line-height: 1.2;
}
.trend-date { font-size: max(11px, calc(16 * var(--px))); font-weight: 700; letter-spacing: 0.04em; }
.trend-score { font-family: var(--frame-word); font-weight: 400; font-size: max(28px, calc(70 * var(--px))); line-height: 1; }
.trend-delta { min-height: 1.2em; font-weight: 700; font-size: max(12px, calc(18 * var(--px))); }

/* Suggested focus, then how the aspect is re-measured. */
.aspect-page .aspect-measured { margin-top: calc(40 * var(--px)); padding-top: calc(40 * var(--px)); border-top: 1px dashed rgba(0, 0, 0, 0.25); }
.aspect-page .focus-list + .aspect-measured { margin-top: 0; border-top: 0; }
.aspect-page .aspect-focus .wrap > div > .aspect-measured:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.aspect-page .aspect-measured .careers-head { margin: 0; font-size: max(15px, calc(26 * var(--px))); }
.aspect-page .careers-head .careers-note { font-size: inherit; color: #444444; }

.focus-list { margin: 0; padding: 0; list-style: none; }
.aspect-page .focus-row { max-width: none; margin: 0; padding: calc(40 * var(--px)) 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.25); }
.aspect-page .focus-row:first-child { padding-top: 0; }
.aspect-page .focus-row p { margin: 0; }
.aspect-page .focus-title { font-weight: 700; }
.aspect-page .focus-meta { font-size: max(13px, calc(19 * var(--px))); color: #444444; }
.careers-note { margin: 0; font-weight: 600; font-size: max(14px, calc(22 * var(--px))); }

/* ================================================================= goals */

.goals-intro { color: #444444; }
/* Compact since 2026-09-26: your pledges two to a line, the catalog one row
   per pledge type, and smaller stickers. */
.goals .pledge-sticker svg {
  width: calc(130 * var(--px));
  height: calc(130 * var(--px));
  min-width: 56px;
  min-height: 56px;
  padding: calc(30 * var(--px));
  border-width: calc(7 * var(--px));
}
.pledge-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(50 * var(--px)) calc(70 * var(--px)); }
.goals .statement .pledge-list p { max-width: none; margin: 0 0 calc(8 * var(--px)); font-size: max(14px, calc(21 * var(--px))); line-height: 1.6; }
.goals .statement .pledge-list .goals-none { grid-column: 1 / -1; }
.pledge {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: calc(40 * var(--px));
  align-items: start;
}
.pledge .card-title:focus-visible,
.goals .label:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 4px; }
.pledge .card-title:focus:not(:focus-visible),
.goals .label:focus:not(:focus-visible) { outline: none; }
/* The sticker's tilt is on the wrapper; the sticking-on moves the <i> inside,
   so the tilt survives the motion ending. */
.pledge-sticker { display: inline-block; line-height: 0; }
.pledge-sticker i { display: block; will-change: transform; }
.goals .statement .pledge-aspect,
.pledge-aspect {
  margin: 0 0 calc(10 * var(--px));
  font-size: max(11px, calc(16 * var(--px)));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.goals .statement .pledge-result { font-weight: 700; }
.pledge-met { color: #1d6b3a; }
.pledge-missed { color: #8a1c1c; }
.goals .statement .pledge-meta { color: #444444; font-size: max(13px, calc(20 * var(--px))); }
.pledge-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(14 * var(--px)); }
.pledge-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.goals .statement .pledge-ask p { flex-basis: 100%; margin: 0; font-weight: 700; }

.goals .statement .goals-note { margin: 0 0 calc(30 * var(--px)); font-weight: 600; font-size: max(14px, calc(22 * var(--px))); }
.cat-list { margin: 0; padding: 0; list-style: none; }
.cat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) calc(560 * var(--px));
  gap: calc(40 * var(--px));
  align-items: center;
  padding: calc(26 * var(--px)) 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.25);
}
.cat:first-child { padding-top: 0; }
.cat:last-child { border-bottom: 0; }
.goals .statement .cat p { max-width: none; margin: 0; font-size: max(14px, calc(21 * var(--px))); line-height: 1.6; }
.goals .statement .cat .pledge-aspect { margin-bottom: 4px; font-size: max(11px, calc(16 * var(--px))); }
.cat .card-title { margin: 0; font-size: max(15px, calc(26 * var(--px))); }
.cat-form { display: grid; gap: 6px; }
.cat-row { display: flex; gap: 10px; align-items: center; }
.cat-row .form-control { flex: 1; min-width: 0; }
.cat-row .pill { flex: none; }
.cat-form label { font-size: max(13px, calc(18 * var(--px))); font-weight: 700; }
.cat-form .form-control {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  background: #ffffff;
  color: var(--frame-ink);
  font-size: 16px;
}
.cat-form .form-control:focus-visible { outline: 2px solid var(--frame-ink); outline-offset: 2px; }
.cat-error { margin: 0; color: #8a1c1c; font-weight: 600; }
.stage-page .pill:disabled { opacity: 0.45; cursor: not-allowed; }

/* ========================================================= weekly review */

.review .rv-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
}
/* The painted week and the learning steps are one field each, as wide as the
   form (views/activity-fields.js). */
.review .rv-fields > .easy-field { grid-column: 1 / -1; }
.review .form-group { margin-bottom: 20px; }
.review .field-error { color: #8a1c1c; font-weight: 600; }
.review .conn-banner { margin: 0 0 28px; background: var(--frame-card); border-radius: 16px; }
.review .q-title[tabindex]:focus { outline: none; }

/* The next region's photograph wipes over the screen between regions. Hidden
   until a wipe runs; the window and the picture move in opposite directions
   (views/review.js wipeTo). */
.rv-wipe {
  position: fixed;
  inset: var(--frame-header-h) 0 0;
  z-index: 30;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}
.rv-wipe.on { visibility: visible; pointer-events: auto; }
.rv-wipe-window,
.rv-wipe-window b {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  will-change: transform;
}
.rv-wipe-window b { background-size: cover; background-position: center; }
.rv-wipe-window span {
  position: absolute;
  left: clamp(20px, 5vw, 136px);
  bottom: clamp(24px, 6vh, 90px);
  font-family: var(--frame-word);
  font-weight: 400;
  font-size: clamp(44px, 8vw, 150px);
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.45);
}

/* The ending: dark, the star, what moved and the way on. The curtain lifts
   off it (transform only); at rest it is scaled to nothing. */
.rv-ending {
  position: relative;
  display: grid;
  place-items: center;
  min-height: calc(100vh - var(--frame-header-h));
  min-height: calc(100dvh - var(--frame-header-h));
  padding: 48px 20px;
  overflow: hidden;
  border-radius: var(--journey-r);
  background: #1b1b1b;
  color: #ffffff;
}
.rv-ending-curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: #808080;
  transform: scaleY(0);
  transform-origin: top;
}
.rv-ending-in { position: relative; z-index: 1; max-width: 720px; text-align: center; }
.rv-ending-star { display: inline-block; width: clamp(88px, 10vw, 140px); aspect-ratio: 1; }
.rv-ending-star svg { display: block; width: 100%; height: 100%; overflow: visible; }
.rv-ending h2 {
  margin: 24px 0 20px;
  font-family: var(--frame-word);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 1;
  text-transform: uppercase;
}
.rv-ending h2:focus { outline: none; }
.rv-ending p { margin: 0 0 10px; font-size: 18px; line-height: 1.6; }
.rv-ending-xp { font-weight: 700; }
.rv-continue {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  margin-top: 24px;
  padding: 0 32px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--frame-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.rv-continue::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.rv-continue:focus-visible { outline: 2px solid #ffffff; outline-offset: 4px; }

/* Done for the week: the past reviews. */
.rv-done-head {
  margin: 0 0 calc(30 * var(--px));
  font-family: var(--frame-word);
  font-weight: 400;
  font-size: max(34px, calc(110 * var(--px)));
  line-height: 1;
  text-transform: uppercase;
}
.rv-done-head:focus { outline: none; }
.rv-done-note { margin: 0 0 calc(24 * var(--px)); font-size: max(15px, calc(24 * var(--px))); line-height: 1.8; }
.rv-done-links { margin: calc(80 * var(--px)) 0 0; }

/* ================================================================ phones */
@container (max-width: 900px) {
  /* A phone screen is short: tighter sections and rows, same content. */
  .aspect-page .statement { padding: calc(60 * var(--px)) 0 calc(56 * var(--px)); }
  .aspect-page .statement p,
  .aspect-page .statement li { margin-bottom: calc(24 * var(--px)); font-size: max(15px, calc(30 * var(--px))); line-height: 1.6; }
  .aspect-top-read { gap: calc(30 * var(--px)); }
  .aspect-page .aspect-score-badge { padding: 8px 14px; }
  .part-row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px calc(20 * var(--px)); padding: calc(20 * var(--px)) 0; }
  .part-row .meter { grid-column: 1 / -1; }
  .pr-score b { font-size: max(26px, calc(64 * var(--px))); }
  .aspect-page .statement .pr-desc { font-size: max(13px, calc(25 * var(--px))); line-height: 1.5; }
  .aspect-more { margin-top: calc(24 * var(--px)); }
  .trend-strip { gap: calc(14 * var(--px)); }
  .aspect-page .statement .trend-cell { padding: calc(18 * var(--px)); }
  .trend-date { font-size: 10.5px; letter-spacing: 0; }
  .aspect-page .focus-row { padding: calc(26 * var(--px)) 0; }
  .aspect-page .aspect-measured .careers-head { font-size: max(15px, calc(28 * var(--px))); }
  .pledge-list { grid-template-columns: minmax(0, 1fr); gap: calc(40 * var(--px)); }
  .pledge { gap: calc(30 * var(--px)); }
  /* The sticker beside the text, the target box and Add under both. */
  .cat { grid-template-columns: auto minmax(0, 1fr); gap: calc(20 * var(--px)) calc(30 * var(--px)); padding: calc(34 * var(--px)) 0; }
  .cat .pledge-sticker { align-self: start; }
  .cat-form { grid-column: 1 / -1; }
  .goals .statement .pledge-list p,
  .goals .statement .cat p { font-size: max(14px, calc(28 * var(--px))); }
}
@media (max-width: 900px) {
  .review .rv-fields { grid-template-columns: minmax(0, 1fr); }
}

/* ================================================================= Thai
   No tracking for Thai, and the wordmark face has no Thai, so those headings
   fall back to Sarabun at a heavier weight. */
html[lang="th"] .pledge-aspect,
html[lang="th"] .rv-continue { letter-spacing: normal; }
html[lang="th"] .rv-ending h2,
html[lang="th"] .rv-done-head,
html[lang="th"] .rv-wipe-window span { font-weight: 700; }

/* Your character in this region (v122, characters.js): the name large, the
   two sides it was drawn from, a tip, and the region's four with yours
   filled in. */
.aspect-page .statement .character-name {
  margin: 0;
  font-family: var(--frame-word);
  font-size: max(40px, calc(96 * var(--px)));
  line-height: 1.05;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.aspect-page .statement .character-line { margin: calc(16 * var(--px)) 0 calc(28 * var(--px)); font-size: max(16px, calc(28 * var(--px))); line-height: 1.6; }
.character-sides { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0 0 calc(24 * var(--px)); padding: 0; list-style: none; }
.character-sides li { font-size: max(14px, calc(21 * var(--px))); }
.character-sides span { color: var(--frame-muted); }
.aspect-page .statement .character-tip { margin: 0 0 calc(28 * var(--px)); font-size: max(15px, calc(22 * var(--px))); line-height: 1.6; }
.character-cast { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 calc(36 * var(--px)); padding: 0; list-style: none; }
.character-cast li {
  padding: 6px 14px;
  border: 1px solid #c8c8c8;
  border-radius: 999px;
  font-size: max(13px, calc(18 * var(--px)));
  color: var(--frame-muted);
}
.character-cast li[aria-current="true"] { border-color: var(--frame-ink); background: var(--frame-ink); color: #ffffff; font-weight: 700; }
.character-research { margin: 0 0 calc(20 * var(--px)); padding-left: 1.2em; }
.aspect-page .statement .character-research li { font-size: max(14px, calc(20 * var(--px))); line-height: 1.6; margin-bottom: 6px; }
html[lang="th"] .aspect-page .statement .character-name { letter-spacing: 0; text-transform: none; line-height: 1.4; }