/* The discussion board (forum.html), on top of site.css.
   The look is Material 3 (Expressive): tonal colour roles made from the Moovidos blue and the logo's orange,
   full-round buttons that turn squarer while pressed and when chosen, an extended FAB, chips, a connected
   button group, outlined text fields with floating labels, a filled search bar, a navigation drawer, menus,
   dialogs and a snackbar - and the "grouped list" of the Android app itself (rows of one group: 20px corners
   at the group's ends, 4px between its rows, 2px apart). What stands out does so by the colour of its
   container, never by a coloured line. A press answers with ink (board.js), a new place slides in.
   The neutral roles are the site's own tokens, so the board sits between the site's top bar and footer without a
   seam. The top bar and the footer are the site's own, in its typeface (Rubik) - also here; the forum, its menus
   and its dialogs are in Google Sans. Icons: Material Symbols (assets/board-icons.svg).
   The site's other pages load this sheet too, with board.js, for the account in their top bar (site.js). */

/* the typeface of the forum: what is in it, and its menus, dialogs and messages, wherever they open (forum.html and
   site.js load it). The top bar and the footer stay the site's (Rubik). */
.board, #float, #modal, #toast, .pill {
  --display: "Google Sans", "Rubik", "Segoe UI", Arial, sans-serif;
  --body: "Google Sans", "Rubik", "Segoe UI", Arial, sans-serif;
  font-family: var(--body);
}
:root {
  /* colour roles. primary = the site's blue; tertiary = the logo's orange (the developer, problems);
     purple = questions; green = what is done. Tones by Material's own colour utilities (HCT). */
  --md-primary: #1565C0; --md-on-primary: #FFFFFF;
  --md-primary-container: #D6E3FF; --md-on-primary-container: #00468C;
  --md-secondary-container: #DAE2F9; --md-on-secondary-container: #3E4758;
  --md-tertiary: #944A00; --md-on-tertiary: #FFFFFF;
  --md-tertiary-container: #FFDCC5; --md-on-tertiary-container: #713700;
  --md-error: #BA1A1A; --md-on-error: #FFFFFF;
  --md-error-container: #FFDAD6; --md-on-error-container: #93000A;
  --md-purple: #6749BB; --md-purple-container: #E8DDFF; --md-on-purple-container: #4F2EA1;
  --md-green: #006D3C; --md-green-container: #C2FFD1; --md-on-green-container: #00522B;
  --md-surface: var(--ground);            /* the page */
  --md-card: var(--surface);              /* what lies on it: rows, cards, dialogs, menus */
  --md-fill: #EEF1F6;                     /* a tonal fill inside a card */
  --md-fill-high: #E2E7EF;
  --md-tertiary-surface: #FFF4EC;         /* the card of a message the developer wrote */
  --md-green-surface: #ECFBF0;            /* the card of the message that answers */
  --md-on-surface: var(--ink);
  --md-on-surface-variant: var(--sub);
  --md-outline: #74777F;
  --md-outline-variant: var(--line);
  --md-inverse-surface: #2E3036; --md-inverse-on-surface: #F0F0F7; --md-inverse-primary: #A9C7FF;
  --md-scrim: rgba(18, 26, 38, .46);
  --md-shadow-1: 0 1px 2px rgba(18, 26, 38, .22), 0 1px 3px 1px rgba(18, 26, 38, .10);
  --md-shadow-2: 0 1px 2px rgba(18, 26, 38, .22), 0 2px 6px 2px rgba(18, 26, 38, .12);
  --md-shadow-3: 0 1px 3px rgba(18, 26, 38, .24), 0 4px 8px 3px rgba(18, 26, 38, .13);
  --av-s: 62%; --av-l: 88%; --av-is: 55%; --av-il: 30%;      /* letter avatars: one hue per writer */
  --ease: cubic-bezier(.2, 0, 0, 1);
  --spring: cubic-bezier(.27, 1.06, .18, 1);      /* a shape that changes: fast, with a little bounce */
  --arrive: cubic-bezier(.05, .7, .1, 1);         /* what comes in: quick at first, then settling */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --md-primary: #A9C7FF; --md-on-primary: #003063;
    --md-primary-container: #00468C; --md-on-primary-container: #D6E3FF;
    --md-secondary-container: #3E4759; --md-on-secondary-container: #DAE2F9;
    --md-tertiary: #FFB784; --md-on-tertiary: #4F2500;
    --md-tertiary-container: #713700; --md-on-tertiary-container: #FFDCC5;
    --md-error: #FFB4AB; --md-on-error: #690005;
    --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
    --md-purple: #CEBDFF; --md-purple-container: #4F2EA1; --md-on-purple-container: #E8DDFF;
    --md-green: #80D99D; --md-green-container: #00522B; --md-on-green-container: #9CF6B7;
    --md-fill: #1D2531; --md-fill-high: #283243;
    --md-tertiary-surface: #2A211B; --md-green-surface: #12291F;
    --md-outline: #8E9099;
    --md-inverse-surface: #E2E2E9; --md-inverse-on-surface: #2E3036; --md-inverse-primary: #1565C0;
    --md-scrim: rgba(0, 0, 0, .62);
    --md-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);
    --md-shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px 2px rgba(0, 0, 0, .34);
    --md-shadow-3: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 8px 3px rgba(0, 0, 0, .36);
    --av-s: 30%; --av-l: 25%; --av-is: 70%; --av-il: 82%;
  }
}
:root[data-theme="dark"] {
  --md-primary: #A9C7FF; --md-on-primary: #003063;
  --md-primary-container: #00468C; --md-on-primary-container: #D6E3FF;
  --md-secondary-container: #3E4759; --md-on-secondary-container: #DAE2F9;
  --md-tertiary: #FFB784; --md-on-tertiary: #4F2500;
  --md-tertiary-container: #713700; --md-on-tertiary-container: #FFDCC5;
  --md-error: #FFB4AB; --md-on-error: #690005;
  --md-error-container: #93000A; --md-on-error-container: #FFDAD6;
  --md-purple: #CEBDFF; --md-purple-container: #4F2EA1; --md-on-purple-container: #E8DDFF;
  --md-green: #80D99D; --md-green-container: #00522B; --md-on-green-container: #9CF6B7;
  --md-fill: #1D2531; --md-fill-high: #283243;
  --md-tertiary-surface: #2A211B; --md-green-surface: #12291F;
  --md-outline: #8E9099;
  --md-inverse-surface: #E2E2E9; --md-inverse-on-surface: #2E3036; --md-inverse-primary: #1565C0;
  --md-scrim: rgba(0, 0, 0, .62);
  --md-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px 1px rgba(0, 0, 0, .3);
  --md-shadow-2: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 6px 2px rgba(0, 0, 0, .34);
  --md-shadow-3: 0 1px 3px rgba(0, 0, 0, .55), 0 4px 8px 3px rgba(0, 0, 0, .36);
  --av-s: 30%; --av-l: 25%; --av-is: 70%; --av-il: 82%;
}

