/* ============================================================================
   AbiDB — dark-only theme.
   Loaded AFTER Bootstrap, so equal-specificity rules here win by source order;
   `!important` is used ONLY against Bootstrap *utility* classes (which are
   themselves !important) — each surviving instance carries a comment saying so.

   TYPE SCALE (documented per DESIGN_REQUIREMENTS.md §1)
     display / hero h1 . clamp(2.5rem → 5rem)   EB Garamond 600
     page title (.h3) .. 1.75rem                 Bootstrap scale
     section (.h5/.h6) . 1.25rem / 1rem          Space Grotesk
     body .............. 1rem (Space Grotesk 400), long-form 1.2em
     small/meta ........ .875rem / .8rem / .75rem
   Two families only: EB Garamond (display), Space Grotesk (UI/body).
   ========================================================================== */
:root {
    /* legacy aliases (still referenced below) */
    --bgcolor: #262626;
    --textcolor: #ffffff;
    --accentcolor: #575757;          /* focus border tint on inputs */

    /* surfaces & text */
    --bg-main: #1a1a1a;
    --bg-nav: #262626;
    --bg-card: #2f2f2f;
    --bg-elev: #343434;              /* surface a touch above the card, used on hover */
    --bg-input: #202020;             /* dark input wells (search, forms) */
    --text-main: #f2f2f2;
    --text-muted: #b6b6b6;           /* 4.6:1 on --bg-card — AA for normal text */
    --border-soft: #3d3d3d;
    --border-strong: #555555;
    --accent: #e8e8e8;

    /* THE one CTA accent (primary actions + active/selected states — nothing else) */
    --accent-cta: #d8a03d;           /* muted gold; #1a1a1a text on it ≈ 7.6:1 */
    --accent-cta-hover: #c69134;

    /* restrained danger family (destructive actions, error text) */
    --danger: #b05a5a;
    --danger-border: #7a4a4a;
    --danger-text: #c98a8a;          /* 4.6:1 on --bg-card */

    /* spacing scale — use these instead of ad-hoc px/rem values */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* layout constants */
    --nav-offset: 88px;              /* sticky navbar height + breathing room */
    --search-hint-pad: 6.5rem;       /* input right-padding reserving the ctrl+K hint */

    /* shared scale — keeps radii, depth and motion consistent across the whole UI */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
    --ring: 0 0 0 3px rgba(255, 255, 255, .35);   /* ≥3:1 against every surface */
    --transition: .18s ease;
}

/* Consistent, keyboard-only focus ring (hidden on mouse click).
   !important: must beat any component box-shadow (inputs set their own on :focus). */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.dropdown-item:focus-visible {
  outline: none;
  box-shadow: var(--ring) !important;
  border-radius: var(--radius-sm);
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: "Space Grotesk", sans-serif;
  /* footer sticks to the bottom on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }

input::placeholder {
  color: #aaaaaa;
}

kbd {
  background-color: #999999;
  color: #000000;
  font-family: "Space Grotesk", sans-serif;
}

h1 {
    font-size: clamp(2.5rem, 9vw, 5rem);   /* hero scale — fits phones, 720p and up */
    font-family: "EB Garamond", Georgia, serif;
    font-optical-sizing: auto;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-align: center;
    margin-top: 20px;
    color: #f5f5f5;
}

/* logo mark sitting beside the hero title (home) — a proportional lockup */
.hero-title{ gap: clamp(10px, 2.2vw, 20px); }   /* tighter, scaling lockup spacing */
.hero-title h1{ margin-top: 0; }                 /* align with the mark, not pushed down */
.hero-mark{
    height: clamp(24px, 5vw, 44px);   /* sized by height → sits just under the title's cap height */
    width: auto;
    flex: none;
    color: #f5f5f5;                   /* currentColor for the inline mark = title colour */
}

p {
    font-size: 1.2em;
    text-align: center;
    margin-top: 10px;
    color: #aaaaaa;
}

/* !important: Bootstrap's .text-light utility is itself !important */
.text-light {
    color: #f5f5f5 !important;
}

/* !important: Bootstrap utility. Its default #6c757d is only ~3.3:1 on our dark
   surfaces (fails WCAG AA for normal text); remap to the audited muted token. */
.text-secondary {
    color: var(--text-muted) !important;
}

