/* ══════════════════════════════════════════════════════════════════════
   library.css — Learning Library hub (/library/) and item pages.
   Shared foundations (tokens, reset, nav, progress, footer, shared buttons)
   live in /site.css. This file only defines library-specific surfaces.
   ══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════ HUB HERO ═══════════════════════ */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--azulejo-dark), var(--azulejo) 55%, var(--azulejo-light));
  color: var(--white);
  padding: 156px 32px 64px;
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,0.05) 118px 120px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(255,255,255,0.05) 118px 120px);
  pointer-events: none;
}
.hero-inner { max-width: 1060px; margin: 0 auto; position: relative; z-index: 1; }
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--dourado-light);
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.5vw, 56px);
  line-height: 1.08;
  margin: 12px 0 14px;
  letter-spacing: -0.015em;
}
.hero-standfirst {
  max-width: 560px; margin: 0;
  color: #E8EEF8;
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
}

/* ═══════════════════════ FILTER CARD ═══════════════════════ */
.shell { max-width: 1060px; margin: 0 auto; padding: 0 24px; }
.filters {
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-tile);
  padding: 22px 24px;
  margin-top: -30px;
  position: relative; z-index: 2;
}
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.filter-row:last-child { margin-bottom: 0; }
.filter-help { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--azulejo); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .filter-help { margin-left: 0; flex-basis: 100%; } }
.filter-label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--cortica);
  width: 52px; flex-shrink: 0;
}

.pill {
  border: 1.5px solid var(--border);
  background: var(--marfim);
  color: var(--noite);
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms var(--ease-bounce), border-color 180ms ease;
}
.pill:hover { transform: translate(-1px, -1px); border-color: var(--azulejo); }
.pill:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.pill.on { background: var(--azulejo); border-color: var(--azulejo); color: var(--white); }
.pill.lv-a1.on { background: var(--verde); border-color: var(--verde); }
.pill.lv-a2.on { background: var(--azulejo); border-color: var(--azulejo); }
.pill.lv-b1.on { background: var(--terracotta-ink); border-color: var(--terracotta); }
.pill.lv-b2.on { background: var(--dourado); border-color: var(--dourado); color: var(--noite); }

.search {
  flex: 1; min-width: 180px;
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border);
  background: var(--marfim);
  border-radius: 999px;
  padding: 7px 15px;
}
.search svg { flex-shrink: 0; opacity: 0.5; }
.search input {
  border: 0; background: none; outline: none;
  font-family: var(--font-body); font-size: 13.5px;
  width: 100%; color: var(--noite);
}

/* Topic dropdown, styled to sit beside the pills */
.topic-select { position: relative; display: inline-flex; }
.topic-select::after {
  content: ""; position: absolute; right: 15px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--cortica); border-bottom: 2px solid var(--cortica);
  transform: rotate(45deg); pointer-events: none;
}
.topic-select select {
  appearance: none; -webkit-appearance: none;
  border: 1.5px solid var(--border); background: var(--marfim);
  border-radius: 999px; padding: 7px 36px 7px 16px;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--noite); cursor: pointer; min-width: 190px;
  transition: border-color 0.18s var(--ease-bounce), transform 0.18s var(--ease-bounce);
}
.topic-select select:hover { border-color: var(--azulejo); transform: translate(-1px, -1px); }
.topic-select select:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }

.count { font-size: 12.5px; color: var(--cortica); margin: 20px 2px 12px; }

