/* Areté — room-today (2026-09-11). Governed by DESIGN-CONSTITUTION.md.
   Refinement only: the plate is the Intercept frame at rest (one glass, §4); under the cube the
   number, one line of words, one short sentence; the attention slot is words under a hairline.
   Loads after arete-system.css; same specificity, later wins. */

/* ── the plate: the Intercept frame's recipe (.int-card :445-450), at rest ── */
#view-brief .td-state{
  position:relative; isolation:isolate; border-radius:24px; padding:22px 24px 26px;
  background:linear-gradient(150deg,rgba(0,191,255,.08),rgba(10,122,205,.06) 55%,rgba(255,255,255,.012));
  border:1px solid rgba(160,225,255,.16);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px -40px rgba(18,64,184,.95);
}
#view-brief .td-state::before{
  content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; height:auto; left:-1px; right:-1px; top:-1px;
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.22),transparent 70%),radial-gradient(50% 50% at 90% 100%,rgba(31,126,219,.14),transparent 70%);
}
html[data-theme="light"] #view-brief .td-state{ background:rgba(255,255,255,.55); }
html[data-theme="light"] #view-brief .td-state::before{ display:none; }

/* ── under the cube: number · "Integrity", then one line of words, then one short sentence ── */
#view-brief .td-state .ui-value{ order:2; margin:8px auto 0; }
#view-brief .td-tier{ order:3; margin:6px 0 0; font:400 14px/1.4 var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink2)); text-align:center; animation:td-rise .5s var(--ease-inst) both; animation-delay:.09s; }

/* ── the attention slot: words under a hairline, no box ── */
#view-brief .td-attn-wrap .ui-interrupt{ background:transparent; border:0; border-top:1px solid var(--hair); border-left:0; border-radius:0; box-shadow:none; padding:18px 0 4px; gap:6px; }
#view-brief .td-attn-wrap .ui-interrupt .ui-label{ font:400 13px/1.4 var(--f-body); letter-spacing:0; text-transform:none; color:rgb(var(--ink3)); }
#view-brief .td-attn-wrap .ui-interrupt__basis{ font:500 15px/1.45 var(--f-body); color:rgb(var(--ink)); max-width:46ch; }
#view-brief .td-attn-wrap .ui-interrupt__consequence{ font:400 15px/1.5 var(--f-body); color:rgb(var(--ink2)); max-width:46ch; }
#view-brief .td-attn-wrap .ui-interrupt__actions .ui-btn{ background:transparent; border:0; box-shadow:none; padding:0; min-height:44px; font:500 14px var(--f-body); color:rgb(var(--ink2)); }
#view-brief .td-attn-wrap .ui-interrupt__actions .ui-btn:hover{ color:rgb(var(--ink)); }

/* ── actions: one 52px pill, one quiet exit ── */
#view-brief .td-actions .ui-btn--primary{ min-height:52px; min-width:200px; }
#view-brief .td-actions .ui-btn--quiet{ background:transparent; border:0; box-shadow:none; padding:0 4px; font:500 14px var(--f-body); color:rgb(var(--ink2)); }
#view-brief .td-actions .ui-btn--quiet:hover{ color:rgb(var(--ink)); }

/* ── phone: plate first, the cube smaller, the pill full width ── */
@media (max-width:767px){
  #view-brief .td-state{ padding:18px 18px 22px; -webkit-backdrop-filter:none; backdrop-filter:none; }
  #view-brief .td-cube{ --ics:88px; width:250px; height:210px; }
  #view-brief .td-actions{ width:100%; }
  #view-brief .td-actions .ui-btn--primary{ width:100%; }
}

/* ═══ TODAY ON THE INTERCEPT GROUND (founder 2026-09-16). The panel already
   wore the Intercept glass; the room now stands on the Intercept ground too,
   the same radial every other room carries, and the panel's second light is
   the Intercept's (122,92,255), not a third blue. ═══ */
body:has(#view-brief:not(.hidden)) #content-wrap{
  background:radial-gradient(70% 55% at 50% 0%,rgba(14,58,107,.92) 0%,rgba(0,31,63,.94) 40%,rgba(3,16,31,.96) 100%); }
html[data-theme="light"] body:has(#view-brief:not(.hidden)) #content-wrap{
  background:radial-gradient(70% 55% at 50% 0%,rgba(226,236,246,.94),rgba(243,246,250,.96) 60%); }
