/* Words We Keep — "Add words" submission form (Figma: Form submission 227:3457, input states
   284:307, breakpoints 287:786). Layout + components only; colors and type come from tokens.css,
   the chrome (mark, arrows, links, icons, reset) from app.css.

   Every size here is N * --u (tokens.css: 1px up to a 1440px window, 1.5px at 2160), so the
   fields, icons, checkboxes and the spacing grow with the type. Tablet/mobile: --u is 1px. */

/* Stand-ins for the field fonts (Bill, 2026-10-07): the "Field Noto …" copies (js: fieldFonts)
   load piece by piece as new letters are typed; while a piece loads, the letter shows in one of
   these system fonts — already at the field scale, nothing to download — never at full size (it
   flashed big, then small). They stand in for good if the fonts host can't be reached. Greek and Cyrillic (serif) go before Crimson Pro, the rest after the
   Notos (css: --font-field). */
@font-face { font-family: 'Field Local Serif'; src: local('TimesNewRomanPSMT'), local('Times New Roman'); size-adjust: 78%; unicode-range: U+0370-03FF, U+1F00-1FFF, U+0400-052F; }
@font-face { font-family: 'Field Local'; src: local('PingFangSC-Regular'), local('PingFang SC'), local('Microsoft YaHei'), local('Noto Sans CJK SC'), local('Source Han Sans SC'); size-adjust: 80%; unicode-range: U+2E80-2FFF, U+3000-303F, U+3400-4DBF, U+4E00-9FFF, U+F900-FAFF, U+FF00-FFEF; }
@font-face { font-family: 'Field Local'; src: local('HiraginoSans-W3'), local('Hiragino Sans'), local('Yu Gothic'), local('Noto Sans CJK JP'); size-adjust: 80%; unicode-range: U+3040-30FF, U+31F0-31FF; }
@font-face { font-family: 'Field Local'; src: local('AppleSDGothicNeo-Regular'), local('Apple SD Gothic Neo'), local('Malgun Gothic'), local('Noto Sans CJK KR'); size-adjust: 80%; unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7AF; }
@font-face { font-family: 'Field Local'; src: local('GeezaPro'), local('Geeza Pro'), local('Segoe UI'); size-adjust: 78%; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: 'Field Local'; src: local('ArialHebrew'), local('Arial Hebrew'), local('Segoe UI'); size-adjust: 78%; unicode-range: U+0590-05FF, U+FB1D-FB4F; }
@font-face { font-family: 'Field Local'; src: local('Thonburi'), local('Leelawadee UI'), local('Tahoma'); size-adjust: 78%; unicode-range: U+0E00-0E7F; }
@font-face { font-family: 'Field Local'; src: local('KohinoorDevanagari-Regular'), local('Kohinoor Devanagari'), local('Nirmala UI'); size-adjust: 78%; unicode-range: U+0900-097F, U+A8E0-A8FF; }

:root {
  /* Form surfaces (Figma values; not in tokens.css because only the form uses them) */
  --field:        #f3f3f3;   /* input at rest */
  --field-hover:  #ffffff;   /* input hovered / focused */
  --placeholder:  #565656;   /* placeholders and question descriptions */
  --cat-desc:     #676767;   /* category descriptions (#696969 until 2026-10-10: 4.40:1 on the page, short of AA; now 4.53) */
  --btn-line:     #757575;   /* outlined button border */
  --btn-off:      #757575;   /* disabled primary button */
  --btn-off-text: #a8a8a8;   /* disabled outlined button text */
  --btn-off-line: #c4c4c4;   /* disabled outlined button border */
  --sheet:        #000242;   /* annotation sheet */
  --step-ms: 600ms;          /* one step slide */
  --press-scale: 0.99;       /* a box button pressed: its box (not the words) shrinks to this… */
  --press-down: 100ms;       /* …over this as it goes in… */
  --press-up: 200ms;         /* …and comes back over this (Bill, 2026-10-15; js/form.js → pressable) */
  --list-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);   /* open dropdown list — exact Figma value not readable via MCP, tune here */

  /* Sizes (design px, scaled by --u) */
  --fh: calc(48 * var(--u));      /* field + button height (desktop 48, tablet/phone 40) */
  --fpad: calc(12 * var(--u));    /* field side padding */
  --ta-s: calc(100 * var(--u));   /* textarea height in the library's edit view */
  --ta-m: calc(160 * var(--u));   /* textarea height in the form: every one (words, original words, context, reflection) */
  --ta-ann: calc(120 * var(--u)); /* an annotation's explanation in the form (Bill, 2026-10-07; it was a one-line field). The library's is its usual 122 (--ta-s there), on its grid */
  --ic: calc(18 * var(--u));      /* small icons: plus, ×, required */
  --ic-chevron: calc(24 * var(--u));
  --box: calc(12 * var(--u));     /* checkbox */
  --cat-mark: calc(24 * var(--u));   /* a category's symbol: the size of the mark */
  --gap-1: calc(1 * var(--u));    /* between stacked fields */
  --gap-4: calc(4 * var(--u));
  --gap-12: calc(12 * var(--u));
  --gap-16: calc(16 * var(--u));
  --gap-24: calc(24 * var(--u));
  --gap-40: calc(40 * var(--u));
}
@media (max-width: 1023px) { :root { --fh: 40px; } }

.form {
  position: absolute;
  inset: 0;
  overflow: clip; /* clip, not hidden: a hidden box can still be scrolled by focus / scrollIntoView, and the stack of steps below the screen would let it */
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-size);
  line-height: var(--text-leading);
  letter-spacing: var(--text-tracking);
  font-feature-settings: var(--text-features);
}

/* The UA stylesheet gives <button> and <input> letter-spacing: normal (the reset in app.css only
   covers font and color), which dropped the -1% tracking on the category rows and buttons. */
.form button, .form input, .form textarea { letter-spacing: inherit; font-feature-settings: inherit; }

