is already a size container. The map below is boxed since #624 — a card per Skill — and the strip is still not, which is the point: the page opens flat and the cards are what you can go into. The borrow is visible either way, not only tokenal: each ring's Skill name is set in the per-Skill label ink the card headings under it spend, so the five figures above and the four cards below read as one vocabulary. Only the ink, though — a name here is title case at the HUD's own size, not the map's uppercase and tracking, because these four sit beside their rings rather than heading a card, and the sizing note on .profile-score-item says what decides that size. It is this file that paints Home's canvas, on below: the map draws its cards straight onto it and paints no field of its own. */ /* One gutter for Home's two halves, stated once. The strip and the map each used to state their own — 12/18/24/30/36 against 18/20/24/27/30 — so their trailing edges disagreed at every width but two, and the Practice button lined up with neither. On :root for the reason the Frame's rail is, so furniture outside

can reach it; in cqi like every other measure here, which resolves against

at each use site, not at this declaration. */ :root { --home-gutter: clamp(18px, 3.65cqi, 41px); } body { margin: 0; background: var(--chrome-canvas); color: var(--chrome-ink); } #main { min-height: 100vh; } .profile-score-strip { /* The HUD's two measures, on the strip rather than on the parts that spend them, because both the container and the Skills inside it have to agree: the ring's diameter fixes an item pill's height, and the inset is the breathing room between that pill and the container's own edge. Together they give the phone grid's corner radius below. Each tier restates them; the ring and the container only spend them. */ --profile-ring-size: 53px; --profile-hud-inset: 10px; position: relative; box-sizing: border-box; display: flex; align-items: center; gap: 13px; width: min(100%, 1120px); min-height: 147px; margin: 0 auto; padding: 18px var(--home-gutter) 20px; border-bottom: 1px solid var(--chrome-line); } .profile-avatar-wrap { position: relative; flex: 0 0 auto; } .profile-avatar { display: grid; place-items: center; width: 86px; height: 86px; box-sizing: border-box; overflow: hidden; border: 1px solid var(--chrome-line-muted); border-radius: 50%; background: var(--chrome-accent-tint); color: var(--chrome-accent-deep); font: 600 22px/1 inherit; cursor: pointer; transition: box-shadow 180ms ease; } .profile-avatar img { display: none; grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; object-position: center; image-rendering: auto; } .profile-avatar span { grid-area: 1 / 1; } .profile-avatar.has-photo img { display: block; } .profile-avatar.has-photo span { visibility: hidden; } .profile-avatar:hover, .profile-avatar:focus-visible { box-shadow: 0 0 0 5px color-mix(in srgb, var(--chrome-accent) 14%, transparent); outline: none; } .avatar-delete { position: absolute; right: 1px; bottom: 4px; width: 26px; height: 26px; border: 1px solid var(--chrome-line); border-radius: 50%; background: var(--chrome-panel); color: var(--chrome-ink-muted); font-size: 19px; line-height: 21px; cursor: pointer; opacity: 0; transition: opacity 150ms ease; } .profile-avatar-wrap:hover .avatar-delete, .profile-avatar-wrap:focus-within .avatar-delete { opacity: 1; } .profile-identity { flex: 1 1 185px; min-width: 150px; } /* Inline flow, not flex: as a flex item the mark centred against the whole name block, so a name that wrapped left the pencil off the end of the first line and leaning on the Speaking ring. */ .profile-name-button { display: block; max-width: 100%; padding: 2px 0; border: 0; background: none; color: var(--chrome-ink); font-family: inherit; font-size: clamp(23px, 2.9cqi, 28px); font-weight: 700; line-height: 1.15; text-align: left; cursor: pointer; } .profile-name-button:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 4px; } .edit-mark { margin-left: 8px; color: var(--chrome-line-strong); font-size: 16px; } .profile-subtitle { margin-top: 4px; color: var(--chrome-ink-muted); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } .profile-name-input { box-sizing: border-box; width: 100%; max-width: 250px; border: 0; border-bottom: 2px solid var(--chrome-accent); background: none; color: inherit; font-family: inherit; font-size: clamp(23px, 2.9cqi, 28px); font-weight: 700; line-height: 1.15; outline: 0; } /* box-sizing is load-bearing, not housekeeping: the stacked tiers below give this pill `width: 100%` inside the strip's padding box, and as a content-box its own border and inset were added *on top* of that 100%. The HUD therefore stood 14px wider than everything else on Home — flush with the avatar on the left and 14px past the Overall Score badge, the strip's gutter and the task map's cards on the right, with the right-hand column's two Skills running into the screen edge at every phone width. */ .profile-scores { display: flex; flex: 0 1 auto; align-items: stretch; gap: 5px; min-width: 0; box-sizing: border-box; margin-left: 6px; padding: 9px var(--profile-hud-inset); border: 1px solid var(--chrome-line); border-radius: 999px; background: var(--chrome-surface-sunken, color-mix(in srgb, var(--chrome-panel) 68%, var(--chrome-canvas))); box-shadow: var(--chrome-shadow-bar); } /* A Skill's name carries the per-Skill label ink the task map's row labels wear — the visible half of the borrow the header promises — and since the type study on this HUD it is the prominent half of the pair it makes with its ring: the name is set larger than the figure inside the ring and heavier than it, so the eye lands on the Skill and reads the score second. The HUD answers "how am I doing at Speaking", and the ring's coloured arc already states the figure loudly enough to be found once the Skill has been. Its size is what the row can afford rather than what reads best in isolation, and the ceiling is the learner's own name: the identity beside this HUD gives up width for every point the label gains, and a twelve-character name wraps onto a second line above 15px at the padding below. The pill's own gutter is what pays for the growth — see the padding note — and 17px wraps whatever is traded, so it is not a value to nudge without re-measuring the strip at 1280 and 390. */ .profile-score-item { display: flex; min-width: 0; align-items: center; /* Tight, because the gap between a ring and its name is width the name needs more: at the 10px this carried, the name's ceiling was two points lower and the identity wrapped at every desktop width. */ gap: 6px; box-sizing: border-box; /* The pill's horizontal padding was asymmetric until the name grew — the ring is round and needed less room than a 12px caption beside it — and is symmetric now because both sides gave up what they had to the name. It stays a named property rather than a literal because three tiers below restate it, and each tier restates only the values it changes. That gutter is what the name's size is bought with, and the pair is measured rather than picked: on the desktop row 8 a side with a 6px gap holds a 15px name to one line, 5 a side holds 16px, and nothing holds 17px. The 4 here buys the 15px below with room to spare, which is what leaves the phone grid free to spend a point more. */ --item-pad-block: 7px; --item-pad-inline: 4px; padding: var(--item-pad-block) var(--item-pad-inline); border-radius: 999px; color: var(--chrome-ink-muted); font-size: clamp(14px, 1.4cqi, 15px); font-weight: 700; letter-spacing: 0; text-transform: none; transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease; } .profile-score-item.is-active { background: var(--chrome-panel); color: var(--chrome-ink); box-shadow: var(--chrome-shadow-control, 0 1px 3px color-mix(in srgb, var(--chrome-ink) 16%, transparent)); } .profile-score-item:has(.speaking) { color: var(--skill-label-speaking); } .profile-score-item:has(.writing) { color: var(--skill-label-writing); } .profile-score-item:has(.reading) { color: var(--skill-label-reading); } .profile-score-item:has(.listening) { color: var(--skill-label-listening); } .profile-score-ring { --ring-color: var(--chrome-line-muted); position: relative; display: grid; flex: 0 0 auto; place-items: center; width: var(--profile-ring-size); height: var(--profile-ring-size); box-sizing: border-box; border: 0; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--profile-score-fill), var(--chrome-line-muted) 0); /* The figure is the quiet half: a tier down in ink and a step down in weight, against a name that is now set 700 in its Skill's own colour. Weight and ink are what do that work, not size — the two are within a point of each other at every width and the figure's ceiling is actually the higher of the two, which is the shape the type study was judged in. Not a demotion of the score either: the arc around it is still the loudest thing in the pill. It is a reading order, Skill first and figure second, and the HUD reads "how am I doing at Speaking" because of it. */ color: var(--chrome-ink-soft); font-size: clamp(13px, 1.4cqi, 16px); font-weight: 500; letter-spacing: normal; isolation: isolate; transition: box-shadow 180ms ease; } .profile-score-ring::before { content: ''; position: absolute; z-index: -1; inset: 5px; border-radius: inherit; background: var(--chrome-surface-sunken, color-mix(in srgb, var(--chrome-panel) 68%, var(--chrome-canvas))); } .profile-score-item.is-active .profile-score-ring::before { background: var(--chrome-panel); } .profile-score-ring.is-empty { background: var(--ring-color); } .profile-score-ring.speaking { --ring-color: var(--skill-dot-speaking); } .profile-score-ring.writing { --ring-color: var(--skill-dot-writing); } .profile-score-ring.reading { --ring-color: var(--skill-dot-reading); } .profile-score-ring.listening { --ring-color: var(--skill-dot-listening); } .profile-score-ring:hover, .profile-score-ring:focus-visible { outline: none; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ring-color) 18%, transparent); } .overall-score { display: grid; flex: 0 0 auto; place-items: center; width: 129px; aspect-ratio: 129 / 108; height: auto; box-sizing: border-box; margin-left: 5px; padding: 8px 8px 14px; border-radius: 9% 9% 38% 38%; background: var(--chrome-accent); color: var(--chrome-panel); text-align: center; box-shadow: var(--chrome-shadow-bar); } .overall-score span { align-self: end; font-size: 14px; font-weight: 700; letter-spacing: 0; } .overall-score strong { align-self: start; font-size: 48px; font-weight: 700; line-height: 1.05; } .overall-score:focus-visible { outline: 3px solid color-mix(in srgb, var(--chrome-accent) 38%, transparent); outline-offset: 3px; } .profile-error { position: absolute; z-index: 4; top: calc(100% + 12px); left: 4px; display: flex; align-items: flex-start; gap: 11px; width: 275px; box-sizing: border-box; padding: 12px 10px 12px 14px; border: 1px solid var(--chrome-alert); border-left-width: 4px; border-radius: 11px; background: var(--chrome-ink); color: var(--chrome-panel); box-shadow: 0 9px 26px color-mix(in srgb, var(--chrome-ink) 15%, transparent); } .profile-error[hidden] { display: none; } .profile-error::before, .profile-error::after { position: absolute; bottom: 100%; content: ''; } .profile-error::before { left: 25px; border: 9px solid transparent; border-bottom-color: var(--chrome-alert); } .profile-error::after { left: 26px; border: 8px solid transparent; border-bottom-color: var(--chrome-ink); } .profile-error p { flex: 1; margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; } .profile-error-title { display: block; margin-bottom: 2px; color: var(--chrome-alert); font-size: 14px; } .profile-error-message { display: block; } .profile-error-dismiss { display: grid; flex: 0 0 auto; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid color-mix(in srgb, var(--chrome-alert) 58%, var(--chrome-panel)); border-radius: 50%; background: color-mix(in srgb, var(--chrome-alert) 18%, var(--chrome-panel)); color: var(--chrome-alert); cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .profile-error-dismiss svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; } .profile-error-dismiss:hover { border-color: var(--chrome-alert); background: var(--chrome-alert); color: var(--chrome-panel); transform: scale(1.05); } .profile-error-dismiss:focus-visible { outline: 2px solid var(--chrome-alert); outline-offset: 3px; } @media (max-width: 1000px) { .profile-score-strip { gap: 18px; --profile-ring-size: 42px; --profile-hud-inset: 9px; } .profile-avatar { width: 88px; height: 88px; font-size: 22px; } .profile-scores { gap: 2px; margin-left: 0; padding: var(--profile-hud-inset); } /* The label's clamp already floors at 14px by here, so only the figure and the pill's own breathing room are restated. */ .profile-score-ring { font-size: 13px; } .profile-score-item { gap: 5px; --item-pad-block: 5px; } .overall-score { width: 94px; margin-left: 0; } .overall-score span { font-size: 11px; } .overall-score strong { font-size: 36px; } } /* The tier between 769px and 1200px used to shrink this strip because a 292px rail was standing beside it, and the phone tier used to hold a 5px inset for the same reason. Both went with the sidebar (#606): the strip has the whole window at every width now, and sizes itself by its own remaining queries. Those queries are where they are because of the name. The row carries a fixed load — avatar, four rings with their labels, and the Overall Score — and the identity gets whatever is left, down to its 150px floor. Every width where the leftovers fell under about 200px wrapped a twelve-character name onto a second line, and un-wrapped it again on the far side, so the wrap arrived and left twice on the way down. Each tier now starts before that band rather than inside it: the compact sizes at 1000 (844 wrapped on full-size rings) and the stacked grid at 767 (661-739 wrapped on the floor). A long enough name still wraps, which is a name being long, not a tier boundary landing in the wrong place. */ @media (max-width: 900px) { .profile-score-strip { display: grid; grid-template-columns: 72px minmax(0, 1fr) 76px; gap: 17px 16px; padding: 18px var(--home-gutter) 22px; } .profile-avatar { width: 72px; height: 72px; font-size: 18px; } .profile-identity { min-width: 0; } .profile-name-button, .profile-name-input { font-size: 21px; } .profile-scores { grid-column: 1 / -1; grid-row: 2; width: 100%; justify-content: space-between; gap: 6px; } .overall-score { grid-column: 3; grid-row: 1; width: 76px; padding: 8px 5px; } .overall-score strong { font-size: 24px; } .overall-score span { font-size: 9px; } .profile-error { width: min(275px, calc(100vw - 36px)); } } @media (max-width: 390px) { .profile-score-strip { column-gap: 13px; --profile-ring-size: 38px; --profile-hud-inset: 8px; } } /* A phone cannot give four labelled controls a useful single row. Two columns preserve the HUD pill as one object while giving every Skill enough room for its full name, rather than shrinking or clipping the label. The two columns are mirrored: the right-hand pair reverses, so all four rings sit on the grid's outer edges and the four names meet down the middle. That is a phone rule and only a phone rule. It buys the thing this tier is short of — the names get the width between the rings instead of each one being trapped between its own ring and the next column's — and it gives the row a gutter to read down, so `47 Speaking Writing 82` scans as a pair of figures rather than four pills in a bag. Above this tier the four stand in one row with room to spare, where a mirror would only put two names in the wrong place. */ @media (max-width: 520px) { .profile-scores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* Concentric with the pills inside it, and derived rather than picked. An item is a full pill, so its own radius is half its height — the ring's diameter plus the 5px of block padding around it — and the container's has to be that plus the inset the pills sit in. The flat 28px this carried was under that sum at every phone width, so a selected Skill's white pill crossed the container's curve at the grid's top-left corner and again at its bottom-right. Deriving it means the inset can be tuned for breathing room without the corners coming apart again. */ border-radius: calc(var(--profile-hud-inset) + 5px + var(--profile-ring-size) / 2); } /* border-box above is what makes this 100% mean the grid track: as a content-box the item's own horizontal padding was added to it, so each Skill sat that much wider than its column and the right-hand pair — Writing and Listening — ran past the HUD's inner edge. (It was 13px a side when this was written; the name's size is paid for out of that gutter now, but a content-box would put whatever is left back on top of the 100%.) */ .profile-score-item { width: 100%; } /* A name has its own grid column here rather than whatever the ring beside it leaves, so this is the one tier that spends a point more on it than the desktop row can afford — and the figure gives a point back, since a phone is where the two sit closest together. The band this covers is the whole phone grid, 430px included, not just the narrowest one. */ .profile-score-item { font-size: 15px; } .profile-score-ring { font-size: 12px; } .profile-score-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The mirror. `nth-child(even)` is the right-hand column because the grid has exactly two of them and the HUD renders the four Skills in a fixed order, so an even item is a right-hand one at both rows. It used to swap the pill's two paddings with the direction; there is nothing to swap now that both sides are 4px. Visual only: the ring stays first in the DOM, so a screen reader and the tab order read each Skill in the same order they do at every other width. */ .profile-score-item:nth-child(even) { flex-direction: row-reverse; } /* The name is against the gutter on this side, so it grows away from it. */ .profile-score-item:nth-child(even) > span { text-align: right; } } @media (prefers-reduced-motion: reduce) { .profile-avatar, .avatar-delete, .profile-score-ring, .profile-error-dismiss { transition: none; } }