#view-brief .td-state::before{
  background:radial-gradient(60% 50% at 20% 0%,rgba(47,123,255,.22),transparent 70%),radial-gradient(50% 50% at 90% 100%,rgba(122,92,255,.18),transparent 70%); }

/* ═══ TODAY, HER 09-17 COMPOSITION ("build it"): the plate left, the words centred on its height,
   the four senses as ONE ledger line across the room under a single hairline. No line under the
   date. Day one = the fitting is all that is on record: the plate says Read · your signature,
   the words say what it learned and what it cannot see yet, the ledger says how to give it.
   Mocks: mock-today-day-one.html / mock-today-live.html (public, untracked). ═══ */
#view-brief .td-head{ border-bottom:0 !important; padding-bottom:0 !important; margin-bottom:0 !important; }
@media (min-width:1024px){
  #view-brief .td{ grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr) !important; grid-template-areas:"head head" "state meaning" "senses senses" !important; grid-template-rows:auto auto auto !important; column-gap:96px; row-gap:0; }
  #view-brief .td-head{ margin-bottom:28px !important; }
  #view-brief .td-state{ align-self:start; }
  #view-brief .td-meaning{ align-self:center; margin-top:0 !important; padding-bottom:8px; }
  #view-brief .td-meaning .td-actions .ui-btn--primary{ padding:0 28px !important; min-height:50px; min-width:200px; font-size:15px; }
  #view-brief .td-actions{ margin-top:26px; }
}
#view-brief .td-sub{ color:rgb(var(--ink2)); font-size:16px; line-height:1.6; max-width:52ch; margin-top:14px; }
/* the attention slot sits between the sentence and the action, as one label + one line */
#view-brief .td-meaning .td-attn-wrap{ width:100%; }
#view-brief .td-meaning .td-attn-wrap .ui-interrupt{ border-top:0; padding:22px 0 0; }
/* THE DAY-TEN MOMENT · what the counter was counting toward. Behind a hairline,
   on the ground, no frame: it is the room speaking once, not a card arriving. */
#view-brief .td-normal{ margin:26px 0 0; padding:20px 0 0; border-top:1px solid var(--hair2,rgba(127,211,255,.22)); }
#view-brief .td-next{ margin:22px 0 0; font:400 15px/1.55 var(--f-body); color:rgb(var(--ink)); max-width:50ch; }
#view-brief .td-next span{ display:block; font-size:13px; color:rgb(var(--ink3)); margin-bottom:2px; }
/* day one: the plate says a word, not a number */
#view-brief .td-state .td-num--word{ font-size:clamp(48px,4.4vw,64px) !important; color:rgb(var(--ink)) !important; }
/* the senses, a Record row: one hairline above, four columns of words, no box */
#view-brief .td-senses{ grid-area:senses; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; margin-top:52px; padding-top:0; border-top:0; text-align:left; }
#view-brief .td-sense{ display:flex; flex-direction:column; gap:6px; min-width:0; }
#view-brief .td-sense__name{ font:400 13px/1.3 var(--f-body); color:rgb(var(--ink3)); }
#view-brief .td-sense__val{ font:400 24px/1.15 var(--f-body); letter-spacing:-.02em; color:rgb(var(--ink3)); }
#view-brief .td-sense[data-on] .td-sense__val{ color:rgb(var(--ink)); }
#view-brief .td-sense__sub{ font:400 13px/1.45 var(--f-body); color:rgb(var(--ink3)); margin-top:2px; }
#view-brief .td-sense__act{ align-self:flex-start; background:transparent; border:0; padding:0; margin-top:2px; min-height:32px; font:500 14px var(--f-body); color:var(--ice); cursor:pointer; }
#view-brief .td-sense__act:hover{ color:#dff4ff; }
#view-brief .td-sense__act:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px; }
@media (max-width:1023px){
  #view-brief .td{ grid-template-areas:"state" "meaning" "senses" !important; }
  #view-brief .td-senses{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 24px; margin-top:36px; }
  #view-brief .td-meaning{ align-items:center; text-align:center; }
  #view-brief .td-next{ text-align:left; }
}

/* ═══ HER 09-17 PICKS, all three ("all of them good"): the cube stands on the field, no glass;
   the senses as one sentence; the arrival, each group rising in turn, the number counting up. ═══ */