/* ---------- the ground ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board { padding-block: 20px 96px; min-height: calc(100vh - 166px); font-size: 15px; line-height: 1.5; color: var(--md-on-surface); }
.board h1, .board h2, .board h3, .dialog h2 { font-family: var(--display); font-weight: 400; line-height: 1.3; text-wrap: balance; }
.board h2.group__title, .board h2.listbar__sum { font-weight: 500; }      /* the small titles stay medium */
.board a, .float a, .dialog a { color: var(--md-primary); }
.bstate { padding: 40px 0; color: var(--md-on-surface-variant); text-align: center; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.grow { flex: 1 1 0; min-width: 0; }
.muted { color: var(--md-on-surface-variant); }
.small { font-size: 13.5px; }
.board button:focus-visible, .board a:focus-visible, .float button:focus-visible, .float a:focus-visible,
.dialog button:focus-visible, .dialog a:focus-visible, .top__user button:focus-visible, .fab:focus-visible {
  outline: 3px solid var(--md-primary); outline-offset: 2px;
}

/* icons */
.mi { width: 24px; height: 24px; flex: none; fill: currentColor; }
.mi--20 { width: 20px; height: 20px; }
.mi--18 { width: 18px; height: 18px; }
.mi--flip { transform: scaleX(-1); }

/* the state layer: what a control wears when the pointer is on it or it is pressed */
.mb, .ib, .fab, .chip, .navitem, .menu__item, .item--link, .seg__b, .tab, .poll__opt, .watchrow, .replybar, .dock__send, .react {
  position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent;
}
.mb::after, .ib::after, .fab::after, .chip::after, .navitem::after, .menu__item::after, .item--link::after, .seg__b::after, .tab::after, .poll__opt::after,
.watchrow::after, .replybar::after, .dock__send::after, .react::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: currentColor; opacity: 0;
  transition: opacity .15s var(--ease); pointer-events: none;
}
.mb:hover::after, .ib:hover::after, .fab:hover::after, .chip:hover::after, .navitem:hover::after, .menu__item:hover::after,
.item--link:hover::after, .seg__b:hover::after, .tab:hover::after, .poll__opt:hover::after, .watchrow:hover::after, .replybar:hover::after, .dock__send:hover::after, .react:hover::after { opacity: .08; }
.mb[disabled]::after, .ib[disabled]::after, .chip[disabled]::after, .poll__opt[disabled]::after, .react[disabled]::after { display: none; }

/* the ink of a press: a circle that grows from where the control was touched (board.js puts it there).
   Where motion is not wanted there is no ink, and the layer itself darkens instead. */
.ink { position: absolute; border-radius: 50%; background: currentColor; opacity: .08; pointer-events: none; animation: ink .45s var(--ease) both; }
.ink--out { opacity: 0; transition: opacity .35s linear; }
@keyframes ink { from { transform: scale(.12); } }
@media (prefers-reduced-motion: reduce) {
  .mb:active::after, .ib:active::after, .fab:active::after, .chip:active::after, .navitem:active::after, .menu__item:active::after,
  .item--link:active::after, .seg__b:active::after, .tab:active::after, .poll__opt:active::after, .watchrow:active::after, .react:active::after { opacity: .12; }
}

