` sits between the column and
everything the plate draws. It is `display: block` by default, so the height
stopped dead here and the list's card ended 160px short of the floor with the
column around it perfectly full-height — which is precisely the "floating card"
look the frame rule is about, surviving the fix that was supposed to remove it.
The chat pane's own lock already carries this rung for the same reason and says
so ("the engine's instance wrapper sits between the console column and the
plate, so it is part of the chain whether the author sees it or not"). */
body.app:has(.conv-layout) .conv-rail > .b-component {
display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
}
body.app:has(.conv-layout) .conv-rail-body {
flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
/* AND THE COLLAPSE HAS TO BE SAID AGAIN IN HERE (measured, TEN-1819).
`.conv-railbox:checked ~ .conv-rail-body { display: none }` up in the chevron's
own block is TWO classes; the rule directly above is `body.app` + `:has()` + a
class, which is three — so the frame quietly overruled the chevron and a
"collapsed" rail kept its whole list, at `display: flex`, and GREW: the track
is `auto` when collapsed, and `auto` sizes to the max-content of a list that
was never hidden. Pressing the chevron made the column wider, which is the
opposite of the control's entire purpose.
Restated here rather than weakened there: this block owns these elements'
layout now, so it owns telling them when not to have any. */
body.app:has(.conv-layout) .conv-railbox:checked ~ .conv-rail-body { display: none; }
/* THE LIST'S CARD IS THE SCROLLER, not the body around it. Two reasons, and the
second is the load-bearing one: the archived-rooms shelf and the refusal note
are SIBLINGS of this card inside the body, and a scroller one level up would
carry them off the bottom of the column — the shelf is a foot, and a foot that
scrolls away is a link nobody finds twice. Scrolling the card also gives the
sticky find bar and capsule row a scroll container of their own to stick to. */
body.app:has(.conv-layout) .conv-rail-body .msg-inbox {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
body.app:has(.conv-layout) .conv-pane {
display: flex; flex-direction: column; min-height: 0;
}
/* THE BOTTOM EDGES (TEN-1826, Mark's round-4 UAT: "bottoms off") — MEASURED ON THE RUNNING
BOOK, which is the only place this was visible.
`.msg-inbox, .msg-pane` share one card rule up at the top of this file and it ends
`margin-bottom: var(--b-space-3)` — right for a card on a scrolling page, wrong inside a
viewport-bounded frame where the track's floor IS the page's. The rail's copy has been
overridden to 0 since TEN-1819 (`.conv-rail .msg-inbox`); the pane's never was, so the chat
card stopped 12px above the list card on every render of every conversation.
Measured at 1867x594 on /account/rooms/room-demo-1: the two TRACKS are 75→578 exactly, the
rail's card reaches 578, and the pane's card stopped at 566. One inherited margin, 12px, on
the one edge Mark could see it on. */
body.app:has(.conv-layout) .conv-pane .msg-pane { margin-bottom: 0; }
/* ONLY THE COMPONENT THAT DRAWS THE SCREEN TAKES THE SLACK (measured, TEN-1819).
The room state mounts TWO components in this pane: the room, and `people-pick`,
which the content block's own comment says "renders nothing" — it exists to
ANSWER a re-fetch from peoplepick.js. A blanket `flex: 1 1 auto` handed that
empty mount an equal share of the growth, and it was taking 78px off the bottom
of the conversation on every room page: the pane reached the floor and the chat
inside it stopped short, with nothing on screen to explain the gap. Pre-existing
and invisible — an empty div has no outline — and it is the frame, so it is
fixed here. `:has(.msg-screen)` names the one that is the screen; everything
else in this pane sizes to its own content. */
body.app:has(.conv-layout) .conv-pane > .b-component {
display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0;
}
body.app:has(.conv-layout) .conv-pane > .b-component:has(.msg-screen) { flex: 1 1 auto; }
/* The resting pane has no component to hand the height to — it IS the
placeholder — so it takes the slack itself and centres in the whole track,
which is what makes its bottom edge flush with the list's. */
body.app:has(.conv-layout) .conv-pane-empty { flex: 1 1 auto; }
}
}
/* ONE COLUMN ON A PHONE, and the rule picks which one.
Two columns at 400px would be two unusable columns. When a pane is open the
pane IS the page and the rail steps aside; the way back to the list is the
conversation's own Back control, which was already there for exactly this.
With nothing open there is no .msg-screen, so the rail is what remains —
which is the old Messages page, unchanged, for a reader on a phone.
This is also why the resume affordance must never auto-follow at this width:
arriving and being thrown straight into a conversation would leave a phone
reader with no list to have chosen from. */
@media (max-width: 720px) {
.conv-layout { grid-template-columns: minmax(0, 1fr); gap: var(--b-space-3); }
.conv-rail, .conv-pane { width: 100%; max-width: none; }
/* THE BUSY PANE STEPS INTO THE STACK AT THE SAME MOMENT THE PRESS LANDS
(TEN-1823). `.msg-screen` only exists once the answer has arrived, so with the
first selector alone a phone reader pressing a row got the list, unchanged,
with a skeleton growing underneath it — the list and the conversation on one
screen, which is the thing "never both" forbids, arriving in the window the
reader is most likely to be looking at. The transition is the acknowledgment
(the interactivity SOP's rule 1: the view changes BEFORE the work begins), so
the stack moves on the press and the skeleton is what the new screen holds
until the conversation lands in it. */
.conv-layout:has(.msg-screen) .conv-rail,
.conv-layout:has(.conv-pane-busy) .conv-rail { display: none; }
.conv-pane-busy { min-height: 60vh; }
/* "NEVER BOTH" CUTS THE OTHER WAY TOO (TEN-1823, Mark's ruling). The rule above
takes the list away once a conversation is open; nothing took the PLACEHOLDER
away while the list was open — so the resting state on a phone was the whole
conversation list with a dashed box under it saying "No conversation open. Pick
someone or a room from the list to read it here", which is a caption explaining
the screen it is sitting on, below the fold, to a reader already doing it.
A stack has one screen at a time. Above the breakpoint the placeholder is
answering a real question — there are two tracks and one of them is empty —
and it stays exactly as it is. Here there is one track, it is the list, and
the honest render of "nothing is open" is nothing (K30: absent, not dead). */
.conv-pane-empty { display: none; }
/* THE COLLAPSE CHEVRON IS ABSENT AT THIS WIDTH (TEN-1817) and that is not tidying.
There are no two columns to redistribute here — the rail IS the page when nothing is
open, and it is already gone when something is. A chevron that hid the only thing on
the screen would be a control whose whole effect is a blank page. */
.conv-railtoggle { display: none; }
.conv-railbox:checked ~ .conv-rail-body { display: block; }
/* AND THE PICKED COLUMN IS STILL INSIDE THE VIEWPORT LOCK (TEN-1829, Mark's UAT-M8 on
v0.1.244, Android Chrome: the chat pane runs off the bottom of the screen and the
composer cannot be reached — the page will not scroll to it).
MEASURED, and the unit was not the fault. `body.app:has(.msg-screen)` has been
`height: 100dvh` since TEN-1016 and dvh is the right unit; the break is that the CHAIN
under it stops. The lock reaches `.console-main > .b-component`, and TEN-1795/TEN-1819
put `.conv-layout` and `.conv-pane` between that wrapper and the screen — rungs the
`:has(.conv-layout)` block adds back ONLY above 721px. Below it the two new rungs are a
content-sized grid (`flex: 0 1 auto`, `min-height: auto`) and a plain block, so the pane
sizes to its MESSAGES: measured at 375x812 on /account/messages/thr-demo-1 with a
realistic history, `.msg-screen` was 3290px tall inside an 812px body, with
`.msg-thread` at `max-height: none` (the lock's own line, correct only when a parent
bounds it) never becoming a scroller at all — 3067px of content in a 3067px box.
And the body it overflows is `overflow: hidden`, which does not scroll for a READER
(programmatic scroll still moves it, which is why this measures clean and feels broken):
the composer sat ~2400px below the fold with no way to reach it. That is exactly the
defect TEN-1016 fixed, arriving again by a route the desktop fix did not cover.
So: the same four rungs the desktop block carries, at this width, for the one column the
stack picked. `min-height: 0` on every one of them, because a flex child is only bounded
if its parent is and the default `auto` hands the overflow back to the page — and the
`0 1 auto` / `1 1 auto` split on the component wrapper for the reason the desktop copy
states: a room mounts TWO components here and only the one drawing the screen may take
the slack. Scoped to `:has(.msg-screen)`, so the resting list keeps its page scroll. */
body.app:has(.msg-screen) .conv-layout { flex: 1 1 auto; min-height: 0; }
body.app:has(.msg-screen) .conv-pane {
display: flex; flex-direction: column; min-height: 0;
}
body.app:has(.msg-screen) .conv-pane > .b-component {
display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0;
}
body.app:has(.msg-screen) .conv-pane > .b-component:has(.msg-screen) { flex: 1 1 auto; }
}
/* THE BACK BUTTON IS A NARROW-WIDTH CONTROL (TEN-1817, Mark's UAT: "remove the back
button above the chat pane").
Above the breakpoint the rail is sitting beside this pane, so a Back button pointing at
a list already on screen is chrome saying what the page shows — which is what Mark was
looking at. Below it, the rule seven lines up hides the rail outright while a pane is
open and this control is the ONLY way back to the list; its own comment up there says
so. So it goes where it is redundant and stays where it is the door.
HIDDEN IN CSS AND STILL RENDERED, deliberately. It is a plain anchor to a real address:
a reader who reaches it another way — a narrow window widened, a zoom, a stylesheet that
did not load — still lands on their conversations. Deleting the markup would make the
breakpoint the thing that decides whether the way back exists at all.
SCOPED TO `.conv-pane`, WHICH IS NOT COSMETIC. `.msg-back-btn` is a shared class and the
My Lists composer (list-compose.plate.html) wears it on a single-column page with no rail
beside it — an unscoped rule here would have deleted that page's only way back to the
lists, on desktop, as a side effect of a conversations ruling. */
@media (min-width: 721px) {
.conv-pane .msg-back-btn { display: none; }
}
/* ── THE ktcalnav FAMILY (K34, TEN-1793) ─────────────────────────────────
A CALENDAR'S FRAME SELECTOR: the words that say which slice you are looking
at, made pressable, over an attached panel of the other slices.
ATTACHED, NOT FLOATING, and the construction is K15's own: the trigger and
the panel are ONE object with one outline and one shadow, the joining edge
borderless so the outline cannot double, SQUARE AT THE SEAM and ROUNDED AT
THE SILHOUETTE (Mark's corner rule of record).
THE PANEL IS POSITIONED AGAINST THE TRIGGER and its collision behaviour is
SPEC'D rather than left to a default: left edges align, excess grows RIGHT,
and at the container's right edge the panel flips to align its right edge
instead. There is no JS placement here — the panel is a positioned child of
the nav, so it cannot be left behind by a scroll (the chats/rooms off-screen
scar), and the flip is a `:last-child`-free structural rule on the nav's own
alignment class rather than a measurement.
HOVER AND SELECTED ARE SEPARATE CHANNELS (K15's channel law). Hover owns the
SURFACE — full accent ground, ink-on-primary — which is the wattage that tells
twelve cells apart under a pointer. Selected owns the ACCENT INK and a quiet
tint, and it survives hover because the two never write the same property.
TODAY IS ACCENT INK AT TEXT WEIGHT and never a ground: K29 allows one live
treatment per page and the grid below this control already spends it. */
.ktcalnav { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ktcalnav-step { flex: 0 0 auto; }
/* THE CURRENT SETTING IS THE PRESS TARGET. It reads as the label it replaced —
the words are the same weight and the same colour — and it earns its
affordance from the caret and the hover, not from a box that would put a
third button between the two chevrons. */
.ktcalnav-now {
display: inline-flex; align-items: center; gap: var(--b-space-1);
box-sizing: border-box; min-height: var(--control-h);
padding: 0 var(--b-space-2);
color: var(--text-primary); text-decoration: none;
border: 1px solid transparent; border-radius: var(--control-r);
background: transparent; cursor: pointer;
}
.ktcalnav-now:hover, .ktcalnav-now:focus-visible {
border-color: var(--border-strong); background: var(--surface-raised);
}
.ktcalnav-label { text-decoration: none; }
.ktcalnav-caret { font-size: var(--b-text-xs); color: var(--text-muted); }
.ktcalnav-now:hover .ktcalnav-caret { color: var(--text-primary); }
/* THE SEAM. Open, the trigger keeps the panel's outline and loses the edge they
share — one object, one line. */
.ktcalnav-open > .ktcalnav-now {
border-color: var(--role-primary); background: var(--surface-raised);
border-bottom-color: var(--border-subtle);
border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.ktcalnav-open > .ktcalnav-now .ktcalnav-caret { transform: scaleY(-1); }
/* THE PANEL. A positioned child of the nav rather than a body-level layer,
because this control is never inside a scrolling grid — it is a page's own
frame selector, at the top of the reading column — and a child cannot be
left behind by a scroll it does not have. */
.ktcalnav-panel {
position: absolute; top: 100%; left: 0; z-index: 30;
box-sizing: border-box; min-width: 14rem; padding: 6px;
background: var(--surface-raised); color: var(--text-primary);
border: 1px solid var(--border-strong); border-top: 0;
border-radius: 0 0 var(--control-r) var(--control-r);
box-shadow: var(--ktsel-lift);
}
/* THE FLIP. At the container's right edge the panel aligns its RIGHT edge
instead, which is the alignment clause spelled as a class a composer can set
rather than as a measurement a script has to take every frame. */
.ktcalnav-right > .ktcalnav-panel { left: auto; right: 0; }
/* THE PANEL'S OWN FRAME ROW — the year in month mode, the month in date mode,
with its own steps so reaching next March never means close, step, re-open. */
.ktcalnav-frame {
display: flex; align-items: center; gap: var(--b-space-1);
padding: 0 var(--b-space-1) var(--b-space-1);
}
.ktcalnav-ftitle {
flex: 1 1 auto; min-width: 0; text-align: center;
font-weight: var(--b-weight-bold); font-size: var(--b-text-sm);
}
/* THE TITLE'S PICK STATE (TEN-1868): a real anchor where the composer names a
month-selecting address (date mode only — classcalnav.go's classHubWeekNav).
It reads exactly as the inert span did at rest, inheriting `.ktcalnav-ftitle`
above and overriding only the browser's own link face — the affordance is
the hover/focus treatment, matching `.ktcalnav-fstep` beside it, not a new
colour that would tell a reader "this became a link" before they touch it. */
.ktcalnav-ftitle-pick { color: inherit; text-decoration: none; border-radius: var(--b-radius-sm); }
.ktcalnav-ftitle-pick:hover, .ktcalnav-ftitle-pick:focus-visible {
background: var(--role-primary); color: var(--ink-on-primary);
}
.ktcalnav-fstep {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 1.75rem; height: 1.75rem; border-radius: var(--b-radius-sm);
color: var(--text-muted); text-decoration: none;
}
.ktcalnav-fstep:hover, .ktcalnav-fstep:focus-visible {
background: var(--role-primary); color: var(--ink-on-primary);
}
.ktcalnav-x { flex: 0 0 auto; }
/* THE COLUMN HEADS — date mode only, and they are the grid's own dates
formatted rather than seven typed words (the standing rule on this train:
a hand-typed "MON" over a column of Tuesdays is the failure a schedule has). */
.ktcalnav-heads {
display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
padding: 0 var(--b-space-1) 2px;
font-family: var(--b-font-mono); font-size: var(--b-text-xs);
color: var(--text-muted); text-align: center;
}
/* THE GRID. Three across in month mode, seven in date mode — and the JS reads
its step off these very columns rather than assuming one, so the Down key
moves a row in both. */
.ktcalnav-grid { display: grid; gap: 2px; padding: 0 var(--b-space-1) var(--b-space-1); }
[data-ktcalnav-mode="month"] .ktcalnav-grid { grid-template-columns: repeat(3, 1fr); }
[data-ktcalnav-mode="date"] .ktcalnav-grid { grid-template-columns: repeat(7, 1fr); }
/* 44px TALL CELLS in month mode, the blessed row height; the date grid's cells
are square and smaller because 42 of them at 44px is a panel taller than the
page it opens over — a month calendar's cell is a different unit from a list
row, which is the K15 density clause read honestly. */
.ktcalnav-opt {
display: flex; align-items: center; justify-content: center;
box-sizing: border-box; min-height: 44px;
border-radius: var(--b-radius-sm);
color: var(--text-primary); text-decoration: none;
font-size: var(--b-text-sm); cursor: pointer;
}
[data-ktcalnav-mode="date"] .ktcalnav-opt {
min-height: 32px; font-family: var(--b-font-mono); font-size: var(--b-text-xs);
}
/* HOVER OWNS THE SURFACE. */
.ktcalnav-opt:hover, .ktcalnav-opt:focus-visible {
background: var(--role-primary); color: var(--ink-on-primary);
}
/* A CELL WITH NO ADDRESS IS DRAWN AND NOT PICKABLE (K11) — never absent, which
in a year grid would read as a rendering bug. */
.ktcalnav-off { color: var(--text-muted); opacity: 0.45; cursor: default; }
.ktcalnav-off:hover { background: transparent; color: var(--text-muted); }
/* THE UNPICKABLE CELL'S RULES COME FIRST, BEFORE THE SELECTED STATE'S, and the
order is load-bearing rather than tidy: `-off` and `-on` are mutually exclusive
by construction, but a stylesheet cannot know that — so TestKitHoverNeverOutranks
State reads `.ktcalnav-off:hover` as a hover rule that could beat the selected
state, and the fix it asks for is that the state's own hover arm be the LATER
rule at the same weight. See the arm below.
/* SELECTED OWNS THE INK, A QUIET TINT AND `aria-current`. */
.ktcalnav-on {
background: var(--role-primary-soft); color: var(--role-primary-ink);
font-weight: var(--b-weight-bold);
}
/* HOVERED-SELECTED IS THE HOVER SURFACE, AND IT IS DECLARED (the TEN-1702
construction, enforced by TestKitHoverNeverOutranksState). K15's channel law
says hover owns the surface and selected owns the ink — but "selected keeps its
ink" cannot be left to a rule that a hover rule of equal weight sits above, so
the state names its own hover arm at the SAME weight rather than relying on
source order between two families. The BOLD stays, which is the channel a hover
never writes, so a hovered current month is still legible AS current. */
.ktcalnav-on:hover, .ktcalnav-on:focus-visible {
background: var(--role-primary); color: var(--ink-on-primary);
}
/* TODAY, at text weight and never as a ground. */
.ktcalnav-today { text-decoration: underline; text-underline-offset: 3px; }
/* A DAY OUTSIDE THE FRAME still works and still says it is not this month. */
.ktcalnav-muted { color: var(--text-muted); }
/* ── THE ROW RUNG, r2 (TEN-1793: Mark's class01–class05 annotations) ──────
The entity card's LIST-ROW rung grew four additive slots. Every one of them
is a data-presence conditional in the plate, so a mount that passes none of
them renders exactly the row it always did — which is what let this land
without touching the session lists, the venue listing or the storefront.
THE ROW IS STILL ONE WRAPPING FLEX LINE. None of these introduce a second
layout: the ident is a flex pair where the lead used to sit, the lines and
the pills stack INSIDE the middle cell, and the tails stack inside the tail
cell. That is what keeps the row's columns aligned down a long list, which is
the only thing a listing does that a set of cards does not. */
/* class05 — THE FOLLOWER COUNT, AFTER THE TITLE. A fact, not a control: it sits
UNDER the row's stretched lead, so a press anywhere on it opens the class. The
glyph is 14px rather than the kit's 18 because it rides a line of 14px text
and an icon taller than its line is a badge. */
.ktrow-ident { display: flex; align-items: center; gap: 8px; width: 170px; }
.ktrow-ident > .ktrow-lead { width: auto; min-width: 0; }
.ktrow-count {
display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto;
color: var(--text-muted); font-size: var(--b-text-xs);
font-family: var(--b-font-mono);
}
.ktrow-cic { width: 14px; height: 14px; }
/* class01 — VENUE THEN RECURRENCE, AS LINES UNDER THE TITLE. Two facts of
different kinds, so two lines: a bullet-joined sentence made a reader parse
prose to find a place. */
.ktrow-mid:has(> .ktrow-line) { display: flex; flex-direction: column; gap: 2px; }
.ktrow-line { display: block; min-width: 0; }
/* THE FIRST LINE IS THE PLACE and it carries the row's ink, because it is the
fact the ticket moved to the top. The rest stay the muted middle. */
.ktrow-line:first-child { color: var(--text-primary); }
/* class04 — READONLY TAG PILLS IN THE CENTRE COLUMN, and the worded overflow.
The pills are the kit's own `.ktpill` at a listing's density — no hover, no
press, because nothing on this row edits a class. */
.ktrow-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.ktrow-pills > .ktpill {
height: 1.35rem; padding: 0 9px; cursor: default;
font-weight: var(--b-weight-normal);
}
/* "and 3 more…" — a WORD, with the full set in its title. It is the same answer
K32's day cell gives an overfull day: the row does not grow, it says so. */
.ktrow-pmore {
align-self: center; color: var(--text-muted);
font-size: var(--b-text-xs); cursor: help;
}
/* class02 — THE RIGHT COLUMN STACKS NEXT OVER ENDS. Two dates a reader compares
belong in one column in one grammar; they used to be a tail and a chip. */
.ktrow-tails {
display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
margin-left: auto; text-align: right;
}
/* THE 90s UNDERLINE IS GONE FROM THE CARD FAMILY (TEN-1793, Mark's last
annotation: "remove the title underline on hover — sweep the card family, not
one card").
THE ARGUMENT IS K15's CHANNEL LAW, not taste. A card whose lead is a link
already answers the pointer with its own SURFACE — `.ktrow-linked:hover`
repaints the whole card and moves its border — and `text-decoration` on top of
that is a SECOND affordance for one act, drawn in the one channel that also
means "this is prose you can click". The underline is right for a link inside a
sentence, which is why `.link` keeps it everywhere else; it is wrong for the
title of an object, which is a surface.
IT IS THE FAMILY AND NOT THE ROW. The row's lead, the row's eyebrow and the
hub rung's eyebrow are the three anchors a kit CARD wears as its own identity,
and all three lose it — a sweep that fixed the listing and left the hub would
be the drift this rule exists to close. Act links (`.ktrow-link`,
`.ktpcard-go`) and mentions inside prose keep theirs: they are not titles. */
.ktrow-lead:hover, .ktrow-lead:focus-visible,
.ktrow-eyebrow .link:hover, .ktrow-eyebrow .link:focus-visible,
.kthub-eyebrow:hover, .kthub-eyebrow:focus-visible { text-decoration: none; }
/* ── THE +EVENT CHOOSER'S GRID (TEN-1793: "2 columns, and make it work on
mobile too") ───────────────────────────────────────────────────────────
The chooser's cards were a vertical list at every width. Four large cards in
one column is a screenful of scrolling to compare four things, which is the
one job a chooser has.
TWO COLUMNS AT EVERY WIDTH, INCLUDING THE PHONE, and the ticket's own reason:
these are large press targets, so two across at 380px still clears the 44px
floor comfortably — a card here is ~170px wide and several lines tall. What a
narrow card cannot carry is the PARAGRAPH and the "e.g." line; those are the
parts that get dropped below the fold of a reading width, not the card.
THE EXAMPLES LINE GOES FIRST, THEN THE DESCRIPTION. Both are declared data
(eventkind's chooser records) and both are illustrations of a label that is
still fully legible — which is what makes them the honest things to drop,
rather than truncating the sentence that says what picking commits you to. */
.ktchoices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--b-space-3); }
.ktchoices > .ktchoice { min-width: 0; }
@media (max-width: 560px) {
.ktchoices { gap: var(--b-space-2); }
.ktchoices > .ktchoice { padding: var(--b-space-3); }
.ktchoices .ktchoice-eg { display: none; }
}
/* AT PHONE WIDTH THE SENTENCE TRUNCATES RATHER THAN VANISHING, which is the
ticket's own word for it. Three lines is enough to reach the verb in every one
of the four declared paragraphs; the clamp is on the BODY and never on the
title, because a chooser card whose name was cut would be a card you cannot
identify. The card stays well over the 44px floor — it is a title plus three
lines — so the two-column grid holds at 380px. */
@media (max-width: 420px) {
.ktchoices .ktchoice-body {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
}
/* THE CONSOLE SCHEDULE'S ROW IS THE WAY IN (TEN-1812, Sched02 + Sched03), and
this replaces the two admin text links that used to sit in the trailing slot.
`.sfev-adm` is gone with them. It styled "Class" and "Session" at the link
tier, which was the right tier for two navigations and the wrong CONTROL: the
row was 900 pixels wide and pressable through about sixty of them, and a text
link is what the hover-underline sweep removed from every other member of this
family. So the NAME is the one anchor and this stretches it over the card —
TEN-1602's pattern, spelled the way `.ktrow-linked` spells it one family over,
because a reader who knows one list in this book knows them all.
ONLY A ROW WITH AN ADDRESS GETS ANY OF IT. `.sfev-row-linked` is the plate's
marker for "this row has a way in"; a row whose name is a `
` gets no
overlay and no hover, because a row that lights up under the pointer and does
nothing when pressed is the same broken promise the kit row's rule names.
AND NOTHING IS LIFTED ABOVE THE OVERLAY, which is Mark's "chips not lifted".
After Sched03 the admin row holds no second address — the occupancy and the
facts beside it are FACTS, and a fact that intercepted the press would leave
the card with dead patches, the exact defect this rule exists to remove. */
.sfev-row-linked { position: relative; transition: background-color 0.12s ease, border-color 0.12s ease; }
.sfev-row-linked:hover { background: var(--hover); border-color: var(--border-strong); }
.sfev-row-linked .sfev-lead[href]::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* The focus ring belongs to the ROW once the row is the target: a name-width
lead with a card-wide hit area would otherwise outline a fraction of what a
keyboard press activates. The kit row's own reasoning, unchanged. */
.sfev-row-linked:focus-within { box-shadow: 0 0 0 2px var(--role-primary); }
.sfev-row-linked .sfev-lead[href]:focus-visible { outline: none; }
/* THE LEAD IS NOT UNDERLINED AND NEVER WAS A `.link`. It is a title that happens
to be pressable — the row's hover is what says so, which is the whole point of
moving off the text-link tier. It keeps the name's own weight so a linked row
and an unlinked one read identically at rest. */
.sfev-lead { color: inherit; text-decoration: none; font-weight: var(--b-weight-semibold); }
/* A cancelled row that is still linked keeps its dimming: hover is a pointer's
position, never a change of state. */
.sfev-row-off.sfev-row-linked:hover { border-color: var(--border-subtle); }
/* THE ADMIN ROW'S OCCUPANCY COLUMN (TEN-1812, Sched04). It is the same clause the
public sub-line composes, moved to the row's right boundary so that a fortnight
of "3 of 14 spots left" is a column a reader runs their eye down rather than the
tail of a sentence whose length varies with the venue's name. Tabular figures,
because a column of numbers that shifts by a digit is not a column. */
.sfev-avail {
flex: none; font-size: var(--b-text-sm); color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
/* THE BOOKING STAGE STACKS ABOVE IT (TEN-1812, Sched05). Two facts at the row's
right boundary, so the boundary becomes a column of two lines rather than a row of
two phrases: `.sfev-end` is a flex line everywhere else on this page, and the admin
row is the one dressing that puts two stacked readings in it.
THE STACK IS END-ALIGNED so both lines hang off the row's right edge and a reader
scanning a fortnight reads two straight columns. `column` only where a stage is
actually present, via `:has()`, which keeps every other consumer of `.sfev-end` —
the public Book button, the booked pill, the Full fact — on the flex line it has
always been.
THE STAGE IS NOT A STATUS COLOUR. It is grey like the occupancy under it: the four
stages are all ordinary facts about a clock, and tinting "Closed" red would make a
class that simply stopped taking bookings read as a failure. K29's one live
treatment is the in-progress band's and this is not it. */
.sfev-end:has(.sfev-stage) { flex-direction: column; align-items: flex-end; gap: 2px; }
.sfev-stage {
flex: none; font-size: var(--b-text-sm); font-weight: var(--b-weight-semibold);
color: var(--text-muted);
}
/* THE CONSOLE SCHEDULE'S WRAPPER (TEN-1793). One block, no styling of the
schedule itself: the bands, rows, head and calendar inside it are sportscore's
own `sfev-*` and `ktcal-*` families and this cover already skins them — a rule
here that reached into them would be the console restyling a shared family,
which is the thing K32's "calendars compose rungs, they never restyle them"
forbids one component along. */
.orgc-schedule { margin-top: var(--b-space-4); }
/* ── PIN, CATEGORIES AND THE SIX ORDERINGS (TEN-1795 PR 5b) ─────────────────
The rail gained three things: a sort control under the search box, a strip of
per-row controls, and the reader's own tags as chips.
THE ROW CONTROLS SIT UNDER THE ROW, not inside it, and that is a constraint
rather than a layout choice: the row is an anchor, a form cannot live inside
one, and an anchor inside one is unclickable. Same reason the avatar cluster
leads the wrap. */
.conv-sort { display: flex; align-items: center; gap: var(--b-space-1); flex-wrap: wrap; }
.conv-sort .acct-label { flex: none; }
.conv-sort .kit-select { flex: 1 1 8rem; min-width: 0; }
.conv-sort-btn { flex: none; }
/* THE SORT BUTTON RETIRES WHEN THE LIVE REORDER IS ACTUALLY BOUND (TEN-1817) — the class
comes from listfilter.js, never from the server, which is wireStaff's rule and the reason
it exists: a server-rendered class would take the submit off a page whose script never
ran and leave the control with no working arm at all, the fallback broken by the
enhancement's own styling. */
.conv-sortlive .conv-sort-btn { display: none; }
/* The standing sentence under the control. Quiet, and always there: a reader who
pins something and then sorts by name has every right to wonder whether the pin
still means anything, and the answer should not depend on trying it. */
.conv-sort-note { margin: 0 0 var(--b-space-1); color: var(--text-muted); }
/* ── THE ROW'S ONE CONTROL (TEN-1817) ──────────────────────────────────────
5b put a chip strip, an activity line, a pin star and a Tags button UNDER every row.
Mark's finding was that the rail had become a list of cards, and the cure is the same
one K27 applies to a listing head: everything that is not identity travels, and one
ellipsis stands where two controls were.
THE CONTROL SITS ON THE ROW'S OWN LINE NOW, not under it. It is one 28px target rather
than a wrapping strip, so it fits beside the timestamp — which is also what stops the
rail from being a list where every entry is two rows tall and half as many
conversations fit on a screen.
IT IS STILL OUTSIDE THE ROW'S ANCHOR, and that is a constraint rather than a choice:
the row is an anchor, a form cannot live inside one and an anchor inside one is
unclickable. Same reason the avatar cluster leads the wrap. */
/* ── AND ON DESKTOP IT GIVES UP ITS COLUMN (TEN-1819, Mark's UAT) ──────────
The ellipsis had a reserved seat beside the timestamp on every row, which is a
column of chrome down a third of the screen paid for by every row whether or not
anybody ever presses one. The corner shows the STAMP at rest; the ellipsis fades
in OVER that corner on hover — and on `:focus-within`, which is not a nicety: a
control that only appears under a pointer is a control a keyboard cannot reach,
and a Tab into the menu that revealed nothing would be K12's worst case.
THE STAMP FADES AS THE ELLIPSIS ARRIVES, so the two never occupy the corner at
once. The PIP does not — it sits on its own line underneath and stays visible the
whole time, because "this one owes you a look" is the fact the list exists for.
AND IT STAYS OPEN WHEN IT IS OPEN. `:has(.conv-menu-box:checked)` holds the
ellipsis visible while its own panel is up, so a pointer that drifts off the row
to reach an item does not delete the control it came from. Guarded, with
`:focus-within` as the fallback where `:has()` is missing — clicking a label
focuses its checkbox, so the degraded path is the same behaviour by a different
route rather than no behaviour.
MOBILE KEEPS THE PERSISTENT BUTTON, and that is mandatory rather than a taste:
TOUCH HAS NO HOVER. A control that only exists on hover does not exist on a
phone. It is also free there — the media query below puts the rail at full width,
where a 28px target at the row's edge costs nothing. */
.conv-row-acts { display: flex; align-items: center; flex: none; padding-right: var(--b-space-1); }
@media (min-width: 721px) {
/* `.msg-row-wrap >` IS LOAD-BEARING HERE, and it was measured: the whole-row-press
block up in the .msg-row family lifts this element above the stretched link with
`.msg-row-wrap > .conv-row-acts { position: relative; z-index: 1 }`, which is two
classes. A bare `.conv-row-acts` here is one, and a media query adds no
specificity — so the corner rule lost, the ellipsis went transparent but kept its
seat, and the column it was supposed to give up was still being paid for on every
row. Invisible in a diff and invisible on screen; only a measurement found it. */
.msg-row-wrap > .conv-row-acts {
position: absolute; top: 2px; right: 2px; padding-right: 0; z-index: 2;
opacity: 0; pointer-events: none; transition: opacity 120ms ease;
}
.msg-row-wrap:hover > .conv-row-acts,
.msg-row-wrap:focus-within > .conv-row-acts { opacity: 1; pointer-events: auto; }
.msg-row-wrap:hover .conv-row-when,
.msg-row-wrap:focus-within .conv-row-when { opacity: 0; }
.conv-row-when { transition: opacity 120ms ease; }
@supports selector(:has(*)) {
.msg-row-wrap:has(.conv-menu-box:checked) > .conv-row-acts { opacity: 1; pointer-events: auto; }
.msg-row-wrap:has(.conv-menu-box:checked) .conv-row-when { opacity: 0; }
}
}
/* THE MENU. The avatar menu's construction, one scale down: a checkbox nobody sees, a
label that is the button, and a panel positioned against the wrap.
THE PANEL IS A POSITIONED CHILD and not a body-level layer, which is the opposite of
K15's choice for a dropdown and for the reason K34's own note gives: `.conv-rail` is a
scrolling column, and a FIXED panel measured once would be left behind by the very next
scroll (the chats/rooms off-screen scar). A child scrolls with what it belongs to. The
cost is that the rail's `overflow-y: auto` can clip it, which is what the flip below is
for — the panel opens toward the rail's interior rather than off its edge. */
.conv-menu { position: relative; display: inline-flex; flex: none; }
.conv-menu-box { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.conv-menu-btn {
padding: 0 var(--b-space-1); line-height: 1; min-height: 24px;
color: var(--text-muted); cursor: pointer;
}
.conv-menu-btn:hover { color: var(--text-primary); }
/* The ring is painted from the checkbox's focus, because the checkbox is what takes it. */
.conv-menu-box:focus-visible + .conv-menu-btn {
outline: var(--b-ring-w) solid var(--b-accent); outline-offset: 2px;
}
.conv-menu-panel { display: none; }
.conv-menu-box:checked ~ .conv-menu-panel {
display: flex; flex-direction: column;
/* RIGHT-ALIGNED AND OPENING DOWNWARD, spec'd rather than left to a default (K15's
collision clause, applied to this family's own geometry). The trigger is at the row's
right edge, so a panel growing rightward would leave the rail; it grows LEFT. */
position: absolute; top: 100%; right: 0; z-index: 30;
box-sizing: border-box; min-width: 12rem; padding: 4px;
background: var(--surface-raised); color: var(--text-primary);
border: var(--b-border-w) solid var(--border-strong); border-radius: var(--control-r);
box-shadow: var(--ktsel-lift);
}
/* A row near the FOOT of the rail opens upward, because a panel that opened down there
would be clipped by the rail's own overflow (which the viewport lock turns on whenever a
pane is open). Structural rather than measured: a script measuring every frame is what
K34 refused, and the last few rows of a list are exactly where the problem is.
`-n+4` AND NOT `-n+3` FOR THE LAST THREE ROWS, because `:nth-last-child` counts among ALL
of `.msg-inbox`'s children and the none-line ("No conversation matches…") is rendered
unconditionally after the last row. So the final row is the second-last CHILD, and the
obvious `-n+3` reaches two rows rather than three. Counting siblings that are not rows is
the trap this comment exists to stop the next reader re-walking into. */
.msg-row-wrap:nth-last-child(-n+4) .conv-menu-box:checked ~ .conv-menu-panel {
top: auto; bottom: 100%;
}
/* EVERY ROW IS AN ANCHOR OR A SUBMIT, never a `