#view-brief .td-state{ background:transparent !important; border:0 !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; padding:0 !important; }
#view-brief .td-state::before{ display:none !important; }
@media (min-width:1024px){ #view-brief .td{ column-gap:72px; } }
/* the sentence */
#view-brief .td-senses{ display:block; margin:52px 0 0 !important; padding:0; border:0; font:400 17px/1.7 var(--f-body); color:rgb(var(--ink2)); max-width:none; letter-spacing:-.005em; text-align:left; }
#view-brief .td-senses b{ font-weight:500; color:rgb(var(--ink)); }
#view-brief .td-senses i{ font-style:normal; color:rgb(var(--ink3)); margin:0 10px; }
#view-brief .td-senses .td-sense{ display:inline; }
#view-brief .td-sense__act{ display:inline; background:transparent; border:0; padding:0; margin:0; min-height:0; font:inherit; font-weight:500; color:var(--ice); cursor:pointer; }
#view-brief .td-sense__act:hover{ color:#dff4ff; }
#view-brief .td-sense__act:focus-visible{ outline:2px solid var(--ice); outline-offset:3px; border-radius:4px; }
@media (max-width:1023px){ #view-brief .td-senses{ font-size:15px; margin-top:36px !important; } #view-brief .td-senses i{ margin:0 6px; } }
/* the arrival */
@keyframes td-in{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
#view-brief .td-state{ animation:td-in .9s cubic-bezier(.2,.7,.2,1) both !important; }
#view-brief .td-state .ui-value, #view-brief .td-tier{ animation:none !important; }
#view-brief .td-meaning{ animation:none !important; }
#view-brief .td-verdict{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .25s both; }
#view-brief .td-sub{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .4s both; }
#view-brief .td-next, #view-brief .td-meaning .td-attn-wrap{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .55s both; }
#view-brief .td-actions{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .7s both; }
#view-brief .td-senses{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .95s both; }
@media (prefers-reduced-motion:reduce){ #view-brief .td-state, #view-brief .td-verdict, #view-brief .td-sub, #view-brief .td-next, #view-brief .td-meaning .td-attn-wrap, #view-brief .td-actions, #view-brief .td-senses{ animation:none !important; } }

/* ═══ HER 09-17 RULING: on Today the anchor stands on the RIGHT, the words on the left
   (as the website's Today act, panel right, 09-12). The senses sentence keeps the room's width. ═══ */
@media (min-width:1024px){
  #view-brief .td{ grid-template-columns:minmax(0,7.5fr) minmax(0,4.5fr) !important; grid-template-areas:"head head" "meaning state" "senses senses" !important; }
  #view-brief .td-state{ justify-self:center; }
}

/* ═══ TODAY, THE ACT (her 09-17 build, layout A): one centred column, read like a page.
   The assembling cube, the number, the verdict with one Cormorant turn, the sentence, the next
   heavy moment, the action, then the senses. No other room is a centred column. ═══ */
@media (min-width:1024px){
  #view-brief .td{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"head" "state" "meaning" "senses" !important; justify-items:center; text-align:center; row-gap:0; }
  #view-brief .td-head{ justify-self:start; margin-bottom:8px !important; }
  #view-brief .td-state{ align-self:start; justify-self:center; }
  #view-brief .td-meaning{ align-self:start; align-items:center !important; text-align:center !important; margin-top:52px !important; display:flex !important; }
  #view-brief .td-meaning, #view-brief .td-meaning *{ text-align:center !important; }
  #view-brief .td-verdict{ max-width:22ch; text-wrap:balance; }
  #view-brief .td-sub{ max-width:52ch; }
  #view-brief .td-next, #view-brief .td-meaning .td-attn-wrap{ max-width:50ch; }
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt{ align-items:center; }
  #view-brief .td-actions{ justify-content:center !important; margin-top:34px; }
  #view-brief .td-senses{ text-align:center; margin-top:88px !important; }
}
/* the object: larger, the rig turns once every 80 s, the hero's own turn stood down so the seated parts stay locked to it */
#view-brief .td-cube{ --ics:118px; width:560px; height:400px; perspective:1100px; perspective-origin:50% 40%; }
#view-brief .td-cube .ic-origin{ top:52%; }
#view-brief .td-cube .ic-rig{ animation:td-crawl 80s linear infinite; }
@keyframes td-crawl{ from{ transform:rotateX(-22deg) rotateY(0); } to{ transform:rotateX(-22deg) rotateY(360deg); } }
#view-brief .td-cube .ic-hero{ animation:none !important; transition:none; }
#view-brief .td-cube .td-adrift{ opacity:.42; }
#view-brief .td-cube[data-empty] .ic-face{ opacity:.7; }
@media (prefers-reduced-motion:reduce){ #view-brief .td-cube .ic-rig{ animation:none; transform:rotateX(-22deg) rotateY(20deg); } }
/* the number: Manrope 300, −.05, tabular; the one loud thing */
#view-brief .td-state .ui-display{ font:300 clamp(88px,8vw,124px)/1 var(--f-body) !important; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
#view-brief .td-state .td-num--word{ font-size:clamp(56px,5vw,72px) !important; }
#view-brief .td-state .ui-value{ margin-top:-10px; gap:14px; }
#view-brief .td-tier{ color:rgb(var(--ink3)); font-size:13.5px; }
/* the verdict's turn */
#view-brief .td-verdict em{ font:italic 500 1.12em var(--f-em); color:var(--ice-hi,#dff4ff); }
@media (max-width:1023px){ #view-brief .td-cube{ --ics:88px; width:300px; height:250px; } }

/* ═══ FIT THE SCREEN (her 09-17 "too crowded"): Today is one screen, no scroll on a laptop.
   The object smaller, the number smaller, the next heavy moment ONE line (its quoted preview
   and the watch link fold away), the rhythm closed up, the senses at the foot. ═══ */
@media (min-width:1024px){
  #view-brief:not(.hidden){ min-height:calc(100vh - 64px); display:flex !important; flex-direction:column; }
  #view-brief .brief-doc{ flex:1; display:flex; flex-direction:column; }
  #view-brief .td{ flex:1; grid-template-rows:auto auto auto 1fr !important; align-content:start; }
  #view-brief .td-head{ margin-bottom:0 !important; }
  #view-brief .td-cube{ --ics:96px; width:440px; height:300px; }
  #view-brief .td-state .ui-value{ margin-top:-16px; }
  #view-brief .td-state .ui-display{ font-size:clamp(72px,6vw,96px) !important; }
  #view-brief .td-meaning{ margin-top:28px !important; }
  #view-brief .td-verdict{ font-size:clamp(24px,2vw,30px) !important; }
  #view-brief .td-sub{ margin-top:8px; font-size:15px; }
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt{ padding:18px 0 0; gap:2px; }
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt__consequence,
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt__actions{ display:none; }   /* the quoted preview and the watch link fold away; the Sentry speaks when it fires */
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt__basis{ font-weight:400; color:rgb(var(--ink2)); }
  #view-brief .td-actions{ margin-top:24px; }
  #view-brief .td-senses{ align-self:end; margin-top:32px !important; padding-bottom:8px; font-size:15px; }
}
@media (min-width:1024px) and (max-height:820px){
  #view-brief .td-cube{ --ics:84px; width:400px; height:250px; }
  #view-brief .td-state .ui-display{ font-size:80px !important; }
  #view-brief .td-meaning{ margin-top:18px !important; }
  #view-brief .td-verdict{ font-size:26px !important; }
  #view-brief .td-meaning .td-attn-wrap .ui-interrupt{ padding-top:12px; }
  #view-brief .td-actions{ margin-top:18px; }
  #view-brief .td-senses{ margin-top:20px !important; font-size:14px; }
  #view-brief .td-next{ margin-top:14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TODAY — THE PREMIUM PASS (2026-09-20, her "more premium feel, better layout").
   Five faults were fixed, and nothing above is deleted; this block is the last word.

   1. THE AXIS WAS BROKEN. The date sat far left while the room was centred, and
      the number+label pair was centred as a pair, so the numeral itself never
      stood on the axis. Now one line runs down the middle and the numeral is on it.
   2. THERE WERE TWO HEROES. The day-ten "Go on" wore the same loud pill as the
      room's real action. One pill remains; the other is a word.
   3. THE SPACING WAS UNIFORM. Every gap was about 48px, so nothing was ranked. A
      real scale is declared below, and silence is spent where the rank changes.
   4. THE PILL WAS A WEB BUTTON. Full-saturation blue on a dark instrument reads
      cheap. It is now glass with an ice edge and a light along its top.
   5. IT SCROLLED. Today is one screen; the day-ten moment is an inset, not a page.
   ═══════════════════════════════════════════════════════════════════════════ */

#view-brief .td{
  --td-1:8px;    /* inside a group: label to value */
  --td-2:18px;   /* between lines of one thought */
  --td-3:34px;   /* between thoughts */
  --td-4:56px;   /* between ranks */
  --td-5:84px;   /* before the foot of the room */
}

/* ── 1. THE AXIS ─────────────────────────────────────────────────────────── */
/* the date stops being a stray in the corner and becomes the room's quiet mark */
@media (min-width:1024px){
  #view-brief .td-head{ justify-self:center !important; margin:0 0 var(--td-3) !important; }
}
/* design pass 2026-09-23: the constitution's stamp (§2, Manrope 400 13px ink3,
   sentence case). It was 11px, tracked uppercase at .72 opacity: three things §2
   and §3 forbid (uppercase tracking, text under 12px, alpha-diluted text). */
#view-brief .td-head .ui-label{
  font:400 13px/1.4 var(--f-body); letter-spacing:0; text-transform:none;
  color:rgb(var(--ink3)); opacity:1; }

/* the numeral on the axis: Integrity drops beneath it as a caption, so the
   figure itself is centred, not the figure-plus-word */
#view-brief .td-state .ui-value{
  display:flex !important; flex-direction:column; align-items:center; gap:var(--td-1);
  margin-top:-4px !important; }
/* design pass 2026-09-23: the label beside a number (§2, .int-numlab: Manrope 400
   14px ink3), where it was 11px tracked uppercase at .8 opacity */
#view-brief .td-state .ui-of{
  font:400 14px/1.2 var(--f-body) !important; letter-spacing:0; text-transform:none;
  color:rgb(var(--ink3)); opacity:1; }

/* the number: lighter, tighter, lit from within — the one loud thing in the room */
#view-brief .td-state .ui-display{
  font-weight:200 !important; letter-spacing:-.055em;
  font-variant-numeric:tabular-nums lining-nums;
  background:linear-gradient(180deg,#ffffff 0%,#cfe9ff 58%,#8fc6ef 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 8px 30px rgba(0,191,255,.18)); }
html[data-theme="light"] #view-brief .td-state .ui-display{
  background:linear-gradient(180deg,#0f3a63,#116289); filter:none; }

/* the provenance line: an instrument's footnote, not a heading */
#view-brief .td-tier{
  margin-top:var(--td-2) !important; font:400 12px/1.4 var(--f-body) !important;
  letter-spacing:.06em; color:rgb(var(--ink3)); opacity:.75; }

/* ── 2. ONE HERO ─────────────────────────────────────────────────────────── */
/* the day-ten acknowledgement stops competing with the room's action */
#view-brief .td-normal .ui-btn--primary{
  min-width:0 !important; min-height:40px !important; padding:0 !important;
  background:transparent !important; border:0 !important; box-shadow:none !important;
  font:500 14px var(--f-body) !important; color:var(--ice) !important;
  border-bottom:1px solid rgba(0,191,255,.32) !important; border-radius:0 !important;
  transition:color .25s, border-color .25s !important; }
#view-brief .td-normal .ui-btn--primary:hover{
  transform:none !important; color:#dff4ff !important; border-color:rgba(190,235,255,.7) !important; }

/* ── 3. THE RHYTHM ───────────────────────────────────────────────────────── */
@media (min-width:1024px){
  #view-brief .td-meaning{ margin-top:var(--td-4) !important; }
  #view-brief .td-actions{ margin-top:var(--td-3) !important; }
  #view-brief .td-senses{ margin-top:var(--td-5) !important; }
}
#view-brief .td-verdict{
  font-size:clamp(26px,2.3vw,34px) !important; line-height:1.12 !important;
  letter-spacing:-.025em; max-width:20ch !important; text-wrap:balance; }
#view-brief .td-sub{
  margin-top:var(--td-2) !important; font-size:16px !important; line-height:1.65 !important;
  max-width:46ch !important; color:rgb(var(--ink2)); }

/* ── 4. THE PILL ─────────────────────────────────────────────────────────── */
/* glass with an ice edge, lit along the top; the instrument, not a web button */
#view-brief .td-actions .ui-btn--primary{
  font-weight:500 !important; font-size:15px !important; letter-spacing:.01em;
  padding:0 34px !important; min-height:52px !important;
  border:1px solid rgba(160,225,255,.34) !important;
  background:linear-gradient(170deg,rgba(0,191,255,.20),rgba(11,90,160,.26) 60%,rgba(255,255,255,.03)) !important;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),
             inset 0 -18px 30px -24px rgba(0,191,255,.5),
             0 22px 50px -26px rgba(0,120,220,.85) !important;
  transition:transform .35s var(--ease-inst), box-shadow .35s, border-color .35s, background .35s !important; }
