/* m-s5.css (m12, 2026-10-20): the PHONE version of the r11 desktop design. Phone only: every rule sits
inside @media (max-width: 767px); desktop must stay pixel-identical. Spec: tools/mob/SPEC-M.md.
#s5 "So I emailed them about it" on the phone (owner "s5"). The desktop's two email cards (the owner's
pick C) stack in one column, in reading order:
the base head (no pen: it continues "investigation")
24 my email, whole (a real message: avatar, sender, "to …", the time, the subject, the body)
8 the source line (it belongs under MY email, owner rule 6)
24 "3 days later": the label at the top of a 1px slate-500 tick at the card's text edge; the tick
runs on down 16px under the label and meets the reply's top edge (round 2)
0 the registrar's reply, whole, with its three attachments (24862111.pdf in gold)
Each card ends in ONE control, 44px tall: "Read the Swedish original" (the card already shows the whole
English email, so on the phone the reading panel's value is the original). m-s5.js opens the panel as
a phone sheet (full height, a 56px bar with the language switch and a 44px close, the email scrolling
inside); the sheet's rules are the second half of this file. Nothing here is shown without m-s5.js
except the cards themselves (the control needs .m-s5-live). */
@media (max-width: 767px) {
/* ---------- The stack: my email, its source, the connector, the reply ----------
DOM order is card, connector, reply, source (the desktop grid places the source under my card);
on the phone the column puts it there with `order`. */
.r11-s5 > * { margin: 0; }
.r11-s5-row {
display: flex;
flex-direction: column;
align-items: stretch;
min-width: 0;
max-width: 560px; /* an email is a narrow document: from ~600px wide (an iPad mini held
upright) the cards stop at 560, as the desktop's stacked row (520) */
}
.r11-s5-row > .r11-s5-card { order: 1; }
.r11-s5-row > .r11-s5-src { order: 2; margin-top: var(--m-cap); }
/* The source line's measure (round 5, S5-1): 27em, 324px at 12px (about 55 characters, a footnote's
measure). From 375px wide it then reads one clause a line at every phone width: "Source: emails
between Majd Jamal and Örebro kommun," / "27 and 30 September 2026, translated from Swedish." /
"Email addresses are left out." (Chrome, web fonts: the first line is 321.1px, the second with "Email"
328.3). At 390-440 it read "…Swedish. Email / addresses…" and at 440-767 "…27 and / 30 September…".
text-wrap: balance was tried first: it splits "Örebro / kommun" and never ends a line at "Swedish." */
.r11-s5-row > .r11-s5-src { max-width: 27em; }
.r11-s5-row > .r11-s5-link { order: 3; }
.r11-s5-row > .r11-s5-card--reply { order: 4; }
/* ---------- The card: a calm mail client's message ---------- */
.r11-s5-card { min-width: 0; }
.r11-s5-card > * { margin: 0; }
/* Head: the avatar beside three short lines (sender / "to …" / the time). At 312px the time cannot
stay on the right without wrapping "Örebro kommun · Registrator", so it goes under "to …". */
.r11-s5-card > .r11-s5-head {
display: grid;
grid-template-columns: 36px minmax(0, 1fr);
column-gap: var(--m-3);
align-items: start;
}
.r11-s5-card .r11-s5-av {
grid-row: 1 / span 2;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 36px;
height: 36px;
margin-top: 1px; /* centred on the sender + "to …" pair (38px) */
border-radius: 50%;
background: var(--slate-900);
font: 600 12px/1 var(--sans);
letter-spacing: .02em;
color: var(--white);
}
.r11-s5-card .r11-s5-av--ok {
background: #F8F0DB;
border: 1px solid var(--tile-gold);
color: var(--gold-lo);
}
.r11-s5-card .r11-s5-from {
grid-column: 2;
min-width: 0;
margin: 0;
font: 400 15px/20px var(--sans);
color: var(--slate-900);
}
.r11-s5-card .r11-s5-from b { font-weight: 600; }
.r11-s5-card .r11-s5-dim { color: var(--ink-dim); }
.r11-s5-card .r11-s5-to,
.r11-s5-card .r11-s5-time {
display: block;
font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
color: var(--ink-dim);
}
.r11-s5-card .r11-s5-to { margin-top: 0; }
.r11-s5-card .r11-s5-time {
grid-column: 2;
white-space: nowrap;
}
/* Subject, a hairline, the body. */
.r11-s5-card > .r11-s5-subj {
margin-top: var(--m-4);
font: 600 17px/23px var(--sans);
letter-spacing: -.008em;
text-wrap: balance;
color: var(--slate-900);
}
.r11-s5-card > .r11-s5-ex {
margin-top: var(--m-3);
padding-top: var(--m-4);
border-top: 1px solid var(--slate-100);
font: 400 var(--m-small)/var(--m-small-lh) var(--sans);
text-wrap: pretty;
color: var(--slate-800);
}
.r11-s5-card .r11-s5-ex > * { margin: 0; }
.r11-s5-card .r11-s5-ex > * + * { margin-top: var(--m-3); }
/* The invoice lists: on the phone their phone-only copies (ul.r11-s5-inv.ph, just before each desktop
list in the fragment) show instead, each row broken once after the date with a , so the three
amounts line up on the second lines; a inside the desktop's own text would shift its glyphs by
a subpixel and break the desktop's pixel identity. KEEP THE TWO LISTS' TEXT THE SAME. */
.r11-s5 .r11-s5-inv:not(.ph) { display: none; }
/* "paid 2024-01-02," never breaks inside (at 320 the date split at its hyphen): a row too long for its
first line breaks after the invoice number instead (phone-only spans in the .ph lists). */
.r11-s5 .m-s5-nw { white-space: nowrap; }
/* Wide phones (round 4): from 560px (a foldable, an iPad mini held upright at 744) the longest row fits
one line with room to spare (measured in Chrome: "24862111, paid 2023-12-15, −882,960 kr (credit note)"
354px at 15 in a 429px card row; the Swedish "…–882 960 kr (kreditfaktura)" 406px at 16 in a 466px
sheet row), so the forced break left half the panel empty. There the desktop's own one-line rows show,
as on the desktop; the phone copies stay below 560, where the break lines the amounts up. */
@media (min-width: 560px) {
.r11-s5 .r11-s5-inv:not(.ph) { display: block; }
.r11-s5 .r11-s5-inv.ph { display: none; }
}
/* The three invoices: a quiet slate-50 panel at the body's own size (15/22: a list inside a card uses the
card's body size; round 2, was 14/21). Proportional figures: Schibsted's tabular set also spaces the
commas and colons, which reads as gaps. */
.r11-s5-card .r11-s5-ex > .r11-s5-inv {
padding: 10px 12px;
border-radius: 8px;
background: var(--slate-50);
font-size: var(--m-small);
line-height: 22px;
}
.r11-s5-card .r11-s5-inv li { padding-left: 1.15em; }
.r11-s5-card .r11-s5-inv li::before { left: 0; }
.r11-s5-card .r11-s5-inv li + li { margin-top: var(--m-1); }
/* Under 340px (round 5, S5-1): the longest first line, "24867828, paid 2024-01-02,", needs 194.4px and the
row had 188.8 at 320, so the third row alone broke twice ("24867828, / paid 2024-01-02, / 1,014,000 kr")
and its amount fell a line below the other two. 8px sides give 196.8: every row breaks once, after the
date, as everywhere else. */
@media (max-width: 339px) {
.r11-s5-card .r11-s5-ex > .r11-s5-inv { padding-left: var(--m-2); padding-right: var(--m-2); }
}
/* Attachments: chips that wrap, a PDF mark in each; the flagged credit note in gold. Not links, and they
never answer a tap (no highlight, no pressed state, the arrow cursor): see the end of this block. */
.r11-s5-card > .r11-s5-files {
display: flex;
flex-wrap: wrap;
gap: var(--m-2);
margin-top: var(--m-4);
padding: 0;
list-style: none;
}
.r11-s5-card .r11-s5-file {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 9px;
border: 1px solid var(--slate-200);
border-radius: 6px;
background: var(--white);
font: 600 12px/16px var(--sans);
white-space: nowrap;
color: var(--slate-800);
}
.r11-s5-card .r11-s5-file.is-flag {
border-color: var(--tile-gold);
background: var(--m-wash); /* the page's one flagged wash, #F6F0E0 (round 4, S5-2; was #FBF5E6) */
color: var(--gold-lo);
}
.r11-s5-card .r11-s5-pdf {
flex: none;
fill: none;
stroke: var(--slate-700);
stroke-width: 1.1;
stroke-linejoin: round;
}
.r11-s5-card .r11-s5-file.is-flag .r11-s5-pdf { stroke: var(--gold); }
.r11-s5-file {
cursor: default;
-webkit-tap-highlight-color: transparent;
}
/* ---------- The card's one control: "Read the Swedish original" ----------
A full-width row 44px tall at the card's foot (the card itself is not a link). Its 44px box is
tucked 12px into the card's bottom padding, so the label sits as far from the last line above as
from the card's edge below. Hidden until m-s5.js runs (.m-s5-live): without it, it would do nothing. */
.r11-s5-card > .r11-s5-foot {
display: none;
margin: var(--m-2) 0 -12px;
}
.r11-s5.m-s5-live .r11-s5-card > .r11-s5-foot { display: block; }
/* The label. The button's markup stays exactly the desktop's ("Enlarge" + the icon; an extra child,
even a hidden one, showed up in the desktop pixel check as a re-rasterised word). On the phone "Enlarge"
is set at font-size 0 and the phone label is generated content (its alt text is empty, so it is not
read twice); m-s5.js gives the button the same words as its aria-label. Keep the two strings equal. */
.r11-s5-card .r11-s5-open {
display: flex;
align-items: center;
gap: 0;
box-sizing: border-box;
width: 100%;
min-height: var(--m-tap);
margin: 0;
padding: 0;
border: 0;
border-radius: 6px;
background: none;
font: 600 0/0 var(--sans);
text-align: left;
color: var(--slate-900);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.r11-s5-card .r11-s5-open::before {
content: "Read the Swedish original";
content: "Read the Swedish original" / "";
font: 600 var(--m-small)/20px var(--sans); /* = the sender line, 15/20 600: no 14px in a 15px card */
}
.r11-s5-card .r11-s5-open-i {
flex: none;
margin-left: var(--m-2);
overflow: visible;
}
.r11-s5-card .r11-s5-open-i path {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Press (and hover where there is one): the page's one press voice for a text action, slate-900 with a
1px underline at offset 3, as the desktop's polish r3 and s2's link (round 4, S5-2; it turned gold-lo:
gold marks the finding only). The underline is drawn on the generated label itself, the box that holds
the 15px words (the button's own font is 0); the icon keeps currentColor. Instant, no transition (round
5, S5-2: the old "transition: color .15s" on the button is gone; rest, press and hover are all
slate-900, so it animated nothing, and SPEC-M keeps colour transitions inside (hover: hover)). */
.r11-s5-card .r11-s5-open:active { color: var(--slate-900); }
.r11-s5-card .r11-s5-open:active::before {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
text-underline-offset: 3px;
}
.r11-s5-card .r11-s5-open:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; }
@media (hover: hover) {
.r11-s5-card .r11-s5-open:hover { color: var(--slate-900); }
.r11-s5-card .r11-s5-open:hover::before {
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-decoration-color: currentColor;
text-underline-offset: 3px;
}
}
/* ---------- "3 days later": the thread into the reply ----------
24px under my email's source line (so the source stays with my email), the label at the top of a 1px
slate-500 tick at the card's text edge (border 1 + padding 20); the tick runs on down and meets the
reply card's top edge (the connector's box ends exactly where the reply begins): time passes, then
the reply. Round 2; it was a 24px tick floating 16px from both neighbours. */
.r11-s5-row > .r11-s5-link {
display: flex;
align-items: flex-start;
gap: var(--m-3);
margin: var(--m-5) 0 0;
padding: 0 0 0 calc(1px + var(--m-card-pad));
}
.r11-s5-link::before {
content: "";
flex: none;
align-self: stretch; /* from the label's cap top (4px into its 16px line, measured) down
through the 16 under it to the reply's top edge: 28px */
width: 1px;
margin-top: var(--m-1);
background: var(--slate-500);
}
.r11-s5-link-t {
padding-bottom: var(--m-4); /* inside the flex line, so the stretched tick runs through it */
font: var(--m-label-font); /* the page's one label voice, IBM Plex Mono 500 11/16 .1em (round 3,
B1 / S5-1; = the desktop's .r11-s5-link-t since polish r1) */
letter-spacing: var(--m-label-track);
text-transform: uppercase;
white-space: nowrap;
color: var(--slate-800);
}
.r11-s5-link-a { display: none; }
}
/* ===================================================================================================
The reading panel as a PHONE SHEET (opened by m-s5.js; r11-s5.css draws the desktop panel and its FLIP)
Full height (100dvh), the safe areas padded, a 56px bar (the language switch at the gutter, a 44px close
at the right), the email scrolling inside under it (overscroll contained). The bar's "Sent · date" line
cannot share 402px with the switch and the close, so it leaves the bar and becomes the sender row's
third line (round 2, as the card's time): the bar becomes `display: contents` and the scroller
(.r11-s5-inner) lays everything out in a grid, the switch, the close and a white backing pinned (sticky)
on top, the email below. Motion (m-s5.js): the ground, the bar and the email are opaque at once; only
the email (the date line and the document) rises 8px into place (round 4), and fades out before the
dialog closes. */
@media (max-width: 767px) {
.r11-s5-dlg {
height: 100%;
height: 100dvh; /* the visible height, whatever Safari's toolbars do */
-webkit-tap-highlight-color: transparent; /* the dialog listens for clicks: iOS would flash it grey on
any tap inside (text, chips); its controls have :active */
}
.r11-s5-dlg .r11-s5-scrim { display: none; }
.r11-s5-panel {
--r11-s5-pad: var(--m-gutter);
inset: 0;
width: 100%;
height: 100%;
max-height: none;
margin: 0;
/* the safe areas; from ~690px wide the sheet's content keeps a 640px column, centred */
padding: env(safe-area-inset-top, 0px)
max(env(safe-area-inset-right, 0px), calc((100% - 640px) / 2))
0
max(env(safe-area-inset-left, 0px), calc((100% - 640px) / 2));
border: 0;
border-radius: 0;
box-shadow: none;
}
.r11-s5-inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: 56px auto 1fr;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
/* The bar's white backing and hairline: pinned, under the switch and the close. */
.r11-s5-inner::before {
content: "";
grid-area: 1 / 1 / 4 / 3;
align-self: start;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
box-sizing: border-box;
height: 56px;
border-bottom: 1px solid var(--slate-200);
background: var(--white);
}
.r11-s5-bar { display: contents; }
/* The pinned items span every row, so their sticky range is the whole document. */
.r11-s5-langs {
grid-area: 1 / 1 / 4 / 2;
align-self: start;
justify-self: start;
position: -webkit-sticky;
position: sticky;
top: 9px; /* a 38px switch centred in the 56px bar */
z-index: 2;
margin: 9px 0 0 var(--m-gutter);
}
.r11-s5-lang {
position: relative;
height: 32px;
padding: 0 12px;
font: 600 13px/32px var(--sans);
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.r11-s5-lang::after { /* a 44px tall hit area on a 32px drawn segment */
content: "";
position: absolute;
inset: -7px 0;
}
.r11-s5-lang:hover { color: var(--ink-dim); }
.r11-s5-lang[aria-pressed="true"],
.r11-s5-lang:active { color: var(--slate-900); }
.r11-s5-lang:focus-visible { outline: 2px solid var(--slate-900); outline-offset: 2px; }
.r11-s5-x {
grid-area: 1 / 2 / 4 / 3;
align-self: start;
position: -webkit-sticky;
position: sticky;
top: 6px;
z-index: 2;
width: var(--m-tap);
height: var(--m-tap);
margin: 6px calc(var(--m-gutter) - 15px) 0 var(--m-3); /* the glyph's right edge on the gutter */
border-radius: 10px;
-webkit-tap-highlight-color: transparent;
touch-action: manipulation;
}
.r11-s5-x svg { width: 16px; height: 16px; }
.r11-s5-x:hover { background: transparent; color: var(--slate-800); }
.r11-s5-x:active { background: var(--slate-100); color: var(--slate-900); }
.r11-s5-x:focus-visible { outline: 2px solid var(--slate-900); outline-offset: -2px; }
/* ---------- The email: the card's anatomy, one size up ----------
As in the card: the sender row (avatar; the sender; "to …"; the time), 16, the subject, a slate-100
hairline, the body; then the attachments as the card's chips, and the note. In the markup the subject
comes first and the "Sent · date" line sits in the bar: on the phone each language version is a flex
column with the sender row moved first (order -1), and the bar's "Sent · date" line (it cannot share
the 56px bar with the switch and the close) is set as the sender row's third line, where the card has
its time, in the card's 13/18 dim style. It is laid over the head's reserved third line in the
scroller's grid (the sender row is kept to one line, so the two always agree), and scrolls with it. */
.r11-s5-scroll {
grid-area: 3 / 1 / 4 / 3;
min-height: auto; /* the row grows with the email, so its bottom padding (48 + the safe
area) stays under the last line when it scrolls (was 0: the email
overflowed its box and ended flush with the screen's edge) */
overflow: visible;
padding: var(--m-5) var(--m-gutter) calc(var(--m-7) + env(safe-area-inset-bottom, 0px));
}
.r11-s5-v { display: flex; flex-direction: column; }
.r11-s5-dlg .r11-s5-v > .r11-s5-head {
order: -1;
grid-template-columns: 36px minmax(0, 1fr);
align-items: start;
margin-top: 0;
padding-bottom: var(--m-meta-lh); /* the third line: the "Sent · date" line lies here */
}
.r11-s5-dlg .r11-s5-av { width: 36px; height: 36px; margin-top: 1px; font-size: 12px; }
.r11-s5-dlg .r11-s5-from {
font-size: 15px;
line-height: 20px;
white-space: nowrap; /* one line, so the date line below always lands right */
overflow: hidden;
text-overflow: ellipsis;
}
.r11-s5-dlg .r11-s5-to { margin-top: 0; font-size: var(--m-meta); line-height: var(--m-meta-lh); }
.r11-s5-bar > .r11-s5-meta {
grid-area: 3 / 1 / 4 / 3;
align-self: start;
display: block;
margin: calc(var(--m-5) + 20px + var(--m-meta-lh)) 0 0; /* scroller's top + sender + "to …" */
padding: 0 var(--m-gutter) 0 calc(var(--m-gutter) + 36px + var(--m-3));
font: 400 var(--m-meta)/var(--m-meta-lh) var(--sans);
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
color: var(--ink-dim);
pointer-events: none;
}
.r11-s5-bar > .r11-s5-meta time { letter-spacing: 0; color: inherit; }
.r11-s5-bar > .r11-s5-meta .r11-s5-kind::after { content: " · "; content: " · " / ""; }
.r11-s5-v > .r11-s5-subj {
margin-top: var(--m-4);
font: 600 22px/28px var(--sans);
letter-spacing: -.012em;
}
.r11-s5-body {
margin-top: var(--m-4);
padding-top: var(--m-5);
font-size: 17px;
line-height: 27px;
color: var(--slate-900);
}
.r11-s5-body > * + * { margin-top: var(--m-3); }
.r11-s5-body > .r11-s5-inv {
padding: 12px 14px;
border-radius: 8px;
background: var(--slate-50);
font-size: 16px;
line-height: 24px;
}
.r11-s5-body .r11-s5-inv li { padding-left: 1.15em; }
.r11-s5-body .r11-s5-inv li::before { left: 0; }
.r11-s5-body .r11-s5-inv li + li { margin-top: var(--m-1); }
/* The attachments: the card's chip exactly (12/16 600 sans, white, a slate-200 hairline, radius 6, the
PDF mark; 24862111.pdf in gold). The sheet's chips have no