/* Areté — room-secondary (2026-09-11). Governed by DESIGN-CONSTITUTION.md.
   Calendar and Calibration. Loaded after arete-system.css; overrides only, no new
   components. js/25 and js/28 paint; every id and number stays where it was. */

/* ── CALENDAR ─────────────────────────────────────────────────────────────── */
/* the lead: one 13px line, sentence case */
#view-calendar .cl-head{ gap:0; flex-wrap:wrap; }
#view-calendar .cl-head .cl-stamp + .cl-stamp:not(.hidden){ margin-left:1.4em; }   /* space separates the two stamps; no punctuation is added to do it */
#view-calendar .cl-stamp, #view-calendar .cl-stamp .cl-quiet{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); text-transform:none; letter-spacing:0; }
#view-calendar .cl-stamp .cl-quiet:hover{ color:rgb(var(--ink)); }

/* the week: seven hairlines; the point of ice does not grow, it arrives */
#view-calendar .cl-point{ animation-name:cl-point-in; }
@keyframes cl-point-in{ from{ opacity:0; } to{ opacity:1; } }
#view-calendar .cl-lbl{ font:400 13px/1.2 var(--f-body); color:rgb(var(--ink3)); }
#view-calendar .cl-lbl--today{ color:rgb(var(--ink)); font-weight:400; }

/* the sentence, the window */
#view-calendar .cl-band{ font:500 28px/1.08 var(--f-disp); letter-spacing:-.022em; }
#view-calendar .cl-sentence{ max-width:46ch; }
#view-calendar .cl-window__t{ font:300 32px/1 var(--f-body); letter-spacing:-.05em; }
#view-calendar .cl-window__sub{ font-size:13px; max-width:46ch; }

/* hour by hour: a section label, then hairline rows */
#view-calendar .cl-rows__head{ font:400 13px/1.4 var(--f-body); letter-spacing:0; color:rgb(var(--ink3)); padding:0 2px 8px; }
#view-calendar .cl-row{ min-height:44px; align-items:center; }
#view-calendar .cl-row__t{ font-size:13px; color:rgb(var(--ink3)); }
#view-calendar .cl-row__title{ font-size:15px; }
#view-calendar .cl-row__d{ font-size:13px; color:rgb(var(--ink3)); justify-self:end; }
#view-calendar .cl-rows .cl-row:last-of-type{ border-bottom:1px solid var(--hair); }

/* the folds: a quiet summary, no marker, no boxes under it */
#view-calendar .cl-fold__sum{ font:500 14px/1.3 var(--f-body); color:rgb(var(--ink2)); }
#view-calendar .cl-fold__sum:hover{ color:rgb(var(--ink)); }
#view-calendar .cl-fold__sum::before{ content:none; }
#view-calendar .cl-fold[open] .cl-fold__sum::before{ content:none; }
#view-calendar .cl-fold > *:not(summary){ margin-left:0; }
#view-calendar .cl-field{ border:0; border-radius:10px; background:rgba(15,23,36,.5); }
#view-calendar .cl-field:focus{ background:rgba(0,191,255,.06); }
#view-calendar .cl-drop{ border:0; border-radius:0; border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); text-align:left; padding:14px 2px; }
#view-calendar .cl-drop:hover{ background:none; }
#view-calendar .cl-drop .cl-drop__t{ font-weight:500; color:rgb(var(--ink2)); }
#view-calendar .cl-drop:hover .cl-drop__t{ color:rgb(var(--ink)); }
#view-calendar .cl-wk #cal-wk-band{ padding:0 !important; border-radius:0 !important; }

@media (max-width:767px){
  #view-calendar .cl-band{ font-size:28px; }
  #view-calendar .cl-window__t{ font-size:32px; }
  #view-calendar .cl-lbl{ font-size:13px; }
}

/* ── CALIBRATION ──────────────────────────────────────────────────────────── */
/* composition: the trace left in 5fr, the words right in 7fr, 40px between, like Today */
#view-calibration .cb-body{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:40px; }
#view-calibration .cb-surface{ max-width:none; }
#view-calibration .cb-t{ font:400 13px var(--f-body); fill:rgb(var(--ink3)); }

/* the number, the sentence, the paragraph, the line */
#view-calibration .cb-num{ font:300 64px/1 var(--f-body); letter-spacing:-.05em; }
#view-calibration .cb-numlab{ font:400 14px var(--f-body); color:rgb(var(--ink3)); }
#view-calibration .cb-h{ font:500 28px/1.08 var(--f-disp); letter-spacing:-.022em; }
#view-calibration .cb-sub{ font:400 16px/1.5 var(--f-body); color:rgb(var(--ink2)); max-width:46ch; }
#view-calibration .cb-line{ font:400 13px/1.55 var(--f-body); color:rgb(var(--ink3)); max-width:46ch; }

/* the rows: a section label, then hairline rows; the value is the point */
#view-calibration .cb-h3{ font:400 13px/1.4 var(--f-body); letter-spacing:0; color:rgb(var(--ink3)); margin:0 0 6px; }
#view-calibration .cb-row{ min-height:44px; align-items:center; }
#view-calibration .cb-row__m b{ font-weight:500; color:rgb(var(--ink)); }
#view-calibration .cb-row__r{ font-size:13px; }
#view-calibration .cb-quiet .ui-btn--quiet{ background:none; border:0; box-shadow:none; padding:0; min-width:0; font:500 14px var(--f-body); color:rgb(var(--ink2)); }
#view-calibration .cb-quiet .ui-btn--quiet:hover{ color:rgb(var(--ink)); }

@media (max-width:1023px){
  #view-calibration .cb-body{ grid-template-columns:minmax(0,1fr); }
  #view-calibration .cb-surface{ max-width:520px; margin:0 auto; }
}
@media (max-width:767px){
  #view-calibration .cb-t{ font-size:13px; }
  #view-calibration .cb-h{ font-size:28px; }
}
/* the trace is the room's one object: it takes its column at desk width (Constitution §6) */
@media (min-width:1024px){
  #view-calibration .cb, #view-calibration .cb-body{ max-width:none; }
  #view-calibration .cb-body{ grid-template-columns:minmax(380px,5fr) minmax(0,7fr); }
  #view-calibration .cb-surface{ width:100%; max-width:520px; }
}