#view-brief .td-actions .ui-btn--primary:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(205,240,255,.62) !important;
  background:linear-gradient(170deg,rgba(0,191,255,.30),rgba(11,90,160,.34) 60%,rgba(255,255,255,.05)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),
             inset 0 -18px 30px -24px rgba(0,191,255,.7),
             0 26px 60px -24px rgba(0,140,255,.95) !important; }
html[data-theme="light"] #view-brief .td-actions .ui-btn--primary{
  color:#fff !important;
  background:linear-gradient(170deg,#0f6ea8,#0a4e7a) !important;
  border-color:rgba(10,78,122,.45) !important; }
/* the quiet exit sits beside it as a word, with air between the targets */
#view-brief .td-actions{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; }
#view-brief .td-actions .ui-btn--quiet{
  min-height:44px; font-size:14px !important; color:rgb(var(--ink3)) !important;
  transition:color .25s !important; }
#view-brief .td-actions .ui-btn--quiet:hover{ color:rgb(var(--ink)) !important; }

/* ── 5. THE DAY-TEN MOMENT, AN INSET ─────────────────────────────────────── */
/* it arrives inside the room's width, behind one hairline, and does not become a page */
#view-brief .td-normal{
  margin:var(--td-3) auto 0 !important; padding:var(--td-3) 0 0 !important;
  max-width:50ch; text-align:center;
  border-top:1px solid rgba(160,225,255,.14) !important; }
