/* ==========================================================================
   rc.css
   Styles the recovery-capital and progress concepts ADD to the real design
   system. appts-shell.css is linked first and carries the hero, the glass
   card, the ring card and the whole .herocap panel; nothing in here redefines
   a token or restates a component that already exists. Anything below is new
   furniture the four metrics need and the live page does not have yet.

   Every selector is prefixed .rc- or .rp-, so a rule here can never reach into
   a shipped component the way a bare descendant rule would.
   ========================================================================== */

/* ---- 1. THE INTRO, ON ONE LINE, ALIGNED TO THE TITLE ------------------
   The live panel caps this at 640px so it stacks into four lines of small
   print beside the artwork. Here it holds ONE line.

   It keeps --rings-col of left padding, exactly as .hc-top does, so it starts
   under the H of the heading rather than out at the panel edge. Dropping the
   inset made it full width and misaligned it with the only thing above it,
   which is worse than the problem it solved. */
.rc-cap .hc-sub {
  max-width: none;
  padding-left: var(--rings-col);
  margin: 1px 0 15px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .74);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 900px) {
  .rc-cap .hc-sub { white-space: normal; text-overflow: clip; }
}
.rc-cap .hc-sub b { color: #fff; font-weight: 600; }

/* ---- 1b. EVERYTHING FITS 462px --------------------------------------
   The live hero is 462px tall and a panel that overflows it cannot transition
   into it. Budget, measured: 24 top pad + 30 title + 36 intro + ~250 grid +
   40 actions + 24 bottom pad. Every saving below is spent on the grid, which
   is the only part that carries content. */
.rc-cap { padding: 26px 32px; }
/* --rings-col is 196px in the shared sheet because the rings are 168 wide
   with a 28px gap. These are 140 with a 26px gap, so the inset has to come
   down with them or the heading and the intro sit 30px right of the cards
   they are supposed to line up with. */
.rc-cap .hc-in { max-width: 1120px; --rings-col: 196px; }
.rc-cap .hc-grid { align-items: start; gap: 28px; }
.rc-cap .hc-top { margin-bottom: 4px; min-height: 32px; }
.rc-cap .hc-top h3 { font-size: clamp(19px, 2.1vw, 24px); line-height: 1.15; }

/* the rings column shrinks with everything else, and the label inside it
   has to come down with it or it runs over the innermost arc */
.rc-cap .hc-rings { width: 168px; height: 168px; }
.rc-cap .hc-rings .core b { font-size: 29px; }
.rc-cap .hc-rings .core span { font-size: 8px; max-width: 58px; margin-top: 4px; }

/* ---- 1c. THE PREFERENCE PICKER ---------------------------------------
   It lives in the TITLE row, pushed right, so offering the choice costs no
   vertical space at all in a panel that has none to give. */
.rc-pref { margin-left: auto; display: flex; gap: 3px; padding: 3px;
  border-radius: 999px; background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18); flex-shrink: 0; }
.rc-pref[hidden] { display: none; }
.rc-pref button { padding: 7px 15px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; color: rgba(255, 255, 255, .72);
  border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease); }
.rc-pref button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.rc-pref button[aria-selected="true"] { background: var(--secondary); color: #fff; }

/* ---- 1d. THE AREA ICON ------------------------------------------------ */
.rc-cap .hc-bar .sw { width: auto; height: auto; border-radius: 0;
  background: none !important; display: inline-flex; }
.rc-ic { display: block; }

/* ---- 2. THE RING CORE IS ROUTINE --------------------------------------
   Three arcs are the three things you log. The core is the fourth metric
   rather than a total, which is how this card avoids becoming the single
   score the instrument refuses to be. */
.rc-core-disc { position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%); background: rgba(242, 206, 126, .16);
  border: 1px solid rgba(242, 206, 126, .42); transition: width .9s var(--spring),
  height .9s var(--spring); pointer-events: none; }

/* ---- 3. THE FOUR ROWS -------------------------------------------------
   Built on .hc-bar, which already owns the glass fill, the expand transition
   and the magenta open state. These only add what a four-metric row needs. */
.rc-cap .hc-bars { gap: 9px; }
.rc-cap .hc-bar { padding: 12px 15px; }
.rc-cap .hc-bar .r1 { margin-bottom: 6px; }
.rc-cap .hc-bar .nm { font-size: 14.5px; }
/* A GENERIC `.track` RULE IN THE SHARED SHEET PUTS 22px OF MARGIN-TOP HERE.
   Measured, not guessed: the row computed to 68px when its parts add to 51,
   and the child offsets put the whole difference above the track. It is meant
   for the status panel's own track and reaches this one because the selector
   names no component. Four rows of it is 88px, which on its own is why the
   panel did not fit a 462px hero. */
