:root {
  --colorMain01: #233d4d;
  --colorMain02: #fe7f2d;
  --colorMain03: #619b8a;
  --colorMain04: #fcca46;
  --colorMain05: #a1c181;

  /* The accent hue darkened for TEXT on a light surface. --colorMain02 itself only reaches ~2.5:1
     against white, so small type set in it is unreadable; this lands at ~4.8:1 (WCAG AA) while
     still reading as the same brand orange. Use it for coloured words, never for fills. */
  --colorMain02Ink: #b8551a;

  --surface: #ffffff;
  --surfaceAlt: #f4f6f7;
  --border: #d7dde1;
  --textMuted: #5b6b73;

  --statusSuccess: var(--colorMain05);
  --statusWarning: var(--colorMain04);
  --statusInfo: var(--colorMain03);
  --statusDanger: #d64545;

  --ink: var(--colorMain01);
  --maxw: 1120px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(35, 61, 77, .06), 0 8px 24px rgba(35, 61, 77, .07);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--surfaceAlt);
  line-height: 1.6;
  /* overflow-wrap is inherited, so this is the one place that keeps a long word/URL in any
     submitted text (submission, evaluation comment, title, description) from overflowing its
     card/table cell instead of wrapping. */
  overflow-wrap: break-word;
}

a { color: var(--colorMain03); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 500; color: var(--ink); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 24px; min-height: 76px; padding-block: 10px;
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 600; font-size: 1.1rem; }
.brand img { height: 74px; width: auto; }
/* Site name on top, who you are signed in as underneath — the two were on one line separated by a
   colon, which read as part of the title. The accent colour is what separates them now. */
.brand-text { font-size: 1.5rem; display: flex; flex-direction: column; line-height: 1.25; }
.brand-user { font-size: .82rem; font-weight: 600; color: var(--colorMain02Ink); }
.nav-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Two-row nav: participation on top, organisation below (see base.html). */
.nav-stacked { flex-direction: column; align-items: flex-start; gap: 4px; }
.nav-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.nav-group + .nav-group { padding-top: 4px; border-top: 1px solid var(--border); }
.nav-links a, .nav-links .stub { color: var(--ink); font-weight: 500; font-size: .92rem; }
.nav-links .stub { color: var(--textMuted); cursor: default; }
.nav-links .stub .soon { font-size: .68rem; color: var(--textMuted); margin-left: 4px; }
.header-actions { display: flex; align-items: center; gap: 10px; }

/* On mobile the nav text and the action buttons no longer fit beside the logo — they wrap onto
   their own full-width rows below it instead of overflowing the header. */
