/*
 * Inctor UI kit — layout and components.
 *
 * Load after tokens.css. Every colour comes from a token, so both themes are
 * covered by the same rules.
 *
 * The Latão rule (BRAND.md section 3): at most two Latão spots per screen —
 * the primary action (.btn--primary) and the active navigation item
 * (.app-nav__link[aria-current="page"]). An elevated indicator
 * (.indicator--elevated) is also Latão, so a screen that elevates one gives up
 * one of the other two. Focus rings are therefore never Latão.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tabular {
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- app header */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 3.5rem;
  padding: 0 var(--space-5);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
}

/* Horizontal signature: symbol left, name right, gap = one arm's thickness. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text);
  text-decoration: none;
}

.brand-lockup__symbol {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
}

.brand-lockup__symbol .brand-lockup__angle { fill: currentColor; }
.brand-lockup__symbol .brand-lockup__core { fill: var(--inctor-latao); }

.brand-lockup__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.03em;
  font-size: 1.25rem;
}

.app-nav {
  display: flex;
  align-items: stretch;
  gap: var(--space-1);
  align-self: stretch;
  flex: 1 1 auto;
  overflow-x: auto;
}

.app-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border-bottom: 3px solid transparent;
  border-top: 3px solid transparent;
  color: var(--text-muted);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.app-nav__link:hover { color: var(--text); }

/* Latão spot #2: the active navigation item. */
.app-nav__link[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.app-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* ------------------------------------------------------------ page layout */

.page {
  width: min(80rem, 100%);
  margin: 0 auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
}

.page-head__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.page-head__subtitle { color: var(--text-muted); }

.page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--space-4);
  align-items: start;
}

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-width: 0;
}

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.card__title { font-size: 1rem; }

.card__action {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}

.card__body {
  padding: var(--space-4);
}

.card__body--flush { padding: 0; }

/* A form summary: label / value pairs. */
.summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
}

.summary dt {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.summary dd { margin: 0; }

/* ------------------------------------------------------------- indicators */

/* BRAND.md section 6: two columns, 11px gap on phone, 16px from 768px up;
   name on top, big tabular number, one context line, no decorative icon. */
.indicators {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 11px;
}

@media (min-width: 768px) {
  .indicators { gap: 16px; }
  .indicators--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.indicator {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 8.5rem;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
}

/* Inside a card the indicators sit on the sunken tone, not card-on-card. */
.card .indicator { background: var(--surface-sunken); }

.indicator__name {
  font-weight: 500;
  font-size: 0.875rem;
}

.indicator__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1;
}

/* A long value (money, "1.764,32 m²") steps down so it stays on one line in its card, and on a phone's two
   columns does not widen the page. */
.indicator__value--long { font-size: clamp(1.5rem, 2.2vw, 2rem); white-space: nowrap; }
@media (max-width: 40rem) {
  .indicator__value--long { font-size: clamp(1.0625rem, 4.6vw, 1.5rem); }
}

.indicator__context {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--indicator-context);
  font-size: 0.8125rem;
}

/* One elevated card at a time; counts as a Latão spot. */
.indicator--elevated {
  border-top-color: var(--accent);
  transform: translateY(-9px);
  /* BRAND.md section 6: flat Tinta at 55 %, no blur. The context line is Latão claro
     in dark and Tinta in light (DESIGN_SYSTEM.md, accessibility exception). */
  box-shadow: var(--shadow-elevated);
}

.indicator--elevated .indicator__context { color: var(--indicator-context-elevated); }

/* Status dot follows the status table. */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.status-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--inctor-planejado);
}

.status-dot--concluido { background: var(--inctor-concluido); }
.status-dot--andamento { background: var(--inctor-andamento); }
.status-dot--atraso { background: var(--inctor-atraso); }
.status-dot--planejado { background: var(--inctor-planejado); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
}

.btn:hover { background: var(--surface-hover); }

.btn .material-symbols-outlined { font-size: 1.25rem; }

