/* Variant 2 — "Плакат" (poster).
   Poster brutalism: a 2px black rule around everything, hard offset shadows,
   pill controls, one loud orange. Unbounded shouts the titles, Golos Text
   speaks the rest.

   Structurally it differs from the skeleton in two places: topics become
   full-width rules instead of a grid, and both tables become tiles. */
:root[data-variant="poster"] {
  --bg: #f2f1ec;
  --panel: #f2f1ec;
  --surface: #ffffff;
  --line: #0e0e0e;
  --line-soft: #e6e4dc;
  --ink: #0e0e0e;
  --ink-soft: #3a3a36;
  --muted: #5a5a55;
  --placeholder: #8a8a84;

  --accent: #ff6a2b;
  --accent-hover: #f05a1b;
  --accent-soft: #ffe3d6;
  --accent-ink: #b8400f;
  /* The orange is a fill colour; as text it is the darker one, and on the
     ink-coloured ground of an active row the bright one (UX-10). */
  --accent-text: var(--accent-ink);
  --accent-text-hover: #8f3009;
  --accent-on-ink: var(--accent);
  --on-accent: #0e0e0e;

  --chip: #ffffff;
  --chip-ink: #0e0e0e;
  --dash: #8a8a84;

  --row-edit: #ffe3d6;
  --seg-on: #0e0e0e;
  --seg-shadow: none;
  --menu-shadow: 4px 4px 0 #0e0e0e;

  --danger: #b8400f;
  --ok: #1f7a3f;
  --pending: #8a8a84;

  --radius: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --border-w: 2px;
  --shadow-btn: 4px 4px 0 var(--line);
  --shadow-card: 6px 6px 0 var(--line);

  --font-display: Unbounded, "Noto Sans Armenian", sans-serif;
  --font-body: "Golos Text", "Noto Sans Armenian", system-ui, sans-serif;
  --h1-size: clamp(38px, 6.5vw, 88px);
  --h1-weight: 700;
  --h1-spacing: -0.03em;
  --label-spacing: 0.08em;
  --label-transform: uppercase;

  --art-bg: #0e0e0e;
  --art-ink: #f2f1ec;
}

@media (prefers-color-scheme: dark) {
  :root[data-variant="poster"]:not([data-theme="light"]) {
    --bg: #0e0e0e;
    --panel: #0e0e0e;
    --surface: #1a1a19;
    --line: #f2f1ec;
    --line-soft: #2a2a28;
    --ink: #f2f1ec;
    --ink-soft: #d2d1cb;
    --muted: #a3a29c;
    --placeholder: #7d7c77;

    --accent: #ff6a2b;
    --accent-hover: #ff8348;
    --accent-soft: #3a1e12;
    --accent-ink: #ff9a6b;
  --accent-text: var(--accent-ink);
  --accent-text-hover: #ffb48f;
  /* The ink is light here: the dark orange reads on it. */
  --accent-on-ink: #b8400f;
    --on-accent: #0e0e0e;

    --chip: #1a1a19;
    --chip-ink: #f2f1ec;
    --dash: #6b6a65;

    --row-edit: #3a1e12;
    --seg-on: #f2f1ec;
    --menu-shadow: 4px 4px 0 #f2f1ec;

    --danger: #f08b70;
    --ok: #5fbe86;
    --pending: #6b6a65;

    --art-bg: #1a1a19;
    --art-ink: #f2f1ec;
  }
}

:root[data-variant="poster"][data-theme="dark"] {
  --bg: #0e0e0e;
  --panel: #0e0e0e;
  --surface: #1a1a19;
  --line: #f2f1ec;
  --line-soft: #2a2a28;
  --ink: #f2f1ec;
  --ink-soft: #d2d1cb;
  --muted: #a3a29c;
  --placeholder: #7d7c77;

  --accent: #ff6a2b;
  --accent-hover: #ff8348;
  --accent-soft: #3a1e12;
  --accent-ink: #ff9a6b;
  --accent-text: var(--accent-ink);
  --accent-text-hover: #ffb48f;
  /* The ink is light here: the dark orange reads on it. */
  --accent-on-ink: #b8400f;
  --on-accent: #0e0e0e;

  --chip: #1a1a19;
  --chip-ink: #f2f1ec;
  --dash: #6b6a65;

  --row-edit: #3a1e12;
  --seg-on: #f2f1ec;
  --menu-shadow: 4px 4px 0 #f2f1ec;

  --danger: #f08b70;
  --ok: #5fbe86;
  --pending: #6b6a65;

  --art-bg: #1a1a19;
  --art-ink: #f2f1ec;
}