.rc-cap .hc-bar .track { height: 7px; margin-top: 8px; }
.rc-cap .hc-bar[aria-expanded="true"] .d { margin-top: 7px; }
.rc-cap .hc-bar .pc { font-size: 15px; letter-spacing: -.01em; }
.rc-cap .hc-bar .pc .u { font-size: 11px; font-weight: 600; opacity: .66;
  margin-left: 4px; font-family: var(--body); letter-spacing: 0; }
/* THE CROP. .d is overflow:hidden and the strip axis sat flush on its bottom
   edge, measured at 59 + 15 = 74 in a 74px box, so the descenders of "TODAY"
   were shaved. The row now ends on padding, not on the axis. */
.rc-cap .hc-bar[aria-expanded="true"] .d { max-height: 300px; padding-bottom: 4px; }

.rc-dir { display: inline-flex; align-items: center; gap: 4px; margin-left: 9px;
  padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; background: rgba(255, 255, 255, .12);
  color: rgba(255, 255, 255, .8); }
.rc-dir.up { background: rgba(79, 209, 199, .2); color: #8FE6DE; }
.rc-dir.down { background: rgba(242, 206, 126, .2); color: #F2CE7E; }

/* ---- 4. VARIANT A, the 14-day dot strip -------------------------------
   One cell per day, today at the right. A logged day is filled to its
   reading; a day with nothing is an outline, never a gap, so the run of
   days is legible as a run rather than as a broken bar. */
.rc-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: 4px; margin-top: 10px; }
.rc-strip i { display: block; height: 27px; border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, .2); background: transparent;
  transition: background .5s var(--ease); }
.rc-strip i.on { border-color: transparent; }
/* AN INSET RING, NOT AN OUTLINE. outline-offset pushed the marker 3px outside
   the cell, and the last cell is flush with the right edge of .d, which is
   overflow:hidden. So the today marker was shaved off exactly where it matters
   most. An inset shadow cannot leave the cell it marks. */
.rc-strip i.today { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85); }
.rc-strip-ax { display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); }

/* ---- 5. VARIANT B, the evidence block ---------------------------------
   The claim, then the rows it is made of. Nothing here is a percentage on
   its own: every figure is followed by what it counts. */
.rc-ev { margin-top: 11px; display: grid; gap: 7px; }
.rc-ev-r { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px;
  color: rgba(255, 255, 255, .82); }
.rc-ev-r b { font-family: var(--display); font-size: 15px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #fff; min-width: 34px; }
.rc-ev-bar { flex: 1; height: 5px; border-radius: 3px;
  background: rgba(255, 255, 255, .15); overflow: hidden; }
.rc-ev-bar i { display: block; height: 100%; border-radius: 3px; width: 0;
  transition: width 1s var(--spring); }
.rc-src { margin-top: 10px; padding: 9px 11px; border-radius: 10px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .66); }
.rc-src b { color: rgba(255, 255, 255, .88); font-weight: 600; }

/* ---- 6. VARIANT C, the week grid --------------------------------------
   Four rows, seven columns. minmax(0,1fr) rather than 1fr, because a 1fr
   track will not shrink below the min-content width of its label and the
   last two days get pushed off a narrow screen. That has happened here
   before, on the calendar. */
.rc-week { display: grid; grid-template-columns: 86px repeat(7, minmax(0, 1fr));
  gap: 5px; align-items: center; }
.rc-week .rc-wk-h { font-size: 10px; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); text-align: center; }
.rc-week .rc-wk-h.now { color: var(--secondary-soft); font-weight: 700; }
.rc-week .rc-wk-n { font-size: 12.5px; font-weight: 600; color: #fff;
  display: flex; align-items: center; gap: 7px; }
.rc-week .rc-wk-n i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rc-cell { height: 28px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .17);
  background: transparent; display: grid; place-content: center; color: #fff;
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .45s var(--ease), transform .2s var(--bounce); }
.rc-cell.on { border-color: transparent; }
.rc-cell.today { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
.rc-cell:hover { transform: translateY(-2px); }

/* ---- 7. VARIANT D, the ledger -----------------------------------------
   A running total behind a 28-day stream. The total only ever rises, which
   is the point: a page built on a total cannot punish a bad week.

   The row is laid out as columns rather than as a sentence: icon, then the
   number with its unit, then the subject and one supporting line. That is
   what makes four rows scannable down the numbers instead of readable one at
   a time. */
.rc-led { display: grid; gap: 9px; }
.rc-led-r { position: relative; padding: 15px 16px; border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
  overflow: hidden; display: flex; align-items: center; gap: 13px; }
.rc-led-r svg.rc-stream { position: absolute; right: 0; bottom: 0; width: 46%; height: 100%;
  opacity: .45; pointer-events: none; }

/* THE ICON WAS NOT CENTRED. place-content centres the grid TRACKS, and with a
   single block child the track filled the box, so the svg sat wherever its own
   box landed. A flex box centring on both axes puts the glyph in the middle,
   and the svg must be `block` or its inline baseline drops it a few pixels. */
.rc-led-ic { position: relative; z-index: 1; width: 38px; height: 38px;
  border-radius: 11px; border: 1px solid transparent; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; }
.rc-led-ic svg { display: block; }

/* the number and its unit are one column, right-aligned on the number so four
   rows line up down the digits whatever they count */
.rc-led-n { position: relative; z-index: 1; flex-shrink: 0; min-width: 58px;
  display: flex; flex-direction: column; align-items: flex-start; }
.rc-led-n b { font-family: var(--display); font-size: 28px; font-weight: 700;
  letter-spacing: -.04em; line-height: 1.05; color: #fff;
  font-variant-numeric: tabular-nums; }
.rc-led-n span { font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: rgba(255, 255, 255, .5); margin-top: 2px; }

.rc-led-tx { position: relative; z-index: 1; min-width: 0; }
.rc-led-name { display: block; font-size: 14.5px; font-weight: 600; color: #fff;
  line-height: 1.2; }
.rc-led-sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35;
  color: rgba(255, 255, 255, .62); }