/* Selection: only the fields and the quote on the annotation sheet (to copy a word into a field). */
.form input, .form textarea, .ann-quote { -webkit-user-select: text; user-select: text; }

/* ---------- Steps: a stack of screens, slid by js (translateY) ---------- */

.steps { --dy: 0px; position: absolute; inset: 0; transition: transform var(--step-ms) var(--ease); will-change: transform; }
.step {
  position: absolute; left: 0; right: 0; height: 100%;
  top: calc(var(--i) * 100%);
  display: flex; flex-direction: column;
  overflow-y: auto;            /* a step taller than the screen (small phone, keyboard up) scrolls */
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.step::-webkit-scrollbar { display: none; }
/* Each step's place in the stack, from the first paint (js also sets --i): without it every step
   sat at the top until the script ran — a flash of all six over each other on iPhone. */
.step:nth-child(1) { --i: 0; } .step:nth-child(2) { --i: 1; } .step:nth-child(3) { --i: 2; }
.step:nth-child(4) { --i: 3; } .step:nth-child(5) { --i: 4; } .step:nth-child(6) { --i: 5; }

/* The column: 2 columns from col3 (desktop, 400 at 1280), 4 columns from col2 (tablet),
   margin to margin (phone). Vertically centred; --dy nudges a step's centre (step 2: +15px). */
.content {
  width: calc(2 * var(--colw) + var(--g));
  margin: auto 0 auto var(--col3);
  padding: calc(72 * var(--u) + 2 * var(--dy)) 0 calc(72 * var(--u));
  display: flex; flex-direction: column; gap: var(--gap-24);
  flex-shrink: 0;
}
.content--40 { gap: var(--gap-40); }

.group { display: flex; flex-direction: column; gap: var(--gap-12); width: 100%; }
.group--16 { gap: var(--gap-16); }
.group--24 { gap: var(--gap-24); }
.group--11 { gap: calc(11 * var(--u)); }
/* A question (and its description) to its field: always 16, as on the first two steps — in a 12
   group only the question gets the 4 more, so what follows the field keeps its 12 (Bill, 2026-10-10). */
.group:not([class*="group--"]) > .q { margin-bottom: calc(var(--gap-16) - var(--gap-12)); }

.q { display: flex; flex-direction: column; width: 100%; position: relative; }
.q-title { display: flex; justify-content: space-between; align-items: center; }
.q-desc { color: var(--placeholder); }
/* Required: the asterisk glyph as an icon (Figma "required"), off the question's top left
   corner: --req-gap to the left of the title and --req-gap above its capitals (Bill, 2026-10-03;
   it was at the right end of the title's first line). The file is an 18 box with the glyph, 6
   across, at its right edge and half way down: the element is the glyph alone (--req), the
   file shown at three times its size and placed so that only the glyph falls inside — the
   gaps are then measured from the asterisk itself, and it stands in a phone's 20px margin. */
.req {
  --req: calc(6 * var(--u)); --req-gap: 6px;
  position: absolute; right: calc(100% + var(--req-gap));
  top: calc(var(--cap-offset) - var(--req-gap) - var(--req));
  --src: url(../assets/icons/required.svg); width: var(--req); height: var(--req);
  background: #7a7a7a; /* Bill, 2026-10-03 (it was the text's ink) */
  -webkit-mask-size: 300% 300%; mask-size: 300% 300%;
  -webkit-mask-position: 100% 50%; mask-position: 100% 50%;
}

/* ---------- Fields ---------- */

.stack { display: flex; flex-direction: column; gap: var(--gap-1); width: 100%; }
.row { display: flex; gap: var(--gap-1); width: 100%; }
.row > * { flex: 1 1 0; min-width: 0; }
.fw { position: relative; width: 100%; }

.field {
  display: block; width: 100%; height: var(--fh);
  padding: 0 var(--fpad);
  border: 0; border-radius: 0; outline: none;
  background: var(--field); color: var(--ink);
  font: inherit; letter-spacing: inherit; font-feature-settings: inherit; line-height: var(--text-leading);
  -webkit-appearance: none; appearance: none;
  caret-color: var(--ink); /* the insertion point in ink, not Safari's blue (its width is the system's) */
  transition: background 0.15s var(--ease);
}
textarea.field { height: var(--ta-s); padding: var(--fpad); resize: none; scrollbar-width: none; overscroll-behavior: contain; } /* the native bar is hidden (it would eat the right padding); js draws the same 2px bar as the dropdown (.fw-bar); a scroll that reaches its end stops there, never scrolling the page or step behind (Bill, 2026-10-07) */
textarea.field::-webkit-scrollbar { display: none; }
.fw-bar { position: absolute; right: 0; width: 2px; background: var(--ink); pointer-events: none; }
.form textarea.field { height: var(--ta-m); } /* one height for every large box in the form (Bill, 2026-10-03; they were 100 / 160 / 200) */
.field::placeholder { color: var(--placeholder); opacity: 1; }
/* Typed text in its own script's font (js: fieldLook; 2026-10-07): Crimson Pro, then each
   script's Noto, drawn at the archive's scale letter by letter — the "Field Noto …" copies with
   size-adjust (js: fieldFonts). (Until then only the native name was Noto.) */
.field { font-family: var(--font-field); }
.field[data-cjk="hant"], .ann-quote.is-native[data-cjk="hant"] { font-family: 'Field Noto Serif', 'Field Local Serif', 'Crimson Pro', 'Field Noto Sans TC', var(--font-field); }
.field[data-cjk="jpan"], .ann-quote.is-native[data-cjk="jpan"] { font-family: 'Field Noto Serif', 'Field Local Serif', 'Crimson Pro', 'Field Noto Sans JP', var(--font-field); }
.field[data-cjk="kore"], .ann-quote.is-native[data-cjk="kore"] { font-family: 'Field Noto Serif', 'Field Local Serif', 'Crimson Pro', 'Field Noto Sans KR', var(--font-field); }
@media (hover: hover) { .field:hover { background: var(--field-hover); } }
.field:focus { background: var(--field-hover); }
.field:focus-visible { outline: none; }
/* Warning: white, a hairline black frame, an ⓘ on the right. Set by js on a required field a
   visitor tried to skip; cleared as soon as they type (a combobox: as soon as they open it). */
.fw.is-warn .field { background: var(--field-hover); box-shadow: inset 0 0 0 0.5px var(--ink); padding-right: calc(2 * var(--fpad) + var(--ic)); }
.fw.is-warn::after {
  content: ""; position: absolute; right: var(--fpad); top: calc((var(--fh) - var(--ic)) / 2); width: var(--ic); height: var(--ic);
  background: currentColor;
  -webkit-mask: url(../assets/icons/info.svg) center / 100% 100% no-repeat;
  mask: url(../assets/icons/info.svg) center / 100% 100% no-repeat;
  pointer-events: none;
}
.fw.is-warn .combo-btn { display: none; } /* the ⓘ takes the chevron's place until the field is opened */

/* A field that appears or goes (the original-language words, the name in original language):
   unfolds from nothing while fading in and dropping into place, folds shut fading up — the same
   move as an annotation row on the sheet (js/form.js → fold). */
.fold {
  display: grid; grid-template-rows: 0fr; opacity: 0; translate: 0 calc(-8 * var(--u));
  /* Folded shut it also gives back the column's gap above it (as a negative margin), so the
     moment it is hidden nothing else moves. */
  margin-top: calc(-1 * var(--fold-gap, 0px));
  transition: grid-template-rows var(--fold-ms) var(--ease), opacity var(--fold-ms) var(--ease), translate var(--fold-ms) var(--ease), margin-top var(--fold-ms) var(--ease);
  --fold-ms: 200ms;
}
.fold > * { min-height: 0; overflow: hidden; }
.fold.is-open { grid-template-rows: 1fr; opacity: 1; translate: 0 0; margin-top: 0; }
.fold.is-settled { translate: none; } /* opened and still: no layer of its own (a translate makes one), so a dropdown's list inside rises above what comes after the fold */
.fold.is-settled > * { overflow: visible; } /* opened: a dropdown's list may reach out of it (js: fold) */
.group > .fold { --fold-gap: var(--gap-12); }
.group--16 > .fold { --fold-gap: var(--gap-16); }
.group--24 > .fold { --fold-gap: var(--gap-24); }
.stack > .fold { --fold-gap: var(--gap-1); }
@media (prefers-reduced-motion: reduce) { .fold { transition: none; } }

/* A field with a close (×) in its top-right corner: the original-language words. Same 12px × as
   an annotation row's, 12px in from the corner; the text keeps clear of it. */
.fw--closable .field { padding-right: calc(var(--fpad) + var(--ic) + var(--fpad)); }
/* The ×'s ink sits the field's padding (12px) in from the right edge and 2px more from the top — the glyph
   has 3px of air inside its 12px box, and the box is centred in its 18px button. */
.fw-close {
  --x-inset: calc(var(--fpad) - 3 * var(--u) - (var(--ic) - 12 * var(--u)) / 2);
  position: absolute; top: calc(var(--x-inset) + 2 * var(--u)); right: var(--x-inset); /* 2px lower reads as level with the right margin */
  width: var(--ic); height: var(--ic); display: grid; place-items: center; color: var(--ink);
}

/* Combobox (country, source kind, year): a text field that filters a list. */
.combo { position: relative; width: 100%; }
.combo .field { padding-right: calc(var(--fpad) + var(--ic-chevron) + 8 * var(--u)); text-overflow: ellipsis; }
.combo-btn { position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); width: var(--ic-chevron); height: var(--ic-chevron); display: grid; place-items: center; color: var(--placeholder); }
.combo.is-open .icon-chevron { transform: rotate(180deg); } /* instant, no spin */
.combo.has-value .combo-btn { color: var(--ink); }
.combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--gap-1)); z-index: 5;
  max-height: calc(4 * var(--fh)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--field-hover); /* white; rows shade to the idle field colour on hover */
  box-shadow: var(--list-shadow);
}
/* Firefox only: 'thin' is the narrowest it allows. Not for WebKit/Blink, where the standard
   property would override the 2px bar below and leave the system overlay bar. */