/* design pass 2026-09-23: the stamp (§2), where it was 11px tracked uppercase at .72 */
#view-brief .td-normal .ui-label{
  font:400 13px/1.4 var(--f-body); letter-spacing:0; text-transform:none;
  color:rgb(var(--ink3)); opacity:1; }
#view-brief .td-normal .ui-title{
  font-size:24px !important; line-height:1.2 !important; letter-spacing:-.02em;
  margin:var(--td-1) 0 var(--td-2) !important; }
#view-brief .td-normal .ui-body{
  font-size:15px !important; line-height:1.6 !important; color:rgb(var(--ink2));
  max-width:46ch !important; margin-left:auto !important; margin-right:auto !important; }
#view-brief .td-normal .td-actions{ margin-top:var(--td-2) !important; }

/* ── 6. THE FOOT: what it reads ──────────────────────────────────────────── */
#view-brief .td-senses{
  padding-top:22px !important; max-width:none;
  border-top:1px solid rgba(160,225,255,.10) !important;
  font-size:14px !important; line-height:1.7 !important;
  letter-spacing:.005em; color:rgb(var(--ink3)) !important; }
#view-brief .td-senses b{ font-weight:500; color:rgb(var(--ink2)) !important; }
#view-brief .td-senses i{ opacity:.45; margin:0 14px !important; }
#view-brief .td-sense__act{
  color:var(--ice) !important; text-decoration:none;
  border-bottom:1px solid rgba(0,191,255,.28); padding-bottom:1px;
  transition:color .25s, border-color .25s; }