/* ---- 8. the route out, which the live panel does not have -------------
   The live panel tells you to open your recovery map and then gives you no
   way to get there. Every concept carries the door. */
.rc-acts { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px;
  padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .14); }
.rc-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; line-height: 1.35;
  border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); text-decoration: none;
  transition: background .22s var(--ease), transform .22s var(--bounce); }
.rc-btn:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px);
  text-decoration: none; }
.rc-btn.primary { background: var(--secondary); border-color: transparent; color: #fff; }
.rc-btn.primary:hover { background: #C92A5F; }

/* THE hidden ATTRIBUTE LOSES TO ANY display RULE. The UA sheet's
   [hidden]{display:none} is a single type selector, so .ac-meta span with its
   own display beats it and the element stays visible with the attribute set.
   The appointment card's location row is exactly that case: marked hidden and
   still drawing its pin. */
.ac-meta span[hidden] { display: none; }

/* ---- 8a. THE HERO RECEDES BEHIND THE DIAL -----------------------------
   A filter on the panel's own parts rather than a veil element, and that is a
   deliberate choice rather than a shortcut. The obvious approach is an overlay
   with backdrop-filter, but .hc-in carries z-index:1 and so opens a stacking
   context: a veil placed as its sibling would sit above the dial's own wrapper
   no matter what z-index the wrapper is given, because a child cannot escape
   its parent's stacking context. Blurring the three blocks and leaving the
   actions line sharp sidesteps that entirely, and it keeps the button that was
   pressed in focus alongside the thing it opened, which is the right reading:
   the dial belongs to that button.

   The photograph is scaled slightly as it blurs, because a blur samples beyond
   its own edges and an unscaled image shows a soft transparent border. */
.opener .hc-top,
.opener .hc-sub,
.opener .hc-grid { transition: filter .34s var(--ease), opacity .34s var(--ease); }
.opener.rc-orbmode .hc-top,
.opener.rc-orbmode .hc-sub,
.opener.rc-orbmode .hc-grid { filter: blur(7px); opacity: .45; pointer-events: none; }
.opener > .bg { transition: filter .4s var(--ease), transform .5s var(--ease); }
.opener.rc-orbmode > .bg { filter: blur(9px) saturate(.9); transform: scale(1.05); }
/* the other actions dim without blurring, so the line still reads as a line */
.opener.rc-orbmode .rc-acts > .rc-btn,
.opener.rc-orbmode .rc-pref { opacity: .4; pointer-events: none;
  transition: opacity .3s var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .opener .hc-top, .opener .hc-sub, .opener .hc-grid, .opener > .bg { transition: none; }
}

/* ---- 8b. LOG SOMETHING NOW, the pop-out: DIAL --------------------------
   Concept D, chosen at review. The seven flows sit on a ring with the question
   in the middle, so nothing is closer to hand than anything else and the
   control does not quietly steer somebody toward whichever flow happens to be
   listed first. It opens upwards because the button sits on the actions line
   at the foot of the hero panel. */
.rc-orbwrap { position: relative; display: inline-flex; }
.rc-orbs { position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 40;
  width: 300px; height: 300px; margin-left: -150px;
  border-radius: 50%; background: radial-gradient(circle,
    rgba(16, 23, 40, .94) 0%, rgba(16, 23, 40, .78) 60%, rgba(16, 23, 40, 0) 74%);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  opacity: 0; transform: scale(.88); transform-origin: bottom center;
  pointer-events: none; transition: opacity .24s var(--ease), transform .38s var(--spring); }
.rc-orbwrap.open .rc-orbs { opacity: 1; transform: scale(1); pointer-events: auto; }

.rc-orbs-mid { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 128px; text-align: center; }
.rc-orbs-mid b { display: block; font-family: var(--display); font-size: 15.5px;
  font-weight: 700; color: #fff; line-height: 1.2; }
.rc-orbs-mid span { display: block; margin-top: 3px; font-size: 11px;
  color: rgba(255, 255, 255, .62); }

.rc-orb { position: absolute; left: 50%; top: 50%; width: 68px; margin: -34px 0 0 -34px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: #fff;
  transform: translate(0, 0) scale(.5); opacity: 0;
  transition: transform .5s var(--spring), opacity .3s var(--ease);
  transition-delay: var(--d); }
.rc-orbwrap.open .rc-orb { transform: translate(var(--x), var(--y)) scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rc-orb { transition: none; transform: translate(var(--x), var(--y)); opacity: 1; }
}
/* FLEX, NOT place-content, AND THE SVG IS BLOCK. place-content centres grid
   TRACKS, and with a single child the track fills the box, so the glyph landed
   wherever its own inline box did; an inline svg then drops it further on its
   text baseline. Third time this exact pair has bitten on this project. */
.rc-orb .o { width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition: transform .22s var(--bounce), box-shadow .22s var(--ease); }
.rc-orb .o svg { display: block; }
.rc-orb:hover .o { transform: translateY(-3px) scale(1.07);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.rc-orb:focus-visible .o { outline: 2px solid #fff; outline-offset: 3px; }
.rc-orb .l { font-size: 10.5px; font-weight: 600; white-space: nowrap;
  color: rgba(255, 255, 255, .88); text-shadow: 0 1px 6px rgba(0, 0, 0, .85); }

/* ---- 9. THE REVIEW CONTROLS -------------------------------------------
   Concepts are reviewed by clicking, so every state is one tap away rather
   than something you have to hold the right data to see. */
/* BOTTOM LEFT, not bottom centre. Centred, it sat directly over the chart
   and the week grid, which is the content being reviewed. The tab bar owns
   the bottom centre and the help dock owns the left middle, so the bottom
   left corner is the one place a floating control covers nothing. */
.rc-ctl { position: fixed; left: 20px; bottom: 22px;
  z-index: 60; display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 999px; background: var(--glass); backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur); border: 1px solid var(--hair-2);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .45); max-width: calc(100vw - 24px);
  overflow-x: auto; scrollbar-width: none; }
.rc-ctl::-webkit-scrollbar { display: none; }
.rc-ctl > span { font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3); padding-left: 5px; white-space: nowrap; }
.rc-ctl button { padding: 7px 13px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; white-space: nowrap;
  background: transparent; color: var(--ink-2); border: 1px solid transparent;
  transition: background .2s var(--ease), color .2s var(--ease); }
.rc-ctl button:hover { background: var(--raise-2); color: var(--ink); }
.rc-ctl button[aria-pressed="true"] { background: var(--secondary); color: #fff; }

/* ---- 10. THE CHART ALTERNATIVES ---------------------------------------
   Each face renders into the same card so they can be compared without the
   surroundings changing. The picker is the feature, not the scaffolding:
   whichever face a person chooses is the one their home page keeps. */
.rp-pick { display: flex; align-items: center; gap: 4px; padding: 4px;
  border-radius: 12px; background: var(--raise-2); border: 1px solid var(--hair);
  flex-wrap: wrap; }
.rp-pick button { padding: 7px 13px; border-radius: 9px; font-size: 12.5px;
  font-weight: 600; cursor: pointer; background: transparent; color: var(--ink-2);
  border: 1px solid transparent; transition: background .2s var(--ease), color .2s var(--ease); }
.rp-pick button:hover { background: var(--raise); color: var(--ink); }
.rp-pick button[aria-selected="true"] { background: var(--secondary); color: #fff; }

.rp-face { min-height: 260px; }
.rp-note { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--hair);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.rp-note b { color: var(--ink); font-weight: 600; }

/* the four faces */
/* ---- THE RINGS, FOUR PREMIUM TREATMENTS -------------------------------
   The ring survives in all four; what changes is how much it carries. Halo and
   Gauge keep it a proportion and spend the effort on finish. Orbit and Bloom
   put the fortnight into the ring itself, which is the more interesting
   answer: a ring showing only a proportion is a progress bar bent round, and
   at that point the circle is decoration. */
.rp-rings { display: flex; flex-wrap: wrap; gap: 34px; align-items: center;
  justify-content: center; padding: 18px 0; }
.rp-ring .w { position: relative; }
.rp-ring .c.grad { -webkit-background-clip: text; background-clip: text; color: transparent; }

/* A. HALO: a bloom of the metric's colour behind the arc, a track thinner
   than the fill so the arc reads as raised, and the figure set in gradient. */
.rg-halo .rp-ring .w { width: 116px; height: 116px; }
.rg-halo .rp-ring .c { font-size: 26px; }
.rg-glow { position: absolute; inset: -14%; border-radius: 50%; pointer-events: none;
  opacity: .8; filter: blur(2px); transition: opacity .3s var(--ease); }
.rg-halo .rp-ring:hover .rg-glow { opacity: 1; }
.rg-halo .rp-ring { transition: transform .28s var(--bounce); }
.rg-halo .rp-ring:hover { transform: translateY(-4px) scale(1.02); }

/* B. ORBIT: fourteen ticks around the track, one per day, lit when that day
   carried a reading. Today is the tick at the top. */
.rg-orbit .rp-ring .w { width: 120px; height: 120px; }
.rg-orbit .rp-ring .c { font-size: 25px; }

/* C. GAUGE: a 270 degree dial with a tick scale, read like an instrument. */
.rg-gauge .rp-ring .w { width: 118px; height: 118px; }
.rg-gauge .rp-ring .c { font-size: 25px; transform: translateY(-3px); }

/* D. BLOOM: the ring IS the fortnight, fourteen segments long by the day's
   reading. No separate arc, because it is no longer showing a proportion. */
.rg-bloom .rp-ring .w { width: 126px; height: 126px; }
.rg-bloom .rp-ring .c { font-size: 22px; }
.rg-bloom .rp-ring svg { transition: transform .5s var(--spring); }
.rg-bloom .rp-ring:hover svg { transform: rotate(6deg); }
.rp-ring { text-align: center; width: 118px; }
.rp-ring .w { position: relative; width: 100px; height: 100px; margin: 0 auto 9px; }
.rp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.rp-ring circle { fill: none; stroke-linecap: round; }
.rp-ring .fg { transition: stroke-dashoffset 1.2s var(--spring); }
.rp-ring .c { position: absolute; inset: 0; display: grid; place-content: center;
  font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: -.04em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-ring .n { font-size: 12.5px; font-weight: 600; color: var(--ink); display: block; }
.rp-ring .s { font-size: 11px; color: var(--ink-3); display: block; margin-top: 2px; }

.rp-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px;
  align-items: end; height: 200px; padding: 10px 0; }
.rp-col { display: flex; flex-direction: column; justify-content: flex-end; gap: 3px;
  height: 100%; }
.rp-col .seg { border-radius: 4px; min-height: 3px; transition: height .9s var(--spring); }
.rp-col .lb { text-align: center; font-size: 10.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3); margin-top: 6px; }
.rp-col .lb.now { color: var(--secondary); font-weight: 700; }
.rp-col .zero { height: 3px; border-radius: 3px; background: var(--hair-2); }

.rp-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.rp-cal .h { text-align: center; font-size: 10px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); }
/* NOT aspect-ratio: 1. Seven square cells across a 1120px card are 155px each
   and four weeks of them is an 850px block, which is taller than the hero it
   sits under. A calendar cell only has to hold four dots and a date, so it is
   sized to that instead. */
.rp-cal .day { min-height: 54px; border-radius: 9px; border: 1px solid var(--hair);
  background: var(--raise); display: grid; place-content: center; gap: 5px;
  padding: 6px 4px; transition: transform .2s var(--bounce); }
.rp-cal .day:hover { transform: translateY(-2px); }
.rp-cal .day.today { border-color: var(--secondary); border-width: 2px; }
.rp-cal .dots { display: flex; gap: 2.5px; justify-content: center; }
.rp-cal .dots i { width: 7px; height: 7px; border-radius: 50%; }
/* a day with nothing logged still shows four rings rather than four faint
   blobs, so an empty day is legible as empty rather than as a rendering
   failure */
.rp-cal .dots i.off { background: transparent; border: 1px solid var(--hair-2); }
.rp-cal .dn { font-size: 10px; color: var(--ink-3); text-align: center;
  font-variant-numeric: tabular-nums; }

.rp-river { position: relative; }
.rp-river svg { display: block; width: 100%; height: 210px; }
/* THE KEY IS ALSO THE WAY IN. Every entry is a button that opens the detail
   face for its metric, so the legend stops being decoration. */
/* header layout: the key above, the badge and the face picker below it, both
   flush right, so the top right of the card is the way in and the way to
   change what is shown */
.rp-hd-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  min-width: 0; }
.rp-hd-r2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: flex-end; }
.rp-key { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 900px) {
  .rp-hd-r { align-items: flex-start; }
  .rp-key, .rp-hd-r2 { justify-content: flex-start; }
}
.rp-kb { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  background: color-mix(in srgb, var(--kb) 13%, transparent); color: var(--kb);
  border: 1px solid color-mix(in srgb, var(--kb) 32%, transparent);
  transition: background .2s var(--ease), transform .22s var(--bounce),
              box-shadow .22s var(--ease); }