/* ═══════════════════════ CARD GRID ═══════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
  padding-bottom: 32px;
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 20px 20px 18px;
  position: relative;
  display: flex; flex-direction: column; gap: 9px;
  text-decoration: none; color: var(--noite);
  transition: transform 180ms var(--ease-bounce), box-shadow 180ms var(--ease-bounce);
}
.card:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-tile); }
.card.hide { display: none; }

.card-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--white); padding: 3px 9px; border-radius: 3px; }
.badge.lv-a1 { background: var(--verde); }
.badge.lv-a2 { background: var(--azulejo); }
.badge.lv-b1 { background: var(--terracotta-ink); }
.badge.lv-b2 { background: var(--dourado); color: var(--noite); }
.type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--cortica); font-weight: 700; }
.mins { margin-left: auto; font-size: 11.5px; color: var(--cortica); }

.card h3 { font-family: var(--font-display); font-size: 21px; margin: 0; line-height: 1.2; }
.card .en { font-size: 13px; color: var(--cortica); font-style: italic; margin-top: -5px; }
.card p { font-size: 13.5px; margin: 0; color: #3A3A4E; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.chip { font-size: 11px; background: var(--calcada); border: 1px solid var(--border); color: var(--cortica); padding: 2px 9px; border-radius: 999px; }

/* Game card, dark variant */
.card.game {
  background: linear-gradient(150deg, #141426, var(--noite) 70%, #232345);
  border-color: var(--noite);
  color: var(--marfim);
}
.card.game h3 { color: var(--dourado-light); }
.card.game p { color: #C9C9DC; }
.card.game .en { color: #8E8EA8; }
.card.game .type { color: var(--dourado); }
.card.game .chip { background: #26263E; border-color: #33334E; color: #A8A8C0; }
.card.game:hover { box-shadow: 4px 4px 0 0 var(--dourado); }

.empty { display: none; text-align: center; padding: 56px 20px; color: var(--cortica); font-size: 15px; }
.empty.show { display: block; }

/* Hub sectioning. The grid heading restores the h1 -> h2 -> h3 order that the
   card list broke, and the notes give the page prose of its own. */
.grid-h {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 26px 0 16px; color: var(--noite);
}
.hub-notes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  border-top: 1px solid var(--border);
  margin: 12px 0 48px; padding-top: 30px;
}
.hub-note h2 {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azulejo); margin: 0 0 9px;
}
.hub-note p { margin: 0; font-size: 14.5px; line-height: 1.7; color: #3A3A4E; }

@media (max-width: 640px) {
  .hero { padding: 132px 20px 52px; }
  .shell { padding: 0 16px; }
  .filters { padding: 18px 16px; margin-top: -22px; }
  .filter-label { width: 100%; margin-bottom: 2px; }
  .grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════ ITEM HERO ═══════════════════════ */
.item-hero {
  background: linear-gradient(160deg, var(--azulejo-dark), var(--azulejo));
  color: var(--white);
  padding: 156px 32px 44px;
}
.crumb { font-size: 12.5px; color: #B9CCE8; margin-bottom: 16px; }
.crumb a { color: #B9CCE8; border-bottom: 1px solid transparent; transition: color 200ms, border-color 200ms; }
.crumb a:hover { color: var(--white); border-color: rgba(255,255,255,0.4); }
.crumb .sep { opacity: 0.5; margin: 0 4px; }
.crumb .current { color: var(--white); font-weight: 600; }
.item-hero h1 { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 46px); margin: 8px 0 4px; line-height: 1.12; }
.item-hero .sub { font-style: italic; color: #D6E2F5; font-size: 17px; margin: 0; }
.meta-row {
  display: flex; gap: 10px; margin-top: 18px;
  flex-wrap: wrap; align-items: center;
  font-size: 12.5px;
}
.meta-row .badge { font-size: 11px; }
.meta-row span:not(.badge) { color: #B9CCE8; }

/* ═══════════════════════ ARTICLE BODY (.paper) ═══════════════════════ */
.paper { max-width: 760px; margin: 0 auto; padding: 44px 24px 80px; }

.section-h {
  font-family: var(--font-display);
  font-size: 24px;
  margin: 42px 0 6px;
  position: relative;
  padding-top: 16px;
}
.section-h::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 56px; height: 3px; background: var(--dourado);
}
.section-sub { font-size: 13px; color: var(--cortica); margin: 0 0 18px; }

.intro-txt {
  font-size: 16.5px; color: #3A3A4E;
  border-left: 3px solid var(--dourado);
  padding-left: 16px;
  margin-bottom: 16px;
}

/* Reveal-all control */
.reveal-all {
  border: 1.5px solid var(--azulejo);
  background: var(--white); color: var(--azulejo);
  font-family: var(--font-body); font-weight: 700; font-size: 12.5px;
  padding: 7px 16px; border-radius: 999px;
  cursor: pointer;
  transition: transform 180ms var(--ease-bounce), background 180ms ease, color 180ms ease;
  margin-bottom: 16px;
}
.reveal-all:hover { background: var(--azulejo); color: var(--white); transform: translate(-1px, -1px); }
.reveal-all:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }

/* Dialogue: one panel, set like a script. The speaker's name sits in a
   column on the left and their colour runs down the panel's edge, so the
   turns read at a glance without breaking the conversation into boxes.
   Colours go to speakers in the order they first speak. */
.chat {
  background: var(--white);
  border: 1px solid var(--border);
  padding: 10px 0;
}
.cl {
  --c: var(--azulejo);
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 18px;
  padding: 7px 20px 7px 17px;
  border-left: 3px solid var(--c);
}
.cl .who {
  color: var(--c);
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
  line-height: 27px;            /* sits on the first line of the speech */
  overflow-wrap: anywhere;
}
.cl .fpara { font-size: 16px; line-height: 1.7; margin: 0; }
.cl .s.open .s-en { margin-bottom: 2px; }
.cl.c1 { --c: var(--terracotta-ink); }
.cl.c2 { --c: var(--azulejo); }
.cl.c3 { --c: var(--verde); }
.cl.c4 { --c: #7A4685; }
.cl.c5 { --c: #8C6512; }
.cl.c6 { --c: #2E6B78; }
.cl.c7 { --c: #9A3B5C; }
/* Narration is the stage direction between the lines: a warm band, a gold
   edge and italic text, so it never reads as somebody speaking. */
.cl.narr {
  --c: var(--dourado);
  background: var(--calcada);
  margin: 6px 0;
}
.cl.narr .who { color: var(--cortica); }
.cl.narr .fpara { font-style: italic; color: var(--cortica); }

/* Texto as one block of prose. Each sentence is its own tap target and
   drops its translation directly underneath. */
.flow {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--azulejo);
  padding: 18px 20px 6px;
}
.fpara {
  font-size: 16.5px; line-height: 1.85; color: #2C2C3E;
  margin: 0 0 14px;
}
.s {
  cursor: pointer;
  border-radius: 3px;
  transition: background 140ms ease;
}
/* Dotted underline rather than a border, so it clears the descenders and
   survives a line wrap cleanly. Kept faint: every sentence carries it, and
   at full strength the whole text reads as one long link. */
.s .s-pt {
  text-decoration: underline dotted rgba(27, 77, 142, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.s:hover .s-pt { text-decoration-color: var(--azulejo); }
.s:hover { background: rgba(27, 77, 142, 0.06); }
.s:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.s.open .s-pt {
  text-decoration-color: transparent;
  background: rgba(212, 168, 67, 0.24);
  box-shadow: 0 0 0 2px rgba(212, 168, 67, 0.24);
}
.s-en { display: none; }
.s.open .s-en {
  display: block;
  font-size: 14.5px; line-height: 1.6; font-style: italic;
  color: var(--cortica);
  border-left: 2px solid var(--dourado);
  padding-left: 12px;
  margin: 7px 0 9px;
}

/* Vocabulary / expressions grid */
.vocab {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-tile);
  margin-bottom: 16px;
}
.vocab dt, .vocab dd { background: var(--white); padding: 10px 14px; font-size: 14.5px; margin: 0; }
.vocab .t { font-weight: 700; color: var(--azulejo-dark); }
.vgroup {
  grid-column: 1 / -1; background: var(--calcada);
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cortica);
  margin: 0; padding: 10px 14px;
}

/* Column view switch. One column can be hidden, never both. */
.vocab-view { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; }
.vv {
  border: 1.5px solid var(--border); background: var(--white); color: var(--cortica);
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px;
  letter-spacing: .04em;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.vv:hover { border-color: var(--azulejo); color: var(--azulejo); }
.vv:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.vv.on { background: var(--azulejo); border-color: var(--azulejo); color: var(--white); }
.vocab.hide-en, .vocab.hide-pt { grid-template-columns: 1fr; }
.vocab.hide-en dd { display: none; }
.vocab.hide-pt dt { display: none; }

/* "What you'll learn" — the English summary under the intro */
.learn {
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid var(--verde);
  padding: 16px 20px 16px 18px;
  margin: 24px 0 8px;
}
.learn-h {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--verde); margin: 0 0 8px;
}
.learn ul { margin: 0; padding-left: 20px; }
.learn li { font-size: 14.5px; margin-bottom: 4px; color: #3A3A4E; }
.learn li:last-child { margin-bottom: 0; }

/* Questions */
.qgroup {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cortica); margin: 22px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.qgroup:first-child { margin-top: 0; }
.qnote { font-size: 13.5px; color: var(--cortica); margin: 0 0 12px; font-style: italic; }
.q { background: var(--white); border: 1px solid var(--border); padding: 16px 18px; margin-bottom: 12px; }
.q .qq { font-size: 15.5px; font-weight: 600; margin-bottom: 8px; }
.q .num { color: var(--dourado-ink); font-family: var(--font-display); font-weight: 700; margin-right: 8px; }
.show-a {
  border: 1.5px solid var(--verde); background: var(--white); color: var(--verde);
  font-weight: 700; font-size: 12px; font-family: var(--font-body);
  padding: 5px 13px; border-radius: 999px; cursor: pointer;
  transition: transform 180ms var(--ease-bounce), background 180ms ease, color 180ms ease;
}
.show-a:hover { background: var(--verde); color: var(--white); }
.show-a:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }
.ans { display: none; margin-top: 9px; font-size: 14.5px; color: var(--verde); font-style: italic; }
.q.open .ans { display: block; }
.q.open .show-a { background: transparent; color: var(--verde); }

/* English on questions and answers.
   Gold means English everywhere on this page, so the switch that summons it
   is gold too, and the text it reveals carries the same gold rule as a
   sentence translation. */
.en-view {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 12px;
}
.switch-label {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--cortica); margin-right: 2px;
}
.ev {
  border: 1.5px solid var(--border); background: var(--white); color: var(--cortica);
  font-family: var(--font-body); font-weight: 700; font-size: 11.5px; letter-spacing: .04em;
  padding: 6px 13px; border-radius: 999px; cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.ev:hover { border-color: var(--dourado); color: var(--noite); }
.ev:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 2px; }
.ev.on { background: var(--dourado); border-color: var(--dourado); color: var(--noite); }

.qq-en, .ans-en {
  display: none;
  font-size: 14px; font-style: italic; line-height: 1.55;
  color: var(--cortica);
  border-left: 2px solid var(--dourado);
  padding-left: 12px;
}
/* Tight to the line it translates, so the pair reads as one unit. */
.qq-en { margin: 5px 0 12px; }
.ans-en { margin: 5px 0 0; }
/* The revealed answer starts a new group, which matters most once the
   Mostrar resposta button has gone and stopped dividing them. */
.q.open .ans { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
.qwrap.en-q .qq-en { display: block; }
/* Only once the answer itself is showing, so the switch cannot spoil it. */
.qwrap.en-a .q.open .ans-en { display: block; }

/* Culture callout */
.culture {
  background: var(--calcada);
  border: 1px solid var(--border);
  border-left: 4px solid var(--terracotta);
  padding: 18px 20px;
  font-size: 14.5px;
  margin-bottom: 16px;
}

/* End CTA */
.cta {
  margin-top: 48px;
  background: var(--azulejo-dark);
  color: var(--white);
  padding: 32px 30px;
  text-align: center;
  box-shadow: 6px 6px 0 0 var(--dourado);
}
.cta h3 { font-family: var(--font-display); font-size: 24px; margin: 0 0 8px; }
.cta p { margin: 0 0 18px; color: #C9D8EE; font-size: 14.5px; }
.cta .btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--terracotta-ink); color: var(--white) !important;
  text-decoration: none; font-weight: 700;
  padding: 12px 26px; border-radius: 4px;
  border: 2px solid var(--noite);
  transition: transform 180ms var(--ease-bounce);
}
.cta .btn:hover { transform: translate(-2px, -2px); }

/* Related items */
.related { margin-top: 8px; }
.related-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); }
.related-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); padding: 14px 18px;
  color: inherit; text-decoration: none;
  transition: background 200ms ease;
}
.related-card:hover { background: var(--calcada); }
.related-title { font-family: var(--font-display); font-size: 16px; flex: 1; }
.related-mins { font-size: 12px; color: var(--cortica); }

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 560px) {
  .vocab { grid-template-columns: 1fr; }
  .vocab .t { padding-bottom: 2px; }
}

@media (max-width: 640px) {
  .item-hero { padding: 132px 20px 36px; }
  .paper { padding: 36px 16px 64px; }
  .cl { grid-template-columns: minmax(0, 1fr); padding: 8px 14px 8px 13px; }
  .cl .who { line-height: 1.4; margin-bottom: 2px; }
  .cl.narr .who { display: none; }   /* the band says it already, the label repeats */
  .topic-select, .topic-select select { width: 100%; min-width: 0; }
  .learn { padding: 14px 16px; }
  .cta { padding: 26px 20px; box-shadow: 4px 4px 0 0 var(--dourado); }
  .cta .btn { width: 100%; justify-content: center; }

  /* The meta row wraps on mobile, so the dot separators would dangle */
  .meta-row { gap: 6px 12px; }
  .meta-row .dot { display: none; }

  /* Narrow viewport is effectively always touch, so size the controls for it */
  .pill, .topic-select select, .search { min-height: 44px; }
  .reveal-all, .show-a, .vv, .ev { min-height: 44px; padding-left: 20px; padding-right: 20px; }
  .vocab-view { gap: 8px; }
  .fpara { line-height: 2.0; }
}

@media (max-width: 380px) {
  .related-card { flex-wrap: wrap; gap: 8px; }
  .related-title { flex: 1 1 100%; order: 3; }
}

/* Touch devices get full-size tap targets. Pointer devices keep the
   tighter visual rhythm, so this costs the desktop design nothing. */
@media (pointer: coarse) {
  .pill, .topic-select select { min-height: 44px; }
  .search { min-height: 44px; }
  .reveal-all, .show-a, .vv, .ev { min-height: 44px; padding-left: 20px; padding-right: 20px; }
  .vv { min-height: 44px; padding-left: 18px; padding-right: 18px; }
  .related-card { min-height: 56px; }
  /* Sentences are inline text, so they get a taller line instead of a
     taller box. Anything else would break the paragraph apart. */
  .fpara { line-height: 2.05; }
}
@media (prefers-reduced-motion: reduce) {
  .s { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pill, .card, .reveal-all, .show-a, .vv, .ev, .cta .btn {
    transition: none !important;
  }
}

.cta .cta-more { display: block; margin-top: 14px; font-size: 14px; font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; opacity: 0.9; }
.cta .cta-more:hover { opacity: 1; }

/* ═══════════════════════ READ TICKS AND ITEM TOOLS ═══════════════════════ */
/* Progress is kept in the reader's own browser. The index counts the ticks
   the item pages write. */
.read-progress { margin: 0 0 22px; }
.read-bar { height: 6px; border-radius: 999px; background: var(--calcada); border: 1px solid var(--border); overflow: hidden; }
.read-bar-fill { height: 100%; width: 0; background: var(--verde); border-radius: 999px; transition: width 400ms ease; }
.read-progress-text { margin: 8px 0 0; font-size: 13.5px; font-weight: 600; color: var(--noite); }
.read-toggle {
  font: inherit; font-weight: 600; color: var(--azulejo); cursor: pointer;
  background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.read-toggle:focus-visible { outline: 2px solid var(--azulejo); outline-offset: 3px; border-radius: 3px; }
.read-tick {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--verde); border: 1.5px solid var(--verde); border-radius: 999px; padding: 1px 8px;
}
.card.game .read-tick { display: none; }
.card.is-read h3 { color: #4a4a5e; }

.item-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 40px 0 0; }
.item-tools + .share-row { margin-top: 18px; }
@media (prefers-reduced-motion: reduce) { .read-bar-fill { transition: none; } }

/* ═══════════════════════ PRINT ═══════════════════════ */
/* A library item should print as a clean worksheet: every translation and
   model answer expanded, site chrome and interactive affordances gone. */
@media print {
  .nav, .footer, .wa-float, .progress, .filters, .cta, .related,
  .item-tools, .share-row,
  .reveal-all, .show-a, .section-sub,
  .vocab-view, .en-view { display: none !important; }

  body { background: #fff !important; color: #000 !important; }

  .item-hero, .hero {
    background: none !important; color: #000 !important;
    padding: 0 0 12px !important; border-bottom: 2px solid #000;
  }
  .item-hero h1, .hero h1 { font-size: 26pt; }
  .item-hero .sub, .meta-row, .crumb { color: #333 !important; }
  .crumb { display: none; }

  .paper { max-width: 100%; padding: 0; }

  /* Expand every hidden answer and translation */
  .ans { display: block !important; color: #000 !important; }
  .qq-en, .ans-en {
    display: block !important; font-style: italic; color: #444 !important;
    border-left: 2px solid #999; padding-left: 10px; margin: 4px 0 7px;
  }

  /* A hidden vocabulary column is a screen study aid, never a printed one. */
  .vocab.hide-en, .vocab.hide-pt { grid-template-columns: 1fr 1fr !important; }
  .vocab.hide-en dd, .vocab.hide-pt dt { display: block !important; }

  .s-en {
    display: block !important; font-style: italic; color: #444 !important;
    border-left: 2px solid #999; padding-left: 10px; margin: 4px 0 7px;
  }
  .s .s-pt, .s.open .s-pt {
    border-bottom: 0 !important; background: none !important; box-shadow: none !important;
  }
  .flow { border: 1px solid #000; border-left: 4px solid #000; padding: 12px 14px 2px; }
  .fpara { break-inside: auto; }

  .learn { border: 1px solid #000; border-left: 4px solid #000; }
  .chat, .flow, .q, .culture, .vocab dt, .vocab dd {
    background: #fff !important; box-shadow: none !important;
  }
  .vocab { box-shadow: none !important; border-color: #000; }
  .badge { border: 1px solid #000; color: #000 !important; background: none !important; }

  /* Keep a block and its translation on the same page */
  .cl, .q, .learn { break-inside: avoid; page-break-inside: avoid; }
  .section-h { break-after: avoid; page-break-after: avoid; }

  a[href]::after { content: ""; }
}

/* Keyboard users can jump past a long text's sentence buttons */
.skip-q {
  position: absolute; left: -9999px; top: auto;
  padding: 10px 16px; border-radius: 999px; background: var(--azulejo); color: var(--white); font-weight: 700;
}
.skip-q:focus { position: static; display: inline-block; margin: 0 0 16px; }
.vocab + .vgroup, .vgroup + .vocab { margin-top: 0; }
.vocab:not(:has(dt)) { display: none; }
.vgroup { border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; }
.vgroup + .vocab { border-top-left-radius: 0; border-top-right-radius: 0; }
.grid-count { margin: -6px 0 14px; font-size: 14px; color: var(--cortica); }
.item-help { font-size: 14.5px; margin: 0 0 18px; color: var(--noite); }
.item-help a { color: var(--azulejo); text-decoration: underline; text-underline-offset: 3px; }
.related-en { display: block; font-size: 13px; color: var(--cortica); margin-top: 2px; }
.next-item { margin: 8px 0 22px; }
.next-item a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 999px;
  background: var(--white); border: 2px solid var(--azulejo); color: var(--azulejo); font-weight: 700;
}
.next-item a:hover { background: var(--azulejo); color: var(--white); }
.grid-level { grid-column: 1 / -1; margin: 18px 0 -4px; }
.grid-level:first-child { margin-top: 0; }
.grid-level h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.2; margin: 0 0 4px; color: var(--noite); }
.grid-level p { margin: 0; font-size: 14.5px; color: var(--cortica); }
.grid-level.hide { display: none; }
.related-en { flex: 0 1 240px; }
@media (max-width: 640px) {
  .related-card { flex-wrap: wrap; gap: 4px 8px; }
  .related-title { flex: 1 1 100%; order: 3; }
  .related-en { flex: 1 1 100%; order: 4; margin-top: 0; }
}
/* On this page: section chips, sticky under the nav on phones */
.item-toc { display: flex; gap: 8px; overflow-x: auto; padding: 10px 0; margin: 0 0 18px; scrollbar-width: none; }
.item-toc::-webkit-scrollbar { display: none; }
.item-toc a {
  flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--white); color: var(--noite); font-size: 13.5px; font-weight: 600;
}
.item-toc a:hover { border-color: var(--azulejo); color: var(--azulejo); }
@media (max-width: 760px) {
  .item-toc { position: sticky; top: 68px; z-index: 5; background: var(--marfim); margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
}
.section-h[id] { scroll-margin-top: 130px; }
.show-all-a {
  display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 12px; padding: 8px 18px; border-radius: 999px;
  border: 1.5px solid var(--verde); background: var(--white); color: var(--verde); font-weight: 700; font-size: 14px; cursor: pointer;
}
.show-all-a[aria-pressed="true"] { background: var(--verde); color: var(--white); }
@media print { .item-toc, .show-all-a { display: none !important; } }