/* Latão spot #1: the primary action. */
.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text);
}

.btn--ghost:hover { background: var(--surface-hover); }

.btn--danger {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--on-danger);
}

.btn--danger:hover {
  background: var(--danger-hover);
  border-color: var(--danger-hover);
}

.btn--sm {
  min-height: 2rem;
  padding: 0 var(--space-3);
  font-size: 0.875rem;
}

.btn--sm .material-symbols-outlined { font-size: 1.125rem; }

/* Icon-only action (grid rows): the label is the aria-label and the tooltip. */
.btn--icon {
  gap: 0;
  padding: 0;
  justify-content: center;
}

.btn--icon.btn--sm { width: 2rem; }

@media (pointer: coarse) {
  .btn--icon.btn--sm {
    width: var(--touch-target);
    min-height: var(--touch-target);
  }
}

/* tooltip.js: one floating label, above the control (below near the top edge).
   Inverted colours so it reads on any surface in both themes. */
.tooltip {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  z-index: 200;
  width: max-content;
  max-width: min(20rem, calc(100vw - 0.5rem));
  margin: 0;
  padding: 0.3125rem 0.5rem;
  border: 0;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: break-word;
  pointer-events: none;
}

/* ---------------------------------------------------------------- combobox */

/* A search field whose results float over the form (combobox.js). */
.combobox {
  position: relative;
  display: flex;
  align-items: center;
}

/* Room for the clear button; `.input` sets the padding later in this file. */
.combobox .combobox__input { padding-right: calc(var(--control-height) + var(--space-1)); text-overflow: ellipsis; }
.combobox__input::-webkit-search-cancel-button { display: none; }

.combobox__clear {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: var(--control-height);
  height: var(--control-height);
}

.combobox__clear[hidden] { display: none; }

/* Fixed coordinates set by combobox.js; a popover in the top layer, above a dialog. */
.combobox__popup {
  position: fixed;
  inset: auto;
  z-index: 150;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: var(--space-1) 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-elevated);
}

.combobox__popup:not(:popover-open)[popover] { display: none; }

.combobox__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.combobox__list[hidden] { display: none; }

.combobox__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.combobox__option[aria-selected="true"] {
  background: var(--surface-hover);
  box-shadow: inset 3px 0 0 var(--choice-accent);
}

.combobox__status {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.combobox__status[hidden] { display: none; }
.combobox__status--error { color: var(--error-text); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Busy: the spinner takes the icon's place; the label stays. */
.btn.is-busy { cursor: progress; opacity: 0.85; }
.btn.is-busy > .material-symbols-outlined { display: none; }

.spinner {
  display: inline-block;
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: inctor-spin 0.8s linear infinite;
}

.spinner--lg { width: 1.75rem; height: 1.75rem; border-width: 3px; }

@keyframes inctor-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2.4s; }
}

/* A square icon-only button with a 44px touch target (theme toggle, X). */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: var(--touch-target);
  height: var(--touch-target);
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.icon-btn:hover { background: var(--surface-hover); color: var(--text); }

/* ----------------------------------------------------------------- fields */

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  font-weight: 500;
  font-size: 0.875rem;
  padding: 0;
}

.field__required {
  color: var(--text-muted);
  font-weight: 400;
}

.field__hint {
  color: var(--text-muted);
  font-size: 0.8125rem;
}

/* ⓘ that shows a hint as a tooltip (tooltip.js): after a field label
   (.field__tip, not a tab stop) or anywhere else (.info-tip, focusable). */
.field__tip,
.info-tip {
  display: inline-flex;
  align-items: center;
  margin-left: 0.25rem;
  color: var(--text-muted);
  vertical-align: -0.2em;
  cursor: help;
}

.field__tip .material-symbols-outlined,
.info-tip .material-symbols-outlined { font-size: 1.05rem; }

.field__tip:hover,
.info-tip:hover { color: var(--text); }

.info-tip { border-radius: 50%; }
.info-tip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; color: var(--text); }