@supports not selector(::-webkit-scrollbar) { .combo-list { scrollbar-width: thin; scrollbar-color: var(--ink) var(--field-hover); } }
/* The native scrollbar is hidden (it takes a 2px column of its own, and rows can't paint under
   it); js draws a 2px black bar over the list's right edge instead (.combo-bar). */
.combo-list { scrollbar-width: none; }
.combo-list::-webkit-scrollbar { display: none; }
.combo-bar { position: absolute; right: 0; width: 2px; background: var(--ink); z-index: 6; pointer-events: none; }

.combo-item {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--fh); padding: 0 calc(16 * var(--u)) 0 var(--fpad); width: 100%; text-align: left; /* right: the 8px asterisk centres on the ×/chevron's centreline (8 + 24/2 = 20 from the edge) */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-item.is-hover, .combo-item:hover, .combo-item[aria-selected="true"] { background: var(--field); }
.combo-item .icon-asterisk { flex-shrink: 0; width: calc(8 * var(--u)); height: calc(8 * var(--u)); }
.combo-empty { height: var(--fh); padding: 0 var(--fpad); display: flex; align-items: center; color: var(--placeholder); }

/* ---------- Category rows (step 2) ---------- */

/* Rows are a grid so they all take the tallest row's height. */
.cat-grid { display: grid; grid-auto-rows: 1fr; gap: var(--gap-1); width: 100%; }
.cat {
  position: relative;
  display: grid; grid-template-columns: var(--cat-mark) 1fr; grid-template-rows: auto auto; column-gap: var(--gap-24); align-content: start;
  width: 100%; padding: var(--gap-16); text-align: left;
  background: var(--field);
  transition: background 0.15s var(--ease);
}
@media (hover: hover) { .cat:hover { background: var(--field-hover); } }
.cat .icon-mark { width: var(--cat-mark); height: var(--cat-mark); align-self: center; grid-row: 1; grid-column: 1; }
.cat-title { grid-column: 2; grid-row: 1; display: flex; align-items: center; min-height: var(--cat-mark); } /* mark and name share one centred row */
.cat-blurb { grid-column: 2; grid-row: 2; margin-top: var(--gap-4); color: var(--cat-desc); max-width: 75%; text-wrap: pretty; } /* wraps at ¾ of the column; the last two words are tied (form.js → noOrphans) */
.q-desc, .ann-quote { text-wrap: pretty; }
.cat-box {
  position: absolute; right: var(--fpad); top: var(--fpad); width: var(--box); height: var(--box);
  box-shadow: inset 0 0 0 0.5px var(--ink);
  display: grid; place-items: center;
}
.cat-box .icon-check { width: var(--box); height: var(--box); color: var(--white); display: none; }
.cat[aria-checked="true"] .cat-box { background: var(--ink); box-shadow: none; }
.cat[aria-checked="true"] .icon-check { display: block; }