/* --- chrome ------------------------------------------------------------ */

[data-variant="poster"] .topbar {
  min-height: 72px;
  background: var(--bg);
}

[data-variant="poster"] .brand span {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-variant="poster"] .crumbs {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-variant="poster"] .crumb-current {
  padding: 6px 0;
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* Every control in the bar is a pill with a hard rule around it. */
[data-variant="poster"] button.search-trigger,
[data-variant="poster"] .card-search input,
[data-variant="poster"] select.switcher,
[data-variant="poster"] .profile-link,
[data-variant="poster"] .btn-link,
[data-variant="poster"] .seg,
[data-variant="poster"] .seg button {
  border-radius: var(--radius-pill);
}

[data-variant="poster"] .seg {
  background: var(--surface);
  border: var(--border-w) solid var(--line);
  padding: 2px;
}

[data-variant="poster"] .seg button.active,
[data-variant="poster"] .seg button.active:hover:not(:disabled) {
  background: var(--seg-on);
  color: var(--bg);
}

[data-variant="poster"] .avatar {
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--accent-on-ink);
  font-family: var(--font-display);
}

/* --- buttons ----------------------------------------------------------- */

[data-variant="poster"] button.ghost,
[data-variant="poster"] button.icon-btn.outline {
  border-color: var(--line);
}

/* The page's main call to action carries the poster treatment: display face,
   set in capitals, sitting on its own hard shadow. */
[data-variant="poster"] .page-actions > button,
[data-variant="poster"] .stacked-form button[type="submit"],
[data-variant="poster"] .login-methods button[type="submit"] {
  min-height: 56px;
  border-color: var(--line);
  box-shadow: var(--shadow-btn);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

[data-variant="poster"] button.icon-btn {
  border-radius: var(--radius-pill);
}

[data-variant="poster"] button.icon-btn.primary,
[data-variant="poster"] button.icon-btn.outline {
  border-radius: var(--radius);
}

/* --- topics: one rule per row, not a grid of cards -------------------- */

[data-variant="poster"] .topic-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border-top: var(--border-w) solid var(--line);
}

[data-variant="poster"] .topic-card {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr) 120px auto;
  align-items: center;
  column-gap: 20px;
  min-height: 120px;
  padding: 14px 16px;
  border: none;
  border-bottom: var(--border-w) solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* The in-place form is a column again — a row of inputs would not fit. */
[data-variant="poster"] .topic-card.editing {
  display: block;
  padding: 20px 16px;
  background: var(--row-edit);
  box-shadow: inset 4px 0 0 var(--accent);
}

[data-variant="poster"] .glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 56px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
}

[data-variant="poster"] .topic-card.editing .glyph {
  margin-bottom: 14px;
}

[data-variant="poster"] .topic-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

[data-variant="poster"] .topic-card .card-foot {
  margin-top: 0;
  padding-top: 0;
  justify-content: flex-end;
  gap: 10px;
}

[data-variant="poster"] .open-link {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 13px;
}

[data-variant="poster"] button.add-tile {
  min-height: 96px;
  flex-direction: row;
  justify-content: flex-start;
  padding-left: 140px;
  border: none;
  border-bottom: var(--border-w) dashed var(--line);
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 17px;
}

[data-variant="poster"] .add-tile-mark {
  display: none;
}

/* A phone has no room for the five columns: the glyph on the left, the
   rest stacked beside it (UX-7). */
@media (max-width: 760px) {
  /* The poster's crumbs are capitals set wide: on a phone's one-row top bar
     only the page itself fits, whole; the drawer has the way up. */
  [data-variant="poster"] .crumbs > :not(:last-child) {
    display: none;
  }

  [data-variant="poster"] .topic-card {
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    min-height: 0;
    padding: 16px 0;
  }

  [data-variant="poster"] .topic-card > .glyph {
    grid-row: 1 / span 4;
    align-self: start;
    width: 56px;
    height: 40px;
    font-size: 14px;
  }

  [data-variant="poster"] .topic-card > :not(.glyph) {
    grid-column: 2;
  }

  [data-variant="poster"] .topic-card .card-foot {
    justify-content: space-between;
  }

  [data-variant="poster"] button.add-tile {
    padding-left: 70px;
  }
}