.field__error {
  color: var(--error-text);
  font-size: 0.8125rem;
  font-weight: 500;
}

.field__error:empty { display: none; }

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--input-bg);
  color: var(--text);
  font: inherit;
}

.textarea {
  min-height: 6rem;
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); opacity: 0.8; }

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 0;
  border-color: var(--focus);
}

.input--numeric {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.input-affix {
  display: flex;
  align-items: stretch;
}

.input-affix__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-strong);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.input-affix .input { border-radius: 0 var(--radius) var(--radius) 0; }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea,
.field.has-error .input-affix__prefix {
  border-color: var(--danger);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2rem;
  cursor: pointer;
}

.choice input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--choice-accent);
}

/* A server error that belongs to no single field. */
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--danger);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: var(--error-text);
  font-weight: 500;
}

.form-alert[hidden] { display: none; }

.form-alert .material-symbols-outlined { font-size: 1.25rem; }

/* ------------------------------------------------------------------ grids */

.grid {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.grid__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

/* Search first, taking the width; filters sit beside it. */
.grid__search {
  position: relative;
  flex: 1 1 16rem;
  min-width: 0;
}

.grid__search .material-symbols-outlined {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  color: var(--text-muted);
  pointer-events: none;
}

.grid__search .input { padding-left: 2.5rem; }

.grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.grid__filters .select { width: auto; min-width: 11rem; }

/* position: relative makes the scroller the containing block of the column
   filters' visually hidden labels (position: absolute). Without it they are
   placed against the page and, on a phone, widen the layout viewport to the
   table's width (found in ORCAMENTO-007 at 390 px; #/diarios had it too). */
.grid__scroll {
  position: relative;
  overflow-x: auto;
}

.grid__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.grid__table th,
.grid__table td {
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.grid__table thead th {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}

.grid__table tbody tr:hover { background: var(--surface-hover); }
.grid__table tbody tr:last-child td { border-bottom: 0; }

/* Numbers, money and dates: Archivo 600, tabular, right-aligned. */
.grid__table .is-numeric {
  text-align: right;
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.grid__table thead .is-numeric { font-family: var(--font-text); font-weight: 500; }

.grid__table .is-actions {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.grid__actions {
  display: inline-flex;
  gap: var(--space-1);
}

.grid__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2rem;
  margin: 0 calc(-1 * var(--space-2));
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.is-numeric .grid__sort { flex-direction: row-reverse; }

.grid__sort:hover { color: var(--text); background: var(--surface-hover); }

.grid__sort .material-symbols-outlined {
  font-size: 1rem;
  opacity: 0.45;
}

th[aria-sort="ascending"] .grid__sort,
th[aria-sort="descending"] .grid__sort { color: var(--text); }

th[aria-sort="ascending"] .grid__sort .material-symbols-outlined,
th[aria-sort="descending"] .grid__sort .material-symbols-outlined { opacity: 1; }

/* Column filters: one row under the headers, a control per filtered column. */
.grid__filter-row .grid__filter-cell {
  padding: var(--space-2);
  background: var(--surface-sunken);
  vertical-align: top;
  font-family: var(--font-text);
  font-weight: 400;
}

.grid__filter-row .grid__filter-cell:first-child { padding-left: var(--space-4); }

.grid__filter-input.input,
.grid__filter-input.select {
  min-height: 2rem;
  padding: 0.25rem var(--space-2);
  font-size: 0.8125rem;
  min-width: 7rem;
}

.grid__filter-input.select { min-width: 9.5rem; }

.grid__filter-input.input[type="date"] { min-width: 8.5rem; }

.grid__filter-input[aria-invalid="true"] { border-color: var(--danger); }

.grid__range {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* mín. over máx., like de over até: a numeric column stays as narrow as its figures. */
.grid__range--number { align-items: flex-end; }
.grid__range--number .grid__filter-input.input { min-width: 0; width: 5rem; text-align: right; }

.grid__range-part {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.grid__range-prefix {
  flex: none;
  width: 1.75rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-align: right;
}

.grid [hidden] { display: none !important; }

.grid__nomatch td { padding: 0; border-bottom: 0; }
.grid__table tbody tr.grid__nomatch:hover { background: transparent; }

.state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}

.grid__count {
  padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.grid__count:empty { display: none; }

/* ---------------------------------------------- loading, error, empty states */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 12rem;
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.state__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  font-size: 1.0625rem;
}

.state__text {
  max-width: 32rem;
  color: var(--text-muted);
}

.state--loading { color: var(--text-muted); }

.state--error .state__icon {
  font-size: 2rem;
  color: var(--danger);
}

/* ----------------------------------------------------------------- modals */

/* The backdrop is Tinta at 60%, not a colour of its own. */
.modal::backdrop {
  background: var(--backdrop);
}

.modal {
  width: min(var(--modal-default), calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 4rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-flat);
  /* Only the body scrolls. Without this, anything that overflows (an
     absolutely positioned descendant, say) makes the dialog itself scroll and
     carries the footer away with it. */
  overflow: hidden;
}

.modal--wide { width: min(var(--modal-wide), calc(100vw - 2rem)); }
.modal--xwide { width: min(var(--modal-xwide), calc(100vw - 2rem)); }
/* A grid to review inside a modal (the spreadsheet import): as wide as the
   screen allows, the grid scrolls sideways inside its .grid__scroll. */
.modal--max { width: min(var(--modal-max), calc(100vw - 2rem)); }
/* Confirm dialog (confirm.js), in the brand (shared with the app): a 3 px band
   in the tone colour, the tone's icon in a soft square, the title naming the
   object with the consequence under it, Cancelar and the verb in the footer. */
.modal--confirm {
  width: min(28rem, calc(100vw - 2rem));
  border-top: 3px solid var(--confirm-tone);
}

.modal--confirm-danger { --confirm-tone: var(--danger); }
.modal--confirm-primary { --confirm-tone: var(--choice-accent); }

.confirm {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-2) var(--space-5) var(--space-5);
}

.confirm__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  color: var(--confirm-tone);
  background: color-mix(in srgb, var(--confirm-tone) 12%, transparent);
}

.confirm__icon .material-symbols-outlined { font-size: 1.5rem; }

.confirm__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
  padding-top: 0.125rem;
}

.confirm__title { font-size: 1.125rem; padding: 0; }
.confirm__message { color: var(--text-muted); }
.modal--confirm .modal__close { margin-top: calc(-1 * var(--space-2)); }

/*
 * `[open]` carries the display value, never `.modal` alone. The browser hides
 * a closed dialog with `dialog:not([open]) { display: none }`, and ANY author
 * `display` beats that user-agent rule regardless of specificity: without the
 * `[open]` every closed dialog would render on the page (zero hit this bug).
 */
.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal__form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}

/* Title top-left, X top-right. The head does not scroll with the body. */
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.modal__title {
  font-size: 1.125rem;
  padding: var(--space-2) 0;
}

/* The X: 44px touch target; the glyph is smaller than the area. */
.modal__close {
  flex: none;
}

/* The body scrolls; `min-height: 0` lets a flex item shrink below its content,
   without which it pushes the footer out of view instead of scrolling. */
.modal__body {
  /* the containing block of absolutely positioned content (visually hidden
     hints, tooltips anchors), so it scrolls with the body instead of
     stretching the dialog */
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* The footer stays: secondary action, then the primary in Latão. */
.modal__foot {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.modal__message { color: var(--text); }

/* ----------------------------------------------------------------- toasts */

.toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border);
  border-left: 4px solid var(--inctor-planejado);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-flat);
  pointer-events: auto;
}