#view-brief .td-sense__act:hover{ color:#dff4ff !important; border-color:rgba(190,235,255,.7); }

/* ── 7. ONE SCREEN ───────────────────────────────────────────────────────── */
/* the object gives back the height the rhythm now spends */
@media (min-width:1024px){
  #view-brief .td-cube{ --ics:88px; width:400px; height:268px; }
  #view-brief .td-state .ui-display{ font-size:clamp(66px,5.4vw,88px) !important; }
}
@media (min-width:1024px) and (max-height:900px){
  #view-brief .td{ --td-3:26px; --td-4:40px; --td-5:56px; }
  #view-brief .td-cube{ --ics:78px; width:360px; height:228px; }
  #view-brief .td-state .ui-display{ font-size:72px !important; }
  #view-brief .td-verdict{ font-size:26px !important; }
}
@media (min-width:1024px) and (max-height:780px){
  #view-brief .td{ --td-2:12px; --td-3:20px; --td-4:30px; --td-5:40px; }
  #view-brief .td-cube{ --ics:70px; width:320px; height:196px; }
  #view-brief .td-state .ui-display{ font-size:62px !important; }
  #view-brief .td-verdict{ font-size:24px !important; }
  #view-brief .td-sub{ font-size:15px !important; }
}

/* ── 8. PHONE ────────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  #view-brief .td{ --td-3:26px; --td-4:38px; --td-5:52px; }
  #view-brief .td-head{ text-align:center; }
  #view-brief .td-verdict{ font-size:24px !important; max-width:18ch !important; }
  #view-brief .td-sub{ font-size:15px !important; }
  #view-brief .td-actions{ flex-direction:column; gap:14px; width:100%; }
  #view-brief .td-actions .ui-btn--primary{ width:100%; }
  #view-brief .td-senses{ font-size:14px !important; text-align:center; }
  #view-brief .td-senses i{ margin:0 8px !important; }
  #view-brief .td-normal{ text-align:center; }
}

/* ── 9. THE PASS, CORRECTED AGAINST THE RUNNING ROOM (2026-09-20) ─────────
   Read off the live DOM, not from memory. Four things the block above did not win:
   the date stayed in the corner, the sentence stayed left in a centred column,
   the caption and the footnote sat on top of each other, and it still scrolled. */