/* --- grid layout: both tables become tiles ------------------------------
   Gated on `data-layout`: in list layout the poster variant keeps the
   skeleton's table and only re-dresses it with these tokens. */

/* Only the list panels dissolve into loose tiles — a padded panel (the profile
   cards) stays a box. */
[data-variant="poster"][data-layout="grid"] .panel:has(.rows) {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

[data-variant="poster"][data-layout="grid"] .panel-head {
  display: none;
}

[data-variant="poster"][data-layout="grid"] .rows {
  display: grid;
  gap: 24px;
}

[data-variant="poster"][data-layout="grid"] .row {
  border-bottom: none;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 20px;
  align-content: start;
}

/* Beats `.rows > .row:last-child`, which drops the bottom border in the
   skeleton's table. Here every tile keeps all four sides. */
[data-variant="poster"][data-layout="grid"] .rows > .row:last-child {
  border-bottom: var(--border-w) solid var(--line);
}

/* A folded item is simply gone: a zero-height tile would still take a slot. */
[data-variant="poster"][data-layout="grid"] .rows > .folds.folded {
  display: none;
}

/* The composer and the select bar are not cards: they span the grid. */
[data-variant="poster"][data-layout="grid"] .rows > .composer,
[data-variant="poster"][data-layout="grid"] .rows > .select-bar {
  grid-column: 1 / -1;
}

/* A bar, not a tile — but sized like one with the composer above it put
   away: the same padding, and a border of the same width, just unseen. */
[data-variant="poster"][data-layout="grid"] .rows > .select-bar {
  padding: 10px 20px;
  border: var(--border-w) solid transparent;
}

[data-variant="poster"][data-layout="grid"] .row.editing,
[data-variant="poster"][data-layout="grid"] .row.adding {
  background: var(--row-edit);
  border-style: dashed;
  box-shadow: 6px 6px 0 var(--accent);
}

/* The new-deck row is a dashed tile, like the new-topic one on the home
   grid: the button fills it. */
[data-variant="poster"][data-layout="grid"] .create-slot .row.add-row {
  display: flex;
  align-items: stretch;
  min-height: 280px;
  padding: 0;
  border: 1.5px dashed var(--dash);
  background: transparent;
  box-shadow: none;
}

[data-variant="poster"][data-layout="grid"] .create-slot .row.add-row:hover {
  border-color: var(--accent);
}

[data-variant="poster"][data-layout="grid"] button.add-row-btn {
  flex: 1;
  height: auto;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-lg);
}

[data-variant="poster"][data-layout="grid"] button.add-row-btn:hover:not(:disabled) {
  background: transparent;
}

/* Adding a deck reads like adding a topic on the home page: the same
   display-face label, the same size, above the same dashed rule. */
[data-variant="poster"] button.add-row-btn {
  min-height: 96px;
  font-family: var(--font-display);
  font-size: 17px;
}

[data-variant="poster"]:not([data-layout="grid"]) .rows > .row:has(+ .create-slot) {
  border-bottom-style: dashed;
}

[data-variant="poster"][data-layout="grid"] .row-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  white-space: normal;
}