@media (max-width: 760px) {
  .site-header .wrap { flex-wrap: wrap; padding-block: 14px; }
  .brand { width: 100%; margin-right: 0; }
  .nav-links, .header-actions { width: 100%; }
  .nav-links { margin-top: 4px; }
  .header-actions { margin-top: 8px; }
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .92rem;
  padding: 9px 16px; border-radius: 10px; border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary { background: var(--colorMain02); color: #fff; }
/* A second filled action for when a page starts two different things (revision 12: Nova obra vs
   Coleções). Deep slate rather than the teal --colorMain03: white on teal is ~3.2:1, which fails AA
   for text this size, while slate clears 11:1 — and it stays clearly not-the-primary. */
.btn-secondary { background: var(--colorMain01); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn-danger { background: var(--statusDanger); color: #fff; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Revision 13 — an action the viewer cannot take right now, shown WITH its reason instead of being
   hidden. The button greys out and the sentence from the service module sits under it, so the row
   says "not yet, and here is why" rather than silently missing a control the next row has. Stacked
   rather than inline: the reasons are sentences, and beside a button they would push the table
   column wider than the data in it. */
.action-blocked { display: inline-flex; flex-direction: column; gap: 2px; vertical-align: top; }
.action-reason { font-size: .72rem; font-style: italic; color: var(--textMuted); max-width: 22ch; }

.main { padding-block: 40px; }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px;
  margin-bottom: 20px;
}
.card h2 { margin-top: 0; font-size: 1.3rem; }

.pill, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .74rem; font-weight: 600; padding: 4px 11px; border-radius: 999px;
}
.pill.success { color: #4a6b30; background: rgba(161, 193, 129, .24); }
.pill.warning { color: #8a6a12; background: rgba(252, 202, 70, .26); }
.pill.info { color: #35695c; background: rgba(97, 155, 138, .20); }
.pill.danger { color: #a32d2d; background: rgba(214, 69, 69, .15); }
.pill.muted { color: var(--textMuted); background: var(--surfaceAlt); }
.badge { border: 1px solid var(--border); background: var(--surface); color: var(--ink); }
.badge.default-project { border-color: rgba(252, 202, 70, .5); color: #8a6a12; background: rgba(252, 202, 70, .12); }

.empty-state { color: var(--textMuted); font-style: italic; }

/* "Back" link every detail page renders above its heading (base.html {% block back %}). */
.back-link {
  display: inline-block; margin-bottom: 12px;
  font-size: .88rem; font-weight: 600; color: var(--textMuted);
}
.back-link:hover { color: var(--colorMain03); }

.messages { list-style: none; padding: 0; margin: 0 0 20px; }
.messages li {
  padding: 10px 14px; border-radius: 10px; margin-bottom: 8px; font-size: .92rem;
}
.messages .success { background: rgba(161, 193, 129, .2); color: #4a6b30; }
.messages .info { background: rgba(97, 155, 138, .15); color: #35695c; }
.messages .error, .messages .warning { background: rgba(214, 69, 69, .1); color: #a32d2d; }

/* ============================== FORMS ==============================
   No Bootstrap stylesheet is loaded anywhere in this project, but crispy_forms renders with the
   bootstrap5 pack — so `.mb-3`, `.form-label`, `.form-control`, `.form-text`, `.invalid-feedback`
   and `.form-check` arrive as bare class names and THIS SECTION is the only thing that gives them
   meaning. Read `.mb-3` as "crispy field wrapper", not as a Bootstrap spacing utility. Without the
   rules below, labels and controls collapse into an unspaced stack where a label baseline-aligns
   to the bottom of a neighbouring textarea, which is what this section exists to fix.

   Layout: every field is a two-column grid — label on the left, the control and everything bound
   to it (help text, errors, sub-fields) on the right — so labels line up in a column down the
   form. `align-items: start` plus a label padding-top matching the control's own padding is what
   puts the label's first line level with the control's first line, tall textareas included.
   Under --formStackAt the grid collapses to a single stacked column.
   Controls are matched by ELEMENT, not by class, so hand-written rows (evaluation_editor) get the
   same treatment as crispy-rendered ones. */

:root {
  --labelCol: 200px;
  --formStackAt: 760px;
}

form .mb-3,          /* crispy-rendered field */
form .field {        /* hand-written field row */
  display: grid;
  grid-template-columns: var(--labelCol) minmax(0, 1fr);
  gap: 6px 20px;
  align-items: start;
  padding-block: 12px;
  border-bottom: 1px solid var(--border);
}
/* The rule under the LAST row is kept deliberately: it closes the table of fields, so the submit
   buttons below read as an action row without every template needing a wrapper div. */

/* Everything that is not the label belongs to the control column. Children carry a definite
   column and auto rows, so they stack downwards beside the label instead of wrapping under it. */
form .mb-3 > *,
form .field > * { grid-column: 2; min-width: 0; }

form .mb-3 > label.form-label,
form .mb-3 > fieldset > legend,
form .field > label {
  grid-column: 1; grid-row: 1;
  font-weight: 600; font-size: .9rem; line-height: 1.35;
  padding-top: 9px;  /* == control padding-block, so the two first lines sit level */
}
/* A multi-input field (checkbox list, radio) is wrapped in a fieldset; dissolving it lets the
   legend reach the label column instead of being trapped inside its own box. */
form .mb-3 > fieldset { display: contents; }

/* Secondary label inside a label column — a scale, a weight, an "opcional" note. */
form .field label .hint,
form .subfield-label {
  display: block; margin-top: 3px;
  font-weight: 400; font-size: .78rem; color: var(--textMuted);
}
form .subfield-label { margin: 0 0 4px; }
form .subfield { display: block; }
form .subfield .prompt { margin: 0 0 8px; font-size: .95rem; }
.req, form .asteriskField { color: var(--statusDanger); margin-left: 3px; }

form input[type="text"], form input[type="number"], form input[type="url"],
form input[type="email"], form input[type="password"], form input[type="search"],
form input[type="tel"], form input[type="date"], form input[type="datetime-local"],
form input[type="file"], form select, form textarea,
.control {
  width: 100%; font-family: inherit; font-size: .95rem; color: var(--ink);
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface);
}
form textarea, textarea.control { min-height: 110px; resize: vertical; line-height: 1.5; }
form input:focus, form select:focus, form textarea:focus, .control:focus {
  outline: none; border-color: var(--colorMain03); box-shadow: 0 0 0 3px rgba(97, 155, 138, .18);
}

/* Checkboxes keep their own inline label and sit in the control column. */
form .form-check { display: flex; align-items: center; gap: 8px; }
form .form-check + .form-check { margin-top: 6px; }
form input[type="checkbox"], form input[type="radio"] { width: auto; padding: 0; margin: 0; }
form .form-check-label { font-weight: 500; font-size: .92rem; }

form .form-text { font-size: .82rem; color: var(--textMuted); }
form .invalid-feedback, form .errorlist {
  color: var(--statusDanger); font-size: .82rem; font-weight: 500;
  margin: 0; padding: 0; list-style: none;
}
form .invalid-feedback p { margin: 0; }
form .is-invalid, form .errorlist + input, form .errorlist + select, form .errorlist + textarea {
  border-color: var(--statusDanger);
}
form .alert-danger {
  background: rgba(214, 69, 69, .08); border: 1px solid rgba(214, 69, 69, .35);
  color: #a32d2d; border-radius: 10px; padding: 11px 14px; font-size: .88rem; margin-bottom: 16px;
}
form .alert-danger ul { margin: 0; padding-left: 18px; }

/* Action row: an explicit .form-actions wrapper where a template has one, and the same spacing
   for the bare submit buttons every other template puts straight inside its <form>. */
form .form-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
form > button, form > .btn { margin-top: 18px; }
form > button + button, form > button + .btn { margin-left: 4px; }
/* Inline single-button forms (a "Remover" inside a table cell) must not gain that spacing. */
td form > button, td form > .btn, .header-actions form > button { margin-top: 0; }

@media (max-width: 760px) {
  form .mb-3, form .field { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  form .mb-3 > *, form .field > * { grid-column: 1; }
  form .mb-3 > label.form-label,
  form .mb-3 > fieldset > legend,
  form .field > label { grid-column: 1; padding-top: 0; }
}

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--border); font-size: .92rem; }

.site-footer {
  background: var(--colorMain01); color: #cdd8de; padding-block: 32px; margin-top: 40px;
  font-size: .85rem; text-align: center;
}
.site-footer a { color: #cdd8de; }

/* ============================== PORTFOLIO GRID ==============================
   Shared by "Meu portfólio" (ungrouped) and the per-community portfolio (grouped, one
   .portfolio-grid per group header) — see portfolio/_work_grid.html and _work_card.html.
   Modeled on portfolio-reference.html's .produto / .midia-titulo, adapted to this app's
   card/palette system: 150x150 thumbnails (75x75 in the summary), tight small-font lines,
   5 columns per row. */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 10px 0 28px;
}
@media (max-width: 760px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}

.portfolio-card {
  /* One knob for the thumbnail: the frame, the image and the no-image placeholder all read it,
     so a variant only has to override --cardImg (see .portfolio-summary-card). */
  --cardImg: 100px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px; text-align: center;
}
.portfolio-card-media {
  width: var(--cardImg); height: var(--cardImg); margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; border-radius: 10px; background: var(--surfaceAlt);
}
.portfolio-card-media img { width: var(--cardImg); height: var(--cardImg); object-fit: cover; }
/* The thumbnail links out to the work (revision 07). The anchor has to blockify to fill the frame —
   left inline it would sit on a text baseline inside the flex box — and drop the global link
   underline, which under an image only shows up as a stray line. */
.portfolio-card-media a { display: flex; text-decoration: none; }
.portfolio-card-media a:hover { text-decoration: none; }
.portfolio-card-media a:hover img { opacity: .88; }
.portfolio-card-noimage {
  width: var(--cardImg); height: var(--cardImg);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; font-weight: 700; color: var(--textMuted);
}
/* Tight, small lines (revision 04 follow-up) — line-height pulls them close together instead
   of relying on margin, so they read as one block under the image rather than loose paragraphs. */
.work-title, .work-collection, .work-author, .work-media {
  margin: 0; line-height: 1.3; text-wrap: pretty;
}
/* Revision 13 — the highlight badge, between the thumbnail and the title. It sits ABOVE the title
   because it is the reason the card is worth a second look; below it, it would read as one more
   metadata line among four. Revision 15 switched it from a full-width filled band to the standard
   .pill component (same one badges "Destaque" on portfolio_works's table), for one consistent
   "this is a status" shape across the app — .pill.warning/.info already carry the two colours
   (amber is the same "there is a clock on this" signal .alert-pending uses, teal is the neutral
   brand accent), so .work-highlight-pill only adds the spacing a card needs that a table cell
   doesn't. `display: block` keeps it its own line rather than wrapping inline with the image. */
.work-highlight-pill { display: block; width: fit-content; margin: 5px 0 0; }

.work-title { font-weight: 700; font-size: .76rem; margin-top: 5px; }
.work-collection { font-weight: 600; font-size: .7rem; color: var(--colorMain02); }
.work-author { font-size: .7rem; color: var(--ink); }
.work-media { font-size: .66rem; color: var(--textMuted); }

/* Colour bar at the head of each group, title inside — one of our 5 main colors, picked
   pseudo-randomly per group name (see ui_extras.group_color_class). Right side carries
   a link back up to #portfolio-summary. */
.portfolio-group-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--groupColor); color: var(--groupInk);
  font-weight: 700; padding: 8px 16px; border-radius: 8px;
  margin: 24px 0 10px; font-size: .95rem;
}
.group-header-top-link {
  color: inherit; font-size: 1.15rem; line-height: 1; opacity: .85;
}
.group-header-top-link:hover { opacity: 1; text-decoration: none; }
.group-tabs { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

/* Summary block above the grouped grids (revision 04 follow-up) — an author summary is a plain
   two-column name+count list; media/collection summaries reuse the portfolio card grid, one
   card per GROUP (not per work), linking down to that group's anchor. */
.summary-columns {
  column-count: 2; column-gap: 32px; list-style: none; padding: 0; margin: 0;
}
.summary-columns li { break-inside: avoid; padding: 4px 0; font-size: .9rem; }

/* Half-size thumbnail: the summary is an index, so it should skim rather than compete with the
   full-size grids below it. */
.portfolio-summary-card { --cardImg: 75px; display: block; text-decoration: none; color: inherit; }
.portfolio-summary-card:hover { border-color: var(--colorMain03); }
.portfolio-summary-card .work-title { margin-top: 5px; }

/* One custom property per colour slot, so the SAME class drives a filled bar
   (.portfolio-group-header, .section-bar), a hairline accent (.subsection-title) and a washed card
   background (.card-tinted) without needing a second set of classes. --groupInk keeps text legible
   on the two light colours. --groupTint is the same hue at 10% over white — the brand hues are all
   saturated, so a card can only carry one this faint; the rgba is spelled out because the palette
   is stored as hex and CSS cannot add an alpha channel to a hex custom property. */
.group-color-1 { --groupColor: var(--colorMain01); --groupInk: #fff; --groupBadgeBg: rgba(255, 255, 255, .22); --groupTint: rgba(35, 61, 77, .10); }
.group-color-2 { --groupColor: var(--colorMain02); --groupInk: #fff; --groupBadgeBg: rgba(255, 255, 255, .26); --groupTint: rgba(254, 127, 45, .10); }
.group-color-3 { --groupColor: var(--colorMain03); --groupInk: #fff; --groupBadgeBg: rgba(255, 255, 255, .26); --groupTint: rgba(97, 155, 138, .10); }
.group-color-4 { --groupColor: var(--colorMain04); --groupInk: var(--ink); --groupBadgeBg: rgba(35, 61, 77, .16); --groupTint: rgba(252, 202, 70, .10); }
.group-color-5 { --groupColor: var(--colorMain05); --groupInk: var(--ink); --groupBadgeBg: rgba(35, 61, 77, .16); --groupTint: rgba(161, 193, 129, .10); }

/* A card washed with its colour slot instead of --surface (revision 07, home_public). Pair with a
   .group-color-N; on its own it falls back to the plain surface rather than a transparent card. */
.card-tinted { background: var(--groupTint, var(--surface)); }

/* ============================== COLOURED SECTION HEADINGS ==============================
   Dashboard role sections (h2) get the same filled colour bar as a portfolio group; the
   subsections inside them (h3) get a matching left rule instead, so the bar stays the loudest
   element and the hierarchy still reads. Both take their colour from a .group-color-N class. */
.section-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--groupColor); color: var(--groupInk);
  font-family: inherit; font-weight: 700; font-size: 1rem;
  padding: 8px 16px; border-radius: 8px; margin: 0 0 16px;
}
.card .section-bar { margin-top: 0; }

.subsection-title {
  border-left: 4px solid var(--groupColor);
  padding-left: 10px; margin: 24px 0 10px; font-size: 1rem;
}

/* How many rows the section actually holds — on a bar it sits at the far right (the bar is
   flex/space-between), on a subsection it trails the title inline. Headings are Georgia, so the
   badge re-declares the sans stack to keep the numerals from looking like body copy. */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; padding: 1px 7px; border-radius: 999px;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: .72rem; font-weight: 700; line-height: 1.5;
}
.section-bar .count-badge { background: var(--groupBadgeBg); color: var(--groupInk); }
.subsection-title .count-badge {
  margin-left: 8px;
  background: var(--surfaceAlt); color: var(--textMuted); border: 1px solid var(--border);
}

/* ============================== CORTES (app: cuts) ==============================
   Three public listing pages. The works grid reuses .portfolio-grid / .portfolio-card
   wholesale — only the cut table, the year menu and the search mark are new here. */

.cuts-year-menu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 20px;
}
.cuts-year-menu-label { font-size: .85rem; color: var(--textMuted); margin-right: 4px; }
.cuts-year-menu a {
  padding: 4px 12px; border-radius: 999px;
  background: var(--surfaceAlt); border: 1px solid var(--border);
  font-size: .82rem; text-decoration: none; color: var(--ink);
}
.cuts-year-menu a:hover { border-color: var(--colorMain03); text-decoration: none; }

/* The episode card splits into description and a right-hand facts column, collapsing to one
   column on narrow screens. */
.cuts-episode-body { display: flex; gap: 24px; align-items: flex-start; }
.cuts-episode-desc { flex: 1 1 auto; }
.cuts-episode-info {
  flex: 0 0 210px; font-size: .82rem; line-height: 1.7; color: var(--textMuted);
  background: var(--surfaceAlt); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
@media (max-width: 760px) {
  .cuts-episode-body { flex-direction: column; }
  .cuts-episode-info { flex: 1 1 auto; width: 100%; }
}

/* The four-column table is genuinely wide; it scrolls inside its own wrapper rather than
   forcing the page body to scroll sideways. */
.cuts-table-wrap { overflow-x: auto; margin: 0 0 28px; }
.cuts-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .82rem;
}
.cuts-table th {
  text-align: left; padding: 8px 12px;
  background: var(--colorMain01); color: #fff; font-weight: 700;
}
.cuts-table th:first-child { border-top-left-radius: var(--radius); }
.cuts-table th:last-child { border-top-right-radius: var(--radius); }
.cuts-table td {
  padding: 10px 12px; border-top: 1px solid var(--border); vertical-align: top; line-height: 1.5;
}
.cuts-table td:first-child { width: 300px; }
.cut-code { display: block; font-size: .72rem; font-weight: 700; color: var(--colorMain02); }
.cut-title { display: block; font-weight: 700; text-wrap: pretty; }
.cut-meta { display: block; margin-top: 8px; font-size: .74rem; color: var(--textMuted); }
.cut-work-author { color: var(--textMuted); }

.cuts-filter-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cuts-filter-form input[type="text"] { flex: 1 1 280px; }

/* communities_search: both filters on one line. The title input is the only element allowed to
   grow, so "Situação" stays as narrow as its widest option ("Fechada") instead of matching the
   text input's width. nowrap keeps the two fields together; the media query is what lets them
   stack, rather than leaving it to whichever field happens to overflow first. */
.filter-form-inline { flex-wrap: nowrap; }
.filter-form-inline input[type="text"] { flex: 1 1 auto; min-width: 0; }
.filter-form-inline select { flex: 0 0 auto; width: auto; min-width: 8rem; }
.filter-form-inline label { flex: 0 0 auto; }
.filter-form-inline .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .filter-form-inline { flex-wrap: wrap; }
  .filter-form-inline input[type="text"] { flex: 1 1 100%; }
}

/* Search hits. Yellow is the one palette colour dark enough text stays readable on. */
mark.hl { background: var(--colorMain04); color: var(--ink); padding: 0 2px; border-radius: 3px; }

/* Hero card (home_public): text on the left, brand image on the right. On mobile the image
   drops below the text instead of squeezing beside it. */
.hero-card { display: flex; align-items: center; gap: 24px; }
.hero-text { flex: 1 1 auto; min-width: 0; }
.hero-media { flex: 0 0 auto; }
.hero-image { display: block; width: 500px; height: 300px; object-fit: scale-down; border-radius: var(--radius); }
@media (max-width: 760px) {
  .hero-card { flex-direction: column; align-items: stretch; }
  .hero-media { order: 2; }
  .hero-text { order: 1; }
  .hero-image {  height: 100px; width: auto; }
}

/* ============================== PUBLIC HOME ROWS ==============================
   Two cards sharing a row (revision 09, home_public: Portfólios | Cortes). The cards keep their
   own margin-bottom, so the row only needs the column gap. Equal columns rather than auto-fit:
   the pair is a deliberate side-by-side, and a single card stretching full width would look like
   a layout bug rather than a choice. */
.home-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 860px) {
  .home-row { grid-template-columns: 1fr; gap: 0; }
}

/* The size of the cortes catalogue, as three figures rather than a sentence. */
.home-stats { display: flex; flex-wrap: wrap; gap: 6px 20px; list-style: none; padding: 0; margin: 0 0 4px; }
.home-stats li { font-size: .88rem; color: var(--textMuted); }
.home-stats b { color: var(--ink); font-size: 1.05rem; }

/* .home-episode-list went with the "últimos episódios" list the Cortes card no longer carries
   (revision 10). */

/* ============================== PENDING-WORK ALERT ==============================
   Revision 11. A join request used to be visible only on community_members, so it could sit
   unanswered indefinitely. This is louder than an .empty-state and quieter than a message banner:
   the amber left rule is the same "attention" signal .pill.warning carries, so the alert and the
   count it points at read as one thing. */
.alert-pending {
  border-left: 4px solid var(--colorMain04);
  background: rgba(252, 202, 70, .12);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px; margin: 0 0 16px;
  font-size: .9rem;
}
.card .alert-pending { margin-top: 0; }

/* Numeric table columns. Right-aligned and narrow so a column of counts reads as a column of
   counts, and tabular figures so the digits line up between rows. */
th.num, td.num {
  text-align: right; width: 1%; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
td.num a.pill { text-decoration: none; }

/* Row thumbnail — the collection cover in a management table (revision 12). Deliberately much
   smaller than a .portfolio-card image: here it identifies a row, it is not the content. */
.thumb-sm {
  width: 44px; height: 44px; object-fit: cover;
  border-radius: 8px; background: var(--surfaceAlt); display: block;
}

/* ============================== COMO FUNCIONA (guide pages) ==============================
   Shared by the "Como funciona" hub and each per-product journey page (Edital, Leitura Beta, ...).
   Not used anywhere else, so it lives in its own section rather than folding into an existing one. */
.eyebrow {
  display: inline-block; font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--colorMain02Ink); margin: 0 0 .6rem;
}
h1.title { font-size: clamp(2rem, 4.5vw, 2.6rem); margin: 0 0 .75rem; text-wrap: balance; }
.lede { font-size: 1.05rem; color: var(--textMuted); max-width: 62ch; margin: 0; }

.roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .roles { grid-template-columns: 1fr; } }
.role-card p { margin: .3rem 0 0; color: var(--textMuted); font-size: .95rem; }
.role-card h3 { margin: 0; font-size: 1.05rem; }

/* Journey steps reuse the .group-color-N tokens for --groupColor/--groupInk, same as
   .section-bar/.subsection-title above, so a step's colour always matches its acting role. */
.journey { display: flex; flex-direction: column; gap: 14px; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.step__num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--groupColor); color: var(--groupInk);
  font-family: Georgia, serif; font-weight: 700; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
}
.step__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 20px; }
.step__text { margin: .35rem 0 0; color: var(--textMuted); font-size: .95rem; }

.why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 760px) { .why { grid-template-columns: 1fr; } }
.why h3 { margin: 0 0 .3rem; font-size: 1rem; font-family: "Inter", system-ui, sans-serif; font-weight: 700; }
.why p { margin: 0; color: var(--textMuted); font-size: .95rem; }