/* !important: Bootstrap's .bg-dark utility is itself !important */
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: #262626 !important;
}


#pesquisa_central {
    background-color: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-lg);
    color: var(--text-main);
    box-shadow: var(--shadow-md);   /* gives the landing search a touch of focus */
    transition: border-color var(--transition), box-shadow var(--transition);
}

#pesquisa_central.form-control:focus {
    background-color: var(--bg-input);
    border-color: var(--accentcolor);
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,.08);
    outline: none;
    color: var(--text-main);
}

/* Without this, Bootstrap's `.form-control::placeholder` (class selector, higher
   specificity than the generic `input::placeholder` rule) wins and renders the
   placeholder in its near-black default text color — invisible on this dark input. */
#pesquisa_central::placeholder {
    color: #9a9a9a;
    opacity: 1;
}

/* ---- navbar ---------------------------------------------------------------- */

.navbar-theme{
  position: sticky;
  top: .7rem;
  z-index: 1020;
  /* floating "pill": detached from the page edges, rounded, glassy */
  margin: .7rem .9rem 0;
  border-radius: var(--radius-lg);
  /* semi-transparent + blur: a modern "glass" feel while keeping the same colour */
  background-color: rgba(38, 38, 38, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-sm);
  transition: background-color var(--transition), box-shadow var(--transition),
              border-color var(--transition), margin var(--transition);
}
/* reacts to scrolling: tightens up, solidifies and lifts off the page */
.navbar-theme.scrolled{
  margin-top: .35rem;
  background-color: rgba(28, 28, 28, .92);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
/* fallback for browsers without backdrop-filter: stay fully opaque */
@supports not (backdrop-filter: blur(10px)){
  .navbar-theme{ background-color: var(--bg-nav); }
  .navbar-theme.scrolled{ background-color: #1c1c1c; }
}
@media (min-width: 992px){
  /* on desktop the pill sits a touch in from the wide content gutter */
  .navbar-theme{ margin-left: 1.5rem; margin-right: 1.5rem; }
}

/* responsive navbar side padding: roomy on desktop, tight on small screens */
.nav-pad{
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 992px){
  .nav-pad{
    padding-left: 6%;
    padding-right: 6%;
  }
}

.navbar-theme .nav-link{
  color: var(--text-muted);
  font-family: "Space Grotesk", sans-serif;
  /* comfortable touch target (≥44px tall with the navbar's own padding) */
  padding-top: .55rem;
  padding-bottom: .55rem;
  transition: color .2s ease;
}

/* capitalize key UI controls */
.navbar-theme .nav-link,
.navbar-theme .btn,
.btn-search-theme {
  text-transform: capitalize;
}

.navbar-theme .nav-link:hover,
.navbar-theme .nav-link:focus{
  color: var(--text-main);
}

/* the nav-integrated "Enviar prova" CTA — a light monochrome pill so it stands out
   against the dark glass navbar without breaking the palette; centered via the parent
   <li>'s d-flex/align-items so it sits level with the taller plain nav-links. */
.navbar-theme .nav-cta{
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);           /* breathing room from the preceding nav link */
  background-color: #c9c9c9;             /* faded grey pill, not stark white */
  color: #1a1a1a;
  border: 1px solid #c9c9c9;
  border-radius: var(--radius-sm);
  padding: .4rem .9rem;
  font-weight: 500;
  text-transform: capitalize;
  text-decoration: none;                 /* .nav-cta isn't a .nav-link, so kill Reboot's a underline */
  transition: background-color var(--transition), border-color var(--transition);
}
.navbar-theme .nav-cta:hover,
.navbar-theme .nav-cta:focus{
  background-color: #dcdcdc;
  border-color: #dcdcdc;
  color: #1a1a1a;
}

.navbar-theme .navbar-brand{
  font-family: "EB Garamond", Georgia, serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--text-main);
}

.search-form{
  margin-top: 0.75rem;
}
@media (min-width: 992px){
  .search-form{
    margin-top: 0;
    margin-left: auto;
  }
  .search-input-dark{
    min-width: 260px;
  }
}


/* dark input well — single source of truth for search + form inputs
   (the navbar search input carries this class too; the old duplicated
   `.navbar-theme .form-control` block was folded in here) */