/* Decks — three to a row, header line on top, counts on the baseline. */
[data-variant="poster"][data-layout="grid"] .rows:has(.deck-cols) {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr auto;
  min-height: 280px;
  row-gap: 14px;
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols .access,
[data-variant="poster"][data-layout="grid"] .row.deck-cols .seg {
  grid-row: 1;
  grid-column: 1;
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols .row-actions {
  grid-row: 1;
  grid-column: 2;
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols .row-main {
  grid-row: 2;
  grid-column: 1 / -1;
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols > .row-when,
[data-variant="poster"][data-layout="grid"] .row.deck-cols .row-grid > .row-when {
  display: block;
  grid-row: 3;
  align-self: end;
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols > :nth-child(3),
[data-variant="poster"][data-layout="grid"] .row.deck-cols .row-grid > :nth-child(3) {
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

[data-variant="poster"][data-layout="grid"] .row.deck-cols > :nth-child(4),
[data-variant="poster"][data-layout="grid"] .row.deck-cols .row-grid > :nth-child(4) {
  grid-column: 2;
  text-align: right;
}

/* Cards — four to a row: the actions on a line of their own up top, so the
   front gets the tile's full width (a long word would otherwise break), then
   the back below it. */
[data-variant="poster"][data-layout="grid"] .rows:has(.card-cols) {
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}

[data-variant="poster"][data-layout="grid"] .row.card-cols {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  /* A tile reads top-down; the list's centring would float the back side
     into the middle of its stretched last row. */
  align-items: start;
  min-height: 200px;
  row-gap: 10px;
}

[data-variant="poster"][data-layout="grid"] .row.card-cols .row-actions {
  grid-row: 1;
  /* Tucked into the corner, so the empty line above the text stays small. */
  margin: -8px -8px 0 0;
}

/* The grip shares that first line, on the left. */
[data-variant="poster"][data-layout="grid"] .row.card-cols > .row-grip {
  top: 12px;
  bottom: auto;
  height: 44px;
}

[data-variant="poster"][data-layout="grid"] .row.card-cols .card-side.front,
[data-variant="poster"][data-layout="grid"] .row.card-cols input.inline-input.front {
  grid-row: 2;
  grid-column: 1;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
}

[data-variant="poster"][data-layout="grid"] .row.card-cols .card-side.back,
[data-variant="poster"][data-layout="grid"] .row.card-cols input.inline-input.back {
  grid-row: 3;
  grid-column: 1 / -1;
  padding-top: 8px;
  border-top: var(--border-w) dotted var(--muted);
}

[data-variant="poster"][data-layout="grid"] .row.card-cols input.inline-input.back {
  border-top: none;
}/* --- topics nav becomes a row of pills above the page ----------------- */

[data-variant="poster"] .shell {
  flex-wrap: wrap;
  /* Lines pack to the top. The default stretches them to fill the shell's
     min-height, so the pill row grew whenever the page below was short, and
     jumped as content loaded in or out. */
  align-content: flex-start;
}

[data-variant="poster"] .sidebar {
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 24px 40px 0;
  border-right: none;
}

/* The chip row has no head to speak of: no search, and nothing to hide. */
[data-variant="poster"] .sidebar-head {
  margin: 0;
}

[data-variant="poster"] .sidebar-head button.side-btn {
  display: none;
}

[data-variant="poster"] .sidebar-title {
  padding: 0;
  font-weight: 600;
}

[data-variant="poster"] .side-link {
  width: auto;
  padding: 0 18px;
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-weight: 600;
}

[data-variant="poster"] .side-link.active {
  background: var(--ink);
  color: var(--bg);
}

[data-variant="poster"] .side-link.active .side-count,
[data-variant="poster"] .side-link.active .side-glyph {
  color: var(--accent-on-ink);
}

[data-variant="poster"] .side-label {
  flex-grow: 0;
}

/* Chips stand in a row, not a column: a count needs no room kept for wider
   ones. */
[data-variant="poster"] .side-count {
  min-width: 0;
}

[data-variant="poster"] .side-glyph {
  width: auto;
  font-family: var(--font-display);
  font-size: 12px;
  text-transform: uppercase;
}

[data-variant="poster"] .content {
  padding-top: 28px;
}

/* --- login: the words themselves are the artwork ------------------------ */

[data-variant="poster"] .login-art {
  order: -1;
  flex: 0 0 min(52%, 760px);
  margin: 0;
  padding: 48px;
  border-radius: 0;
  justify-content: center;
  gap: 2px;
}

[data-variant="poster"] .art-card {
  position: static;
  width: auto;
  height: auto;
  gap: 0;
  align-items: flex-start;
  background: transparent;
  box-shadow: none;
  transform: none;
}

[data-variant="poster"] .art-card b {
  font-family: var(--font-display);
  font-size: clamp(38px, 6vw, 88px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--art-ink);
}

[data-variant="poster"] .art-card.two b {
  color: var(--accent);
}

[data-variant="poster"] .art-card.three b {
  color: transparent;
  -webkit-text-stroke: 2px var(--art-ink);
}

[data-variant="poster"] .art-card span {
  display: none;
}

[data-variant="poster"] .login-art p {
  margin-top: 36px;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: var(--art-ink);
  opacity: 0.78;
}

[data-variant="poster"] .login-col {
  width: auto;
  flex-grow: 1;
}

[data-variant="poster"] .login-form input,
[data-variant="poster"] .login-form .btn-link {
  min-height: 56px;
}

[data-variant="poster"] .login-intro h1 {
  font-size: clamp(32px, 4vw, 46px);
}

@media (max-width: 900px) {
  [data-variant="poster"] .login-art {
    display: none;
  }
}