/* ---------- Small actions ---------- */

/* "In original language +", "Annotate specific words +", "Another +" */
.more { display: inline-flex; align-items: center; gap: calc(2 * var(--u)); height: calc(32 * var(--u)); align-self: flex-start; white-space: nowrap; }
.more--flat { height: auto; }
.icon-plus     { --src: url(../assets/icons/plus.svg); width: var(--ic); height: var(--ic); }
.icon-chevron  { --src: url(../assets/icons/chevron.svg); width: var(--ic-chevron); height: var(--ic-chevron); }
.icon-check    { --src: url(../assets/icons/check.svg); width: var(--box); height: var(--box); }
/* The navigation arrow, turned to point right, inside the same 18px box as the plus (Figma 226:3107). */
.more .icon-arrow--right { width: calc(12 * var(--u)); height: calc(12 * var(--u)); margin: calc(3 * var(--u)); transform: rotate(90deg); }
.icon-x        { --src: url(../assets/icons/x-small.svg); width: calc(12 * var(--u)); height: calc(12 * var(--u)); }

/* ---------- Buttons ---------- */

/* Every look of a box button sets three things — its line (--bd), its fill (--bg) and the inner
   line of hover and press (--ring) — never the border, background or shadow themselves (the
   library's own buttons, admin.css, still set those directly). On the public pages (html.btn-press,
   set by js/form.js and js/app.js) the box is drawn by ::before instead, behind the words: pressed,
   the box shrinks a little and the words stay their size (Bill, 2026-10-15). */
.btn {
  --bd: var(--btn-line); --bg: transparent; --ring: transparent;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--fh); min-width: calc(100 * var(--u)); padding: 0 var(--fpad);
  border: 0.5px solid var(--bd); background: var(--bg); box-shadow: inset 0 0 0 0.5px var(--ring); color: var(--ink);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
  white-space: nowrap;
}
.btn-press .btn { position: relative; isolation: isolate; border-width: 0; padding: 0 calc(var(--fpad) + 0.5px); background: none; box-shadow: none; } /* (+0.5: where the border was; no border of its own: a box laid half a pixel out snapped a pixel off its neighbours) */
.btn-press .btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border: 0.5px solid var(--bd); background: var(--bg); box-shadow: inset 0 0 0 0.5px var(--ring);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), scale var(--press-up) var(--ease);
}
.btn-press .btn.is-pressed::before { scale: var(--press-scale); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease), scale var(--press-down) var(--ease); }
@media (prefers-reduced-motion: reduce) { .btn-press .btn::before, .btn-press .btn.is-pressed::before { transition-property: border-color, box-shadow, background; } } /* (down and back at once) */
@media (hover: hover) { .btn:not(:disabled):hover { --bd: var(--ink); --ring: var(--ink); } }
.btn:not(:disabled):active { --bd: var(--ink); --ring: var(--ink); }
.btn:disabled { color: var(--btn-off-text); --bd: var(--btn-off-line); cursor: default; }
.btn--primary { --bg: var(--ink); color: var(--white); --bd: var(--ink); }
.btn--primary:focus-visible { outline-color: var(--ink); } /* its fill's colour: the text's white would vanish on the page */
.btn .cell { display: inline-block; } /* one letter of the label; the typewriter hover (js/form.js) fades these */
@media (hover: hover) { .btn--primary:not(:disabled):hover { --ring: transparent; } }
.btn--primary:disabled { --bg: var(--btn-off); --bd: var(--btn-off); color: var(--white); }
/* Sending (js: submit): black as ever, the label hidden, a white wheel in its place — a 1px ring,
   a quarter of it open, square ends, turning. */
.btn.is-busy { position: relative; pointer-events: none; }
.btn.is-busy .label { visibility: hidden; }
.btn.is-busy::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u));
  border: 1px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: btn-spin 0.8s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation-duration: 2.4s; } }

/* ---------- Guards: the page colour over a progressive blur, top and bottom ----------
   Content scrolling under the chrome dissolves into the background (--guard-bg: the paper on
   the steps, the sheet's blue on the sheet) rather than cutting off. The blur is masked with the
   same gradient, so it is strongest at the edge and gone where the fade ends. */
.guard {
  position: absolute; left: 0; right: 0; z-index: 15; pointer-events: none;
  height: var(--guard-h);
  --guard-h: calc(80 * var(--u));
  --guard-bg: var(--paper);
  background: linear-gradient(to bottom, var(--guard-bg) 0%, color-mix(in srgb, var(--guard-bg) 60%, transparent) 40%, transparent 100%);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 100%); mask-image: linear-gradient(to bottom, black 0%, black 25%, transparent 100%);
}
.guard--top { top: 0; }
.guard--bottom { bottom: 0; rotate: 180deg; }
.ann-sheet .guard { --guard-bg: var(--sheet); }

/* ---------- Chrome ---------- */