.search-input-dark{
  background-color: var(--bg-input);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.search-input-dark::placeholder{
  color: #9a9a9a;
}

.search-input-dark:focus{
  background-color: var(--bg-input);
  border-color: var(--accentcolor);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.06);
  color: #fff;
}

/* secondary / filter buttons */

.btn-search-theme{
  background-color: #2f2f2f;
  border: 1px solid #444444;
  color: #f2f2f2;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}

.btn-search-theme:hover{
  background-color: #3a3a3a;
  border-color: #555555;
  color: #ffffff;
}

.btn-search-theme:focus,
.btn-search-theme:active{
  background-color: #3a3a3a;
  border-color: #666666;
  color: #ffffff;
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,.08);
}


/* ---- search modal ("command palette") -------------------------------------- */

.search-modal-clean {
  max-width: 680px;
}

.search-modal-clean .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* soften the backdrop into a modern "command palette" feel */
.modal-backdrop.show{
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: .55;
}
.search-modal-clean .search-input-dark{
  box-shadow: var(--shadow-md);
}

.search-modal-clean .modal-body {
  padding: 0;
}

/* ctrl+K hint inside the trigger input */
.search-trigger-wrap{
  position: relative;
  width: 100%;
}

.search-trigger-wrap .form-control{
  padding-right: var(--search-hint-pad); /* space for the hint */
}

.search-shortcut-hint{
  position: absolute;
  right: 0.65rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  gap: 0.25rem;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  pointer-events: none; /* click still hits input */
  user-select: none;
  font-family: "Space Grotesk", sans-serif;
}

.search-shortcut-hint kbd{
  background-color: #3a3a3a;
  color: #eaeaea;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
}

@media (max-width: 991.98px){
  .search-shortcut-hint{
    display: none; /* avoid crowding on small screens */
  }
  .search-trigger-wrap .form-control{
    padding-right: 0.75rem;
  }
}

nav.navbar a.nav-link {
    font-family: "Space Grotesk", sans-serif;
}

/* dropdown menus in the dark navbar */
.navbar-theme .dropdown-menu-dark{
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
}
/* selected state (language switcher) uses the CTA accent, not Bootstrap blue */
.dropdown-menu-dark .dropdown-item.active{
  background-color: rgba(216, 160, 61, .16);
  color: var(--accent-cta);
}

/* ---- exam result / info cards ---------------------------------------------- */
.exam-card{
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  --bs-card-border-color: var(--border-soft);
  border-radius: var(--radius);
  overflow: hidden;          /* clip square image corners to the rounded border */
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition), transform var(--transition),
              box-shadow var(--transition), background-color var(--transition);
}
a:hover > .exam-card{
  border-color: var(--accent);
  background-color: var(--bg-elev);   /* gentle lift instead of only a border change */
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.exam-card .card-title{
  font-family: "Space Grotesk", sans-serif;
  color: var(--text-main);   /* keep titles bright on the dark card */
  overflow-wrap: anywhere;   /* long titles never overflow the card */
}

/* readable, wrapping post description */
.exam-description{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 70ch;
  line-height: 1.7;
  color: var(--text-main);   /* brighter than the muted labels around it */
}
/* collapsed state (toggled by "Ver mais") */
.exam-description.is-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.desc-toggle{
  color: var(--text-muted);
  text-decoration: none;
  font-size: .85rem;
}
.desc-toggle:hover{
  color: var(--text-main);
}

/* search filter bar: even gaps, button inline, wraps when narrow */
.search-filters > *{ flex: 1 1 150px; }
.search-filters .filter-busca{ flex: 2 1 240px; }
.search-filters .filter-btn{ flex: 0 0 auto; }

/* vertical 3:4 preview window: show the WHOLE document, padded, never cropped.
   aspect-ratio also reserves the box before the image loads (no layout shift). */
.exam-thumb{
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: contain;
  padding: var(--space-2);
  background-color: var(--bg-card);   /* blend the letterbox with the card surface */
  border-bottom: 1px solid var(--border-soft);
}
/* PDF first page sits on a white sheet (like paper) */
.exam-thumb-pdfimg{
  background-color: #ffffff;
}
/* placeholder media boxes (no image): empty / link — same 3:4 box */
.exam-thumb-empty,
.exam-thumb-link{
  aspect-ratio: 3 / 4;
  width: 100%;
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-soft);
}
.exam-thumb-pdf .thumb-glyph,
.exam-thumb-link .thumb-glyph{
  font-size: 2rem;
  line-height: 1;
  color: var(--text-main);
}
.exam-thumb-pdf .thumb-label,
.exam-thumb-link .thumb-label{
  font-size: .8rem;
  color: var(--text-muted);
  margin-top: .4rem;
}