.rp-kb:hover { background: color-mix(in srgb, var(--kb) 26%, transparent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kb) 22%, transparent); }
.rp-kb:focus-visible { outline: 2px solid var(--kb); outline-offset: 2px; }
.rp-kb svg { display: block; }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .rp-kb { background: var(--raise); border-color: var(--hair); }
}
.rp-key i { width: 9px; height: 9px; border-radius: 3px; }

/* the chart parts that stand for a metric are clickable too */
.rp-ring { cursor: pointer; background: transparent; border: 0; padding: 0;
  color: inherit; transition: transform .22s var(--bounce); }
.rp-ring:hover { transform: translateY(-3px); }
.rp-col .seg { cursor: pointer; }
.rp-cal .dots i { cursor: pointer; }

/* ---- THE ROW WIDENS FOR THE TAKEOVER ----------------------------------
   Home puts Current status and Your progress side by side at .62fr / 1.38fr.
   Opening a metric needs the whole row, so the row animates its own columns
   to 0fr / 1fr and the status panel folds away beside it.

   grid-template-columns IS animatable, which is what makes this one property
   rather than a position:absolute overlay that would collapse the row height
   and drop everything below it up the page. min-width:0 on the status panel is
   load-bearing: a grid item will not shrink below its min-content width
   without it, so the fold would stop at whatever its longest word is. */