.home { top: var(--mark-top); left: var(--mark-top); display: block; } /* same spot as the archive's menu button: no hop between pages */
/* Pager (Figma 299:1111): current step · a 40px 1px track (25% ink) whose fill grows with the step ·
   total. Each number sits in its own box, one line tall, so the current one can count up: the
   old digit rolls up out of the box while the next, already in place below, rolls up (js/form.js → setPage). */
.count {
  left: var(--m); bottom: 20px; padding-bottom: var(--link-gap); /* the archive's "Add words" link has this gap under its text: same baseline across pages */
  display: flex; align-items: center; gap: calc(8 * var(--u));
  white-space: nowrap;
  font-feature-settings: var(--numeral-features); /* lining, tabular: a counter, not running text */
  --pager-ms: 300ms;
}
.pager-num { display: block; width: calc(8 * var(--u)); height: calc(var(--text-size) * var(--text-leading)); overflow: hidden; text-align: center; }
.pager-roll { --p: 0; display: block; transform: translateY(calc(var(--p) * -1 * var(--text-size) * var(--text-leading))); transition: transform var(--pager-ms) var(--ease); } /* every digit stacked; slides by --p whole lines (a % would be of the whole stack) */
.pager-roll > span { display: block; height: calc(var(--text-size) * var(--text-leading)); }
.pager-track { --track: color-mix(in srgb, currentColor 25%, transparent); display: block; position: relative; width: calc(40 * var(--u)); height: 1px; background: linear-gradient(var(--track), var(--track)) left / 100% 100% no-repeat; } /* a gradient, so the entrance can draw it left to right (pager-draw) without touching the fill inside it */
.pager-fill { position: absolute; left: 0; top: 0; height: 100%; width: 20%; background: currentColor; transition: width var(--pager-ms) var(--ease); }
.form.is-done .count, .form.is-done .arrows { display: none; }

/* ---------- Words submitted (Figma 227:3992) ----------
   The All symbol at the size the menu draws it (app.css .menu, per breakpoint), the thanks,
   two buttons side by side. The top left logo draws itself out, then these come in top to
   bottom (js/form.js → showDone): the symbol draws in, the text and the buttons fade up,
   50ms apart, like step 1 on arriving. */