/* ---------- buttons ---------- */
.mb {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 24px; border: 0; border-radius: 20px;
  font: 500 14.5px/20px var(--body); letter-spacing: .01em; text-decoration: none; white-space: nowrap; cursor: pointer; background: none;
  color: var(--md-primary); transition: border-radius .35s var(--spring), box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.mb:active:not([disabled]), .ib:active:not([disabled]) { border-radius: 8px; transition-duration: .08s; }
.mb .mi { width: 18px; height: 18px; margin-inline-start: -8px; }
.mb--filled { background: var(--md-primary); color: var(--md-on-primary); }
.board a.mb--filled, .dialog a.mb--filled { color: var(--md-on-primary); }
.mb--filled:hover { box-shadow: var(--md-shadow-1); }
.mb--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.mb--tonal:hover { box-shadow: var(--md-shadow-1); }
.mb--outlined { box-shadow: inset 0 0 0 1px var(--md-outline); }
.mb--text { padding: 0 12px; }
.mb--text .mi { margin-inline-start: 0; }
.mb--danger { color: var(--md-error); }
.mb--filled.mb--danger { background: var(--md-error); color: var(--md-on-error); }
.mb--small { height: 32px; padding: 0 16px; font-size: 13.5px; border-radius: 16px; }
.mb--large { height: 48px; font-size: 15px; border-radius: 24px; }
.mb--large:active:not([disabled]) { border-radius: 12px; }
.mb--small.mb--text { padding: 0 10px; }
.mb--block { width: 100%; }
.mb[disabled] { opacity: .38; cursor: default; box-shadow: none; }
.mb[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; border-radius: 12px; }

.ib {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 20px; background: none;
  color: var(--md-on-surface-variant); cursor: pointer; flex: none; text-decoration: none; transition: border-radius .35s var(--spring);
}
.ib[aria-pressed="true"], .ib--on { color: var(--md-primary); }
.ib--tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.ib--small { width: 32px; height: 32px; border-radius: 16px; }
.ib--small .mi { width: 20px; height: 20px; }
.ib[disabled] { opacity: .38; cursor: default; }

.fab {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; padding-inline: 16px 20px; border: 0; border-radius: 16px;
  background: var(--md-primary-container); color: var(--md-on-primary-container); font: 500 15px/20px var(--body); cursor: pointer;
  box-shadow: var(--md-shadow-2); transition: box-shadow .2s var(--ease);
}
.fab:hover { box-shadow: var(--md-shadow-3); }
.fab--float { display: none; position: fixed; z-index: 15; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 16px; box-shadow: var(--md-shadow-3); }

/* ---------- chips, labels, badges ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  box-shadow: inset 0 0 0 1px var(--md-outline-variant); color: var(--md-on-surface-variant); font: 500 13.5px/20px var(--body);
  white-space: nowrap; text-decoration: none; cursor: pointer; flex: none;
}
.board a.chip, .dialog a.chip { color: var(--md-on-surface-variant); }
.chip .mi { width: 18px; height: 18px; margin-inline-start: -4px; }
.chip[aria-pressed="true"], .chip--on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: none; }
.board a.chip--on { color: var(--md-on-secondary-container); }
.chip--plain { cursor: default; }
.chip--plain::after { display: none; }
.chip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-end: -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.chip__x .mi { margin: 0; }
.chip__n { font-variant-numeric: tabular-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }

.lbl {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 8px; font: 500 12.5px/16px var(--body);
  white-space: nowrap; background: var(--md-fill-high); color: var(--md-on-surface-variant); vertical-align: middle;
}
.lbl .mi { width: 14px; height: 14px; margin-inline-start: -2px; }
.lbl--idea { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.lbl--question { background: var(--md-purple-container); color: var(--md-on-purple-container); }
.lbl--bug, .lbl--known { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.lbl--planned { background: none; box-shadow: inset 0 0 0 1px var(--md-primary); color: var(--md-primary); }
.lbl--done, .lbl--answered, .lbl--fixed, .lbl--answer { background: var(--md-green-container); color: var(--md-on-green-container); }
.lbl--wait { background: var(--md-error-container); color: var(--md-on-error-container); }
.lbl--new { background: var(--md-primary); color: var(--md-on-primary); border-radius: 12px; }
.lbl--dev { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); border-radius: 12px; }
.lbl--mod { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: 12px; }
.lbl--badge { background: none; box-shadow: inset 0 0 0 1px var(--md-outline-variant); border-radius: 12px; }

.counter {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; flex: none;
  font: 500 11px/16px var(--body); font-variant-numeric: tabular-nums; background: var(--md-error); color: var(--md-on-error);
}
.ib .counter { position: absolute; top: 5px; left: 5px; z-index: 1; box-shadow: 0 0 0 2px var(--md-surface); }      /* inside the button's round edge, which cuts what crosses it */

.avatar {
  --h: 212; width: 40px; height: 40px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; overflow: hidden;
  font: 500 16px/1 var(--display); color: hsl(var(--h), var(--av-is), var(--av-il)); background: hsl(var(--h), var(--av-s), var(--av-l));
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.av-1 { --h: 28; } .av-2 { --h: 262; } .av-3 { --h: 152; } .av-4 { --h: 190; } .av-5 { --h: 338; }
.avatar--xs { width: 20px; height: 20px; font-size: 11px; }
.avatar--s { width: 32px; height: 32px; font-size: 13.5px; }
.avatar--l { width: 56px; height: 56px; font-size: 22px; }
.avatar--xl { width: 96px; height: 96px; font-size: 38px; }
a.who { color: inherit; text-decoration: none; }
a.who:hover { text-decoration: underline; }
/* a user's picture leads to his page, like his name next to it */
.facelink { display: inline-flex; border-radius: 50%; text-decoration: none; }
.facelink .avatar { transition: box-shadow .2s var(--ease); }
.facelink:hover .avatar { box-shadow: 0 0 0 4px var(--md-fill-high); }

/* ---------- the account, in the site's top bar (its place and the visitor's "כניסה" are the site's: site.css) ---------- */
.me { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; position: relative; }
.me:hover { background: var(--md-fill-high); }
.me .counter { position: absolute; top: 2px; left: 0; box-shadow: 0 0 0 2px var(--md-surface); }

/* ---------- loading: a thin line under the top bar ---------- */
.progress { position: sticky; top: 64px; z-index: 19; height: 3px; margin-top: -20px; margin-bottom: 17px; overflow: hidden; background: var(--md-secondary-container); }
.progress[hidden] { display: block; visibility: hidden; }
.progress span { position: absolute; top: 0; bottom: 0; width: 40%; background: var(--md-primary); border-radius: 2px; right: -40%; }
@media (prefers-reduced-motion: no-preference) {
  .progress:not([hidden]) span { animation: slide 1.2s var(--ease) infinite; }
  @keyframes slide { from { right: -40%; } to { right: 100%; } }
}

/* ---------- text fields: filled and rounded; the label rests inside the field and rises when there is text ---------- */
.tf { position: relative; display: block; --tf-bg: var(--md-fill-high); }
.tf > input, .tf > textarea, .tf > select {
  display: block; width: 100%; min-height: 56px; padding: 24px 16px 8px; border: 0; border-radius: 16px; background: var(--tf-bg); outline: 0;
  font: 400 16px/24px var(--body); color: var(--md-on-surface); -webkit-appearance: none; appearance: none; transition: box-shadow .15s var(--ease);
}
.tf > textarea { min-height: 112px; max-height: 50vh; padding-top: 28px; resize: none; overflow-y: auto; }      /* as tall as its text (board.js: fit) */
.tf > select { padding-inline-end: 44px; cursor: pointer; }
.tf > .mi { position: absolute; top: 16px; left: 12px; color: var(--md-on-surface-variant); pointer-events: none; }
.tf > input:hover, .tf > textarea:hover, .tf > select:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
.tf > input:focus, .tf > textarea:focus, .tf > select:focus { box-shadow: inset 0 0 0 2px var(--md-primary); }
.tf__label {
  position: absolute; top: 16px; right: 16px; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 16px/24px var(--body); color: var(--md-on-surface-variant); pointer-events: none;
  transition: top .15s var(--ease), font-size .15s var(--ease), color .15s var(--ease);
}
.tf > input:focus + .tf__label, .tf > textarea:focus + .tf__label,
.tf > input:not(:placeholder-shown) + .tf__label, .tf > textarea:not(:placeholder-shown) + .tf__label,
.tf > input:-webkit-autofill + .tf__label, .tf > select + .tf__label {
  top: 7px; font-size: 12px; line-height: 16px;
}
/* a long text scrolls under the risen label of a tall field: the label keeps a strip of the field's own colour */
.tf > textarea:focus + .tf__label, .tf > textarea:not(:placeholder-shown) + .tf__label {
  top: 2px; right: 2px; left: 2px; max-width: none; padding: 5px 14px 4px; border-radius: 14px 14px 0 0; background: var(--tf-bg);
}
.tf > input:focus + .tf__label, .tf > textarea:focus + .tf__label, .tf > select:focus + .tf__label { color: var(--md-primary); }
.tf > input[dir="ltr"] { text-align: left; }
.tf__hint { display: block; margin-top: 4px; padding-inline: 16px; font-size: 12.5px; line-height: 16px; color: var(--md-on-surface-variant); }
.form-error { font-size: 14px; color: var(--md-error); }
.form-error:empty { display: none; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.fields { display: grid; gap: 16px; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-items: start; }

/* a switch */
.switch {
  position: relative; flex: none; width: 52px; height: 32px; padding: 0; border: 2px solid var(--md-outline); border-radius: 16px;
  background: var(--md-fill-high); cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.switch::before {
  content: ""; position: absolute; top: 50%; right: 6px; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--md-outline);
  transition: right .2s var(--ease), width .2s var(--ease), height .2s var(--ease), margin .2s var(--ease), background-color .2s var(--ease);
}
.switch[aria-checked="true"] { background: var(--md-primary); border-color: var(--md-primary); }
.switch[aria-checked="true"]::before { right: 22px; width: 24px; height: 24px; margin-top: -12px; background: var(--md-on-primary); }
.switch[disabled] { opacity: .38; cursor: default; }

/* a check box drawn by hand (the poll's "several answers") */
.check { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 15px; }
.check input { width: 18px; height: 18px; accent-color: var(--md-primary); cursor: pointer; }

/* ---------- segmented buttons and tabs ---------- */
/* a connected group: 2px apart, the inner corners small, the chosen one full-round and in the primary colour */
.seg { display: inline-flex; gap: 2px; }
.seg__b {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 40px; padding: 0 18px; border: 0; border-radius: 8px;
  background: var(--md-fill-high); color: var(--md-on-surface-variant); font: 500 14px/20px var(--body);
  white-space: nowrap; cursor: pointer; text-decoration: none; flex: 1 1 auto;
  transition: border-radius .35s var(--spring), background-color .2s var(--ease), color .2s var(--ease);
}
.board a.seg__b { color: var(--md-on-surface-variant); }
.seg__b:first-child { border-start-start-radius: 20px; border-end-start-radius: 20px; }
.seg__b:last-child { border-start-end-radius: 20px; border-end-end-radius: 20px; }
.seg__b:active { border-radius: 4px; transition-duration: .08s; }
.seg__b .mi { width: 18px; height: 18px; }
.seg__b[aria-pressed="true"] { border-radius: 20px; background: var(--md-primary); color: var(--md-on-primary); }
.seg--block { display: flex; }

.tabs { display: flex; border-bottom: 1px solid var(--md-outline-variant); }
.tab {
  flex: 1 1 0; height: 48px; padding: 0 16px; border: 0; background: none; color: var(--md-on-surface-variant); font: 500 14.5px/20px var(--body);
  cursor: pointer;
}
.tab[aria-selected="true"] { color: var(--md-primary); }
.tab[aria-selected="true"]::before {
  content: ""; position: absolute; bottom: 0; right: 50%; width: 56px; height: 3px; margin-right: -28px; border-radius: 3px 3px 0 0; background: var(--md-primary);
}

/* ---------- the search bar ---------- */
.search {
  display: flex; align-items: center; gap: 4px; height: 48px; padding-inline: 16px 4px; border-radius: 24px; background: var(--md-fill-high);
  color: var(--md-on-surface-variant); transition: background-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search:focus-within { background: var(--md-card); box-shadow: var(--md-shadow-2); }
.search input {
  flex: 1 1 0; min-width: 0; height: 100%; padding-inline: 12px 4px; border: 0; outline: 0; background: none; font: 400 16px/24px var(--body); color: var(--md-on-surface);
  -webkit-appearance: none; appearance: none;
}
.search input::-webkit-search-cancel-button { display: none; }

/* ---------- cards, grouped lists, banners ---------- */
.panel { background: var(--md-card); border-radius: 20px; padding: 20px; }
.panel--flat { background: none; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.panel__title { font: 500 14px/20px var(--body); color: var(--md-primary); margin-bottom: 8px; }
.group { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.item { background: var(--md-card); border-radius: 4px; padding: 12px 16px; min-width: 0; }
.group > .item:first-child, .group > li:first-child > .item { border-top-left-radius: 20px; border-top-right-radius: 20px; }
.group > .item:last-child, .group > li:last-child > .item { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; }
.item--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.board a.item--link { color: inherit; }
.group__title { margin: 20px 16px 8px; font: 500 14px/20px var(--body); color: var(--md-primary); }
.group__title:first-child { margin-top: 0; }
.banner {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 16px; font-size: 14.5px; line-height: 1.5;
  background: var(--md-secondary-container); color: var(--md-on-secondary-container);
}
.banner .mi { margin-top: -1px; }
.banner--warn { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.banner--error { background: var(--md-error-container); color: var(--md-on-error-container); }
.banner .mb { margin-block: -6px; color: inherit; }
.hr { height: 1px; margin: 8px 0; border: 0; background: var(--md-outline-variant); }
.empty { display: grid; justify-items: center; gap: 8px; padding: 48px 24px; text-align: center; background: var(--md-card); border-radius: 20px; }
.empty__icon { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 8px; border-radius: 50%; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.empty__icon .mi { width: 32px; height: 32px; }
.empty h2 { font-size: 22px; }
.empty p { max-width: 32em; color: var(--md-on-surface-variant); }
.empty .row { margin-top: 12px; justify-content: center; }

/* ---------- the opening, for a visitor ---------- */
.welcome {
  position: relative; overflow: hidden; margin-bottom: 20px; padding: 24px 32px; border-radius: 28px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.welcome > div { margin-left: min(44%, 484px); }      /* the words keep clear of the line map */
.welcome h1 { font-size: clamp(26px, 3.4vw, 36px); }
.welcome p { margin-top: 8px; max-width: 36em; font-size: 16px; }
.welcome .row { margin-top: 18px; }
.welcome .mb--text { color: var(--md-on-primary-container); }
.welcome .welcome__note { margin-top: 10px; max-width: none; font-size: 13.5px; opacity: .85; }
/* a member's band: the name and one line, slim */
.welcome--slim { display: flex; align-items: center; min-height: 92px; padding-block: 14px; }
.welcome--slim > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-left: min(36%, 330px); }
.welcome--slim h1 { font-size: 26px; }
.welcome--slim p { margin-top: 0; font-size: 15px; }
/* the line map: at the band's left edge, which is where its lines leave */
.welcome__art { position: absolute; left: 0; top: 50%; width: min(42%, 460px); height: auto; transform: translateY(-50%); }
.welcome--slim .welcome__art { width: min(34%, 310px); }
.art-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 12; }
.art-blue { stroke: var(--md-primary); }
.art-orange { stroke: var(--orange); }
.art-thin { stroke: var(--md-card); stroke-width: 8; opacity: .7; }
.art-stop { fill: var(--md-card); stroke: var(--md-on-primary-container); stroke-width: 4; }

/* ---------- the list: the drawer on the side, the topics as one grouped list ---------- */
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 24px; align-items: start; }
.drawer { position: sticky; top: 84px; display: grid; gap: 16px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; padding-bottom: 4px; }
.drawer__title { padding-inline: 16px; font-size: 22px; line-height: 28px; }
.drawer .fab { justify-self: start; }
.navlist { display: grid; gap: 2px; }
.navitem {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 52px; padding-inline: 16px 20px; border-radius: 26px;
  color: var(--md-on-surface-variant); font: 500 14.5px/20px var(--body); text-decoration: none;
}
.board a.navitem { color: var(--md-on-surface-variant); }
.navitem[aria-current="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.board a.navitem[aria-current="true"] { color: var(--md-on-secondary-container); }
.navitem__n { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.navlabel { margin: 4px 16px 0; font: 500 13.5px/20px var(--body); color: var(--md-on-surface-variant); }
.drawer .chips { padding-inline: 12px; }
.wanted { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wanted a { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 12px; border-radius: 12px; color: var(--md-on-surface); text-decoration: none; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.board .wanted a { color: var(--md-on-surface); }
.wanted a:hover { background: var(--md-fill-high); }
.wanted .lbl { margin-top: 1px; }

.listbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 16px 4px 12px; }
.listbar__sum { font-size: 14px; color: var(--md-on-surface-variant); }
.sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.sortbar__label { font-size: 13.5px; color: var(--md-on-surface-variant); }
.kindchips { display: none; gap: 8px; margin: 12px -16px 0; padding: 2px 16px; overflow-x: auto; scrollbar-width: none; }
.kindchips::-webkit-scrollbar { display: none; }

.trow { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; min-height: 72px; padding: 12px 16px; }
.trow:hover { background: var(--md-fill); }
.trow--muted { opacity: .62; }
.kc { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--md-fill-high); color: var(--md-on-surface-variant); }
.kc .mi { width: 22px; height: 22px; }
.kc--idea { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.kc--question { background: var(--md-purple-container); color: var(--md-on-purple-container); }
.kc--bug { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.kc--l { width: 48px; height: 48px; }
.kc--l .mi { width: 26px; height: 26px; }
/* a title is of regular weight; what its reader did not see yet is bold - the title, and who wrote last and when */
.trow__title { font: 400 16px/24px var(--body); color: var(--md-on-surface); text-decoration: none; overflow-wrap: anywhere; }
.board a.trow__title { color: var(--md-on-surface); }
.trow__title::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }      /* the whole row opens the topic */
.trow--unread .trow__title { font-weight: 700; }
.trow--unread .trow__last { font-weight: 500; color: var(--md-on-surface); }
.trow__words { position: relative; z-index: 1; }      /* above the row's own link: the pointer resting on the words shows the first message (.peek) */
.trow__title .mi { width: 18px; height: 18px; margin-inline-end: 4px; vertical-align: -3px; color: var(--md-on-surface-variant); }
.trow__meta { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; line-height: 20px; color: var(--md-on-surface-variant); }
.trow__meta .tagchip, .trow__end .mb, .trow__end .chip { position: relative; z-index: 1; }      /* above the row's own link */
.by { display: inline-flex; align-items: center; gap: 6px; }
.sep { opacity: .5; }
.tagchip {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--md-outline-variant);
  font: 500 12.5px/1 var(--body); color: var(--md-on-surface-variant); text-decoration: none; white-space: nowrap;
}
.board a.tagchip { color: var(--md-on-surface-variant); }
.tagchip:hover { background: var(--md-secondary-container); box-shadow: none; }
.board a.tagchip:hover { color: var(--md-on-secondary-container); }
.trow__end { grid-row: 1; grid-column: 3; display: flex; align-items: center; gap: 12px; }
/* the latest message of a topic, as a small bubble like the ones of the conversation itself (board.js teaser):
   who replied last and when, and the opening words of what he wrote - beside the title where there is room,
   under it where there is not. What its reader did not see yet is told by the colour of the bubble. */
.tease {
  grid-row: 2; grid-column: 2 / 4; justify-self: start; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; padding: 5px 12px 6px;
  border-radius: 16px; border-start-start-radius: 4px; background: var(--md-fill); font-size: 13.5px; line-height: 20px; color: var(--md-on-surface-variant);
}
.trow:hover .tease { background: var(--md-fill-high); }
.tease__by { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 12.5px; line-height: 18px; white-space: nowrap; }
.tease__by bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--md-on-surface); }
.tease__by .avatar { flex: none; width: 16px; height: 16px; font-size: 9.5px; }
.tease__when { flex: none; margin-inline-start: auto; padding-inline-start: 12px; font-size: 12px; }      /* at the end of the name's line */
.tease__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--md-on-surface); }      /* one line of the reply */
.tease__text .mi { width: 16px; height: 16px; margin-inline-end: 4px; vertical-align: -3px; }
.tease--first .tease__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; color: var(--md-on-surface-variant); }
.trow--unread .tease { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }      /* the quiet tone of a chosen row: a list of unread topics is not a wall of blue */
.trow--unread .tease__by bdi, .trow--unread .tease__text { color: var(--md-on-surface); }
.trow--unread .tease__text { font-weight: 500; }
@media (min-width: 1200px) {      /* room for it beside the title: the row keeps its height */
  .trow--tease { grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) auto; }
  .trow--tease .tease { grid-row: 1; grid-column: 3; justify-self: stretch; }
  .trow--tease .trow__end { grid-column: 4; min-width: 112px; justify-content: flex-end; }      /* one width for every row: the bubbles stand in a column */
}
.count { display: inline-flex; align-items: center; gap: 6px; min-width: 44px; font: 500 14px/20px var(--body); font-variant-numeric: tabular-nums; color: var(--md-on-surface-variant); }
.count .mi { width: 18px; height: 18px; }
.more { display: flex; justify-content: center; margin-top: 16px; }

/* a look at a topic's first message, while the pointer rests on its title (board.js openPeek) */
.peek {
  position: fixed; z-index: 30; width: 440px; max-width: calc(100vw - 16px); padding: 12px 16px; border-radius: 16px; pointer-events: none;
  background: var(--md-card); box-shadow: var(--md-shadow-2); color: var(--md-on-surface); font-size: 14.5px; line-height: 1.5;
}
.peek p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.peek__more { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; color: var(--md-on-surface-variant); }
.peek__more:first-child { margin-top: 0; }
.peek__more .mi { width: 16px; height: 16px; }

/* a line of a search, of the kept messages, of a profile */
.hit { display: grid; gap: 2px; padding: 12px 16px; }
.hit__top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--md-on-surface-variant); }
.hit__title { font: 500 15px/22px var(--body); color: var(--md-on-surface); overflow-wrap: anywhere; }
.hit__text { font-size: 14.5px; line-height: 1.5; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
mark { padding: 0 2px; border-radius: 4px; background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.pagehead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.pagehead h1 { font-size: 24px; line-height: 32px; }
.narrow { max-width: 860px; margin-inline: auto; }

/* ---------- one topic ---------- */
.tv { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.tv__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; min-height: 40px; }
.tv__top .ib { margin-inline-start: -8px; }
.tv__title { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.25; overflow-wrap: anywhere; }
.tv__meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--md-on-surface-variant); }
.tv__acts { display: none; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.tv__head { margin-bottom: 20px; }
/* the pane beside a topic: one group. It never grows taller than the window - what does not fit scrolls inside it. */
.side { position: sticky; top: 84px; display: grid; gap: 2px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; border-radius: 20px; }
.side > * { border-radius: 4px; }
.votecard { display: grid; padding: 14px 20px 18px; background: var(--md-primary-container); color: var(--md-on-primary-container); }
.votecard__n { font: 400 36px/40px var(--display); font-variant-numeric: tabular-nums; }
.votecard__line { font-size: 14.5px; line-height: 20px; }
.votecard .mb { margin-top: 12px; }
.votecard .mb[aria-pressed="true"] { background: var(--md-card); color: var(--md-on-surface); }
.votecard--bug { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.votecard--bug .mb--filled { background: var(--md-tertiary); color: var(--md-on-tertiary); }
.watchrow {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) 24px; align-items: center; gap: 16px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0;
  background: var(--md-card); color: var(--md-on-surface); font: inherit; text-align: start; cursor: pointer;
}
.watchrow b { display: block; font: 500 15px/22px var(--body); }
.watchrow span span { display: block; font-size: 13.5px; line-height: 18px; color: var(--md-on-surface-variant); }
.watchrow .mi { color: var(--md-on-surface-variant); }
.watchrow--on > .mi:first-child { color: var(--md-primary); }
.factline { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 10px 16px; background: var(--md-card); font-size: 14px; color: var(--md-on-surface-variant); }
.side .panel { padding: 10px 16px 12px; }
.side .hererow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.side .hererow .panel__title { margin: 0; }
/* The status of a topic as a small route, like the lines of the logo: the stops it passed are full, the one it
   stands at is the large one, what is ahead is grey. The colour is the kind's: blue, orange for a bug, purple
   for a question. */
.routecard { padding: 10px 16px 12px; background: var(--md-card); }
.route {
  list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  --route: var(--md-primary); --route-soft: var(--md-primary-container);
}
.route--bug { --route: var(--orange); --route-soft: var(--md-tertiary-container); }
.route--question { --route: var(--md-purple); --route-soft: var(--md-purple-container); }
.route li { position: relative; padding-top: 26px; text-align: center; font: 500 13px/18px var(--body); color: var(--md-on-surface-variant); }
.route li::before { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 4px; background: var(--md-outline-variant); }      /* the stretch that leads to this stop */
.route li:first-child::before { display: none; }
.route li::after {
  content: ""; position: absolute; top: 2px; right: 50%; width: 16px; height: 16px; margin-right: -8px; border-radius: 50%;
  background: var(--md-card); box-shadow: inset 0 0 0 4px var(--md-outline-variant);
}
.route li[data-stop]::before { background: var(--route); }
.route li[data-stop="was"]::after { background: var(--route); box-shadow: none; }
.route li[data-stop="now"] { color: var(--md-on-surface); }
.route li[data-stop="now"]::after { top: -2px; width: 24px; height: 24px; margin-right: -12px; background: var(--route-soft); box-shadow: inset 0 0 0 5px var(--route); }
.people { display: flex; flex-wrap: wrap; gap: 6px; }

.thread { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.post { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 20px; border-radius: 20px; background: var(--md-card); scroll-margin-top: 84px; }
.post--dev { background: var(--md-tertiary-surface); }
.post--answer { background: var(--md-green-surface); }
.post--off { background: none; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.post--folded { grid-template-columns: minmax(0, 1fr); padding-block: 10px; color: var(--md-on-surface-variant); font-size: 14px; }
.post__head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-height: 32px; padding-inline-end: 36px; font-size: 13.5px; color: var(--md-on-surface-variant); }
.post__name { font: 500 15px/20px var(--body); color: var(--md-on-surface); }
.post__head .ib { position: absolute; top: 12px; left: 10px; }      /* the message's menu keeps its corner, however the line wraps */
.post__time { color: inherit; text-decoration: none; }
.board a.post__time { color: var(--md-on-surface-variant); }
.post__time:hover { text-decoration: underline; }
.post__sig { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--md-outline-variant); font-size: 13px; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.post__reacts { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.react { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 14px; background: var(--md-fill-high); color: var(--md-on-surface); font: 500 13px/1 var(--body); cursor: pointer; }
.react[aria-pressed="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); box-shadow: inset 0 0 0 1px var(--md-primary); }
.react[disabled] { cursor: default; }
.react b { font-size: 15px; font-weight: 400; }
.react .mi { width: 16px; height: 16px; }
.post__acts { margin-top: 8px; margin-inline-start: -6px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; }
.newline { display: flex; align-items: center; gap: 12px; padding: 4px 8px; font: 500 13px/20px var(--body); color: var(--md-primary); }
.newline::before, .newline::after { content: ""; flex: 1 1 0; height: 1px; background: var(--md-primary); opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .post--flash { animation: flash 1.8s var(--ease); }
  @keyframes flash { 0%, 40% { box-shadow: inset 0 0 0 3px var(--md-primary); } 100% { box-shadow: inset 0 0 0 3px transparent; } }
}

/* The replies are a conversation: each is a bubble next to its writer's picture, and one's own stand on the other
   side in the primary tone. The corner that points at the writer is the small one. The tools of a reply show beside
   its bubble while the pointer is on it (where there is no pointer to hover with, they stay inside the bubble). */
.post--first { margin-bottom: 6px; }
.post--reply { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 0 0 0 48px; border-radius: 0; background: none; box-shadow: none; }
.post--reply .post__lead .avatar { width: 36px; height: 36px; font-size: 15px; }
.post--reply .post__main {
  position: relative; justify-self: start; min-width: min(100%, 200px); max-width: 100%; padding: 8px 14px 10px; border-radius: 20px; border-start-start-radius: 4px;
  background: var(--md-card);
}
.post--reply .post__head { min-height: 24px; padding-inline-end: 28px; font-size: 12.5px; }
.post--reply .post__head .facelink { display: none; }      /* the picture stands beside the bubble */
.post--reply .post__head .ib { top: 4px; left: 4px; width: 32px; height: 32px; border-radius: 16px; }
.post--reply .post__head .ib .mi { width: 20px; height: 20px; }
.post--reply .post__name { font-size: 14px; color: hsl(var(--h, 212), var(--av-is), var(--av-il)); }
.post--reply .rt { margin-top: 0; font-size: 15.5px; line-height: 1.55; }
.post--reply .post__reacts { margin-top: 6px; }
.post--reply .pic img { max-height: 320px; }
.post--reply.post--dev .post__main { background: var(--md-tertiary-surface); }
.post--mine { grid-template-columns: minmax(0, 1fr); padding: 0 84px 0 0; }
.post--mine .post__lead, .post--mine .post__name, .post--mine .post__head .facelink { display: none; }
.post--mine .post__main, .post--mine.post--dev .post__main { justify-self: end; border-start-start-radius: 20px; border-start-end-radius: 4px; background: var(--md-primary-container); }
.post--reply.post--answer .post__main { background: var(--md-green-surface); }
.post--reply.post--off .post__main { background: none; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.post--editing .post__main { justify-self: stretch; }
.post--folded { padding: 6px 14px; border-radius: 12px; }
@media (hover: hover) and (pointer: fine) and (min-width: 601px) {
  /* room is kept beside every bubble, and the tools show there - outside the bubble, so nothing they cover */
  .post--reply { padding-left: 156px; }
  .post--mine { padding-right: 156px; }
  .post--reply .post__acts {
    position: absolute; top: 2px; right: calc(100% + 6px); margin: 0; flex-wrap: nowrap;
    opacity: 0; visibility: hidden; transition: opacity .12s var(--ease), visibility .12s;
  }
  .post--mine .post__acts { right: auto; left: calc(100% + 6px); }
  .post--reply:hover .post__acts, .post--reply:focus-within .post__acts { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: no-preference) {
  .post--reply.post--flash { animation: none; }
  .post--reply.post--flash .post__main { animation: flash 1.8s var(--ease); }
}

/* Where a reply is written: a bar that stays at the bottom of the window, like the one of a chat. The picture
   button before the field, the "A" and the smileys inside it, the send button after it. The strip behind the bar
   has the page's own colour, so the messages pass under it. */
.dock { position: sticky; bottom: 0; z-index: 5; margin-top: 2px; padding: 8px 0 12px; background: var(--md-surface); scroll-margin-top: 84px; }
.dock__form { display: grid; gap: 6px; }
.dock__row { display: flex; align-items: flex-end; gap: 8px; }
.dock__add, .dock__send {
  display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 16px; flex: none; cursor: pointer;
  transition: border-radius .35s var(--spring), background-color .2s var(--ease), color .2s var(--ease);
}
.dock__add { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.dock__send { background: var(--md-fill-high); color: var(--md-on-surface-variant); }
.is-ready .dock__send { background: var(--md-primary); color: var(--md-on-primary); }
.dock__add:active, .dock__send:active { border-radius: 8px; transition-duration: .08s; }
.dock__pill { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-end; gap: 2px; min-height: 48px; padding: 4px 20px 4px 8px; border-radius: 24px; background: var(--md-fill-high); cursor: text; }
.dock__pill .writer__field, .dock__pill .preview { flex: 1 1 0; min-width: 0; }
.dock__pill textarea {
  display: block; width: 100%; min-height: 40px; max-height: 40vh; padding: 8px 0; border: 0; outline: 0; background: none; resize: none; overflow-y: auto;
  font: 400 16px/24px var(--body); color: var(--md-on-surface);
}
.dock__pill textarea::placeholder { color: var(--md-on-surface-variant); opacity: 1; }
.dock__pill .preview { min-height: 40px; padding: 8px 0; border-radius: 0; box-shadow: none; }
.dock__pill .ib { margin-bottom: 4px; }
.dock__tools, .dock .suggest, .dock .attach, .dock .cite--draft, .dock .form-error { margin-inline: 56px; }
.dock__tools[hidden] { display: none; }
/* "somebody is writing": three dots that rise in turn, and the names */
.dock__typing { display: flex; align-items: center; gap: 8px; margin-inline: 56px; font-size: 13px; line-height: 18px; color: var(--md-on-surface-variant); }
.dock__typing:empty, .side > :empty { display: none; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
@media (prefers-reduced-motion: no-preference) {
  .dots i { animation: dot 1.2s var(--ease) infinite; }
  .dots i:nth-child(2) { animation-delay: .15s; }
  .dots i:nth-child(3) { animation-delay: .3s; }
  @keyframes dot { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
}
.dock .cite--draft { margin-bottom: 0; }
.replybar {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding-inline: 20px 16px; border: 0; border-radius: 24px;
  background: var(--md-fill-high); color: var(--md-on-surface-variant); font: 400 16px/24px var(--body); text-align: start; cursor: text;
}
.replybar > span { flex: 1 1 0; min-width: 0; }
.has-dock .snack { bottom: 88px; }

/* the text of a message */
.rt { margin-top: 4px; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.rt > * + * { margin-top: 10px; }
.rt p { margin: 0; }
.rt ul, .rt ol { margin: 0; padding-inline-start: 24px; }
.rt ul { list-style: disc; }
.rt ol { list-style: decimal; }
.rt li + li { margin-top: 2px; }
.rt blockquote { margin: 0; padding: 6px 14px; border-inline-start: 3px solid var(--md-outline); color: var(--md-on-surface-variant); }
.rt code { padding: 1px 6px; border-radius: 6px; background: var(--md-fill-high); font: 400 14px/1.5 var(--mono); direction: ltr; unicode-bidi: isolate; }
.rt pre.code { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--md-fill-high); overflow-x: auto; text-align: left; }
.rt pre.code code { padding: 0; background: none; white-space: pre; }
.rt a.ext { overflow-wrap: anywhere; }
.rt a.mention, a.mention { padding: 1px 6px; border-radius: 8px; background: var(--md-secondary-container); color: var(--md-on-secondary-container); text-decoration: none; font-weight: 500; }
.board .rt a.mention { color: var(--md-on-secondary-container); }
.cite { margin: 8px 0 4px; padding: 8px 14px; border-radius: 12px; border-inline-start: 3px solid var(--md-primary); background: var(--md-fill); font-size: 14.5px; line-height: 1.55; color: var(--md-on-surface-variant); }
.cite p { margin-top: 2px; overflow-wrap: anywhere; }
.cite__who { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: 500 13.5px/20px var(--body); color: var(--md-primary); }
button.cite__who { cursor: pointer; }
button.cite__who:hover { text-decoration: underline; }
.cite__who .mi { width: 18px; height: 18px; }
.cite--gone { border-inline-start-color: var(--md-outline-variant); }
.cite--draft { position: relative; margin: 0 0 12px; padding-inline-end: 44px; }
.cite--draft .ib { position: absolute; top: 4px; left: 4px; }
.pic { display: block; max-width: 100%; margin-top: 12px; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pic img { display: block; width: auto; max-width: 100%; height: auto; max-height: 440px; border-radius: 16px; background: var(--md-fill); }

/* a poll */
.poll { margin-top: 14px; padding: 16px; border-radius: 16px; background: var(--md-fill); display: grid; gap: 8px; }
.poll__q { font: 500 16px/24px var(--body); }
.poll__opt {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px;
  background: var(--md-card); color: var(--md-on-surface); font: 400 15px/22px var(--body); text-align: start; cursor: pointer;
}
.poll__opt[disabled] { cursor: default; }
.poll__bar { position: absolute; top: 0; bottom: 0; right: 0; background: var(--md-secondary-container); opacity: .7; transition: width .3s var(--ease); }
.poll__opt > span:not(.poll__bar) { position: relative; }
.poll__mark { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--md-outline); }
.poll--multi .poll__mark { border-radius: 4px; }
.poll__opt[aria-pressed="true"] .poll__mark { background: var(--md-primary); box-shadow: inset 0 0 0 2px var(--md-primary), inset 0 0 0 5px var(--md-card); }
.poll--multi .poll__opt[aria-pressed="true"] .poll__mark { box-shadow: inset 0 0 0 2px var(--md-primary); }
.poll__pct { font: 500 13.5px/20px var(--body); font-variant-numeric: tabular-nums; color: var(--md-on-surface-variant); }
.poll__foot { font-size: 13.5px; color: var(--md-on-surface-variant); }

/* writing a message */
.composer { display: grid; gap: 12px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-inline-start: -8px; }
.toolbar .grow { min-width: 8px; }
.preview { min-height: 112px; padding: 16px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--md-outline-variant); }
.preview:empty::before { content: "אין עדיין מה להציג."; color: var(--md-on-surface-variant); }
/* the names offered after an "@": a list under the field (above the reply bar's line), one name marked */
.suggest:empty { display: none; }
.suggest__list { display: grid; width: 280px; max-width: 100%; padding: 6px 0; border-radius: 16px; background: var(--md-card); box-shadow: var(--md-shadow-2); }
.suggest__item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 14px; border: 0; background: none; text-align: start;
  font: 400 15px/20px var(--body); color: var(--md-on-surface); cursor: pointer;
}
.suggest__item:hover { background: var(--md-fill); }
.suggest__item[aria-selected="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.suggest__item .lbl { margin-inline-start: auto; }
.suggest__hint { font-size: 13.5px; line-height: 20px; color: var(--md-on-surface-variant); }
.draftnote { align-items: center; }      /* the new-topic dialog continues a draft: said, with the way to start afresh */
.draftnote span { flex: 1 1 auto; }
.attach { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.attach__thumb { position: relative; display: inline-block; }
.attach__thumb img { display: block; max-width: 200px; max-height: 96px; border-radius: 12px; }
.attach__thumb .ib { position: absolute; top: -10px; left: -10px; width: 28px; height: 28px; background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); }
.attach__thumb .ib .mi { width: 16px; height: 16px; }
.filebtn { cursor: pointer; }
.filebtn:focus-within { outline: 3px solid var(--md-primary); outline-offset: 2px; }
.emojis { display: grid; grid-template-columns: repeat(6, 40px); gap: 2px; padding: 8px; }
.emojis button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 22px; line-height: 1; cursor: pointer; }
.emojis button:hover { background: var(--md-fill-high); }
.emojis button[aria-pressed="true"] { background: var(--md-secondary-container); }
.tagsfield { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 56px; padding: 10px 14px; border-radius: 16px; background: var(--md-fill-high); cursor: text; transition: box-shadow .15s var(--ease); }
.tagsfield:hover { box-shadow: inset 0 0 0 1px var(--md-outline); }
.tagsfield:focus-within { box-shadow: inset 0 0 0 2px var(--md-primary); }
.tagsfield input { flex: 1 1 120px; min-width: 80px; height: 32px; border: 0; outline: 0; background: none; font: 400 16px/24px var(--body); color: var(--md-on-surface); }
.pollbox { display: grid; gap: 12px; padding: 16px; border-radius: 16px; background: var(--md-fill); }
.pollbox .tf { --tf-bg: var(--md-card); }
.pollbox__opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; align-items: center; }

/* ---------- the account page, a profile, the moderators' page ---------- */
.srow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-height: 64px; padding: 12px 20px; }
.srow__text { flex: 1 1 220px; min-width: 0; }
.srow__text b { display: block; font: 500 15.5px/22px var(--body); }
.srow__text span { display: block; font-size: 13.5px; line-height: 20px; color: var(--md-on-surface-variant); overflow-wrap: anywhere; }
.srow--stack { display: grid; gap: 14px; padding-block: 20px; }
.phead { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; padding: 24px; border-radius: 28px; background: var(--md-card); }
.phead h1 { font-size: 26px; overflow-wrap: anywhere; }
.phead__about { margin-top: 8px; white-space: pre-line; overflow-wrap: anywhere; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 2px; margin-block: 12px 20px; }
.stat { padding: 14px 16px; background: var(--md-card); border-radius: 4px; }
.stats > .stat:first-child { border-start-start-radius: 20px; border-end-start-radius: 20px; }
.stats > .stat:last-child { border-start-end-radius: 20px; border-end-end-radius: 20px; }
.stat b { display: block; font: 500 24px/32px var(--display); font-variant-numeric: tabular-nums; }
.stat span { font-size: 13.5px; color: var(--md-on-surface-variant); }
.spark { display: flex; align-items: flex-end; gap: 3px; height: 56px; padding-top: 8px; }
.spark i { flex: 1 1 0; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--md-primary); opacity: .8; }
.arow { display: grid; gap: 6px; padding: 14px 20px; }
.arow b { font-weight: 500; overflow-wrap: anywhere; }
.arow__quote { padding: 8px 12px; border-radius: 12px; background: var(--md-fill); font-size: 14.5px; white-space: pre-line; overflow-wrap: anywhere; }
.arow__shot { display: block; max-width: 100%; max-height: 180px; border-radius: 12px; }
.maillog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 12px; font-size: 13.5px; }
.maillog span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- what floats: menus and small panels ---------- */
.float { position: fixed; z-index: 40; min-width: 200px; max-width: calc(100vw - 16px); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain;
  background: var(--md-card); border-radius: 16px; box-shadow: var(--md-shadow-2); color: var(--md-on-surface); font-size: 14.5px; }
.menu { padding: 8px 0; }
.menu__item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 16px; border: 0; background: none; text-align: start;
  font: 400 15px/20px var(--body); color: var(--md-on-surface); text-decoration: none; cursor: pointer;
}
.float a.menu__item { color: var(--md-on-surface); }
.menu__item .mi { color: var(--md-on-surface-variant); }
.menu__item--danger, .float a.menu__item--danger { color: var(--md-error); }
.menu__item--danger .mi { color: var(--md-error); }
.menu__item .counter, .menu__item .lbl { margin-inline-start: auto; }
.menu__item[aria-checked="true"] { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.menu__head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 16px 14px; }
.menu__head b { display: block; font: 500 16px/22px var(--body); overflow-wrap: anywhere; }
.menu__head span { font-size: 13px; color: var(--md-on-surface-variant); }
.menu__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 4px 16px; padding-inline: 16px 8px; font: 500 14px/20px var(--body); color: var(--md-on-surface-variant); }
.notes { width: 360px; max-width: calc(100vw - 16px); padding-bottom: 8px; }
.note { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 16px; color: var(--md-on-surface); text-decoration: none; }
.float a.note { color: var(--md-on-surface); }
.note:hover { background: var(--md-fill); }
.note .mi { color: var(--md-on-surface-variant); }
.note--new .mi { color: var(--md-primary); }
.note--new b { font-weight: 600; }
.note b { display: block; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.note span { font-size: 13px; color: var(--md-on-surface-variant); }
.notes__empty { padding: 8px 16px 12px; color: var(--md-on-surface-variant); }

/* ---------- dialogs ---------- */
/* the box is centred by its own auto margins: unlike centring by the container, its top stays reachable
   when the dialog is taller than the window */
.dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; padding: 24px 16px; overflow-y: auto; background: var(--md-scrim); }
.dialog__box {
  position: relative; width: 100%; max-width: 420px; margin: auto; padding: 24px; border-radius: 28px; background: var(--md-card);
  box-shadow: var(--md-shadow-3); color: var(--md-on-surface); font-size: 15px; line-height: 1.5;
}
.dialog__box--wide { max-width: 640px; }
.dialog__close { position: absolute; top: 12px; left: 12px; }
.dialog h2 { font-size: 24px; line-height: 32px; padding-inline-end: 36px; }
.dialog__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 12px; border-radius: 50%; background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.dialog__text { margin-top: 12px; color: var(--md-on-surface-variant); }
.dialog form, .dialog .fields { margin-top: 20px; }
.dialog form .fields { margin-top: 0; }
.dialog__acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.dialog__fine { margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--md-on-surface-variant); text-align: center; }
.dialog .tabs { margin: 16px -24px 0; }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 20px 0 16px; font-size: 13.5px; color: var(--md-on-surface-variant); }
.or::before, .or::after { content: ""; height: 1px; background: var(--md-outline-variant); }
.gsi { direction: ltr; display: flex; justify-content: center; min-height: 44px; font-size: 14px; color: var(--md-on-surface-variant); }   /* Google's button is cut inside a right-to-left box */
.codebox { margin: 16px 0 4px; display: grid; justify-items: center; gap: 12px; padding: 20px; border-radius: 16px; background: var(--md-fill); }
.code { font: 600 22px/1.2 var(--mono); letter-spacing: .08em; overflow-wrap: anywhere; text-align: center; }
.versions { display: grid; gap: 12px; margin-top: 16px; max-height: 60vh; overflow-y: auto; }
.versions__item { padding: 12px 14px; border-radius: 12px; background: var(--md-fill); }
.versions__item p { margin-top: 4px; white-space: pre-line; overflow-wrap: anywhere; }

