/* THE SECOND CHAMBERS HOME · the product, as it is · master/css/master-product.css · 5 Oct 2026
   5 Oct, later, CALMED (Rania: "FAR too busy"; and to the engine's chat, "I'm thrown off by the black and the cards"): the instruments
   on a light ground, the window the rail's instruments and the drawer alone, the figures plain on white with no boxes, more air. The block
   THE CALM at the foot states it; it wins over what is above.
   Rania, 5 Oct 2026: "it needs to be the product more … in brand with the software itself … We don't want them to see it and say, IT IS
   SMARTSHEET. so it needs to be ours!!" The engine's own dress, drawn for the home: its rail (the SC badge, Create, the groups in small
   capitals, a label under every icon), the red only on the state that matters (the instrument that is open), the grades in their own
   colours, the two signals as boxed stamps, the black inset for their words. No ribbon, no formula bar: what is shown is what is ours.
   Loaded after master-airy.css; scoped to body.airy. Drawn by js/master-product.js. */
body.airy {
  --scx-red: #E60000; --scx-red-bg: #FDECEC; --scx-ink: #0B0B0E; --scx-ink-2: #2B2B33; --scx-grey: #6B6B74; --scx-dim: #9C9CA8;
  --scx-line: #E6E7EC; --scx-line-2: #F1F2F5; --scx-pale: #F6F7F9; --scx-safe: #15803D; --scx-less: #E60000;
  --scx-shadow: 0 2px 6px rgba(11, 11, 14, .08), 0 30px 80px rgba(11, 11, 14, .22);

  /* ── the window ── */
  .scx-app { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); background: #fff; color: var(--scx-ink); border: 1px solid var(--scx-line);
    border-radius: 14px; box-shadow: var(--scx-shadow); overflow: hidden; font: 400 13px/1.45 var(--font); text-align: left; }
  .scx-app svg { width: 18px; height: 18px; display: block; flex: none; }
  .scx-rail { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 0 14px; border-right: 1px solid var(--scx-line); background: #fff; overflow: hidden; }
  .scx-badge { width: 32px; height: 32px; margin: 0 0 10px; display: block; }
  .scx-badge-line { width: auto; height: 11px; max-width: 100%; } /* 7 Oct 2026: the rail wears the one-line wordmark, not the ring */
  .scx-create { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 4px; }
  .scx-create svg { width: 36px; height: 36px; padding: 9px; border-radius: 10px; background: var(--scx-ink); color: #fff; }
  .scx-create i, .scx-ri i { font: 500 10px/1.15 var(--font); font-style: normal; color: var(--scx-ink-2); text-align: center; letter-spacing: 0; }
  .scx-gl { margin: 10px 0 3px; font: 600 8.5px/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--scx-dim); }
  .scx-ri { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; padding: 6px 2px; border-radius: 8px; color: var(--scx-ink-2); transition: background .25s, color .25s; }
  .scx-ri.on { color: var(--scx-red); background: var(--scx-red-bg); }
  .scx-ri.on i { color: var(--scx-red); }
  .scx-rail-mini .scx-ri { width: 56px; }
  .scx-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
  .scx-top { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 16px; border-bottom: 1px solid var(--scx-line); }
  .scx-top-ic { color: var(--scx-ink); }
  .scx-title { flex: 1; min-width: 0; font: 600 13.5px/1.3 var(--font); letter-spacing: -.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-pill { flex: none; padding: 4px 10px; border: 1px solid var(--scx-line); border-radius: 6px; font: 500 12px/1.3 var(--font); color: var(--scx-ink-2); }
  .scx-foot { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-height: 38px; padding: 6px 16px; border-top: 1px solid var(--scx-line); background: var(--scx-pale); font-size: 12px; color: var(--scx-grey); }
  .scx-foot .grade { font-size: 11px; }
  .scx-app .grade { flex: none; }

  /* ── the rows of the open sheet: the record, not a spreadsheet's cells ── */
  .scx-rows { flex: 1; min-height: 0; overflow: hidden; }
  .scx-row { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 16px; border-bottom: 1px solid var(--scx-line-2); transition: background .3s; }
  .scx-row > i { font: 500 11px/1.6 var(--font); font-style: normal; color: var(--scx-dim); text-align: right; }
  .scx-row b { display: block; font-weight: 500; font-size: 13px; line-height: 1.35; color: var(--scx-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .scx-row span.sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--scx-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-row.pick { background: #FFF7F7; box-shadow: inset 3px 0 0 var(--scx-red); }

  /* ── the drawer: one instrument's output ── */
  .scx-app-inst { grid-template-columns: 76px minmax(0, .9fr) minmax(0, 1.1fr); height: min(78vh, 720px); transition: grid-template-columns .5s var(--ease, ease); }
  .scx-app-inst.scx-wide { grid-template-columns: 76px 0fr minmax(0, 1fr); }
  .scx-app-inst.scx-wide .scx-main { visibility: hidden; }
  .scx-rail-mini .scx-gl { font-size: 7.5px; letter-spacing: .06em; }
  .scx-bayc li, .scx-bayc h5 { overflow-wrap: break-word; hyphens: auto; }
  .scx-drawer { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--scx-line); background: #fff; box-shadow: -18px 0 40px rgba(11, 11, 14, .06); }
  .scx-dh { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--scx-line); }
  .scx-dh svg { color: var(--scx-red); }
  .scx-dh b { flex: 1; min-width: 0; font: 600 13.5px/1.25 var(--font); }
  .scx-dh small { display: block; font-weight: 400; font-size: 11px; color: var(--scx-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-db { flex: none; padding: 4px 8px; border: 1px solid var(--scx-line); border-radius: 6px; font: 500 11px/1.2 var(--font); color: var(--scx-ink-2); }
  .scx-read { flex: none; margin: 0; padding: 9px 16px; background: var(--scx-pale); border-bottom: 1px solid var(--scx-line); font-size: 11.5px; line-height: 1.45; color: var(--scx-grey); }
  .scx-read b { color: var(--scx-ink); font-weight: 600; }
  .scx-dbody { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .scx-dbody > * { animation: scx-in .45s var(--ease, ease) both; }
  .scx-dbody > *:nth-child(2) { animation-delay: .06s; } .scx-dbody > *:nth-child(3) { animation-delay: .12s; } .scx-dbody > *:nth-child(4) { animation-delay: .18s; }
  .scx-dbody > *:nth-child(5) { animation-delay: .24s; } .scx-dbody > *:nth-child(6) { animation-delay: .3s; } .scx-dbody > *:nth-child(n+7) { animation-delay: .36s; }
  @keyframes scx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .scx-part { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--scx-line-2); }
  .scx-part > i { font: 500 11px/1.5 var(--font); font-style: normal; color: var(--scx-dim); }
  .scx-part h4 { margin: 0 0 6px; font: 600 10px/1.3 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--scx-grey); }
  .scx-part p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--scx-ink); white-space: pre-line; }
  .scx-part .who { display: block; margin-top: 6px; font-size: 11.5px; color: var(--scx-grey); }
  .scx-said { margin: 0; padding: 13px 15px; border-radius: 8px; background: var(--scx-ink); color: #fff; font: 400 14.5px/1.5 Georgia, "Times New Roman", serif; }
  .scx-not { display: inline-block; padding: 3px 9px; border: 1px dashed #C9CAD3; border-radius: 6px; font: 500 11.5px/1.3 var(--font); color: var(--scx-grey); }
  .scx-bay { display: inline-block; margin: 12px 16px 0; padding: 4px 9px; border: 1.5px solid var(--scx-ink); border-radius: 4px; font: 700 10px/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; }
  .scx-q1 { margin: 10px 16px 4px; font: 500 14px/1.4 var(--font); color: var(--scx-ink); }
  .scx-clock { display: flex; align-items: baseline; gap: 8px; }
  .scx-clock b { font: 300 46px/1 var(--font); letter-spacing: -.04em; color: var(--scx-ink); font-variant-numeric: tabular-nums; }
  .scx-clock span { font-size: 12.5px; color: var(--scx-grey); }
  .scx-sum { margin: 0; padding: 12px 16px 16px; font-size: 12px; line-height: 1.5; color: var(--scx-grey); }

  /* the 4D tray, the sheet's working view (light: the house's black-band tray stays the site's, 1d) */
  .scx-tray { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--scx-line); }
  .scx-bayc { min-width: 0; padding: 12px 10px 14px; border-right: 1px solid var(--scx-line-2); }
  .scx-bayc:last-child { border-right: 0; }
  .scx-bayc h5 { margin: 0; font: 700 9px/1.2 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--scx-grey); }
  .scx-bayc strong { display: block; margin: 6px 0 8px; font: 300 34px/1 var(--font); letter-spacing: -.04em; color: var(--scx-ink); font-variant-numeric: tabular-nums; }
  .scx-bayc ul { margin: 0; padding: 0; list-style: none; max-height: 330px; overflow: auto; scrollbar-width: thin; }
  .scx-bayc li { padding: 4px 0; border-top: 1px solid var(--scx-line-2); font-size: 11px; line-height: 1.35; color: var(--scx-ink-2); }

  /* the two signals: boxed stamps, the one red and the one green (1j) */
  .scx-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; }
  .scx-sig { padding: 14px 12px; border: 1px solid var(--scx-line); border-radius: 10px; text-align: center; }
  .scx-sig strong { display: block; font: 300 42px/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .scx-sig.safe strong { color: var(--scx-safe); } .scx-sig.less strong { color: var(--scx-less); }
  .scx-sig small { display: block; margin-top: 8px; font-size: 11.5px; color: var(--scx-grey); }
  .scx-stamp { display: inline-block; padding: 2px 6px; border: 1.5px solid currentColor; border-radius: 3px; font: 800 9.5px/1.25 var(--font); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
  .scx-stamp.safe { color: var(--scx-safe); } .scx-stamp.less { color: var(--scx-less); }
  .scx-sig .scx-stamp { margin-top: 8px; }
  .scx-slist { margin: 0; padding: 0 16px 10px; list-style: none; }
  .scx-slist li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--scx-line-2); }
  .scx-slist b { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.3; }
  .scx-slist span { font-size: 11.5px; color: var(--scx-grey); }

  /* the gate: what the machine refuses; a person clears */
  .scx-sig.ok strong { color: var(--scx-ink); }
  .scx-glist li { grid-template-columns: minmax(0, 1fr); }
  .scx-glist span { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .scx-fail { padding: 2px 7px; border-radius: 999px; background: var(--scx-red-bg); color: #A40000; font: 600 10.5px/1.3 var(--font); font-style: normal; }
  .scx-row.refused { box-shadow: inset 3px 0 0 var(--scx-red); }

  /* the clocks */
  .scx-med { display: flex; align-items: baseline; gap: 10px; padding: 14px 16px 6px; }
  .scx-med strong { font: 300 42px/1 var(--font); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
  .scx-med span { font-size: 12.5px; color: var(--scx-grey); }
  .scx-clist { margin: 0; padding: 6px 16px 12px; list-style: none; }
  .scx-clist li { padding: 8px 0; border-top: 1px solid var(--scx-line-2); }
  .scx-clist .t { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.35; }
  .scx-clist .t b { font-weight: 500; min-width: 0; }
  .scx-clist .t em { flex: none; font-style: normal; font-variant-numeric: tabular-nums; color: var(--scx-ink); font-weight: 600; }
  .scx-clist .bar { position: relative; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--scx-line-2); overflow: hidden; }
  .scx-clist .bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--scx-ink); transform-origin: left; animation: scx-grow .9s var(--ease, ease) both; }
  .scx-clist .bar.med::after { content: ""; position: absolute; top: -2px; bottom: -2px; left: var(--m); width: 2px; background: var(--scx-red); }
  .scx-clist .d { margin-top: 4px; font-size: 11px; color: var(--scx-grey); }
  @keyframes scx-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

  /* ── INSTRUMENTS, on ink, pinned: the steps scroll, the window stays ── */
  .scx-two { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); grid-template-areas: "head stage" "steps stage" "more stage"; column-gap: clamp(32px, 5vw, 80px); align-items: start; }
  .scx-head { grid-area: head; }
  .scx-head .ay-h2 span { display: block; }
  .scx-instruments .ay-h2 span:first-child, .scx-views .ay-h2 span:first-child { font-weight: 300; }
  .scx-instruments .ay-h2 .scx-lit, .scx-views .ay-h2 .scx-lit { font-weight: 500; }
  .scx-views .ay-h2 span { display: block; }
  .scx-rule { margin: 22px 0 0; padding: 2px 0 2px 16px; border-left: 2px solid rgba(255, 255, 255, .55); font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .9); max-width: 46ch; }
  .scx-stage { grid-area: stage; position: sticky; top: calc(var(--head-h, 68px) + 28px); min-width: 0; }
  .scx-note { margin: 14px 2px 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .6); }
  .scx-steps { grid-area: steps; margin: 30px 0 0; padding: 0; list-style: none; }
  .scx-step { display: grid; grid-template-columns: 30px 46px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 54vh; padding: 0 0 0 2px; color: rgba(255, 255, 255, .42); cursor: pointer; transition: color .35s; outline: 0; }
  .scx-step:first-child { min-height: 34vh; }
  .scx-step-n { font: 500 12px/1 var(--font); letter-spacing: .1em; }
  .scx-step-ic { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .18); transition: background .35s, color .35s, border-color .35s; }
  .scx-step-ic svg { width: 22px; height: 22px; }
  .scx-step b { display: block; font: 500 clamp(22px, 2.1vw, 30px)/1.15 var(--font); letter-spacing: -.02em; color: inherit; }
  .scx-step p { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: inherit; max-width: 44ch; }
  .scx-step.on { color: #fff; }
  .scx-step.on .scx-step-ic { background: #fff; color: var(--scx-red); border-color: #fff; }
  .scx-step:focus-visible .scx-step-ic { box-shadow: 0 0 0 2px #fff; }
  .scx-more { grid-area: more; margin: 0 0 6vh; }

  /* ── VIEWS: one sheet, five ways ── */
  .scx-app-views { grid-template-columns: 68px minmax(0, 1fr); height: min(74vh, 640px); }
  .scx-vtabs { flex: none; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--scx-line); border-radius: 8px; background: var(--scx-pale); }
  .scx-vt { padding: 6px 12px; border: 0; border-radius: 6px; background: transparent; font: 500 12.5px/1.2 var(--font); color: var(--scx-ink-2); cursor: pointer; transition: background .2s, color .2s; }
  .scx-vt:hover { background: #fff; }
  .scx-vt.on { background: var(--scx-ink); color: #fff; }
  .scx-vbody { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .scx-vbody > * { animation: scx-in .45s var(--ease, ease) both; }
  .scx-vlines { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 22px 0 0; padding: 0; list-style: none; }
  .scx-vlines li { padding-top: 12px; border-top: 2px solid var(--ay-line, #E3E3E6); font-size: 13.5px; line-height: 1.45; color: var(--ay-grey, #6B6B74); transition: border-color .3s, color .3s; cursor: pointer; }
  .scx-vlines li b { display: block; margin-bottom: 4px; font-weight: 500; font-size: 15px; color: var(--scx-ink); }
  .scx-vlines li.on { border-top-color: var(--scx-ink); color: var(--scx-ink); }
  /* grid */
  .scx-tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
  .scx-tbl th { position: sticky; top: 0; z-index: 1; padding: 9px 12px; background: var(--scx-pale); border-bottom: 1px solid var(--scx-line); text-align: left; font: 600 11px/1.2 var(--font); color: var(--scx-grey); white-space: nowrap; }
  .scx-tbl td { padding: 9px 12px; border-bottom: 1px solid var(--scx-line-2); vertical-align: top; color: var(--scx-ink-2); }
  .scx-tbl td.n { width: 28px; color: var(--scx-dim); text-align: right; }
  .scx-tbl td.t { color: var(--scx-ink); font-weight: 500; max-width: 340px; }
  .scx-tbl td.m { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .scx-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--scx-line); border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--scx-ink-2); background: #fff; }
  /* cards */
  .scx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
  .scx-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--scx-line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(11, 11, 14, .04); }
  .scx-card b { font-weight: 600; font-size: 13px; line-height: 1.3; }
  .scx-card p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--scx-grey); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .scx-card .ft { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
  /* gantt */
  .scx-gantt { position: relative; padding: 0 16px 14px; --scx-glab: 200px; }
  .scx-gaxis { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 200px minmax(0, 1fr); background: #fff; border-bottom: 1px solid var(--scx-line); }
  .scx-gaxis .yrs { position: relative; height: 32px; }
  .scx-gaxis .yrs span { position: absolute; top: 10px; transform: translateX(-50%); font-size: 11px; color: var(--scx-grey); }
  .scx-grow { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; min-height: 34px; border-bottom: 1px solid var(--scx-line-2); }
  .scx-grow > b { padding-right: 12px; font-weight: 500; font-size: 12px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scx-gtrack { position: relative; height: 34px; }
  .scx-gtrack i { position: absolute; top: 11px; height: 12px; border-radius: 6px; background: var(--scx-ink); transform-origin: left; animation: scx-grow .9s var(--ease, ease) both; }
  .scx-gtrack i.less { background: var(--scx-less); } .scx-gtrack i.safe { background: var(--scx-safe); }
  .scx-gtrack i.pt { width: 12px !important; border-radius: 50%; animation: none; }
  .scx-gtrack em { position: absolute; top: 10px; font-style: normal; font-size: 10.5px; color: var(--scx-grey); white-space: nowrap; }
  .scx-gtoday { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--scx-red); z-index: 1; pointer-events: none; }
  .scx-gtoday::before { content: "Today"; position: absolute; top: 2px; left: 4px; font: 600 10px/1 var(--font); color: var(--scx-red); }
  /* calendar */
  .scx-cal { padding: 14px 16px 16px; }
  .scx-calh { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .scx-calh b { flex: 1; font: 600 15px/1.2 var(--font); }
  .scx-calh button { width: 30px; height: 30px; border: 1px solid var(--scx-line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 14px; }
  .scx-calg { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--scx-line); border-left: 1px solid var(--scx-line); }
  .scx-calg > span { min-height: 74px; padding: 5px 6px; border-right: 1px solid var(--scx-line); border-bottom: 1px solid var(--scx-line); font-size: 11px; color: var(--scx-grey); }
  .scx-calg > span.dow { min-height: 0; padding: 6px; background: var(--scx-pale); font-weight: 600; color: var(--scx-ink-2); }
  .scx-calg > span.off { background: #FBFBFC; color: #C5C6CE; }
  .scx-calg em { display: block; margin-top: 4px; padding: 3px 5px; border-radius: 4px; border-left: 3px solid var(--scx-ink); background: var(--scx-pale); font-style: normal; font-size: 10.5px; line-height: 1.25; color: var(--scx-ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .scx-calg em.less { border-left-color: var(--scx-less); } .scx-calg em.safe { border-left-color: var(--scx-safe); }
  /* timeline: one aligned column, oldest first */
  .scx-tl { margin: 0; padding: 14px 16px 18px; list-style: none; }
  .scx-tl li { display: grid; grid-template-columns: 96px 22px minmax(0, 1fr); gap: 10px; align-items: start; }
  .scx-tl time { padding-top: 10px; font-size: 11.5px; color: var(--scx-grey); text-align: right; font-variant-numeric: tabular-nums; }
  .scx-tl .ln { position: relative; align-self: stretch; }
  .scx-tl .ln::before { content: ""; position: absolute; left: 10px; top: 0; bottom: 0; width: 2px; background: var(--scx-line); }
  .scx-tl .ln::after { content: ""; position: absolute; left: 5px; top: 13px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--scx-ink); }
  .scx-tl .ln.less::after { border-color: var(--scx-less); } .scx-tl .ln.safe::after { border-color: var(--scx-safe); }
  .scx-tl .c { margin: 4px 0; padding: 8px 12px; border: 1px solid var(--scx-line); border-radius: 8px; background: #fff; }
  .scx-tl .c b { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.3; }
  .scx-tl .c span { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; font-size: 11px; color: var(--scx-grey); }

  /* ── YOUR MORNING, inside the product's window ── */
  .scx-framed.ay-float-desk { padding: 0; }
  .scx-app-desk { grid-template-columns: 64px minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
  .scx-app-desk .scx-rail { padding-top: 10px; }
  .scx-app-desk .hero-mk .ui { border: 0; border-radius: 0; box-shadow: none; }
  .scx-framed figcaption { margin: 0; padding: 12px 18px 14px; border-top: 1px solid var(--scx-line); }

  /* ── the measure ── */
  @media (max-width: 1240px) {
    .scx-app-inst { grid-template-columns: 70px minmax(0, .75fr) minmax(0, 1.25fr); }
    .scx-app-inst.scx-wide { grid-template-columns: 70px 0fr minmax(0, 1fr); }
  }
  @media (max-width: 1024px) {
    .scx-two { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "stage" "steps" "more"; }
    .scx-stage { top: calc(var(--head-h, 60px) + 8px); z-index: 3; margin-top: 28px; }
    .scx-app-inst, .scx-app-inst.scx-wide { grid-template-columns: minmax(0, 1fr); height: min(56vh, 520px); }
    .scx-app-inst .scx-rail, .scx-app-inst .scx-main { display: none; }
    .scx-app-inst .scx-drawer { border-left: 0; box-shadow: none; }
    .scx-note { display: none; }
    .scx-step { min-height: 46vh; grid-template-columns: 26px 40px minmax(0, 1fr); }
    .scx-step:first-child { min-height: 40vh; }
    .scx-step-ic { width: 40px; height: 40px; }
    .scx-vlines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .scx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .scx-app-views { grid-template-columns: minmax(0, 1fr); height: 70vh; }
    .scx-app-views .scx-rail { display: none; }
    .scx-app-views .scx-top { flex-wrap: wrap; }
    .scx-app-views .scx-title { flex-basis: calc(100% - 30px); }
    .scx-vtabs { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .scx-vt { flex: none; padding: 6px 10px; }
    .scx-vlines { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .scx-cards { grid-template-columns: minmax(0, 1fr); }
    .scx-tbl { min-width: 640px; }
    .scx-step { min-height: 40vh; align-content: end; padding-bottom: 6vh; }
    .scx-gaxis, .scx-grow { grid-template-columns: 110px minmax(0, 1fr); }
    .scx-gantt { --scx-glab: 110px; }
    .scx-tl li { grid-template-columns: 72px 22px minmax(0, 1fr); }
    .scx-calg > span { min-height: 58px; padding: 3px; }
    .scx-calg em { font-size: 9.5px; padding: 2px 3px; }
    .scx-tray { grid-template-columns: repeat(5, minmax(84px, 1fr)); overflow-x: auto; }
    .scx-app-desk { grid-template-columns: minmax(0, 1fr); }
    .scx-app-desk .scx-rail { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .scx-dbody > *, .scx-vbody > *, .scx-clist .bar i, .scx-gtrack i { animation: none; }
  }

  /* ══ THE CALM (5 Oct 2026, later) ══ */
  .scx-app-inst.scx-calm, .scx-app-inst.scx-calm.scx-wide { grid-template-columns: 76px minmax(0, 1fr); height: min(70vh, 620px); }
  .scx-rail-only { gap: 4px; padding-top: 16px; }
  .scx-rail-only .scx-badge { margin-bottom: 14px; }
  .scx-calm .scx-drawer { border-left: 0; box-shadow: none; }
  .scx-calm .scx-dh { padding: 18px 26px 16px; }
  .scx-calm .scx-dh b { font-size: 16px; }
  .scx-calm .scx-part { padding: 16px 26px; grid-template-columns: 30px minmax(0, 1fr); }
  .scx-calm .scx-q1 { margin: 14px 26px 6px; font-size: 16px; }
  .scx-calm .scx-bay { margin: 16px 26px 0; }
  .scx-calm .scx-sum { padding: 14px 26px 20px; }
  .scx-calm .scx-slist { padding: 4px 26px 12px; }
  .scx-calm .scx-slist li { border-top-color: var(--scx-line-2); padding: 10px 0; }
  /* the figures plain on white: no box, the count large, the words small beneath (the engine's light tray, 5 Oct) */
  .scx-calm .scx-sigs { gap: 0; padding: 18px 26px 10px; }
  .scx-calm .scx-sig { border: 0; border-radius: 0; padding: 0 18px 8px 0; text-align: left; }
  .scx-calm .scx-sig + .scx-sig { padding-left: 22px; border-left: 1px solid var(--scx-line); }
  .scx-calm .scx-sig strong { font-size: 52px; }
  .scx-calm .scx-tray { border-bottom: 0; padding: 6px 14px 0; }
  .scx-calm .scx-bayc { padding: 12px 12px 10px; border-right: 1px solid var(--scx-line-2); }
  .scx-calm .scx-bayc strong { font-size: 44px; }
  .scx-calm .scx-bayc ul { max-height: 260px; }
  /* the section on a light ground: ink words, the step in view in ink, the rest quiet */
  .scx-instruments .scx-rule { border-left-color: rgba(11, 11, 14, .25); color: var(--scx-ink-2); }
  .scx-instruments .scx-more { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--scx-grey); max-width: 46ch; }
  .scx-instruments .scx-step { color: rgba(11, 11, 14, .32); }
  .scx-instruments .scx-step-ic { border-color: var(--scx-line); }
  .scx-instruments .scx-step.on { color: var(--scx-ink); }
  .scx-instruments .scx-step.on .scx-step-ic { background: var(--scx-ink); color: #fff; border-color: var(--scx-ink); }
  .scx-instruments .scx-step p { font-size: 15.5px; }
  .scx-instruments .scx-step:focus-visible .scx-step-ic { box-shadow: 0 0 0 2px var(--scx-ink); }
  .scx-app { box-shadow: 0 1px 2px rgba(11, 11, 14, .05), 0 24px 60px rgba(11, 11, 14, .10); }
  /* the views: the window alone */
  .scx-app-views { grid-template-columns: minmax(0, 1fr); }
  @media (max-width: 1024px) {
    .scx-app-inst.scx-calm, .scx-app-inst.scx-calm.scx-wide { grid-template-columns: minmax(0, 1fr); height: min(56vh, 520px); }
    .scx-calm .scx-rail { display: none; }
    .scx-calm .scx-dh, .scx-calm .scx-part, .scx-calm .scx-sigs, .scx-calm .scx-slist, .scx-calm .scx-sum { padding-left: 18px; padding-right: 18px; }
    .scx-calm .scx-q1, .scx-calm .scx-bay { margin-left: 18px; margin-right: 18px; }
  }
}