.home .sym { position: absolute; left: 0; top: 0; width: var(--mark); height: var(--mark); }
.home.is-live .icon-mark { visibility: hidden; } /* the drawn logo has taken over from the still one */
.home.is-out { pointer-events: none; }           /* drawn out: nothing there to click */
.done { --done-sym: calc(200 * var(--u)); }
.done-sym { width: var(--done-sym); height: var(--done-sym); }
.done-sym .sym { width: 100%; height: 100%; }
.done-sym.is-static { background: currentColor; -webkit-mask: url(https://fonts.wordswekeep.org/s/All.svg) center / 100% 100% no-repeat; mask: url(https://fonts.wordswekeep.org/s/All.svg) center / 100% 100% no-repeat; } /* the symbols' files did not load: the still image */
.done-btns { display: flex; gap: var(--gap-4); width: 100%; }
.done-btns .btn { flex: 1 1 0; min-width: 0; }
.done > * { opacity: 0; }
.done.is-in > .done-sym { opacity: 1; }
.done.is-in > .done-text { animation: rise-in 0.3s var(--ease) 50ms both; }
.done.is-in > .done-btns { animation: rise-in 0.3s var(--ease) 100ms both; }
@media (max-width: 1023px) { .done { --done-sym: clamp(96px, 19.2vw, 160px); } }
@media (max-width: 599px) { .done { --done-sym: clamp(96px, 18.8vh, 160px); } }
/* The 404 (404.html, Figma 421:1885): the same screen, as narrow as the symbol and centred on the
   window; the line centred under it, the button as wide as the symbol. */
.content.done--404 { width: var(--done-sym); margin-left: auto; margin-right: auto; align-items: center; }
.done--404 .done-text { text-align: center; white-space: nowrap; }
.arrows button:disabled { opacity: 0.3; cursor: default; }

/* Honeypot: off-screen, never displayed. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Annotation sheet (step 4) ---------- */

.ann-sheet {
  position: absolute; inset: 0; z-index: 40;
  background: var(--sheet); color: var(--white);
  overflow: hidden;
  /* Enters like notes mode: the finished sheet is cropped in from the top edge down over the
     page (REVEAL_MS 600, --ease-drop); leaves the same way, the edge travelling down and
     uncovering the page. Content never moves, only the crop. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--sheet-ms) var(--ease-drop);
  --sheet-ms: 600ms;
  --field: rgba(255, 255, 255, 0.1);
  --field-hover: rgba(255, 255, 255, 0.16);
  --placeholder: rgba(255, 255, 255, 0.6);
  --btn-line: rgba(255, 255, 255, 0.5);
  --ink: #ffffff;
}
.ann-sheet.is-in { clip-path: inset(0); }
.ann-sheet.is-out { clip-path: inset(100% 0 0 0); }
.ann-scroll { position: absolute; inset: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ann-scroll { --dy: 0px; } /* the steps' nudge (.step) is not set out here: without it .content's padding was invalid, so 0 — with several rows, the top of the sheet scrolled no further than under the top fade (Bill, 2026-10-09) */
.ann-scroll .content:has(.ann-head .ann-lang:not([hidden])) { padding-top: calc(72 * var(--u) + 40px); } /* room for the language button above the words, clear of the top fade */
.ann-scroll::-webkit-scrollbar { display: none; }
.ann-sheet .btn { color: var(--white); }
@media (hover: hover) { .ann-sheet .btn:not(:disabled):hover { --bd: var(--white); --ring: var(--white); } }
.ann-cancel { top: calc(20px - var(--cap-offset)); left: var(--m); } /* caps where the mark's top edge is */
.ann-quote { padding-left: var(--gap-40); }
/* The quote in its original language (js/form.js → renderQuote): as typed in the field — each
   script's Noto at the archive's scale — read right to left for Arabic and Hebrew. */
.ann-quote.is-native { font-family: var(--font-field); }
/* The language button (Bill, 2026-10-09; as the archive's, js/app.js → LANG_BUTTON): 22 × 22, the
   highlight's height, the other language's label in its own face, full white, in a frame of white
   at 50% (full white on hover and press); a 44px hold round it. Top left of "Words you entered:" (above it on a phone). */
.ann-head { position: relative; }
.ann-lang {
  position: absolute; left: -42px; top: -30px; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: var(--hairline) solid rgba(255, 255, 255, 0.5); color: var(--white); /* the frame at 50%, the letter full white (Bill, 2026-10-09) */
  font-family: var(--lb-font, var(--font-native-ui)), var(--font-native-ui);
  font-weight: var(--lb-weight, 500); font-size: var(--lb-size, var(--glyph-size));
  line-height: 1; letter-spacing: var(--lb-track, 0); font-feature-settings: normal; white-space: nowrap;
  transition: border-color 0.15s var(--ease);
}
.ann-lang::before { content: ""; position: absolute; inset: -11px; }
.ann-lang > span { display: block; transform: translateY(var(--lb-nudge, 0px)); }
@media (hover: hover) { .ann-lang:hover { border-color: var(--white); } }
/* Its intro and press, as the archive's (css/app.css → .lang, the lang-out / lang-back keyframes):
   out 10px towards the quote, down and to the right (a phone: straight down), fading in 50ms; back
   in from there with a 15% overshoot in 250ms. */
.ann-lang { --lang-to-x: 10px; --lang-to-y: 10px; }
.ann-lang.is-out { animation: lang-out 0.05s var(--ease) forwards; pointer-events: none; }
.ann-lang.is-in, .ann-lang.is-back { animation: lang-back 0.25s both; }
.ann-lang:active { border-color: var(--white); }
.ann-rows { display: block; }
/* The words to look back at (js/form.js → refCheck; Bill, 2026-10-09, Figma 516:9 / 522:153 /
   523:254), once the rows have scrolled them away under the top fade: the quote showing, its
   highlights on, and its language button. Desktop: on the left, under Cancel — its left edge,
   60px below it (the button's top there; without one, the first line's capitals) — 300 wide or
   what the room left of the column allows; it fades down in. */
.ann-ref {
  position: absolute; z-index: 18; left: var(--m); top: 98px;
  width: min(300px, calc(var(--col3) - var(--m) - 40px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  opacity: 0; translate: 0 -12px; visibility: hidden; pointer-events: none;
  --ref-ms: 500ms;
  transition: opacity var(--ref-ms) var(--ease), translate var(--ref-ms) var(--ease), visibility 0s var(--ref-ms);
}
.ann-ref:has(> .ann-lang[hidden]) { top: calc(98px - var(--cap-offset)); }
.ann-ref .ann-lang { position: relative; left: auto; top: auto; flex-shrink: 0; --lang-to-x: 0px; } /* above the words: it slips straight down towards them and back up (Bill, 2026-10-09; top left, it goes diagonally) */
.ann-ref-quote { padding-left: 0; width: 100%; }
.ann-sheet.is-ref .ann-ref { opacity: 1; translate: 0 0; visibility: visible; pointer-events: auto; transition: opacity var(--ref-ms) var(--ease), translate var(--ref-ms) var(--ease); }
.ann-ref-btn { display: none; }
.icon-ref { --src: url(../assets/icons/quote-ref.svg); }
/* Tablet and phone (no room beside the column): a 24px button top right — two lines in a frame of
   white at 50% — once the words are out of sight; it opens them in the top bar, made taller: the
   sheet's colour, the words 60px under Cancel and 60px above the bar's own blurred fade; the
   button turns to × (it, or a click anywhere else, closes it). */
@media (max-width: 1023px) {
  .ann-ref-btn {
    display: grid; place-items: center; top: 20px; right: var(--m); width: 24px; height: 24px;
    border: var(--hairline) solid rgba(255, 255, 255, 0.5); color: var(--white);
    background: color-mix(in srgb, var(--sheet) 10%, transparent); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); /* the sheet's navy at 10% over a blur, as the video thumbnail's play box (Bill, 2026-10-09): rows scrolling under it go soft */
    opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0s 0.3s, border-color 0.15s var(--ease), background-color 0.15s var(--ease);
  }
  .ann-ref-btn::before { content: ""; position: absolute; inset: -10px; } /* a 44px hold */
  .ann-ref-btn .icon { width: 14px; height: 4px; }
  .ann-sheet.is-ref .ann-ref-btn { opacity: 1; visibility: visible; transition: opacity 0.3s var(--ease), border-color 0.15s var(--ease); }
  .ann-sheet.is-ref-open .ann-ref-btn { border-color: transparent; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; } /* open: the × alone, as the frame */
  .ann-sheet.is-ref-open .ann-ref-btn .icon { --src: url(../assets/icons/x-12.svg); width: 12px; height: 12px; }
  .ann-ref {
    left: 0; right: 0; top: 0; width: auto;
    padding: 98px var(--m) calc(60px + 80px);
    background: var(--sheet);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 80px), transparent);
  }
  .ann-ref:has(> .ann-lang[hidden]) { top: 0; padding-top: calc(98px - var(--cap-offset)); }
  .ann-ref-quote { max-width: 300px; }
  /* Opening, the top bar grows down from its own 64px to hold the words — cropped from the bottom
     edge, as the sheet itself drops in (--ease-drop) — and the words fade in as it comes; closing,
     it folds back up. */
  .ann-ref, .ann-sheet.is-ref .ann-ref {
    opacity: 1; translate: none; visibility: hidden; pointer-events: none;
    clip-path: inset(0 0 calc(100% - 64px) 0);
    transition: clip-path var(--ref-ms) var(--ease-drop, var(--ease)), visibility 0s var(--ref-ms);
  }
  .ann-ref > * { opacity: 0; translate: 0 -8px; transition: opacity 0.2s var(--ease), translate 0.2s var(--ease); }
  .ann-sheet.is-ref.is-ref-open .ann-ref { visibility: visible; pointer-events: auto; clip-path: inset(0); transition: clip-path var(--ref-ms) var(--ease-drop, var(--ease)); }
  .ann-sheet.is-ref.is-ref-open .ann-ref > * { opacity: 1; translate: 0 0; transition: opacity 0.3s var(--ease) 0.15s, translate 0.3s var(--ease) 0.15s; }
}
@media (hover: hover) { .ann-ref-btn:hover { border-color: var(--white); } .ann-sheet.is-ref-open .ann-ref-btn:hover { border-color: transparent; } }
/* A row is a one-cell grid so its height can animate (0fr → 1fr) when it is added or removed:
   nothing ever overlaps, the rows below simply move. --ann-ms: fade + drop. */
.ann-row { display: grid; grid-template-rows: 1fr; width: 100%; --ann-ms: 200ms; }
.ann-row + .ann-row { margin-top: var(--gap-24); }
.ann-row > div { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: var(--gap-4); }
.ann-row.is-new { animation: ann-in var(--ann-ms) var(--ease) both; }
.ann-row.is-leaving { animation: ann-out var(--ann-ms) var(--ease) both; pointer-events: none; }
@keyframes ann-in  { from { grid-template-rows: 0fr; margin-top: 0; opacity: 0; translate: 0 calc(-8 * var(--u)); } to { grid-template-rows: 1fr; opacity: 1; translate: 0 0; } }
@keyframes ann-out { from { grid-template-rows: 1fr; opacity: 1; translate: 0 0; } to { grid-template-rows: 0fr; margin-top: 0; opacity: 0; translate: 0 calc(-8 * var(--u)); } }
.ann-row-head { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); font-feature-settings: var(--numeral-features); }
/* The Word field: → to check the word (once there is one), × to unlock a matched word. */
.ann-row textarea.field { height: var(--ta-ann); }
.ann-field .field { padding-right: calc(var(--fpad) + var(--ic-chevron) + 8 * var(--u)); }
/* Every control on the field's right sits on one centreline, 20px in from the edge — the same
   as the dropdowns' chevron and × (8px + a 24px box) and the warning ⓘ (12px + 16px). */
.ann-confirm { position: absolute; right: calc(11 * var(--u)); top: 50%; transform: translateY(-50%); width: var(--ic); height: var(--ic); display: grid; place-items: center; color: var(--white); }
.ann-confirm .icon-arrow { width: calc(12 * var(--u)); height: calc(12 * var(--u)); transform: rotate(90deg); }
.ann-unlock { position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); width: var(--ic-chevron); height: var(--ic-chevron); display: grid; place-items: center; color: var(--white); }
.ann-row.is-matched .ann-field .field { color: var(--placeholder); } /* a matched word reads as settled, in the placeholder tone (Figma "3 - word match") */
.ann-field.is-warn .field::placeholder { color: var(--placeholder); }
.ann-field.is-warn .ann-confirm { display: none; }
.ann-field.is-warn:has(.ann-remove)::after { display: none; } /* an added row keeps its remove × in the corner even while the warning shows; the first row shows the ⓘ */
/* The matched words highlighted in the quote (Figma 304:2856): a #242698 box 22px tall behind
   the words, 2px past them either side (a negative margin keeps the text where it was); inline
   vertical padding paints without changing the line height. The box wipes in left→right when a
   word is matched (.is-on) and wipes out left→right when it is taken away (.is-off). */