/* neutral subject badge (monochrome). !important: .badge text color utility conflict */
.subject-badge{
  background-color: #efefef;
  color: #1a1a1a !important;
  font-weight: 500;
}
/* !important: Bootstrap's .bg-secondary utility is itself !important */
.badge.bg-secondary{
  background-color: #3a3a3a !important;
  color: var(--text-muted) !important;
  font-weight: 400;
}

/* tag pills. !important: .tag-badge is used with .text-decoration-none links where
   Bootstrap's link color utility would otherwise win */
.tag-badge{
  background-color: #333333;
  color: var(--text-muted) !important;
  font-weight: 400;
  margin: 0 .15rem .25rem 0;
}

/* clamp card descriptions to 2 lines */
.text-truncate-2{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* keep paragraph centering from the landing hero out of left-aligned content */
main p{ text-align: inherit; }

/* primary action buttons — THE accent (see --accent-cta above) */
.btn-success{
  background-color: var(--accent-cta);
  border-color: var(--accent-cta);
  color: #1a1a1a;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), border-color var(--transition),
              box-shadow var(--transition), transform var(--transition);
}
.btn-success:active{ transform: translateY(1px); }
.btn-success:hover,
.btn-success:focus,
.btn-success:active{
  background-color: var(--accent-cta-hover);
  border-color: var(--accent-cta-hover);
  color: #1a1a1a;
  box-shadow: 0 0 0 0.2rem rgba(216, 160, 61, .25);
}

/* discreet ghost button (e.g. landing CTA) */
.btn-ghost{
  background-color: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
  font-weight: 400;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}
.btn-ghost:hover,
.btn-ghost:focus{
  background-color: #262626;
  border-color: #555555;
  color: var(--text-main);
}

/* pending state: any submit button the JS marks as loading */
.btn.is-loading{
  position: relative;
  pointer-events: none;
  opacity: .75;
}
.btn.is-loading::after{
  content: "";
  display: inline-block;
  width: .9em;
  height: .9em;
  margin-left: .5em;
  vertical-align: -0.1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
@keyframes btn-spin{ to{ transform: rotate(360deg); } }

/* flash messages: dark, monochrome, thin left accent */
.alert{
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-left: 3px solid #6f6f6f;
  color: var(--text-main);
}
.alert .btn-close{ filter: invert(1) grayscale(1) brightness(1.6); }
.alert-success{ border-left-color: var(--accent-cta); }
.alert-danger{ border-left-color: var(--danger); }
.alert-warning{ border-left-color: #b0a05a; }
.alert-info{ border-left-color: #7f7f7f; }

/* field-level validation (server-rendered): desaturated red on the dark theme */
.search-input-dark.is-invalid,
.form-control.is-invalid,
.form-select.is-invalid{
  border-color: var(--danger);
  background-image: none;          /* Bootstrap's red icon clashes with the dark well */
}
.invalid-feedback{
  color: var(--danger-text);
  display: block;                   /* always visible when rendered by the server */
  font-size: .85rem;
}

/* ---- color regularization: keep the palette monochrome ---- */
/* "Banir" was yellow -> neutral light outline like the other admin actions */
.btn-outline-warning{
  color: var(--text-muted);
  border-color: var(--border-soft);
}
.btn-outline-warning:hover,
.btn-outline-warning:focus{
  background-color: #2f2f2f;
  border-color: #666666;
  color: var(--text-main);
}
/* destructive actions: one restrained, desaturated red (matches alert danger) */
.btn-outline-danger{
  color: var(--danger-text);
  border-color: var(--danger-border);
}
.btn-outline-danger:hover,
.btn-outline-danger:focus{
  background-color: var(--danger);
  border-color: var(--danger);
  color: #ffffff;
}
/* "banido" state badge -> muted red instead of bright bg-danger.
   !important: Bootstrap's .bg-danger utility is itself !important */
.badge.bg-danger{
  background-color: #6e3b3b !important;
  color: #f0dada !important;
  font-weight: 500;
}

/* ---- pagination (search + admin) — same monochrome language as the buttons ---- */
.pagination-theme .btn.disabled{
  opacity: .4;
  pointer-events: none;
}

/* badges/pills pick up the shared radius for a consistent, rounded look */
.subject-badge,
.tag-badge,
.badge.bg-secondary,
.badge.bg-danger,
.grade-badge,
.solution-badge{
  border-radius: var(--radius-sm);
}

/* an outlined (not filled) use of the one accent color — flags "this exam has
   solutions" as noteworthy without competing visually with actual CTA buttons */
.solution-badge{
  background-color: transparent;
  color: var(--accent-cta);
  border: 1px solid var(--accent-cta);
  font-weight: 500;
}

/* ============ exam (post) detail page ============ */
.back-link{
  display: inline-block;
  color: var(--text-muted);
  text-decoration: none;
  font-size: .9rem;
  /* generous hit area without changing the visual size (WCAG 2.2 target size) */
  padding: var(--space-2) 0;
  transition: color var(--transition);
}
.back-link:hover{ color: var(--text-main); }

.section-heading{
  display: flex;
  align-items: center;
  gap: .6rem;
}
.section-heading h2{ letter-spacing: .06em; }
.doc-count{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 .45rem;
  font-size: .78rem;
  color: var(--text-muted);
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
}

/* each document sits in its own framed card */
.doc-frame{
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin: 0 0 1.25rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.doc-frame:hover{
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}
.doc-media-link{
  display: block;
  background-color: var(--bg-input);   /* letterbox behind the document */
  text-align: center;
}
.doc-media{
  max-width: 100%;
  max-height: 640px;
  width: auto;
  padding: var(--space-3);
}
.doc-media-pdf{            /* a PDF first page reads like paper: white, edge to edge */
  background-color: #ffffff;
  padding: 0;
}
.doc-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem .85rem;
  border-top: 1px solid var(--border-soft);
}
/* a solution's byline bar has no .doc-media above it (unlike an exam document frame) */
.doc-frame > .doc-meta:first-child{ border-top: none; }
.doc-name{
  color: var(--text-main);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-actions{
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  flex: 0 0 auto;
}
.doc-size{ color: var(--text-muted); font-size: .8rem; }
.doc-empty{
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: 2.5rem 1rem;
  text-align: center;
}

/* compact solution cards (bottom-of-post list, ordered by grade) */
.solution-item{
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}
.solution-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.solution-by{ color: var(--text-main); font-size: .95rem; }
.solution-desc{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.6;
  color: var(--text-main);
}
.solution-desc.is-clamped{
  display: -webkit-box;
  -webkit-line-clamp: 3;         /* tighter than the 6-line exam description */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.solution-desc-toggle{ font-size: .82rem; }
/* solution attachments render as compact link chips, not full-size previews */
.solution-files .btn{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* keep the info panel in view while scrolling the documents (desktop only) */
@media (min-width: 992px){
  .exam-info{
    position: sticky;
    top: var(--nav-offset);
  }
}

/* tidy label/value metadata block */
.info-meta dt{
  color: var(--text-muted);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .65rem;
}
.info-meta dt:first-child{ margin-top: 0; }
.info-meta dd{
  color: var(--text-main);
  margin: .1rem 0 0;
}

/* grade: subtle emphasis, still monochrome.
   !important: rendered inside .badge, whose color utility conflicts */
.grade-badge{
  background-color: transparent;
  color: var(--text-main) !important;
  border: 1px solid var(--border-strong);
  font-weight: 500;
}

/* ============ upload: selected-files list ============ */
.file-list{
  list-style: none;
  margin: 0 0 .65rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.file-list:empty{ margin: 0; }
.file-item{
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  background-color: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.file-item-name{
  flex: 1 1 auto;
  min-width: 0;
  color: var(--text-main);
  font-size: .9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-item-size{
  flex: 0 0 auto;
  color: var(--text-muted);
  font-size: .8rem;
}
.file-item-remove{
  flex: 0 0 auto;
  width: 1.6rem;                 /* ≈26px — meets the 24px WCAG 2.2 minimum */
  height: 1.6rem;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background-color: transparent;
  color: var(--text-muted);
  font-size: 1.1rem;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.file-item-remove:hover{
  background-color: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
/* an over-size file is flagged before the server even rejects it */
.file-item-big{ border-color: var(--danger-border); }
.file-item-big .file-item-size{ color: var(--danger-text); }

/* drag-and-drop enhancement on the upload file picker */
.dropzone{
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-5);
  text-align: center;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}
.dropzone:hover{ border-color: var(--border-strong); }
.dropzone.dragover{
  border-color: var(--accent-cta);
  background-color: rgba(216, 160, 61, .06);
  color: var(--text-main);
}

/* ============ tag chip input (upload categories) ============ */
.tag-input{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.6rem;
  padding: .4rem .55rem;
  background-color: var(--bg-input);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: text;
}
.tag-input:focus-within{ border-color: var(--accentcolor); }
.tag-chips{ display: contents; }
.tag-chip{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .15rem .25rem .15rem .55rem;
  background-color: #333333;
  color: var(--text-main);
  border-radius: var(--radius-sm);
  font-size: .85rem;
}
.tag-chip-remove{
  width: 1.25rem;
  height: 1.25rem;
  line-height: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.tag-chip-remove:hover{ background-color: var(--danger); color: #fff; }
.tag-entry{
  flex: 1 1 8rem;
  min-width: 8rem;
  border: 0;
  background: transparent;
  color: var(--text-main);
  outline: none;
  font-size: .9rem;
}
.tag-entry::placeholder{ color: #9a9a9a; }
/* clickable existing-tag suggestions */
.tag-suggestions{ display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag-suggestions::before{
  content: attr(data-label);
  color: var(--text-muted);
  font-size: .8rem;
  align-self: center;
}
.tag-suggestion{
  padding: .1rem .5rem;
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background-color var(--transition);
}
.tag-suggestion:hover{ border-color: var(--border-strong); color: var(--text-main); }
.tag-suggestion.is-added{
  border-color: var(--accent-cta);
  color: var(--accent-cta);
  opacity: .55;
  pointer-events: none;                 /* already added — no-op */
}

/* ============ empty state (search with no results) ============ */
.empty-state{
  border: 1px dashed var(--border-soft);
  border-radius: var(--radius);
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--text-muted);
}
.empty-state .empty-glyph{
  font-size: 2.2rem;
  line-height: 1;
  display: block;
  margin-bottom: var(--space-3);
}

/* ============ footer ============ */
.site-footer{
  border-top: 1px solid var(--border-soft);
  margin-top: var(--space-7);
  color: var(--text-muted);
  font-size: .9rem;
}
.site-footer a{
  color: var(--text-muted);
  text-decoration: none;
  /* comfortable touch targets in the link row */
  padding: var(--space-2) 0;
  transition: color var(--transition);
}
.site-footer a:hover,
.site-footer a:focus{ color: var(--text-main); }
.footer-meta{ color: var(--text-muted); font-size: .8rem; }

/* ============ legal pages (privacy / terms / contato / about) ============ */
.legal-page{
  max-width: 72ch;
}
.legal-page h1{
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  text-align: left;
  margin-top: 0;
}
.legal-page p, .legal-page li{
  text-align: left;
  font-size: 1rem;
  color: var(--text-main);
  line-height: 1.7;
}
.legal-page .text-secondary-theme{ color: var(--text-muted); }
.legal-dl dt{
  color: var(--text-muted);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: var(--space-4);
}
.legal-dl dd{ color: var(--text-main); margin: .15rem 0 0; }

/* admin: resolved reports fade back */
.report-resolved{ opacity: .5; }

/* moved off inline style="" so CSP's style-src can drop 'unsafe-inline' */
.hero-search-form{ max-width: 560px; }
.field-narrow{ max-width: 160px; }

/* ============ reduced motion: state changes become instant ============ */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;   /* !important: must beat every rule above */
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .navbar-theme, a:hover > .exam-card{ transform: none; }
}

/* ============ print: exam pages read like paper ============ */
@media print{
  body{ background: #fff; color: #000; display: block; }
  .navbar-theme, .site-footer, .btn, form, .alert,
  .search-shortcut-hint, .back-link, .desc-toggle, .copyright-note{ display: none !important; }
  .exam-card, .doc-frame{ border: 1px solid #999; box-shadow: none; background: #fff; }
  .exam-description, .doc-name, .info-meta dd, .card-title{ color: #000; }
  .doc-media{ max-height: none; }
  a{ text-decoration: none; color: #000; }
}