.row-1 { transition: grid-template-columns .55s var(--spring); }
.row-1.rc-wide { grid-template-columns: 0fr 1fr; gap: 0; }
.row-1 > .status { min-width: 0; overflow: hidden;
  transition: opacity .3s var(--ease), transform .5s var(--spring),
              padding .55s var(--spring), border-width .55s var(--spring); }
/* min-width:0 lets the TRACK go to zero, but the panel's own padding and
   border do not shrink with it, so the fold stopped 54px short of full width.
   Measured: card 1122 in a row of 1176, which is exactly 26px of padding each
   side plus the two 1px borders.

   max-height:0 IS THE ONE THAT MATTERED MOST. A panel folded to zero WIDTH
   still lays its text out, one word per line, and the result was 800px tall.
   .row-1 is align-items:stretch, so that 800px became the row's height and
   then the card's, which is why the expanded card kept 121 to 152px of dead
   space no matter what min-height was measured for it. */
.row-1.rc-wide > .status { opacity: 0; transform: translateX(-14px); pointer-events: none;
  padding-left: 0; padding-right: 0; border-left-width: 0; border-right-width: 0;
  max-height: 0; }
@media (max-width: 860px) {
  /* one column already, so the status panel simply steps aside */
  .row-1.rc-wide > .status { display: none; }
  /* AND THE ROW GOES BACK TO ONE TRACK. Hiding the neighbour was not enough:
     `0fr 1fr` above is a class selector, so it beats the plain `.row-1` rule
     in this file's one-column block no matter which comes last, and the row
     kept two tracks with nothing to put in the second. The only remaining
     card auto-placed into the `0fr` one and sized to its own min-content:
     46px wide and 3137px tall, a sliver with a blank page under it, on every
     phone and on iPad portrait. Measured at 390, 768 and 1024. */
  .row-1.rc-wide { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 7b. BOTH CARDS FILL THEIR OWN HEIGHT ----------------------------
   .row-1 is align-items:stretch, so both cards are the height of the taller.
   Neither face was flexing into that, so the content sat at the top and the
   rest was dead: the status overview measured 332px inside a 552px card, 220px
   of it empty. Both faces are flex columns that grow, and the parts that
   should take up the slack say so.

   THE PROGRESS HEADER WAS 153px TALL. .sh centres its two sides, so the key
   and the picker were vertically centred against a two line headline and the
   key started 60px below the top of the card. Top aligned, with a tighter gap
   between the key and the picker, it starts where the eyebrow does. */
.rp-card { display: flex; flex-direction: column; }
.rp-card > .an-face.overview { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* .sh COMPUTES TO display:block ON THIS CARD, so align-items did nothing and
   the two halves were stacked: the eyebrow and headline, then the key and
   picker beneath them, right aligned, which read as a right hand column only
   because the headline is short. Declared as a flex row here, top aligned, so
   the key genuinely sits in the top right corner level with the eyebrow. */
/* TWO ROWS, TWO COLUMNS. The eyebrow and the key share the first row and the
   title and the picker share the second, so the controls sit in the top right
   corner level with the text rather than stacked underneath it. .sh computes
   to display:block on this card, which is why flex and align-items did nothing
   before and the two halves stacked. */
.rp-card .sh.rp-hd, .rp-hd { display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 16px; row-gap: 6px; margin-bottom: 14px !important; }
.rp-hd-eye { grid-column: 1; grid-row: 1; display: block; }
.rp-hd .rp-key { grid-column: 2; grid-row: 1; }
.rp-hd-t { grid-column: 1; grid-row: 2; display: block; }
.rp-hd .rp-pick, .rp-hd .rp-hd-r2 { grid-column: 2; grid-row: 2; }
@media (max-width: 760px) {
  .rp-card .sh.rp-hd, .rp-hd { grid-template-columns: minmax(0, 1fr); }
  .rp-hd-eye, .rp-hd .rp-key, .rp-hd-t, .rp-hd .rp-pick, .rp-hd .rp-hd-r2 {
    grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
/* AND THE SAME THING ON THE CARD'S OWN WIDTH, WHICH IS THE ONE THAT MATTERS.

   The rule above asks the WINDOW how wide it is. That was true enough while
   this card was full width below 1040px, and stopped being true the moment
   home started keeping Current status beside it down to 860px: at an 861px
   window the card is 465px wide, comfortably narrower than the 760px the
   media query is testing, so the picker kept its own column and squeezed
   "The last two weeks" into four lines. A card in a column has to be asked
   about itself.

   The media query above is deliberately left in place rather than replaced.
   It is the answer for a browser with no container query support, where the
   whole of this block is dropped: that browser still gets the stacked header
   on a phone, which is the case that matters most.

   560px is the card width at which the picker and the headline stop fitting
   side by side. It is a measurement of this card, not a viewport breakpoint,
   so it does not have to be one of the app's two. */
.rp-card { container-type: inline-size; container-name: rp; }
@container rp (max-width: 560px) {
  .rp-card .sh.rp-hd, .rp-hd { grid-template-columns: minmax(0, 1fr); }
  .rp-hd-eye, .rp-hd .rp-key, .rp-hd-t, .rp-hd .rp-pick, .rp-hd .rp-hd-r2 {
    grid-column: 1; grid-row: auto; justify-content: flex-start; }
}
.rp-hd-r { gap: 8px; }
.rp-hd-r2 { gap: 10px; }

/* the face takes the slack and centres what is in it, so the rings sit in the
   middle of the space rather than at the top of it */
.rp-face { flex: 1; min-height: 0; display: flex; flex-direction: column;
  justify-content: center; }
.rp-note { flex-shrink: 0; }

/* ---- THE PROGRESS CARD'S TAKEOVER: PLATE ------------------------------
   Concept D, signed off 2026-08-14, promoted from the study to the real card.
   Data first and full bleed: the fourteen days are the largest thing on the
   screen, the figure is set in the metric's own gradient, and the words sit
   beneath in two plain columns with no containers at all.

   These rules were LIFTED from tk.css rather than rewritten, and the concept
   gallery still reads them from here, so the shipped card and the concept it
   was chosen from cannot drift apart.

   Built on .an-card / .an-face from the shared sheet, which is the flip this
   card already performs on home, so the motion and the back button match
   something a person has already used. */
/* THE EXPANDED CARD IS SIZED TO ITS OWN CONTENT, not to a number.

   A fixed min-height sized to the tallest metric left every shorter one
   carrying dead space under its buttons. The detail face is
   position:absolute, so the card cannot size to it on its own, which is why
   the number was there in the first place. openDetail() measures the rendered
   face and sets min-height from it, and .an-card already carries
   `transition: min-height` in the shared sheet, so the card grows into the
   right height rather than jumping.

   It is floored at the closed card's own height so opening a short metric
   never shrinks the card below what it was a moment ago. */
.rp-card { min-height: 470px; }
.rp-card .an-face.detail { inset: 26px; }
/* AND THE OVERVIEW LEAVES THE FLOW WHEN FLIPPED. The shared sheet only makes
   the DETAIL face absolute, so the overview stayed in flow and kept setting
   the card's height: the measured min-height was being applied and then
   ignored, because the rings and their note underneath were taller than it.
   That was the whole 121 to 152px of dead space, and it is why it was stable
   per metric rather than accumulating. */
.rp-card.flipped .an-face.overview { position: absolute; inset: 26px; }

/* ---- shared: the tinted surface every concept sits on ------------------
   --tone is set inline per metric. The plate is a single ramp from the hue
   into the card, so a bar drawn in the same hue has nothing to meet. */
.tk { position: relative; --plate: linear-gradient(155deg,
        color-mix(in srgb, var(--tone) 22%, transparent),
        color-mix(in srgb, var(--tone) 6%, transparent) 46%,
        transparent 78%); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  /* older engines get the flat fallback rather than nothing */
  .tk { --plate: linear-gradient(155deg, var(--tone-a), transparent 74%); }
}

.tk-back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px;
  border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600;
  background: var(--raise-2); color: var(--ink); border: 1px solid var(--hair);
  transition: background .2s var(--ease); }
.tk-back:hover { background: var(--hair); }

.tk-kick { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tone); }
.tk-h { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
  color: var(--ink); line-height: 1.12; }

/* the day strip, shared shape, tinted so a bar grows OUT of the plate */
.tk-days { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 4px; }
/* DISPLAY BLOCK. .tk-day is a <span>, and height does nothing on an inline
   box, so the whole day strip rendered as a row of day letters with no bars
   above them. Same class as every other "the rule is right, the box model is
   not" bug on this project. */
.tk-day { display: block; position: relative; height: 78px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 7%, transparent),
    color-mix(in srgb, var(--tone) 2%, transparent)); }
.tk-day i { position: absolute; left: 0; right: 0; bottom: 0; display: block;
  border-radius: 8px; transition: height .7s var(--spring);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tone) 82%, transparent),
    color-mix(in srgb, var(--tone) 34%, transparent)); }
