/*
 * SYSTEM interface — one stylesheet, not another override layer.
 * THESIS: A calm working desk for the society's actual daily tasks.
 * OWN-WORLD: White, cool grey, ink, restrained evergreen; clear sans typography.
 * STORY: Enter, understand today's work, find a member, read only permitted details.
 * FIRST VIEWPORT: Compact navigation; the task and its next action remain visible.
 * FORM: User-pinned BSC / Apple visual language, familiar task-first operation.
 * FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
 */

:root {
  color-scheme: light;
  --bg: #f6f7f8;
  --surface: #ffffff;
  --surface-soft: #f1f4f3;
  --ink: #202725;
  --muted: #5c6863;
  --line: #dfe5e2;
  --line-strong: #a2afa8;
  --action: #126a55;
  --action-hover: #0b5342;
  --action-soft: #e7f1ec;
  --green: var(--action);
  --green-light: var(--action-soft);
  --danger: #a72c2c;
  --danger-soft: #fff1f0;
  --warning: #815716;
  --warning-soft: #fff7e8;
  --focus: #226bb5;
  --radius: 16px;
  --radius-control: 10px;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

* { box-sizing: border-box; }
html { margin: 0; background: var(--bg); scroll-padding-top: 112px; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font: 400 16px/1.65 var(--font-ui); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, textarea, summary { -webkit-tap-highlight-color: transparent; }
button, a { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
a { color: var(--action); text-decoration-thickness: 1px; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 2px; }
button, h1, h2, h3, p, figure, dl, dd { margin: 0; }
button { border: 0; }
h1, h2, h3 { color: var(--ink); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
h1 { font-size: 32px; letter-spacing: -.025em; }
h2 { font-size: 22px; letter-spacing: -.015em; }
h3 { font-size: 18px; }
p, dd { overflow-wrap: anywhere; }
small { font-size: 14px; }
img { display: block; max-width: 100%; height: auto; }
svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
::selection { color: #0b3f31; background: #c9e5d7; }
input, textarea { caret-color: var(--action); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
[hidden], .theme-control, .theme-segmented, .theme-select, .eyebrow, .hero-badge, .caption-eyebrow { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.wrap { width: min(1280px, calc(100% - 80px)); margin-inline: auto; }

/* Consistent actions and editable controls. */
.btn, .system-select, .quick, .tabs button, .system-picker-option, .system-calendar-footer button {
  min-height: 48px;
  border-radius: var(--radius-control);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.5;
  transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; border: 1px solid var(--action); background: var(--action); color: white; text-decoration: none; text-align: center; }
.btn:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); text-decoration: none; }
.btn:active:not(:disabled) { background: #084334; }
.btn.light, .btn-ghost { color: var(--action); background: white; border-color: #c1cec7; }
.btn.light:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { color: var(--action-hover); background: var(--action-soft); border-color: #93af9f; }
.btn:disabled, .system-select:disabled { color: #69756e; background: #e9eeeb; border-color: #d4ddd7; }
.btn.small { min-height: 44px; padding: 9px 14px; font-size: 15px; }
.btn-large, .btn-hero { min-height: 52px; padding-inline: 24px; }
.btn-icon { display: inline-flex; }
.icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--muted); text-decoration: none; line-height: 1; }
.icon-btn:hover { color: var(--ink); background: #edf1ee; text-decoration: none; }
.icon-btn:disabled { color: #7d8881; background: #f1f3f2; }
.text-link, .member-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--action); font-size: 16px; font-weight: 550; text-decoration: none; text-align: left; }
.text-link:hover, .member-link:hover { text-decoration: underline; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: #3d4943; font-size: 15px; font-weight: 550; line-height: 1.5; }
:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea), .system-select { width: 100%; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: white; color: var(--ink); font-size: 16px; font-weight: 400; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: #6b766f; opacity: 1; }
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: #6f8b7c; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { min-height: 144px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--action); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.full { grid-column: 1 / -1; }
.stack { display: grid; gap: 22px; }
.form-actions, .system-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.form-actions .btn, .system-form-actions .btn { min-width: 104px; }
.system-field-error { color: var(--danger); font-size: 14px; font-weight: 450; }
.system-submit-error, .system-discard { padding: 16px 18px; border: 1px solid #e8b8b0; border-radius: 12px; background: var(--danger-soft); color: var(--danger); line-height: 1.7; }
.system-discard { background: var(--warning-soft); border-color: #e1c899; color: var(--warning); margin-block: 16px; }
.system-discard > div { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.checkfield { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.quick { padding: 11px 14px; background: var(--action-soft); color: var(--action); text-align: left; }

/* Public introduction: product, not a fake monitoring dashboard. */
.site-header { background: white; border-bottom: 1px solid var(--line); }
.header-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 92px; padding-block: 16px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; color: var(--ink); text-decoration: none; }
.brand:hover { text-decoration: none; }
.brand-logo { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.brand-logo img { width: 42px; height: 42px; object-fit: contain; }
.brand-text { min-width: 0; }
.brand-name { display: block; font-size: 19px; font-weight: 700; line-height: 1.4; }
.brand-sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--muted); }
.nav, .nav-links { display: flex; align-items: center; gap: 20px; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0; color: var(--muted); text-decoration: none; font-size: 16px; }
.nav-link.active, .nav-link:hover { color: var(--action); }
.nav-cta { white-space: nowrap; }
.home-hero, .system-public-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; min-height: 640px; padding-block: 72px; }
.hero-copy { min-width: 0; }
.hero-title { font-size: 56px; line-height: 1.2; letter-spacing: -.035em; font-weight: 700; }
.hero-title span, .gradient-text { color: var(--action); background: none; -webkit-text-fill-color: currentColor; }
.hero-lead { max-width: 36em; margin-top: 28px; color: var(--muted); font-size: 20px; line-height: 1.8; }
.hero-actions, .system-public-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 32px; }
.hero-trust { display: flex; align-items: flex-start; gap: 10px; margin-top: 24px; color: var(--muted); font-size: 15px; }
.hero-trust svg { width: 20px; height: 20px; margin-top: 3px; color: var(--action); }
.system-public-product { min-width: 0; padding: 32px; border: 1px solid #dce4de; border-radius: 22px; background: white; box-shadow: 0 16px 48px #20372b0a; }
.system-public-preview-label { display: block; margin-bottom: 20px; color: var(--muted); font-size: 14px; }
.system-public-product h2 { font-size: 23px; margin-bottom: 12px; }
.system-public-product > p { color: var(--muted); font-size: 16px; line-height: 1.75; }
.system-public-flow { display: grid; gap: 0; margin-top: 24px; }
.system-public-flow > * { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 20px; border-top: 1px solid var(--line); }
.system-public-flow > * > svg, .system-public-flow > * > span:first-child:not(:last-child) { display: grid; place-items: center; width: 36px; height: 36px; color: var(--action); }
.system-public-flow strong { display: block; font-size: 17px; font-weight: 600; }
.system-public-flow p, .system-public-flow small { display: block; margin-top: 5px; color: var(--muted); font-size: 15px; line-height: 1.65; }
.system-public-features, .services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-block: 36px 72px; }
.system-public-feature, .service { display: block; padding: 28px 0 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); text-align: left; }
.system-public-feature h3, .service h3 { font-size: 23px; margin-block: 12px; }
.system-public-feature p, .service p { color: var(--muted); font-size: 17px; line-height: 1.75; }
.service-header, .service-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.service-header { color: var(--action); }
.service-footer { margin-top: 20px; font-size: 16px; color: var(--action); }
.service-tag { color: var(--muted); font-size: 14px; }
.service-icon { display: inline-flex; }
.service-glow, .section-pill, .ticker-banner { display: none; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-top: 32px; }
.section-head h2 { font-size: 32px; }
.section-sub { margin-top: 14px; color: var(--muted); font-size: 18px; }
.about-hero { max-width: 960px; padding-block: 80px 52px; }
.about-hero .hero-title { font-size: 48px; }
.about-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; margin-block: 36px 64px; }
.about-card { border-top: 1px solid var(--line); padding-top: 28px; }
.about-card .num { display: none; }
.about-card-top { margin-bottom: 16px; }
.role-badge { font-size: 15px; color: var(--action); }
.about-card h2 { margin-bottom: 12px; }
.about-card p { font-size: 17px; color: var(--muted); }
.feature-list { display: grid; gap: 14px; padding: 0; margin: 24px 0 0; list-style: none; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); }
.check-bullet { display: inline-flex; color: var(--action); padding-top: 3px; }
.check-bullet svg { width: 18px; height: 18px; }
.about-banner { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding-block: 36px; border-top: 1px solid var(--line); }
.about-banner h2 { font-size: 28px; }
.about-banner p { margin-top: 12px; color: var(--muted); font-size: 17px; }
.footer { padding-block: 36px; margin-top: 32px; border-top: 1px solid var(--line); }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer .wrap { width: 100%; }
.footer-left, .footer-brand, .footer-links { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.footer-brand { gap: 10px; font-size: 16px; font-weight: 600; }
.footer-brand img { width: 28px; height: 28px; }
.footer-copy, .footer-links { font-size: 14px; color: var(--muted); }
.footer-links a { color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }

/* Working shell. The document scrolls; no fixed content pane under a top bar. */
.portal { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; background: var(--bg); }
.sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; height: 100dvh; min-width: 0; padding: 24px 18px 20px; border-right: 1px solid var(--line); background: white; overflow-y: auto; overscroll-behavior: contain; }
.sidebar .brand { gap: 9px; padding-inline: 4px; }
.sidebar .brand-logo { width: 36px; height: 40px; }
.sidebar .brand-logo img { width: 36px; height: 36px; }
.sidebar .brand-name { font-size: 16px; }
.sidebar .brand-sub { font-size: 12px; }
.side-nav { display: block; margin-top: 32px; }
.nav-group + .nav-group { margin-top: 24px; }
.side-label { display: block; margin: 0 14px 9px; font-size: 13px; font-weight: 550; color: var(--muted); }
.side-nav a { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-block: 4px; padding: 11px 13px; border-radius: 10px; color: #4b5951; font-size: 16px; text-decoration: none; }
.side-nav a:hover { background: #f0f4f1; color: var(--ink); }
.side-nav a.active, .side-nav a[aria-current="page"] { color: #10583f; background: var(--action-soft); font-weight: 600; }
.side-nav a svg { width: 21px; height: 21px; }
.side-bottom { margin-top: auto; padding-top: 28px; }
.sidebar-service { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; color: var(--muted); font-size: 14px; text-decoration: none; }
.sidebar-service:hover { background: #f0f4f1; border-radius: 10px; }
.sidebar-service svg { width: 19px; height: 19px; }
.sidebar .user-switch { display: flex; align-items: center; gap: 10px; min-width: 0; width: 100%; margin-top: 14px; padding: 16px 6px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 15px; line-height: 1.5; text-decoration: none; }
.sidebar .user-switch > span:not(.avatar) { min-width: 0; overflow-wrap: anywhere; }
.side-role { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; flex: none; background: #edf2ef; color: #3b6251; font-size: 17px; font-weight: 600; }
.portal-main { width: 100%; min-width: 0; padding: 0 40px 32px; }
.portal-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 80px; margin-inline: -40px; padding: 12px 40px; border-bottom: 1px solid var(--line); background: white; }
.crumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.crumb strong { color: var(--ink); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.top-actions .icon-btn { border-radius: 50%; }
.unread-count { position: absolute; top: 2px; right: 0; display: grid; place-items: center; min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 12px; background: var(--action); color: white; font-size: 11px; }
.mobile-menu, .system-drawer-close, .console-scrim { display: none; }
#page-content { width: 100%; max-width: 1440px; margin-inline: auto; padding-top: 32px; }
.portal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.portal-heading > div:first-child { min-width: 0; }
.portal-heading h1 { font-size: 30px; }
.portal-heading p { max-width: 54em; margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 1.7; }
.console-date { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font-size: 15px; white-space: nowrap; }
.console-date svg { width: 19px; height: 19px; }
.portal-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; max-width: 1440px; margin: 40px auto 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.portal-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
.system-bottom-nav { display: none; }

/* Dashboard: today's action above secondary summaries. */
.panel { min-width: 0; padding: 26px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.panel-title { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.panel-title h2 { font-size: 21px; }
.panel-title > .demo { font-size: 15px; }
.panel-title .text-link { min-height: 36px; }
.demo, .page-intro { color: var(--muted); font-size: 15px; line-height: 1.7; }
.system-quick-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.reminder { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; padding: 24px 26px; border-color: #c7dbce; background: #eff6f1; }
.reminder > svg { width: 28px; height: 28px; color: var(--action); }
.reminder-copy { flex: 1; min-width: 0; }
.reminder h2 { font-size: 20px; }
.reminder p { margin-top: 6px; font-size: 16px; color: #485e50; }
.console-stats, .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.console-stats { gap: 0; padding: 8px; background: white; border: 1px solid var(--line); border-radius: 20px; }
.console-stat, .stat { display: block; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: white; color: var(--ink); text-decoration: none; }
.console-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 12px; padding: 18px; border: 0; border-radius: 12px; background: transparent; }
.console-stat .console-stat-top { display: contents; font-size: 15px; }
.console-stat-top > svg { display: none; }
.console-stat .console-stat-number { grid-column: 2; grid-row: 1; margin: 0; font-size: 24px; white-space: nowrap; }
.console-stat .console-stat-caption { grid-column: 1 / -1; font-size: 13px; }
.console-stat:hover { background: #fafcfb; border-color: #9cb7a8; text-decoration: none; }
.console-stat-top, .stat .label { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.console-stat-top svg, .stat .label svg { width: 20px; height: 20px; color: #4f7160; }
.console-stat-number, .stat .number { font-variant-numeric: tabular-nums; font-size: 34px; font-weight: 650; line-height: 1.25; margin-block: 16px 12px; letter-spacing: -.02em; }
.console-stat-number small, .stat .number small { margin-left: 6px; color: var(--muted); font-size: 15px; font-weight: 400; letter-spacing: 0; }
.console-stat-caption { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.stat .sub { color: var(--muted); font-size: 14px; }
.console-columns, .dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); align-items: start; gap: 24px; }
.console-columns > *, .console-secondary { min-width: 0; }
.console-secondary { display: grid; gap: 24px; align-items: start; }
.work-panel > .demo { margin-bottom: 8px; }
.work-panel { border-radius: 24px; padding: 24px; }
.work-count { color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.work-items { display: grid; gap: 10px; }
.work-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border: 0; border-radius: 16px; background: #f5f7f6; }
.work-item:last-child { border-bottom: 0; }
.work-copy { min-width: 0; }
.work-avatar { width: 42px; height: 42px; background: #e4ede8; color: #315c4b; }
.work-item h3 { margin: 0 0 2px; font-size: 17px; }
.work-item p { color: var(--muted); font-size: 14px; line-height: 1.6; }
.work-status { display: block; margin-top: 4px; color: #815716; font-size: 13px; font-weight: 550; }
.work-item .work-reason { margin-top: 8px; }
.work-buttons { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.work-links { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.system-more-work summary { min-height: 48px; padding-block: 12px; color: var(--action); cursor: pointer; }
.dashboard-notices { border-radius: 24px; }
.dashboard-empty { display: flex; align-items: center; gap: 14px; padding: 16px 0 4px; color: var(--muted); }
.dashboard-empty > svg { width: 28px; height: 28px; }
.dashboard-empty strong { color: var(--ink); font-size: 16px; font-weight: 550; }
.dashboard-empty p { margin-top: 4px; font-size: 14px; }
.dashboard-services { padding: 4px; min-width: 0; }
.dashboard-services .panel-title { margin: 0 12px 12px; }
.console-shortcuts { display: grid; gap: 8px; }
.console-shortcuts a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: white; color: var(--ink); font-size: 16px; text-decoration: none; }
.console-shortcuts a:last-child { border-bottom: 0; }
.console-shortcuts a:hover { color: var(--action); }
.console-shortcuts a span { flex: 1; }
.console-shortcuts svg { width: 20px; height: 20px; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px; border-radius: 7px; background: var(--action-soft); color: #255a40; font-size: 13px; font-weight: 550; line-height: 1.6; }
.pill.orange { color: var(--warning); background: var(--warning-soft); }

/* Search, member rows and full-page details. */
.system-filter { margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.system-filter > summary { display: none; min-height: 48px; padding: 16px 20px; color: var(--ink); font-size: 16px; font-weight: 600; cursor: pointer; }
.system-filter:not([open]) > .filter-bar { display: flex; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; padding: 22px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.system-filter > .filter-bar { margin: 0; border: 0; background: transparent; }
.filter-bar > .field { flex: 1 1 156px; }
.filter-bar > .field:first-of-type { flex: 2 1 240px; }
.filter-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.member-directory { display: flex; flex-direction: column; }
.member-tile { display: grid; grid-template-columns: 44px minmax(0, 1fr) 22px; align-items: center; gap: 18px; min-height: 100px; width: 100%; padding: 22px 8px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; text-decoration: none; }
.member-tile:last-child { border-bottom: 0; }
.member-tile:hover { background: #f5f8f6; text-decoration: none; }
.member-tile:active { background: #ebf3ed; }
.member-tile > span:nth-child(2), .system-member-copy { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.member-tile strong, .system-member-name { display: block; font-size: 17px; line-height: 1.55; font-weight: 600; overflow-wrap: anywhere; }
.member-tile small, .system-member-meta, .system-member-status { display: block; color: var(--muted); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.member-tile > span:last-child:not(:nth-child(2)) { color: #597263; }
.member-tile > svg { color: #597263; width: 20px; height: 20px; }
.system-member-detail { max-width: 1120px; }
.system-member-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 20px; padding: 0; background: transparent; color: var(--action); text-decoration: none; }
.system-member-back svg { width: 18px; height: 18px; }
.system-member-summary, .member-summary { display: flex; align-items: center; gap: 20px; min-width: 0; padding-bottom: 28px; }
.system-member-summary > div, .member-summary > div { min-width: 0; }
.system-member-summary .avatar, .member-summary .avatar { width: 68px; height: 68px; font-size: 26px; }
.system-member-summary h1, .system-member-summary h2, .member-summary h3 { font-size: 28px; line-height: 1.4; }
.system-member-summary p, .member-summary p { margin-top: 8px; color: var(--muted); font-size: 16px; }
.system-member-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 28px; padding: 26px 0; border-block: 1px solid var(--line); }
.system-member-facts > div { min-width: 0; }
.system-member-facts dt { color: var(--muted); font-size: 14px; }
.system-member-facts dd { margin-top: 8px; color: var(--ink); font-size: 17px; line-height: 1.65; }
.system-member-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin-top: 8px; }
.system-member-section { min-width: 0; padding-block: 28px; border-bottom: 1px solid var(--line); }
.system-member-section h2, .detail-section h3 { margin-bottom: 18px; font-size: 20px; }
.system-member-section p, .detail-section p { margin-top: 12px; font-size: 16px; line-height: 1.7; }
.system-member-section .text-link { margin-top: 12px; }
.system-member-privacy { margin-top: 28px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.detail-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-block: 24px; border-block: 1px solid var(--line); }
.detail-metrics strong { display: block; font-size: 28px; font-variant-numeric: tabular-nums; }
.detail-metrics strong.system-metric-empty { font-size: 21px; line-height: 1.75; white-space: nowrap; }
.detail-metrics small { display: block; margin-top: 6px; color: var(--muted); font-size: 15px; }
.detail-section { padding-block: 24px; border-bottom: 1px solid var(--line); }
.detail-section:last-child { border-bottom: 0; }

/* Honest states: loading is not logged out, unknown is not zero. */
.system-state, .system-session-status { width: min(640px, calc(100% - 40px)); margin: 64px auto; padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: white; color: var(--ink); }
.system-state h1, .system-session-status h1 { font-size: 26px; }
.system-state h2 { font-size: 23px; }
.system-state p, .system-session-status p { margin-top: 14px; color: var(--muted); font-size: 17px; line-height: 1.8; }
.system-state-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.system-state[data-state="error"], .system-state[data-state="denied"] { border-color: #ddc9c2; }
.system-session-status[data-state] { width: min(760px, calc(100% - 40px)); padding: 0; border: 0; background: transparent; }
.system-session-status > .brand { margin-bottom: 24px; }
.system-session-status > .system-state { width: 100%; margin: 0; }
.system-drawer-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.system-drawer-actions .btn { flex: 1 1 100%; }
.system-inline-error { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 24px; padding: 18px 20px; border: 1px solid #e1c899; border-radius: 12px; background: var(--warning-soft); color: #664714; }
.system-inline-error p { flex: 1 1 240px; font-size: 16px; line-height: 1.7; }
.system-inline-error .btn { flex: 0 0 auto; }
.system-skeleton { height: 18px; max-width: 100%; border-radius: 5px; background: #e8eeea; }
.system-skeleton + .system-skeleton { width: 72%; margin-top: 14px; }
.system-skeleton-row { display: flex; align-items: center; gap: 18px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.system-skeleton-row > .system-skeleton:first-child { width: 44px; height: 44px; flex: none; border-radius: 50%; }
.system-skeleton-row > div:last-child { display: grid; gap: 12px; width: min(380px, 70%); }
.system-skeleton-row .system-skeleton + .system-skeleton { margin: 0; }
.empty { padding: 36px 20px; color: var(--muted); text-align: center; font-size: 16px; line-height: 1.8; }
.empty .btn { margin-top: 18px; }
@media (min-width: 1180px) { .system-drawer-actions { display: none; } }

/* Legacy task pages share the same controls and retain their complete content. */
.table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 15px; line-height: 1.65; font-variant-numeric: tabular-nums; }
th { padding: 14px 16px; border-bottom: 1px solid #ccd8d0; background: #f4f6f5; color: #56665c; font-size: 14px; font-weight: 550; white-space: nowrap; }
td { padding: 18px 16px; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
td small { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; }
td .btn { margin-block: 3px; }
tbody tr:last-child td { border-bottom: 0; }
.toolbar { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.toolbar > .field { min-width: min(360px, 100%); }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.tabs button { padding: 11px 20px; background: #edf1ef; color: #4e6055; border: 1px solid transparent; }
.tabs button:hover { border-color: #abbfb1; }
.tabs button.active, .tabs [aria-selected="true"] { background: var(--action-soft); color: var(--action); border-color: #9ebca9; }
.attendance-large { font-size: 52px; font-weight: 650; line-height: 1.3; margin-block: 18px 10px; color: var(--action); font-variant-numeric: tabular-nums; }
.attendance-large small { font-size: 24px; margin-left: 5px; }
.notice-entry { padding-block: 24px; border-bottom: 1px solid var(--line); }
.notice-entry:first-child { padding-top: 0; }
.notice-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 14px; }
.notice-entry h3 { font-size: 18px; line-height: 1.6; }
.notice-unread h3 { font-weight: 700; }
.notice-body { white-space: pre-wrap; font-size: 17px; line-height: 1.9; }
.notice-reading { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.note, .alert-row { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 1px solid #e5d5b6; border-radius: 12px; background: var(--warning-soft); color: var(--warning); font-size: 16px; }
.week-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 18px; }
.day-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 22px; border: 1px solid var(--line); border-radius: 14px; background: #fafbfa; }
.day-card.my-day { background: #eff6f0; border-color: #acc9b5; }
.day-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.day-head span { font-size: 14px; color: var(--muted); }
.day-head strong { display: block; margin-top: 8px; font-size: 26px; line-height: 1.35; }
.day-time { color: var(--muted); font-size: 15px; line-height: 1.75; }
.day-people { display: grid; gap: 12px; margin-bottom: 4px; }
.day-card > .btn { margin-top: auto; }
.swap-card, .pick-person { display: flex; align-items: center; gap: 12px; min-height: 64px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: white; text-align: left; }
.swap-card[draggable="true"] { cursor: grab; }
.swap-card[draggable="true"]:active { cursor: grabbing; }
.swap-card:hover, .swap-selected { border-color: #86a691; background: var(--action-soft); }
.swap-card .avatar { width: 36px; height: 36px; font-size: 15px; }
.swap-name { min-width: 0; font-size: 16px; font-weight: 550; overflow-wrap: anywhere; }
.swap-name small { display: block; margin-top: 4px; font-size: 14px; font-weight: 400; color: var(--muted); }
.member-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pick-person:has(input:checked) { border-color: #8eaf9b; background: var(--action-soft); }
.pick-person strong { font-size: 16px; }
.pick-person small { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; }
.change-item { padding: 18px; border-radius: 12px; background: #f1f5f2; }
.change-item p { margin-top: 10px; font-size: 15px; }
.task-row { display: flex; align-items: center; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--line); }

/* Task dialogs, attachments and existing custom select/date picker. */
dialog { width: min(680px, calc(100vw - 40px)); max-width: none; max-height: calc(100dvh - 48px); padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: white; color: var(--ink); box-shadow: 0 24px 80px #182b2229; overscroll-behavior: contain; }
dialog::backdrop { background: #17271e70; }
dialog:not([open]) { display: none; }
.modal-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.modal-top h2 { min-width: 0; font-size: 24px; }
.modal-top .icon-btn { flex: none; background: #f1f4f2; }
.wide-modal { width: min(860px, calc(100vw - 40px)); }
.audience-picker { display: grid; gap: 16px; min-width: 0; padding: 18px; border: 1px solid var(--line); border-radius: 12px; }
.audience-picker legend { padding-inline: 6px; font-weight: 600; }
.audience-options { display: flex; flex-wrap: wrap; gap: 10px; }
.audience-choice { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: #fafcfa; cursor: pointer; }
.audience-choice:has(input:checked) { border-color: #91ad9c; background: var(--action-soft); color: var(--action); }
.audience-members { max-height: 240px; overflow-y: auto; }
.audience-picker summary { cursor: pointer; min-height: 44px; padding-block: 10px; }
.file-drop { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px dashed #91a69a; border-radius: 12px; background: #f5f8f6; }
.file-drop input[type="file"] { padding: 0; border: 0; background: transparent; font-size: 15px; }
input[type="file"]::file-selector-button { min-height: 44px; padding: 9px 14px; margin-right: 12px; border: 1px solid #bccbc1; border-radius: 8px; background: white; color: var(--action); font: inherit; cursor: pointer; }
.attachments { display: grid; gap: 12px; margin-top: 20px; }
.attachment-card { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #f8faf8; }
.attachment-info { flex: 1 1 160px; min-width: 0; }
.attachment-info strong { display: block; overflow-wrap: anywhere; font-size: 15px; }
.attachment-info small { display: block; margin-top: 4px; font-size: 14px; color: var(--muted); }
.attachment-image { max-height: 65dvh; margin-inline: auto; object-fit: contain; }
#attachment-preview { width: min(1040px, calc(100vw - 40px)); }
.preview-footer, .pdf-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block: 16px; }
.pdf-toolbar { justify-content: center; }
#pdf-canvas-wrap { max-height: 65dvh; overflow: auto; padding: 16px; border-radius: 10px; background: #edf1ee; text-align: center; }
#pdf-canvas-wrap canvas { max-width: 100%; height: auto; background: white; }
.system-native-control { position: absolute; width: 1px; min-height: 0; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.system-select { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; }
.system-select > span { min-width: 0; overflow-wrap: anywhere; }
.system-select svg { width: 20px; height: 20px; color: #5b7666; }
.system-native-control:is(select) + .system-select svg { transform: rotate(90deg); }
#system-picker { width: min(440px, calc(100vw - 32px)); }
.system-picker-top, .system-calendar-month, .system-nav-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.system-picker-top h2, .system-nav-title h2 { font-size: 22px; }
.system-picker-search { margin-bottom: 16px; }
.system-picker-options { max-height: 50dvh; overflow-y: auto; overscroll-behavior: contain; }
.system-picker-option { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 12px; background: white; color: var(--ink); text-align: left; }
.system-picker-option:hover { background: #f1f6f2; }
.system-picker-option[aria-pressed="true"] { background: var(--action-soft); color: var(--action); }
.system-picker-option:disabled { color: #7b867e; }
.system-calendar-month strong { font-size: 18px; }
.system-previous svg { transform: rotate(180deg); }
.system-calendar-weekdays, .system-calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.system-calendar-weekdays span { padding-block: 10px; text-align: center; font-size: 14px; color: var(--muted); }
.system-calendar-days button { min-height: 44px; border: 1px solid transparent; border-radius: 9px; background: white; color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums; }
.system-calendar-days button:hover:not(:disabled) { background: var(--action-soft); }
.system-calendar-days [aria-current="date"] { border-color: #8aaa97; }
.system-calendar-days [aria-pressed="true"] { background: var(--action); color: white; }
.system-calendar-days button:disabled { color: #7c8880; }
.system-calendar-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.system-calendar-footer button { padding: 10px; background: transparent; color: var(--action); }
#system-navigation { width: min(480px, calc(100vw - 32px)); }
#system-navigation .side-nav { margin-top: 0; }
#toast { position: fixed; left: 50%; bottom: 28px; z-index: 100; width: max-content; max-width: min(640px, calc(100vw - 40px)); padding: 16px 20px; border: 1px solid #b8cabb; border-radius: 12px; background: white; color: #244e35; box-shadow: 0 8px 32px #1c332426; font-size: 16px; line-height: 1.7; transform: translateX(-50%); visibility: hidden; opacity: 0; transition: opacity 160ms ease-out; pointer-events: none; }
#toast.show { visibility: visible; opacity: 1; }

/* Tablet: give the task the full width, not a permanently cramped side rail. */
@media (max-width: 1179px) {
  .portal { grid-template-columns: minmax(0, 1fr); }
  .sidebar { display: none; position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(320px, calc(100vw - 48px)); height: 100dvh; padding-top: 24px; box-shadow: 12px 0 48px #2031271a; }
  .sidebar.open { display: flex; }
  .sidebar .brand { padding-right: 32px; }
  .system-drawer-close { display: inline-flex; position: absolute; top: 18px; right: 10px; }
  .console-scrim.visible { display: block; position: fixed; inset: 0; z-index: 60; width: 100%; height: 100dvh; padding: 0; border: 0; border-radius: 0; background: #17271e70; }
  .mobile-menu { display: inline-flex; }
  .portal-main { padding-inline: 32px; }
  .portal-top { margin-inline: -32px; padding-inline: 32px; }
  .console-columns { grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr); }
  .console-stat { padding: 20px; }
  .home-hero, .system-public-hero { gap: 40px; padding-block: 64px; min-height: 560px; }
  .hero-title { font-size: 46px; }
  .hero-lead { font-size: 19px; }
  .system-public-product { padding: 26px; }
}

@media (max-width: 959px) {
  .portal-heading { flex-wrap: wrap; }
  .console-columns, .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
  .console-secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero, .system-public-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 60px; }
  .hero-copy { max-width: 720px; }
  .hero-title { font-size: 48px; }
  .hero-lead { max-width: 36em; }
  .system-public-product { max-width: 720px; width: 100%; }
  .system-public-features, .services, .about-steps { gap: 28px; }
  .system-public-feature h3, .service h3 { font-size: 21px; }
  .nav, .nav-links { gap: 16px; }
  .brand-name { font-size: 17px; }
  .reminder { flex-wrap: wrap; }
  .reminder > .btn { margin-left: 46px; }
  .system-member-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: readable type, clean rows and one practical action at a time. */
@media (max-width: 639px) {
  html { scroll-padding-top: 88px; }
  .wrap { width: calc(100% - 40px); }
  .header-inner { min-height: 80px; gap: 16px; flex-wrap: wrap; padding-block: 18px; }
  .brand-name { font-size: 17px; }
  .brand-sub { font-size: 12px; }
  .brand-logo { width: 36px; }
  .brand-logo img { width: 36px; height: 36px; }
  .nav { width: 100%; justify-content: space-between; gap: 12px; }
  .nav-links { gap: 20px; }
  .nav-link { font-size: 15px; }
  .nav-cta { padding-inline: 14px; min-height: 44px; font-size: 15px; }
  .home-hero, .system-public-hero { padding-block: 44px; gap: 36px; min-height: 0; }
  .hero-title { font-size: 38px; letter-spacing: -.03em; }
  .hero-lead { margin-top: 24px; font-size: 18px; line-height: 1.85; }
  .hero-actions { margin-top: 28px; gap: 12px; }
  .hero-actions .btn { flex: 1 1 auto; padding-inline: 18px; }
  .hero-trust { font-size: 14px; }
  .system-public-product { padding: 24px 20px; border-radius: 16px; }
  .system-public-product h2 { font-size: 21px; }
  .system-public-flow > * { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
  .system-public-flow > * > svg, .system-public-flow > * > span:first-child:not(:last-child) { width: 28px; height: 28px; }
  .system-public-features, .services, .about-steps { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 20px 44px; }
  .system-public-feature, .service { padding-top: 22px; }
  .section-head { margin-top: 24px; }
  .section-head h2 { font-size: 28px; }
  .section-sub { font-size: 17px; }
  .about-hero { padding-block: 48px 24px; }
  .about-hero .hero-title { font-size: 36px; }
  .about-banner { align-items: flex-start; flex-direction: column; padding-block: 28px; }
  .about-banner h2 { font-size: 26px; }
  .footer { padding-block: 28px; }
  .footer-inner, .footer-left { align-items: flex-start; flex-direction: column; gap: 16px; }
  .portal-main { padding: 0 20px 28px; }
  .portal:has(.system-bottom-nav) .portal-main { padding-bottom: calc(108px + env(safe-area-inset-bottom)); }
  .portal-top { min-height: 72px; margin-inline: -20px; padding: 10px 16px; gap: 8px; }
  .system-task-ui .crumb { flex: 1; flex-direction: column; align-items: flex-start; font-size: 0; gap: 2px; }
  .crumb strong { font-size: 16px; font-weight: 600; }
  .crumb > span[aria-hidden="true"] { display: none; }
  .system-task-ui .crumb .bsc-foundation-product-label { display: block; font-size: 11px; line-height: 1.3; color: var(--muted); }
  .top-actions { gap: 2px; }
  .top-actions .bsc-foundation-tools { gap: 0; }
  .system-secondary-action { display: none; }
  .system-bottom-nav { position: fixed; inset: auto 0 0; z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
  .system-bottom-nav a, .system-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 56px; min-width: 0; padding: 5px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 13px; line-height: 1.4; text-decoration: none; }
  .system-bottom-nav [aria-current="page"] { background: var(--action-soft); color: var(--action); font-weight: 600; }
  .system-bottom-nav svg { width: 22px; height: 22px; }
  #page-content { padding-top: 28px; }
  .portal-heading { gap: 18px; margin-bottom: 24px; }
  .portal-heading h1 { font-size: 28px; }
  .portal-heading p { font-size: 16px; line-height: 1.75; margin-top: 10px; }
  .console-date { min-height: 32px; font-size: 14px; }
  .system-quick-actions { width: 100%; gap: 10px; }
  .system-quick-actions .btn { flex: 1 1 140px; padding-inline: 14px; }
  .panel { padding: 22px 18px; border-radius: 14px; }
  .panel-title { margin-bottom: 16px; gap: 10px; }
  .panel-title h2 { font-size: 20px; }
  .reminder { gap: 14px; padding: 20px 18px; margin-bottom: 20px; }
  .reminder > svg { width: 24px; height: 24px; }
  .reminder-copy { flex-basis: calc(100% - 40px); }
  .reminder h2 { font-size: 18px; }
  .reminder p { font-size: 15px; }
  .reminder > .btn { width: 100%; margin-left: 0; }
  .console-stats, .stats { gap: 12px; margin-bottom: 24px; }
  .console-stat, .stat { padding: 18px 16px; border-radius: 12px; }
  .console-stat-top, .stat .label { align-items: flex-start; font-size: 14px; gap: 8px; }
  .console-stat-number, .stat .number { font-size: 30px; margin-block: 14px 10px; }
  .console-stat .console-stat-number { font-size: 24px; margin: 0; }
  .console-stat-number small, .stat .number small { font-size: 14px; }
  .console-stat-caption { font-size: 13px; }
  .console-stat-top svg { width: 18px; height: 18px; }
  .console-secondary { grid-template-columns: minmax(0, 1fr); }
  .console-columns { gap: 20px; }
  .work-panel { padding: 20px 16px; }
  .work-item { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 14px 12px; }
  .work-avatar { width: 36px; height: 36px; font-size: 15px; }
  .work-buttons { max-width: 104px; }
  .work-buttons .btn { padding-inline: 12px; }
  .work-item:has(.work-reason) .work-buttons { grid-column: 2 / -1; max-width: none; }
  .work-links { flex-direction: column; gap: 2px; }
  .system-filter > summary { display: list-item; list-style-position: inside; }
  .system-filter:not([open]) > .filter-bar { display: none; }
  .filter-bar { padding: 18px; gap: 16px; }
  .filter-bar > .field, .filter-bar > .field:first-of-type { flex: 1 1 100%; }
  .filter-actions { width: 100%; gap: 10px; }
  .filter-actions .btn { flex: 1; }
  .member-tile { grid-template-columns: 38px minmax(0, 1fr) 18px; gap: 12px; padding: 20px 0; min-height: 98px; }
  .member-tile > .avatar { width: 38px; height: 38px; font-size: 16px; }
  .member-tile strong, .system-member-name { font-size: 17px; line-height: 1.6; }
  .member-tile small, .system-member-meta, .system-member-status { font-size: 14px; line-height: 1.7; }
  .system-member-summary { align-items: flex-start; gap: 16px; padding-bottom: 24px; }
  .system-member-summary .avatar { width: 52px; height: 52px; font-size: 22px; }
  .system-member-summary h1, .system-member-summary h2 { font-size: 25px; }
  .system-member-facts { gap: 22px; padding-block: 24px; }
  .system-member-facts dd { font-size: 16px; }
  .system-member-sections { grid-template-columns: minmax(0, 1fr); }
  .system-member-section { padding-block: 24px; }
  .detail-metrics { grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 12px; }
  .detail-metrics strong { font-size: 24px; }
  .detail-metrics strong.system-metric-empty { font-size: 19px; line-height: 1.75; }
  .detail-metrics small { font-size: 14px; }
  .form-grid, .member-picker { grid-template-columns: minmax(0, 1fr); }
  .toolbar { align-items: stretch; gap: 16px; }
  .toolbar > .field { width: 100%; }
  .tabs { gap: 8px; }
  .tabs button { flex: 1; padding-inline: 12px; }
  .week-grid { grid-template-columns: minmax(0, 1fr); }
  .day-card { padding: 20px; }
  .portal-footer { margin-top: 32px; flex-direction: column; gap: 4px; font-size: 13px; }
  .system-state, .system-session-status { width: calc(100% - 40px); margin-block: 40px; padding: 26px 22px; }
  .system-state h1, .system-session-status h1 { font-size: 24px; }
  .system-state-actions .btn { flex: 1 1 150px; }
  dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 22px 18px; border-radius: 16px; }
  .modal-top { margin-bottom: 24px; gap: 12px; }
  .modal-top h2 { font-size: 22px; }
  .system-form-actions { flex-wrap: nowrap; gap: 10px; }
  .system-form-actions .btn { min-width: 0; flex: 1; }
  .audience-picker { padding: 14px; }
  .attachment-card .btn { flex: 1; }
  #attachment-preview { width: calc(100vw - 24px); }
  .system-responsive-table, .system-responsive-table tbody { display: block; }
  .system-responsive-table thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .system-responsive-table tr { display: block; padding-block: 16px; border-bottom: 1px solid var(--line); }
  .system-responsive-table tr:last-child { border-bottom: 0; }
  .system-responsive-table td { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: start; gap: 8px; padding: 8px 0; border: 0; white-space: normal; }
  .system-responsive-table td::before { content: attr(data-label); grid-column: 1; grid-row: 1; color: var(--muted); font-size: 14px; }
  .system-responsive-table td > * { grid-column: 2; }
  .system-responsive-table td[colspan] { display: block; padding-block: 24px; }
  .system-responsive-table td[colspan]::before { display: none; }
  #toast { bottom: 20px; padding: 14px 18px; font-size: 15px; }
  body:has(.system-bottom-nav) #toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
}

@media (max-width: 374px) {
  .portal-main { padding-inline: 16px; }
  .portal-top { margin-inline: -16px; padding-inline: 10px; }
  .crumb strong { font-size: 15px; }
  .panel { padding-inline: 16px; }
  .hero-title { font-size: 34px; }
  .system-member-facts { grid-template-columns: minmax(0, 1fr); }
  .member-tile { gap: 10px; grid-template-columns: 36px minmax(0, 1fr) 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation: none; transition: none; }
}

/* The hidden attribute is a semantic visibility contract, not a theme override. */
[hidden] { display: none !important; }

/* Public header: keep product identity and every action legible as content grows. */
.site-header .header-inner { flex-wrap: wrap; }
.site-header .nav { flex: 1 1 auto; min-width: 0; justify-content: flex-end; flex-wrap: wrap; }
.site-header .nav-links { min-width: 0; flex-wrap: wrap; }
.site-header .nav-link { min-width: 44px; justify-content: center; white-space: nowrap; flex: none; }

@media (max-width: 959px) {
  .site-header .header-inner {
    align-items: stretch;
    gap: 16px;
  }
  .site-header .header-inner > .brand { flex: 1 1 100%; }
  .site-header .nav { width: 100%; flex: 1 1 100%; justify-content: space-between; gap: 12px 16px; }
  .site-header .nav-links { min-width: min-content; max-width: 100%; flex: 0 1 auto; gap: 8px 20px; }
  .site-header .nav > .nav-cta { flex: none; }
  .site-header .nav > .bsc-foundation-tools { flex: none; margin-left: auto; }
}

@media (max-width: 639px) {
  .site-header .header-inner { gap: 12px; }
  .site-header .header-inner > .brand { gap: 8px; }
}

@media (max-width: 559px) {
  .site-header .nav { gap: 12px; }
}

@media (max-width: 1179px) {
  .system-bottom-nav { position: fixed; inset: auto 0 0; z-index: 35; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: white; }
  .system-bottom-nav a, .system-bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 54px; min-width: 0; padding: 6px; border: 0; border-radius: 14px; background: transparent; color: var(--muted); font: 500 13px/1.4 var(--font-ui); text-decoration: none; }
  .system-bottom-nav [aria-current="page"] { background: var(--action-soft); color: var(--action); font-weight: 650; }
  .system-bottom-nav svg { width: 22px; height: 22px; }
  .system-bottom-nav a:hover, .system-bottom-nav button:hover { background: var(--surface-soft); text-decoration: none; }
  .system-secondary-action { display: none; }
  .portal:has(.system-bottom-nav) .portal-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}