/* Shared presentation for the workplace. Operational data and archive templates are independent. */
:root {
    --font-ui: "Source Sans 3", "Segoe UI", sans-serif;
    --gui-main: #286653;
    --gui-main-alt: #37668c;
    --gui-back: #f4f5f7;
    --gui-back-deep: #f4f5f7;
    --gui-back-cell: #ffffff;
    --gui-header-background: #ffffff;
    --gui-toolbar-background: #eef1f4;
    --gui-menu-panel: #f5f7f9;
    --gui-editor-panel: #ffffff;
    --gui-input-background: #ffffff;
    --gui-text: #24323c;
    --gui-input-text: #24323c;
    --gui-subtle-text: #596873;
    --gui-hint-text: #63727d;
    --gui-outline: #dbe1e6;
    --panel: #ffffff;
    --panel-strong: #ffffff;
    --panel-muted: #f5f7f9;
    --line: #e1e6eb;
    --line-strong: #c9d2da;
    --button-ink: #ffffff;
    --shadow-soft: none;
    --radius-shell: 12px;
    --radius-panel: 10px;
    --radius-field: 6px;
}

:root[data-theme="dark"] {
    --gui-main: #71bea5;
    --gui-main-alt: #80b2dc;
    --gui-back: #151b21;
    --gui-back-deep: #151b21;
    --gui-back-cell: #1d252d;
    --gui-header-background: #1d252d;
    --gui-toolbar-background: #28333d;
    --gui-menu-panel: #222c35;
    --gui-editor-panel: #1d252d;
    --gui-input-background: #182129;
    --gui-text: #e5ecf2;
    --gui-input-text: #e5ecf2;
    --gui-subtle-text: #adbac6;
    --gui-hint-text: #adbac6;
    --gui-outline: #38444f;
    --panel: #1d252d;
    --panel-strong: #1d252d;
    --panel-muted: #222c35;
    --line: #303c47;
    --line-strong: #4b5b68;
    --button-ink: #12251e;
}

body { background: var(--bg); line-height: 1.5; }
body::before, body::after { display: none; }
h1, h2, h3 { letter-spacing: -0.025em; }
.skip-link { position: fixed; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; background: var(--panel); border: 2px solid var(--accent); border-radius: 6px; }
.skip-link:focus { top: 12px; }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid var(--accent-alt); outline-offset: 3px; }
.workplace .site-shell { width: 100%; max-width: none; padding: 0; }
.workplace .page-shell { min-width: 0; padding: 28px clamp(22px, 3.2vw, 56px) 40px; gap: 26px; }
.workplace-context { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.88rem; color: var(--muted); }
.workplace-context strong { color: var(--ink); font-weight: 600; }
.workplace .brand { border: 0; padding: 0; gap: 12px; }
.brand-logo { display: block; flex: 0 0 64px; width: 64px; height: 64px; object-fit: contain; }
@media (max-width: 760px) {
    .brand-logo { flex-basis: 48px; width: 48px; height: 48px; }
}
.brand-index { flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 10px; background: var(--accent); color: var(--button-ink); letter-spacing: -0.05em; font-size: 1rem; }
.brand-index::after { display: none; }
.brand-lockup strong { font-size: 1.22rem; }
.brand-lockup span { font-size: 0.83rem; }
.area-picker { position: relative; width: 100%; }
.area-picker > summary { position: relative; display: grid; gap: 3px; padding: 12px 34px 12px 14px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); cursor: pointer; list-style: none; }
.area-picker > summary::-webkit-details-marker { display: none; }
.area-picker > summary::after { content: "⌄"; position: absolute; right: 14px; top: 22px; }
.area-picker > summary span { color: var(--muted); font-size: 0.76rem; }
.area-picker > summary strong { font-size: 0.95rem; font-weight: 600; }
.area-picker[open] > summary { border-color: var(--scope-accent); }
.area-picker[open] { z-index: 70; }
.area-picker .area-switch { position: absolute; inset: 100% 0 auto; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 6px; width: 100%; padding: 6px; border-color: var(--line-strong); background: var(--panel); box-shadow: 0 12px 28px #00000026; }
.area-picker .mode-switch-link { justify-content: flex-start; text-align: left; padding: 9px 12px; font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 0.94rem; }
.area-picker .mode-switch-link-active { box-shadow: none; }
.workplace .topbar-nav { gap: 5px; border: 0; padding-top: 0; }
.workplace .topbar-nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 7px; font-weight: 500; }
.workplace .topbar-nav a:hover { background: var(--panel-muted); }
.workplace .topbar-nav a.topbar-link-active { background: var(--scope-soft); color: var(--ink); font-weight: 700; box-shadow: inset 3px 0 var(--scope-accent); }
.workplace .session-chip { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 0.88rem; }
.workplace .site-footer { padding: 18px clamp(22px, 3.2vw, 56px); margin-top: 0; border-color: var(--line); font-size: 0.76rem; }
.workplace .site-footer strong { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; }