.tk-day.off i { height: 2px !important;
  background: color-mix(in srgb, var(--tone) 22%, transparent); }
.tk-day.now { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tone) 62%, transparent); }
.tk-days > div { min-width: 0; }
.tk-dl { display: block; text-align: center; margin-top: 6px; font-size: 10px;
  font-weight: 600; color: var(--ink-3); }
.tk-ax { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* =======================================================================
   D. PLATE. Data first. The fortnight IS the screen, full bleed and
   readable, and the words sit under it in a single column with no
   containers at all. The most premium and the least chatty.
   ======================================================================= */
.tk-d { border-radius: var(--r-lg); overflow: hidden; background: var(--plate); }
.tk-d-top { padding: 24px 26px 20px; }
.tk-d-hd { display: flex; align-items: flex-start; gap: 16px; }
.tk-d-h { font-family: var(--display); font-size: clamp(24px, 3vw, 36px); font-weight: 700;
  letter-spacing: -.045em; color: var(--ink); line-height: 1.08; margin: 8px 0 0; }
.tk-d-num { margin-left: auto; text-align: right; flex-shrink: 0; }
.tk-d-num b { display: block; font-family: var(--display); font-size: 52px; font-weight: 700;
  letter-spacing: -.055em; line-height: .95; font-variant-numeric: tabular-nums;
  background: linear-gradient(160deg, var(--tone), color-mix(in srgb, var(--tone) 45%, transparent));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.tk-d-num span { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.tk-d-stage { padding: 4px 26px 0; }
.tk-d .tk-day { height: 108px; }
/* align-items:start so the shorter column does not stretch to the taller one.
   The container ends at the bottom of whichever column is longer, and nothing
   sits below the buttons in the other. */
.tk-d-txt { padding: 22px 26px 24px; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 30px; align-items: start; }
@media (max-width: 900px) { .tk-d-txt { grid-template-columns: minmax(0,1fr); gap: 20px; } }
.tk-d-txt h4 { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 12px; }
.tk-d-txt p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.tk-d-txt p:last-child { margin-bottom: 0; }
.tk-d-txt p b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }

/* Card height per concept, measured with the tallest metric open rather than
   set to one number that leaves three of them carrying dead space. */
.tk-card.flipped { min-height: 700px; }
.tk-card.c-quiet.flipped { min-height: 1120px; }
.tk-card.c-rail.flipped  { min-height: 700px; }
.tk-card.c-story.flipped { min-height: 590px; }
.tk-card.c-plate.flipped { min-height: 700px; }


/* THE FOOT ACTIONS. These lived only in tk.css when the Plate rules were
   lifted, and home does not link tk.css, so on the shipped card the two
   buttons had no container styling at all and sat flush against each other.
   Measured gap: 0. */
.tk-acts { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; }
.tk-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hair);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }
.tk-note b { color: var(--ink); font-weight: 600; }