.toast__icon { font-size: 1.25rem; }
.toast__text { flex: 1 1 auto; font-weight: 500; }

.toast--success { border-left-color: var(--inctor-concluido); }
.toast--success .toast__icon { color: var(--inctor-concluido); }
.toast--error { border-left-color: var(--inctor-atraso); }
.toast--error .toast__icon { color: var(--inctor-atraso); }
.toast--info .toast__icon { color: var(--text-muted); }

@media (max-width: 40rem) {
  .app-header { padding: 0 var(--space-3); gap: var(--space-3); }
  .page { padding: var(--space-4) var(--space-3); }
  .modal__body { padding: var(--space-4); }
  .modal__foot { padding: var(--space-3) var(--space-4); }
}

/* ------------------------------------------------ theme choice (theme.js)
 * Claro, Escuro, Seguir o aparelho: the pressed one is the current state.
 * In a menu, one row each; .theme-choice--compact is three icon buttons.   */
.theme-choice { display: flex; flex-direction: column; }

.theme-choice__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--touch-target);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-choice__option:hover { background: var(--surface-hover); }
.theme-choice__option .material-symbols-outlined { color: var(--text-muted); font-size: 1.25rem; }
.theme-choice__option[aria-pressed="true"] { background: var(--surface-sunken); font-weight: 500; }