/* Hub page: a card per product, linking out to its journey page. */
.guide-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 980px) { .guide-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .guide-links { grid-template-columns: 1fr; } }
.guide-link-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.guide-link-card:hover { border-color: var(--colorMain03); }
.guide-link-card h3 { margin: 0 0 .3rem; font-size: 1.1rem; }
.guide-link-card p { margin: 0; color: var(--textMuted); font-size: .95rem; }

/* ============================== MANUAIS (manual pages) ==============================
   Long-form user manuals reached from the "Como funciona" hub (access/manual_*.html).
   Everything here is manual-only: a numbered section head, a table of contents, callouts,
   screenshot figures and the two definition layouts the manuals use for field lists. */
.section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px; margin-right: 10px; flex: none;
  background: var(--colorMain01); color: #fff;
  font-family: Georgia, serif; font-weight: 700; font-size: .95rem;
}
.section-head { display: flex; align-items: center; gap: 2px; margin-bottom: 4px; }
/* h4 is a manual-only heading level (a sub-subsection, 1.3.1), so it is styled here rather than
   in the global h1-h3 rule. */
.manual h4 { font-family: Georgia, serif; font-weight: 500; font-size: 1rem; color: var(--colorMain02Ink); }
/* The sticky header would otherwise cover the target of an in-page #anchor. */
.section-anchor { scroll-margin-top: 88px; }