/* ---------- the snackbar ---------- */
.snack {
  position: fixed; bottom: 24px; right: 50%; transform: translate(50%, 12px); z-index: 70; display: flex; align-items: center; gap: 8px;
  min-width: 240px; max-width: calc(100% - 32px); min-height: 48px; padding: 12px 16px; border-radius: 8px; font-size: 14.5px; line-height: 20px;
  color: var(--md-inverse-on-surface); background: var(--md-inverse-surface); box-shadow: var(--md-shadow-3);
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.snack.is-on { opacity: 1; transform: translate(50%, 0); pointer-events: auto; }
.snack button { margin-inline-start: auto; margin-block: -8px; margin-inline-end: -8px; padding: 0 12px; height: 36px; border: 0; border-radius: 18px; background: none; font: 500 14px/20px var(--body); color: var(--md-inverse-primary); cursor: pointer; }
/* "there is something new": a pill that floats above the page */
.pill { position: fixed; z-index: 16; top: 80px; right: 50%; transform: translateX(50%); box-shadow: var(--md-shadow-3); }

@media (prefers-reduced-motion: no-preference) {
  .view--in > :not(.fab) { animation: view-in .4s var(--arrive) backwards; }      /* a new place slides in (board.js: render) */
  @keyframes view-in { from { opacity: 0; transform: translateY(14px); } }
  .dialog { animation: veil-in .18s var(--ease); }
  .dialog__box { animation: rise-in .25s var(--ease); }
  .float { animation: pop-in .15s var(--ease); }
  @keyframes veil-in { from { opacity: 0; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
  @keyframes pop-in { from { opacity: 0; transform: scale(.96); } }
}

/* ---------- narrower windows ---------- */
@media (max-width: 1000px) {
  .shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .drawer { display: none; }
  .kindchips { display: flex; }
  .fab--float { display: inline-flex; }
  .board[data-view="topic"] ~ .fab--float { display: none; }
  .tv { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .tv__acts { display: flex; }
  .welcome { padding: 24px; }
  .welcome > div { margin-left: 0; }
  .welcome__art { display: none; }
  .welcome--slim .welcome__art { display: block; width: 30%; }
  .welcome--slim > div { margin-left: 32%; }
}
@media (max-width: 600px) {
  .welcome--slim .welcome__art { display: none; }
  .welcome--slim > div { margin-left: 0; }
  .board { padding-top: 12px; }
  .progress { margin-top: -12px; margin-bottom: 9px; }
  .trow { grid-template-columns: auto minmax(0, 1fr); padding: 12px; gap: 6px 12px; }
  .trow__end { grid-row: auto; grid-column: 2; justify-content: flex-start; }
  .tease { grid-row: auto; grid-column: 2; }
  .trow .kc { align-self: start; }
  .trow__meta .sep { display: none; }      /* the line wraps here, and a dot would hang at its end */
  .post--first { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; }
  .post--first .post__lead { display: none; }
  .post--first .post__head .facelink { display: inline-flex; }
  .post--reply { grid-template-columns: 32px minmax(0, 1fr); padding-left: 20px; }
  .post--reply .post__lead .avatar { width: 32px; height: 32px; font-size: 13.5px; }
  .post--mine { grid-template-columns: minmax(0, 1fr); padding: 0 52px 0 0; }
  .dock__tools, .dock__typing, .dock .suggest, .dock .attach, .dock .cite--draft, .dock .form-error { margin-inline: 0; }
  .phead { grid-template-columns: minmax(0, 1fr); justify-items: start; padding: 20px; }
  .dialog { padding: 0; }
  .dialog__box { min-height: 100%; max-width: none; border-radius: 0; padding: 20px 16px 24px; margin: 0; }
  .dialog__box--small { min-height: 0; margin: auto 16px; border-radius: 28px; width: auto; }
  .dialog .tabs { margin-inline: -16px; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .snack { bottom: 88px; }
  .listbar .sortbar, .listbar .seg { display: flex; width: 100%; }
  .listbar .seg__b { padding: 0 8px; }
  .maillog { grid-template-columns: minmax(0, 1fr) auto; }
  .maillog span:nth-child(3n+1) { display: none; }
}
@media (min-width: 601px) { .post__head .facelink { display: none; } }