.theme-choice--compact {
  flex-direction: row;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.theme-choice--compact .theme-choice__option {
  justify-content: center;
  width: var(--touch-target);
  padding: 0;
  color: inherit;
}

.theme-choice--compact .theme-choice__option .material-symbols-outlined { color: inherit; }

/* On a coloured header the kit's surfaces would sit light-on-light: the compact
 * group tints with its own text colour instead, so it reads on any ground. */
.theme-choice--compact .theme-choice__option:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.theme-choice--compact .theme-choice__option[aria-pressed="true"] { background: color-mix(in srgb, currentColor 22%, transparent); }

/* ------------------------------------------------ coach marks (coachmark.js)
 * A guided tour inside the real screens: a small non-modal card beside the
 * element the step is about, and a ring around that element. No Latão: the
 * screen's two Latão spots stay its primary action and the active nav item.
 * The band on top and "Próximo" use the text colour (Aço / Osso), like the
 * primary-tone confirm. At or below 600 px the card docks at the bottom.     */
.coach {
  position: fixed;
  inset: auto;
  top: 0;
  left: 0;
  z-index: 180;
  width: min(22rem, calc(100vw - 1rem));
  margin: 0;
  padding: var(--space-4);
  overflow: visible;
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--choice-accent);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-elevated);
  font-family: var(--font-text);
}

.coach:focus { outline: none; }
.coach:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.coach--centered {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.coach--docked {
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  margin: 0 var(--space-2) var(--space-2);
  padding: var(--space-3) var(--space-4);
  transform: none;
  box-shadow: none;
}

/* the page gets the docked card's height at its end, so the last controls can scroll above it */
.coach-docked body { padding-bottom: var(--coach-dock-h, 0px); }

.coach--docked .coach__title { font-size: 1rem; margin-bottom: var(--space-1); }
.coach--docked .coach__text { font-size: 0.875rem; }
.coach--docked .coach__foot { margin-top: var(--space-2); }

.coach__eyebrow {
  margin: 0 0 var(--space-1);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.coach__title {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.01em;
}

.coach__text { margin: 0; font-size: 0.9375rem; line-height: 1.45; }

.coach__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.coach__nav { display: inline-flex; gap: var(--space-2); margin-left: auto; }
.coach__exit { margin-left: calc(-1 * var(--space-2)); color: var(--text-muted); }
.coach__foot .btn[hidden] { display: none; }

.coach__next {
  border-color: var(--choice-accent);
  background: var(--choice-accent);
  color: var(--surface);
}

.coach__next:hover { background: var(--text); border-color: var(--text); }

.coach-ring {
  position: fixed;
  z-index: 170;
  border: 2px solid var(--focus);
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 22%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .coach-ring { transition: top 160ms ease-out, left 160ms ease-out, width 160ms ease-out, height 160ms ease-out; }
}

@media (max-width: 40rem) {
  .coach__foot .btn { min-height: var(--touch-target); }
}