.subhead {
  font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--textMuted); margin: 28px 0 6px;
}
.card > .subhead:first-child { margin-top: 0; }

.toc { columns: 2; column-gap: 32px; }
.toc a { display: block; padding: 3px 0; font-size: .92rem; color: var(--ink); }
.toc a:hover { color: var(--colorMain03); text-decoration: none; }
.toc .toc-sub { padding-left: 16px; font-size: .87rem; color: var(--textMuted); }
@media (max-width: 640px) { .toc { columns: 1; } }

/* Callouts: --rule states a business rule the reader must not miss, --tip is advice. */
.callout { border-radius: 10px; padding: 14px 18px; margin: 16px 0; border-left: 4px solid; font-size: .94rem; }
.callout p { margin: 0; }
.callout p + p { margin-top: 8px; }
.callout strong { color: var(--ink); }
.callout--rule { background: rgba(254, 127, 45, .08); border-color: var(--colorMain02); }
.callout--tip { background: rgba(97, 155, 138, .09); border-color: var(--colorMain03); }

/* Screenshot figure: the image, its caption and the page it was captured from. */
.shot { margin: 18px 0; }
.shot__img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow);
}
.shot-stack { display: flex; flex-direction: column; gap: 12px; }
.shot figcaption { margin-top: 8px; font-size: .88rem; color: var(--textMuted); }
.shot figcaption strong { color: var(--ink); }
.shot__origin { display: inline-block; margin-top: 2px; font-size: .78rem; color: var(--colorMain02Ink); }