/* ---- the live / example badge ----------------------------------------
   A page reading a real record must say so, and a page that cannot must say
   THAT rather than quietly showing a demo month. */
.rc-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px;
  border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--hair-2);
  background: var(--raise); color: var(--ink-2); }
.rc-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.rc-badge.demo i { background: var(--gold); }
.rc-signout { padding: 30px 22px; text-align: center; }
.rc-signout h3 { font-family: var(--display); font-size: 20px; font-weight: 700;
  color: var(--ink); margin: 0 0 8px; }
.rc-signout p { font-size: 13px; line-height: 1.6; color: var(--ink-2); margin: 0 auto 16px;
  max-width: 520px; }

/* ---- 11. the gallery --------------------------------------------------- */
.rc-gal { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; }
.rc-card { display: block; padding: 20px; border-radius: var(--r-lg);
  background: var(--raise); border: 1px solid var(--hair); color: inherit;
  text-decoration: none; transition: background .22s var(--ease), transform .26s var(--bounce); }
.rc-card:hover { background: var(--raise-2); transform: translateY(-3px); text-decoration: none; }
.rc-card .k { font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--secondary); display: block; }
.rc-card h3 { font-family: var(--display); font-size: 19px; font-weight: 700;
  letter-spacing: -.02em; margin: 7px 0 6px; color: var(--ink); }
.rc-card p { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); margin: 0; }
.rc-card .t { display: block; margin-top: 9px; font-size: 11.5px; color: var(--ink-3);
  line-height: 1.5; }