/* the date, on the axis */
#view-brief .td-head{
  width:100% !important; justify-self:stretch !important;
  text-align:center !important; }
#view-brief .td-head .ui-label{ display:inline-block; }

/* every line of the meaning block on the axis, the sentence included */
#view-brief .td-meaning > *{ margin-left:auto !important; margin-right:auto !important; }
#view-brief .td-sub,
#view-brief .td-next,
#view-brief .td-verdict,
#view-brief .td-meaning .ui-body{ text-align:center !important; }
#view-brief .td-next span{ text-align:center !important; }

/* the caption and the footnote stop touching */
#view-brief .td-state .ui-value{ gap:14px !important; margin-top:6px !important; }
#view-brief .td-tier{ margin-top:14px !important; }

/* ── 10. ONE SCREEN, MEASURED ────────────────────────────────────────────
   The day-ten inset is the tallest thing Today ever carries. At laptop heights
   the room gives the object back its space rather than pushing the foot off. */
@media (min-width:1024px) and (max-height:820px){
  #view-brief .td{ --td-2:10px; --td-3:16px; --td-4:24px; --td-5:28px; }
  #view-brief .td-cube{ --ics:58px; width:260px; height:150px; }
  #view-brief .td-state .ui-display{ font-size:54px !important; }
  #view-brief .td-state .ui-value{ gap:10px !important; margin-top:0 !important; }
  #view-brief .td-tier{ margin-top:10px !important; font-size:11.5px !important; }
  #view-brief .td-verdict{ font-size:23px !important; }
  #view-brief .td-sub{ font-size:14.5px !important; line-height:1.55 !important; }
  #view-brief .td-normal{ padding-top:18px !important; margin-top:18px !important; }
  #view-brief .td-normal .ui-title{ font-size:20px !important; margin:6px 0 10px !important; }
  #view-brief .td-normal .ui-body{ font-size:14px !important; line-height:1.55 !important; }
  #view-brief .td-normal .ui-body + .ui-body{ display:none; }   /* the day-of-week aside waits for a taller screen */
  #view-brief .td-actions .ui-btn--primary{ min-height:46px !important; font-size:14.5px !important; }
  #view-brief .td-senses{ padding-top:16px !important; font-size:13px !important; }
}

/* ── 11. TWO CAUSES, READ OFF THE LIVE DOM (2026-09-20) ───────────────────
   The date would not centre because .td-head is a flex row, so text-align was
   inert on it. And the day-ten "Go on" kept the hero pill because it also sits
   inside a .td-actions, and the pill rule was the later of two equal selectors. */

#view-brief .td-head{ display:flex !important; justify-content:center !important; }

/* the hero pill belongs to the room's own action only */
#view-brief .td-normal .td-actions .ui-btn--primary{
  min-width:0 !important; min-height:40px !important; padding:0 !important;
  background:none !important; background-image:none !important;
  border:0 !important; box-shadow:none !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  font:500 14px var(--f-body) !important; color:var(--ice) !important;
  border-bottom:1px solid rgba(0,191,255,.32) !important; border-radius:0 !important; }
#view-brief .td-normal .td-actions .ui-btn--primary:hover{
  transform:none !important; color:#dff4ff !important;
  border-bottom-color:rgba(190,235,255,.7) !important;
  background:none !important; box-shadow:none !important; }

/* ── 12. THE DAY-TEN MOMENT OWNS THE SCREEN (2026-09-20) ──────────────────
   It arrives once, ever. While it stands, the room's standing action and the
   attention slot stand down, so there is one thing to read and one thing to do.
   "Go on" dismisses it and the room comes back whole on the same screen. */