/* Projeto → Leitura Beta → Submissões, the three-level diagram of §1.1. */
.structure {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 18px; background: var(--surfaceAlt); border-radius: 10px; margin: 16px 0;
}
.structure .node {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 18px; font-weight: 600; text-align: center; box-shadow: var(--shadow);
}
.structure .node small { display: block; font-weight: 400; color: var(--textMuted); font-size: .78rem; margin-top: 2px; }
.structure .arrow { color: var(--textMuted); font-size: 1.3rem; }
@media (max-width: 700px) { .structure { flex-direction: column; } .structure .arrow { transform: rotate(90deg); } }

.examples { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 16px 0; }
@media (max-width: 760px) { .examples { grid-template-columns: 1fr; } }
.example-card { border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; background: var(--surfaceAlt); }
.example-card h4 { margin: 0 0 4px; }
.example-card .meta { font-size: .82rem; color: var(--textMuted); margin: 0 0 10px; }
.example-card dl { margin: 0 0 10px; }
.example-card dt { font-weight: 700; font-size: .86rem; margin-top: 8px; }
.example-card dt:first-child { margin-top: 0; }
.example-card dd { margin: 2px 0 0; font-size: .88rem; color: var(--ink); }
.example-card ul { margin: 4px 0 0; padding-left: 18px; font-size: .88rem; }
.example-card .note { margin-top: 10px; font-size: .84rem; color: var(--textMuted); font-style: italic; }

/* Field lists: "campo — o que ele faz", used wherever the manual describes a form. */
.fields dt { font-weight: 700; margin-top: 10px; }
.fields dt:first-child { margin-top: 0; }
.fields dd { margin: 2px 0 0 0; color: var(--textMuted); }

.step-list { margin: 10px 0; padding-left: 22px; }
.step-list li { margin-bottom: 6px; }

/* A bordered scroll box for the manuals' wide tables — the app's own tables are laid out
   by their page, so this stays scoped to the manuals rather than styling `table` globally. */
.table-wrap { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: 10px; }
.table-wrap th { color: var(--colorMain01); font-weight: 700; background: var(--surfaceAlt); }
.table-wrap th, .table-wrap td { padding: 8px 10px; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: 14px; }

.back-to-top { display: inline-block; margin-top: 6px; font-size: .82rem; }