/* Shared web components, aligned with the attendance correction reference.
   Module layouts and document-body typography retain their own structure. */
:root {
  --muted: #536b70;
  --shadow: 0 4px 16px rgba(15, 42, 46, .035);
  --control-radius: 8px;
  --section-size: 17px;
  --navigation-surface: #dfe9e9;
  --navigation-selected: #c5dcd9;
  --navigation-selected-ink: #00636a;
}

/* The persistent sidebar and compact disclosure share the same quiet palette. */
.portal-side-navigation {
  background: var(--navigation-surface); color: var(--ink); border-right: 1px solid var(--line);
}
.portal-side-brand-copy strong { color: var(--ink); }
.portal-side-brand-copy small, .portal-navigation-group { color: #536b70; }
.portal-side-navigation nav { scrollbar-color: #a5bcbc transparent; }
.portal-side-navigation nav a { color: var(--ink); }
.portal-side-navigation .portal-navigation-icon { color: #456e72; }
.portal-side-navigation nav a:hover { background: #d3e2e2; color: var(--ink); }
.portal-side-navigation nav a.active,
.portal-side-navigation nav a[aria-current="page"] {
  background: var(--navigation-selected); color: var(--navigation-selected-ink);
  font-weight: 650; box-shadow: none; text-decoration: none;
}
.portal-side-navigation nav a.active .portal-navigation-icon,
.portal-side-navigation nav a[aria-current="page"] .portal-navigation-icon {
  color: var(--navigation-selected-ink);
}
.portal-side-navigation nav a:focus-visible,
.portal-navigation-toggle:focus-visible {
  outline: 2px solid var(--brand-dark); outline-offset: -2px;
}
.portal-navigation-toggle {
  color: var(--ink); background: var(--paper); border-color: var(--line);
}

body { background: var(--canvas); font-size: 14px; line-height: 1.5; }

.button {
  min-height: 40px; padding: 8px 12px; border-radius: var(--control-radius);
  font-size: 13px; font-weight: 600; line-height: 1.35; white-space: normal;
  box-shadow: none;
}
.button-primary, .attendance-strip .button-primary {
  min-height: 44px; padding: 11px 16px;
  color: #fff; background: var(--brand-dark); border-color: var(--brand-dark);
}
.button-primary:hover, .attendance-strip .button-primary:hover {
  background: var(--ink); border-color: var(--ink);
}
.button-secondary, .button-quiet {
  color: var(--brand-dark); background: var(--paper); border-color: var(--line);
}
.button-secondary:hover, .button-quiet:hover {
  background: var(--brand-soft); border-color: var(--brand);
}

input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select, textarea, .form-field input:not([type=checkbox]):not([type=radio]),
.form-field select, .form-field textarea {
  min-width: 0; max-width: 100%; min-height: 42px; padding: 9px 11px;
  border: 1px solid var(--line); border-radius: var(--control-radius);
  background: var(--paper); color: var(--ink); font-size: 16px;
  line-height: 1.35; box-shadow: none;
}
textarea { min-height: 76px; resize: vertical; }
main form :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea) { width: 100%; }
main form p > label { display: block; margin-bottom: 6px; }
.stacked-form textarea, .editor-form textarea, .compact-form textarea { border-radius: var(--control-radius); border-color: var(--line); }
.editor-form .markdown-editor { font-family: "Cascadia Code", "SFMono-Regular", Consolas, monospace; font-size: 14px; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand-dark); }
.form-field input[type=checkbox], .form-field input[type=radio] {
  width: 1rem; height: 1rem; margin: 0; padding: 0;
}
label, .form-field label, .attendance-break-dialog label {
  font-size: 13px; font-weight: 500; line-height: 1.4;
}
:is(input, select, textarea):focus { outline: 2px solid var(--brand-dark); outline-offset: 3px; }
:is(button, a, summary):focus-visible { outline: 2px solid var(--brand-dark); outline-offset: 3px; }
.help-text, .lede { color: var(--muted); font-size: 13px; line-height: 1.5; }

.page-heading h1, .settings-page-heading h1, .workflow-shell > h1,
.workflow-shell > header h1, .attendance-workspace-header h1,
.portal-hero-copy h1, .sign-in-card h1 {
  font-size: 28px; font-weight: 700; line-height: 1.25; letter-spacing: -.025em;
}
.settings-section-heading h2, .settings-card h2, .settings-card h3,
.portal-section-heading h2, .portal-section-heading.compact h2,
.attendance-status-card h2, .attendance-context-card h2, .attendance-action-card h2,
.attendance-strip h2, .workflow-panel h2, .action-card h2,
.empty-state h2, .change-card h2, .document-card h2,
.workflow-shell > h2, .workflow-shell > section > h2 {
  font-size: var(--section-size); font-weight: 650; line-height: 1.35;
}
.eyebrow { font-size: 10px; font-weight: 600; letter-spacing: .07em; }
.workflow-shell h2 { font-size: var(--section-size); font-weight: 650; line-height: 1.35; }
.workflow-shell h3, .portal-app-copy h3 { font-size: 14px; font-weight: 650; line-height: 1.4; }
.portal-section-heading a, .portal-card-link, .portal-compact-list a { font-weight: 600; }
.breadcrumb { font-size: 12px; color: var(--muted); }

.settings-card, .settings-form, .portal-hero, .portal-apps,
.portal-updates, .attendance-status-card, .attendance-context-card,
.attendance-action-card, .attendance-timeline, .workflow-panel, .action-card,
.document-card, .change-card, .search-panel, .sign-in-card {
  border-color: var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow);
}
.portal-rail-card, .portal-app-card, .portal-app-card-featured, .people-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow);
}
.people-card { min-width: 0; padding: 16px 20px; }
.people-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.settings-form .settings-card { box-shadow: none; }
.attendance-strip { background: var(--brand-soft); box-shadow: none; }
.status-panel { padding: 12px 14px; border-radius: var(--control-radius); font-size: 13px; box-shadow: none; }
.status-warning { background: #fff3d6; color: #714c18; border-color: #e6cc92; }
.status-error { background: #fff2f1; color: #8b2822; border-color: #e9bfbb; }
.errorlist { color: #8b2822; font-size: 13px; font-weight: 500; }
.people-table th, .settings-data-table th, .reconciliation-table th {
  background: var(--brand-soft); color: var(--ink); font-size: 13px; font-weight: 600;
}
.people-table td, .settings-data-table td, .reconciliation-table td { font-size: 13px; }

@media (max-width: 600px) {
  .page-heading h1, .settings-page-heading h1, .workflow-shell > h1,
  .workflow-shell > header h1, .attendance-workspace-header h1,
  .portal-hero-copy h1, .sign-in-card h1 { font-size: 25px; }
}