.ann-mark {
  --highlight: #242698;
  --mark-ms: 300ms;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: calc(2 * var(--u)); /* an inline background covers the font's content area (18px here), not the 19.2px line: 18 + 2 × 2 = 22 */
  margin: 0 calc(-2 * var(--u));
  background: linear-gradient(var(--highlight), var(--highlight)) left / 0% 100% no-repeat;
  transition: background-size var(--mark-ms) var(--ease);
}
.ann-mark.is-on { background-size: 100% 100%; }
/* Every highlight under every letter (Bill, 2026-10-09): a box reaching 2px past its words was
   painted after the letter before it and covered its edge (个 before 世界). The quote is its own
   layer; the marks sit at its bottom. */
.ann-quote { isolation: isolate; }
.ann-mark { position: relative; z-index: -1; }
.ann-mark.is-off { background-position: right; background-size: 0% 100%; }
/* Right to left (Arabic, Hebrew): the highlight wipes in and out from the right. */
.ann-quote[dir="rtl"] .ann-mark { background-position: right; }
.ann-quote[dir="rtl"] .ann-mark.is-off { background-position: left; }
@media (prefers-reduced-motion: reduce) { .ann-mark { transition: none; } }
.ann-sheet .btn:disabled { color: rgba(255, 255, 255, 0.4); --bd: rgba(255, 255, 255, 0.25); } /* Save annotation until every word is explained */
.content > .fold { --fold-gap: var(--gap-40); }
/* What appears as one types (steps 1–3's Next, step 5's name and "Add words") keeps its space all
   along and only fades and rises into it: the step's content is centred, so anything that grew
   under the field would push the field up mid-word (Bill, 2026-10-11: a field never moves while
   one types; the thoughts box keeps its room the same way). Unseen and unreachable until then. */
.reveal { opacity: 0; translate: 0 calc(-8 * var(--u)); visibility: hidden; transition: opacity var(--fold-ms, 200ms) var(--ease), translate var(--fold-ms, 200ms) var(--ease), visibility 0s linear var(--fold-ms, 200ms); }
.reveal.is-in { opacity: 1; translate: 0 0; visibility: visible; transition: opacity var(--fold-ms, 200ms) var(--ease), translate var(--fold-ms, 200ms) var(--ease), visibility 0s; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-in { transition: none; } }

