/* =====================================================================
   Vila Fit — the look of 03/11/2026 (Pedro: «Redesenha a interface … usando o ficheiro apple.design.md como
   referência visual», adapted to a work tool). Loaded last (templates/base.html); only the look: no page, field,
   action or permission depends on it.

   From the reference: one blue for actions and choices (--blue #0066cc), white cards on a light-grey background,
   hairlines instead of shadows (a shadow only on what floats), buttons as pills, near-black text, Inter, tight
   headings. Not from it (a work tool, not a product page): no giant titles, photographs or 80 px spacing; the body
   stays 14 px with numbers of fixed width; the dark-blue menu and top bar stay (Pedro, 31/10/2026).
   The colours, the letter and the corners are tokens in shell.css (:root); here only the components use them.
   ===================================================================== */

/* ---------- letter: Inter only, headings a little tighter (the reference's «tight» cadence, at work sizes) */
.shell :is(button, input, select, textarea) { font-family: inherit; }
:where(.shell) h1 { font-weight: 600; letter-spacing: -0.02em; }
:where(.shell) h2 { font-weight: 600; letter-spacing: -0.012em; }
.shell .page-body :is(h1:not(dialog h1), .fp-eyebrow)::before { border-radius: var(--radius-pill); }

/* ---------- buttons: the action is a pill; pressing it shrinks it a little (the reference's micro-interaction) */
.shell :is(.button, .fp-button, .button-save, .button-primary, .primary, .button-secondary, .button-danger, .button-add, .button-edit) {
  border-radius: var(--radius-pill);
}
.shell :is(.button, .fp-button, .button-save, .button-primary, .primary, .button-secondary):active { transform: scale(0.97); }
.shell .fp-button:not(.fp-button--quiet, .fp-button--primary) { border-color: var(--line-strong); color: var(--link) !important; }
.shell .fp-button:not(.fp-button--quiet, .fp-button--primary):hover { border-color: var(--blue); background: var(--brand-soft); }
.shell .fp-button--quiet { text-decoration: none; }
.shell .fp-button--quiet:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
  .shell :is(.button, .fp-button, .button-save, .button-primary, .primary, .button-secondary):active { transform: none; }
}

/* ---------- choices of two or three (Face ao objetivo / Face ao homólogo…): the chosen one in the blue */
.shell .fp-segmented { padding: 3px; border-radius: var(--radius-pill); background: #e8e8ed; }
.shell .fp-segmented a { border: 0; border-radius: var(--radius-pill); color: #424245 !important; font-weight: 600; }
.shell .fp-segmented a[aria-current] { background: var(--blue); color: #fff !important; }

/* ---------- the top bar never wider than the screen (from 1181 to 1439 px it went 50 px out at 1280, 03/11/2026):
   from 1280 px the controls a little narrower, on one line; below, the date on a second line as below 1180 */
@media (min-width: 1280px) and (max-width: 1439px) {
  .shell .shell-topbar .segmented a { padding: 4px 6px; }
  .shell-search { min-width: 72px; }
  .shell-month input[type="month"] { width: 140px; }
}
@media (min-width: 801px) and (max-width: 1279px) {
  .shell-topbar { flex-wrap: wrap; row-gap: 8px; }
  .shell-scope { order: 5; margin-right: 0; }
}

/* ---------- cards and panels: white on the grey, a hairline, no shadow */
.shell :is(.fp-kpi, .fp-panel) { border-color: var(--line); }
.shell .fp-kpi:hover { transform: none; }
.shell .fp-kpi.is-current { background: #fff; }

/* ---------- tables: headings in sentence case on a light grey, numbers to the right with figures of one width */
.shell :is(td, th).num, .shell .fp-num { text-align: right; font-variant-numeric: tabular-nums; }
.shell .fp-table thead th { background: var(--row-total); color: var(--muted); }
/* A long table scrolls inside its frame with its heading in view («Todos os indicadores» of the results pages).
   At the frame's end the page goes on scrolling down (Pedro, 06/11/2026: «rolar também a tela tudo até baixo»), and
   «Expandir» shows the whole table on the page, its heading kept under the top bar (fp.js sets --vf-top) */
.shell .vf-scroll { max-height: calc(100vh - var(--topbar) - 96px); overflow: auto; border-top: 1px solid var(--line); }
.shell .vf-scroll thead th { position: sticky; top: 0; z-index: 2; }
.shell .vf-scroll .fp-group > th { position: sticky; top: 37px; z-index: 1; }
.shell .vf-scroll.is-open { max-height: none; overflow: visible; }
.shell .vf-scroll.is-open thead th { top: var(--vf-top, var(--topbar)); }
.shell .vf-scroll.is-open .fp-group > th { top: calc(var(--vf-top, var(--topbar)) + 37px); }
@media (max-width: 800px) {
  .shell .vf-scroll { max-height: none; overflow: visible; border-top: 0; }  /* phone: the page scrolls, never a box in a box */
  .shell .vf-scroll :is(thead th, .fp-group > th) { position: static; }
}

/* ---------- no text under 11 px (CLAUDE.md, design checklist): the last small labels of 9,8–10,5 px */
.shell :is(.ct-channel, .cockpit .person-kpis .kpi-change, .cockpit .person-kpis .kpi-goal, .goal-sheet td small, .cockpit .goal-set tbody th small) { font-size: 11px; }
/* Not here: Administrativo › Relatório diário's and Comercial › Registar's sheet (vf.css, .sheet-grid--fit) is at
   11–12 px since it slides inside its frame (Pedro, 04/11/2026). */

/* ---------- Visão geral and the areas' Resultados at work density (1440 × 900: the menu, the filters, the cards
   and the charts in view without scrolling the page; docs/design-sistema.md) */
.shell .fp { --fp-gap: 12px; --fp-pad-x: 16px; --fp-pad-y: 12px; --fp-card-radius: var(--radius-panel); }
.shell .fp-head { margin: 0 0 6px; }
.shell .fp-head h1 { font-size: 24px; }
.shell .fp-state { margin: 0 0 2px; }
.shell .fp ~ .freshness, .shell .fp .freshness { margin: 0 0 4px; }
.shell .fp-finding { margin: 0 0 10px; }
.shell .fp-kpi { gap: 4px; padding: 12px 16px; }
.shell .fp-kpi-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.shell .fp-kpi-value.is-empty { font-size: 17px; }  /* «Calculado apenas por mês»: a sentence, not a number */
.shell .fp-panel > .fp-panel-head:first-child { margin-bottom: 10px; padding-top: 10px; padding-bottom: 10px; }
.shell .fp-panel-head h2 { font-size: 15px; font-weight: 600; }
.shell .fp-table th, .shell .fp-table td { padding: 8px 12px; }
.shell .fp-table thead th { padding-top: 8px; padding-bottom: 8px; }
.shell .fp-legend { margin-bottom: 0; font-size: 12px; }
.shell .fp-link { margin-top: 4px; }  /* the chart's axis: 11 px on any screen since 06/11/2026 (fp.css), no scaling */