/* Headings introduce the content without another enclosing card. */
.scope-surface .system-header, .system-header { padding: 4px 0 22px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; align-items: center; }
.system-header-main h1, .workbench-title h1 { font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.18; margin: 7px 0 10px; font-weight: 600; }
.system-header-main p { margin: 0; color: var(--muted); }
.system-header-rail { padding-left: 0; border: 0; }
.system-header-start { grid-template-columns: 1fr; }
.workbench-title { gap: 0; }
.section-kicker { color: var(--muted); font-family: var(--font-ui); text-transform: none; letter-spacing: 0.01em; font-size: 0.86rem; font-weight: 600; }
.scope-badge { min-height: 26px; padding: 3px 9px; border: 0; border-radius: 5px; background: var(--panel-muted); color: var(--muted); font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 0.85rem; }
.scope-badge-strong { background: var(--scope-soft); color: var(--ink); }
.system-header-meta { margin-top: 12px; }
.scope-surface .system-panel, .system-panel,
.scope-surface .compact-panel, .scope-surface .workspace-card,
.scope-surface .records-toolbar, .scope-surface .empty-state,
.scope-surface .case-table-shell, .compact-panel, .case-table-shell { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--panel); box-shadow: none; }
.system-panel { padding: 24px; }
.panel-heading { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.panel-heading strong { font-size: 1.1rem; font-weight: 600; }
.workspace-board, .dossier-shell { gap: 24px; }
.todo-card, .record-card, .todo-comment-item { border-color: var(--line); border-radius: 8px; box-shadow: none; background: var(--panel); }
.todo-card h3 { font-size: 1.05rem; }
.todo-card-meta, .todo-comment-meta { font-family: var(--font-ui); letter-spacing: 0; }
.metric-grid { border: 0; gap: 16px; }
.metric-card { padding: 12px 0; }
.metric-card strong { font-size: 1.3rem; }
.metric-card span { font-family: var(--font-ui); text-transform: none; letter-spacing: 0; }

/* Lists and editing share the same reading rhythm and control sizes. */
.action-link, .theme-toggle { min-height: 42px; border-radius: 6px; font-family: var(--font-ui); font-size: 0.94rem; font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; }
.action-link-primary { background: var(--accent); border-color: var(--accent); color: var(--button-ink); }
.action-link-primary:hover, .action-link-primary:focus-visible { background: color-mix(in srgb, var(--accent) 87%, var(--ink)); border-color: var(--accent); color: var(--button-ink); box-shadow: none; }
.action-link-inline { min-height: 34px; padding: 5px 10px; font-size: 0.88rem; }
.form-field input, .form-field select, .form-field textarea, .records-search input { border: 1px solid var(--line-strong); border-radius: 6px; background: var(--gui-input-background); color: var(--ink); padding: 11px 12px; font-size: 1rem; box-shadow: none; }
.form-field span:first-child { color: var(--ink); font-family: var(--font-ui); text-transform: none; letter-spacing: 0; font-size: 0.92rem; font-weight: 600; }
.form-field textarea { line-height: 1.65; }
.form-grid { gap: 22px; }
.entity-form > .form-actions { position: sticky; bottom: 12px; z-index: 5; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 16px #0000000d; }
.case-table { font-size: 0.95rem; }
.register-source-note { margin: 0; color: var(--muted); font-size: 0.83rem; }
.homepage-website-note { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 18px 0; border-top: 1px solid var(--line); color: var(--muted); }
.homepage-website-note p { margin: 0; }
.duty-log-panel { min-width: 0; }
.duty-log-scroll { overflow-x: auto; }
.duty-log-table { width: 100%; min-width: 800px; }
.duty-log-table th, .duty-log-table td { text-align: left; vertical-align: middle; }
.duty-log-time, .duty-log-id { white-space: nowrap; font-variant-numeric: tabular-nums; }
.duty-log-id { color: var(--muted); font-size: 0.85rem; }
.duty-log-pagination { padding: 16px 18px; border-top: 1px solid var(--line); }
.case-table th, .case-table td { padding: 15px 18px; border-color: var(--line); }
.case-table thead th { padding-block: 12px; font-family: var(--font-ui); font-weight: 600; font-size: 0.83rem; text-transform: none; letter-spacing: 0; color: var(--muted); background: var(--panel-muted); }
.case-table-primary { font-weight: 600; }
.case-table-secondary { margin-top: 4px; font-family: var(--font-ui); font-size: 0.83rem; }
.case-table-status { border: 0; border-radius: 5px; background: var(--scope-soft); color: var(--ink); padding: 4px 9px; font-family: var(--font-ui); font-size: 0.83rem; text-transform: none; letter-spacing: 0; }
.list-pagination { padding: 16px; }
.overlay-dialog-shell { border-radius: 12px; background: var(--panel); }
.landing-panel { border-radius: 14px; }
.landing-copy h1 { font-weight: 600; }

@media (min-width: 861px) {
    .workplace .site-shell { padding-left: 248px; }
    .workplace .topbar { position: fixed; inset: 0 auto 0 0; width: 248px; margin: 0; }
    .workplace .topbar-inner { height: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 30px; padding: 28px 18px 18px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: var(--panel); overflow-y: auto; }
    .workplace .topbar-mobile-head { display: block; padding: 0 10px; }
    .workplace .topbar-tools { display: flex; flex-direction: column; align-items: stretch; flex: 1; width: 100%; margin: 0; gap: 26px; }
    .workplace .topbar-area-row { display: contents; }
    .workplace .area-picker { order: 0; }
    .workplace .topbar-menu-row { order: 1; }
    .workplace .topbar-nav { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
    .workplace .session-tools { order: 2; margin-top: auto; display: flex; flex-wrap: nowrap; padding-top: 18px; border-top: 1px solid var(--line); }
    .workplace .account-menu { flex: 1; min-width: 0; }
    .workplace .session-chip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
    .workplace .account-menu-panel { top: auto; bottom: calc(100% + 10px); left: 0; right: auto; width: 208px; min-width: 0; }
}

@media (min-width: 1200px) {
    .dossier-shell { grid-template-columns: minmax(0, 1fr) 310px; }
    .dossier-shell-editor { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (min-width: 861px) and (max-width: 1199px) {
    .system-header { grid-template-columns: 1fr; }
    .dossier-shell, .workspace-board-priority { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .workplace .topbar { top: 0; margin: 0; }
    .workplace .topbar-inner { position: relative; overflow: visible; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 12px 16px; max-height: none; }
    .workplace .page-shell { padding: 20px 16px 28px; gap: 20px; }
    .workplace .topbar-tools { margin-left: 0; }
    html.js .workplace .topbar-inner[data-mobile-nav-enabled="true"] .topbar-tools { position: absolute; inset: 100% 0 auto; margin: 0; padding: 16px 16px 24px; max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; border-bottom: 1px solid var(--line-strong); background: var(--panel); box-shadow: 0 12px 28px #00000026; }
    .workplace .topbar-area-row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
    .workplace .topbar-menu-row { width: 100%; }
    .workplace .topbar-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workplace .topbar-nav a { justify-content: flex-start; text-align: left; }
    .system-header { grid-template-columns: 1fr; gap: 16px; }
    .system-panel { padding: 18px; }
    .system-header-rail { padding: 0; }
    .workplace .site-footer { padding: 16px; }
}

@media (max-width: 480px) {
    .brand-lockup span { display: none; }
    .mobile-nav-toggle-copy strong { max-width: 115px; }
    .records-search { width: 100%; }
    .system-action-row { gap: 8px; }
    .system-action-row .action-link { flex: 1 1 auto; }
}

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

/* Detail views: a short overview, with secondary information available on demand. */
.record-overview { display: grid; gap: 12px; }
[hidden] { display: none !important; }
.richtext-character-count { margin-left: auto; color: var(--muted); font-size: 0.8rem; align-self: center; white-space: nowrap; }
.richtext-over-limit { color: var(--danger); font-weight: 700; }
body.editor-fullscreen-open { overflow: hidden; }
.richtext-editor.richtext-editor-fullscreen { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; gap: 0; margin: 0; padding: 18px max(18px, calc((100vw - 1100px) / 2)); background: var(--panel); border: 0; border-radius: 0; }
.richtext-editor-fullscreen .richtext-editor-toolbar { position: static; flex: 0 0 auto; background: var(--panel); padding: 10px 0; flex-wrap: wrap; }
.richtext-editor-fullscreen .richtext-editor-surface { flex: 1; min-height: 0; overflow: auto; }
.form-field .richtext-editor-fullscreen .richtext-editor-input { min-height: 100%; max-height: none; padding: 24px; line-height: 1.8; font-size: 1.08rem; }
.richtext-editor-fullscreen .richtext-editor-meta { flex: 0 0 auto; padding: 10px 0; }
[data-ai-short-warning] { padding: 14px; border: 1px solid var(--warning); border-radius: 6px; }
.record-section-title { margin: 0 0 18px; font-size: 1.1rem; font-weight: 600; }
.panel-heading .record-section-title { margin: 0; }
.person-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px; margin: 0; }
.person-facts > div { min-width: 0; }
.person-facts dt { color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }
.person-facts dd { margin: 0; color: var(--ink); font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.record-disclosure { min-width: 0; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); }
.record-disclosure > summary { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; min-height: 64px; padding: 16px 46px 16px 22px; list-style: none; cursor: pointer; }
.record-disclosure > summary::-webkit-details-marker { display: none; }
.record-disclosure > summary::after { content: ""; position: absolute; right: 23px; top: 25px; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); }
.record-disclosure[open] > summary::after { transform: rotate(225deg); top: 29px; }
.record-disclosure > summary strong { font-size: 1rem; font-weight: 600; }
.record-disclosure > summary > span { color: var(--muted); font-size: 0.87rem; }
.record-disclosure > summary:hover { background: var(--panel-muted); border-radius: 9px; }
.record-disclosure[open] > summary { border-bottom: 1px solid var(--line); }
.disclosure-body { padding: 22px; min-width: 0; }
.disclosure-body > :first-child { margin-top: 0; }
.disclosure-body > :last-child { margin-bottom: 0; }
.disclosure-body .person-facts { margin-bottom: 22px; }
.case-overview .dossier-main, .case-overview .dossier-side { gap: 12px; align-content: start; }
.case-overview .dossier-side .person-facts { grid-template-columns: 1fr; gap: 14px; }
.case-overview .dossier-side .record-disclosure > summary { align-items: flex-start; flex-direction: column; gap: 3px; }
.case-overview .dossier-side .record-disclosure > summary > span { max-width: 100%; }
.reading-copy { max-width: 74ch; font-size: 1.04rem; line-height: 1.8; overflow-wrap: anywhere; }
.reading-copy :is(p, ul, ol) { margin-block: 0 1em; }
.reading-copy :is(h1, h2, h3, h4) { margin-block: 1.4em 0.6em; line-height: 1.3; }
.reading-copy > :first-child { margin-top: 0; }
.reading-copy > :last-child { margin-bottom: 0; }
.reading-copy table { max-width: 100%; }
.case-section-card { padding: 0; border: 0; }
.case-section-card .record-head { padding-bottom: 12px; }
.registry-table { min-width: 0; }
.register-diagnostics > summary { min-height: 48px; padding-block: 10px; }
.register-diagnostics > summary::after { top: 17px; }
.register-diagnostics[open] > summary::after { top: 21px; }
.record-disclosure .entity-form > .form-actions { position: static; box-shadow: none; padding: 0; border: 0; }
.record-disclosure > .danger-disclosure-heading { border-left: 3px solid var(--danger); border-radius: 8px; }
.form-grid > .record-disclosure { grid-column: 1 / -1; }
.form-grid > .record-disclosure .form-grid { margin: 0; }

@media (max-width: 1100px) {
    .person-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .record-disclosure > summary { padding-left: 16px; flex-direction: column; align-items: flex-start; gap: 3px; }
    .disclosure-body { padding: 16px; }
    .person-facts { gap: 16px; }
    .reading-copy { font-size: 1rem; }
}
[data-background-save] { scroll-margin-bottom: 5rem; }
.background-save-notice { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1000; max-width: min(34rem, calc(100vw - 2.5rem)); padding: .9rem 1.2rem; border-radius: .6rem; background: #164d3b; color: #fff; box-shadow: 0 4px 20px #0003; }
.background-save-notice.is-error { background: #862d2d; }

@media (max-width: 600px) {
    .case-editor .system-header-rail .system-action-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .5rem;
    }
    .case-editor .system-header-rail .action-link {
        min-width: 0;
        text-align: center;
        justify-content: center;
        padding: .6rem;
    }
}