/* Already in the collection (Bill, 2026-10-11; js/form.js → sameWords / sameSource).
   Step 1: the same words — one line under Next, ~12 below it as the send note, in the ink, with
   the dashed underline (css/app.css → .ann); placed under the button, so it takes no room and
   the centred step never moves. Step 3: the same source — the send note's grey italics under
   the source fields, unfolding (the group's 12 above it; Bill: no space kept for one-line fields). */
.next-wrap { position: relative; }
.dup-note { position: absolute; left: 0; right: 0; top: calc(100% + 12 * var(--u)); margin: 0; }
.dup-note [data-href] { white-space: nowrap; }
.send-note.source-note { margin-top: 0; }

/* ---------- Arriving from the archive ----------
   The archive fades everything but the logo out (100ms) and opens this page; here the chrome
   fades in and, 50ms behind it, the form fades up. The logo never moves. */
/* Before the script runs (html.is-arriving, set in the head): the chrome and step 1's blocks
   are not painted at all, so nothing shows before it fades in. */
html.is-arriving .count, html.is-arriving .arrows,
html.is-arriving .step:first-child .content > .group > *, html.is-arriving .step:first-child .content > .btn { opacity: 0; }
.form.is-arriving .arrows { animation: fade-in var(--chrome-in) var(--ease) both; }
/* The pager comes in once the form's blocks have landed (--pager-at, from js/form.js), by parts, 100ms apart: the current number fades up 10px, the line draws
   left to right (the grey track, and the dark fill 50ms behind it), the total fades up 10px. */
.form.is-arriving .count { opacity: 1; --pager-in: 300ms; --pager-gap: 100ms; }
.form.is-arriving .pager-num { animation: pager-up var(--pager-in) var(--ease) var(--pager-at, 0ms) both; }
.form.is-arriving .pager-track { animation: pager-draw var(--pager-in) var(--ease) calc(var(--pager-at, 0ms) + var(--pager-gap)) both; }
.form.is-arriving .pager-fill { transform-origin: 0 50%; animation: pager-fill var(--pager-in) var(--ease) calc(var(--pager-at, 0ms) + var(--pager-gap) + 50ms) both; }
.form.is-arriving .pager-track + .pager-num { animation-delay: calc(var(--pager-at, 0ms) + 2 * var(--pager-gap)); }
@keyframes pager-up { from { opacity: 0; translate: 0 10px; } }
@keyframes pager-draw { from { background-size: 0% 100%; } }
@keyframes pager-fill { from { transform: scaleX(0); } }
/* The form's blocks (title, field, toggle, button) fade up one by one: 300ms each, all starting
   together but 50ms apart (js sets --k, the block's place in the sequence). */
.form.is-arriving .rise { animation: rise-in 0.3s var(--ease) calc(var(--k) * 50ms) both; }
@keyframes rise-in { from { opacity: 0; translate: 0 calc(12 * var(--u)); } to { opacity: 1; translate: 0 0; } }

/* Leaving by the logo: everything but the logo fades out in 100ms, then the archive opens and
   its quote lands by the cut-up (js/app.js → arrive). */
.form.is-leaving > :not(.home) { opacity: 0; transition: opacity 0.1s var(--ease); }

/* ---------- Breakpoints ---------- */

@media (max-width: 1023px) {
  .content { width: calc(4 * var(--colw) + 3 * var(--g)); margin-left: var(--col2); }
}
@media (max-width: 599px) {
  .cat-box, .cat-box .icon-check { width: 13px; height: 13px; } /* a 13px box on a phone (12 is Figma's desktop size) */
  .cat-box { top: 8px; right: 8px; } /* 8px in from the row's corner on a phone (12 elsewhere) */
  .cat-blurb { max-width: none; } /* a phone's rows are narrow: the description takes the whole row, so every one fits in two lines */
  .content { width: auto; margin-left: var(--m); margin-right: var(--m); padding-top: calc(60px + 2 * var(--dy)); padding-bottom: 96px; }
  .ann-lang { left: 0; top: -36px; --lang-to-x: 0px; } /* above "Words you entered:"; it slips straight down towards the words */
  .ann-scroll .content:has(.ann-head .ann-lang:not([hidden])) { padding-top: calc(60px + 40px); }
  .req { right: auto; left: 0; --req-gap: 12px; } /* on a phone the asterisk sits above the question, flush with its left edge, 12px over its capitals (Bill, 2026-10-07; 6 was tried first) */
}

@media (prefers-reduced-motion: reduce) {
  .steps { transition: none; }
  .ann-sheet { transition: none; }
  .ann-row.is-new, .ann-row.is-leaving { animation-duration: 0s; }
}

/* Asking first (js/form.js → ask; as the library's pop-up, css/admin.css): a white box in the
   middle of the window, the words, then the two buttons side by side. */
.popup-layer { font-family: var(--font-text); font-size: var(--text-size); line-height: var(--text-leading); letter-spacing: var(--text-tracking); position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(0, 0, 0, 0.2); animation: fade-in 0.2s var(--ease) both; }
.popup { width: calc(400 * var(--u)); max-width: calc(100% - 2 * var(--m)); background: var(--white); color: var(--ink); padding: calc(20 * var(--u)); display: flex; flex-direction: column; gap: calc(40 * var(--u)); box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); }
.popup-btns { display: flex; gap: calc(11 * var(--u)); }
.popup-btns .btn { flex: 1 1 0; min-width: 0; }
.popup .btn:not(.btn--primary) { --bd: var(--ink); }

/* A dropdown picked from, never typed into (js: combo → select): the whole field opens it. */
.combo--select .field { cursor: pointer; caret-color: transparent; }

/* Under a send button — the form's "Add words", the notes' "Add thoughts" (Bill, 2026-10-10): what
   happens next, in italics and the context's placeholder grey, ~12 under the button; "How we keep
   them" opens the privacy page in a new tab, with the menu's dotted underline (css/app.css → .ann). */
.send-note { margin-top: calc(12 * var(--u)); font-style: italic; color: var(--placeholder); white-space: normal; }
.send-note [data-href] { white-space: nowrap; } /* "How we keep them" stays one piece: on a narrow screen it goes to the next line whole */