/* Solid surfaces, restrained rounded corners and neutral dividers. */
:root {
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 12px;
}

*, *::before, *::after {
  border-width: 0 !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.panel, .stat, dialog, .announcement, .record-help > [role="tooltip"] {
  background: var(--paper);
  border-radius: var(--radius-lg);
}

button, input:not([type="checkbox"]):not([type="radio"]), select, textarea,
[data-slot="button"], [data-slot="input"], [data-slot="textarea"],
[data-slot="native-select"], .rich-editor, .table-scroll,
.record-filters .jelly-radio__skin {
  border-radius: var(--radius-md);
}
.badge, .info-tag { border-radius: var(--radius-sm); }
.location-results { background: var(--soft); border-radius: var(--radius-md); padding: 8px; margin-top: 8px; }
.location-results ul { padding: 0; margin: 0; list-style: none; }
.location-results button { width: 100%; text-align: left; white-space: normal; font-weight: 400; min-height: 44px; }
.google-attribution { font: 400 .875rem/1.5 'Segoe UI',sans-serif; color: var(--ink); white-space: nowrap; margin: 8px 8px 0; }
.password-checklist { list-style: none; padding: 0; margin: 16px 0 8px; display: grid; gap: 8px; }
.password-checklist li { display: flex; align-items: center; gap: 9px; font-size: .875rem; color: var(--muted); }
.password-checklist [data-met="true"] { color: var(--ink); }
.password-checklist .ui-icon { width: 18px; height: 18px; flex: none; }
.password-field { position: relative; }
.password-field input { padding-right: 52px; }
.password-toggle, .password-toggle:active { position: absolute; right: 2px; top: 0; bottom: 0; height: 100%; transform: none; width: 44px; min-height: 44px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; background: transparent; }
.password-toggle:hover { background: var(--soft); }

.page-top, .info-tag, .badge, th {
  background: var(--soft);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.code-slots__input),
select, textarea, [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"] {
  background: var(--soft);
}

/* Focus outlines identify keyboard position; they are not decorative borders. */
:where(button, input, select, textarea, a, [tabindex], [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--ink) !important;
  outline-offset: 3px;
}

.code-slots__row:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.table-scroll { background: var(--paper); }
.rich-toolbar { background: var(--soft); }
.record-help > [role="tooltip"] { padding: 14px 16px; }
.stat strong span:not(.sr-only) { font: inherit; color: inherit; }

/* Revised preference: no header fill; restrained functional borders are welcome. */
.page-top { background: transparent; border-radius: 0; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.code-slots__input),
select, textarea, [data-slot="input"], [data-slot="textarea"], [data-slot="native-select"],
dialog, .table-scroll, .rich-editor, .record-help > [role="tooltip"] {
  border: 1px solid var(--line) !important;
}
.table-scroll th, .table-scroll td { border-bottom: 1px solid var(--line) !important; }
.table-scroll tr:last-child td { border-bottom-width: 0 !important; }

/* Thin lines separate content without colored accents or nested card frames. */
.page-top, .panel, .stat, .rich-toolbar, .security-details > div {
  border-bottom: 1px solid var(--line) !important;
}
.identity, .auth-footer, .announcement + .announcement {
  border-top: 1px solid var(--line) !important;
}

/* Compact record overview and announcement composition. */
.stats { gap:16px; background:transparent; }
button.stat-link { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-height:144px; padding:20px 24px; text-align:left; background:var(--paper); height:auto; font-weight:400; }
.stat-link .stat-label { display:flex; align-items:center; gap:10px; font-size:14px; color:var(--muted); }
.stat-link strong { font-size:32px; line-height:1.15; font-weight:600; font-variant-numeric:tabular-nums; }
.stat-link .stat-action { display:flex; width:100%; justify-content:space-between; font-size:14px; color:var(--muted); }
.stat-link:hover { background:var(--soft); }
.account-setup-status { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
button.invitation-renew { background:#236b32; color:#fff; }
button.invitation-renew:hover { background:#195526; }
button.invitation-cancel { color:var(--danger); background:transparent; }
.rich-toolbar { background:transparent; gap:4px; padding:8px; }
.rich-toolbar button[aria-pressed="false"] { background:transparent; }
.rich-toolbar button[aria-pressed="true"] { background:var(--soft); color:var(--ink); }
.rich-toolbar button[aria-pressed="false"]:hover { background:var(--soft); }
#announcement-editor [data-slot="field-group"] { gap:20px; }
#announcement-editor .announcement-media { gap:12px; margin:4px 0 0; padding:16px 0 0; border-top:1px solid var(--line)!important; }
.announcement-media [data-slot="field-legend"] { margin:0 0 8px; padding:0; font-size:16px; font-weight:600; }
.announcement-media [data-slot="field-description"] { margin:0; font-size:14px; line-height:1.5; }
.announcement-media .cover-controls { margin:0; gap:8px; flex-wrap:wrap; }
.media-details { font-size:14px; }
.media-details summary { cursor:pointer; padding:8px 0; }
@media(max-width:600px) { button.stat-link { min-height:120px; padding:16px; } .stats { gap:12px; } }

@media(max-width:600px) { .stats { grid-template-columns:1fr; } button.stat-link { min-height:116px; } }

/* Password requirements: labels and icons keep state understandable without color. */
.password-checklist [data-met="false"] { color:#9a4e08; }
.password-checklist [data-met="true"] { color:#246b32; }
:root[data-theme="dark"] .password-checklist [data-met="false"] { color:#edbd77; }
:root[data-theme="dark"] .password-checklist [data-met="true"] { color:#a7d9a5; }