#view-brief .td-meaning:has(.td-normal) > .td-attn-wrap,
#view-brief .td-meaning:has(.td-normal) > .td-actions{ display:none !important; }
#view-brief .td-meaning:has(.td-normal) .td-normal .td-actions{ display:flex !important; }

/* ── 13. THE LAST 50px (2026-09-20). Measured on the running room at 770px of
   client height: the page ran 50px long. The object gives them back, not the words. */
@media (min-width:1024px) and (max-height:800px){
  #view-brief .td{ --td-3:14px; --td-4:18px; --td-5:20px; }
  #view-brief .td-cube{ --ics:52px; width:230px; height:128px; }
  #view-brief .td-state .ui-display{ font-size:48px !important; }
  #view-brief .td-state .ui-value{ gap:8px !important; }
  #view-brief .td-tier{ margin-top:8px !important; }
  #view-brief .td-verdict{ font-size:22px !important; }
  #view-brief .td-normal{ margin-top:14px !important; padding-top:14px !important; }
  #view-brief .td-normal .ui-title{ font-size:19px !important; margin:5px 0 8px !important; }
  #view-brief .td-senses{ padding-top:14px !important; }
}

/* SOLO DAY ONE — the second note under the day-one read. Same rule as .td-next,
   set one rung quieter so the two do not compete for the same voice. */
/* THE SOLO READ — the same rung as any other supporting line. It was carrying
   opacity .82, which is alpha-diluted text and is refused outright by §3: the
   three rungs of ink are the whole vocabulary. It is ink2 now, which is the
   rung it was reaching for. */
.td-solo{ color:rgb(var(--ink2)); }

/* ══ ONE TRUE LINE A DAY — composed (2026-09-20, design pass) ═══════════════
   It shipped with no rule of its own, so the one sentence a person is meant to
   take away from the day inherited the column's defaults and read as a stray
   paragraph after the buttons.

   What it is: not a verdict, not an instruction, not a row. The verdict is the
   room's sentence and already holds the Cormorant turn this room is allowed
   (§2: at most one). So the line is plain Manrope, ink2, and earns its weight
   from distance rather than from size — the only thing below the action, with a
   hairline above it and air on both sides.

   Supporting detail sits on the ground, separated by a hairline, never in a box
   (§4). Measure held at 46ch so a two-clause sentence lands in two lines rather
   than five short ones. */
#view-brief .td-line{ margin:40px auto 0; padding-top:24px; max-width:46ch;
  border-top:1px solid var(--hair);
  font:400 16px/1.6 var(--f-body); color:rgb(var(--ink2)); text-wrap:pretty; }
#view-brief .td-line[hidden]{ display:none; }
@media (max-width:1023px){
  #view-brief .td-line{ margin-top:32px; padding-top:20px; font-size:15px; text-align:left; }
}
/* it arrives last, after everything it was drawn from */
#view-brief .td-line{ animation:td-in .7s cubic-bezier(.2,.7,.2,1) .7s both; }
@media (prefers-reduced-motion:reduce){ #view-brief .td-line{ animation:none; } }

/* SWEEP 2026-09-25: the note under the sentence keeps the body measure (constitution §2, ≤46ch) */
#view-brief .td-next{ max-width:46ch !important; }
/* SWEEP 2 2026-09-25: every line in the meaning block shares one axis (§6), and the
   stamp under the cube is plain: 13px ink3, no tracking, no alpha on text (§2, §3) */
#view-brief .td-meaning .td-next, #view-brief .td-meaning .td-next span, #view-brief .td-meaning .td-step, #view-brief .td-meaning .td-step span{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; }
#view-brief .td-tier{ font:400 13px/1.4 var(--f-body) !important; letter-spacing:0 !important; opacity:1 !important; color:rgb(var(--ink3)) !important; }
/* SWEEP 2 2026-09-25, phone and tablet (§11): the grid named no "head" area under 1024px, so
   the date opened an implicit second column and squeezed the whole room into ~190px, off
   centre. One column, the date on top, centred. */
@media (max-width:1023px){
  #view-brief .td{ grid-template-columns:minmax(0,1fr) !important; grid-template-areas:"head" "state" "meaning" "senses" !important; justify-items:center; }
  #view-brief .td-head{ justify-self:stretch; text-align:center; margin-bottom:4px; }
  #view-brief .td-meaning, #view-brief .td-state{ width:100%; }
}