/*
 * CRMP interface foundation
 * -------------------------
 * Shared visual decisions live here rather than in one-off utility overrides.
 * See STYLE_GUIDE.md before extending the interface.
 */
:root {
  --crmp-ink: var(--litl-ink);
  --crmp-muted: var(--litl-muted);
  --crmp-canvas: var(--litl-canvas);
  --crmp-surface: var(--litl-surface);
  --crmp-surface-soft: var(--litl-surface-soft);
  --crmp-border: var(--litl-border);
  --crmp-border-strong: var(--litl-border-strong);
  --crmp-brand: var(--litl-brand);
  --crmp-brand-strong: var(--litl-brand-strong);
  --crmp-accent: var(--litl-accent);
  --crmp-focus: var(--litl-focus);
  --crmp-radius-sm: var(--litl-radius-sm);
  --crmp-radius: var(--litl-radius);
  --crmp-radius-lg: var(--litl-radius-lg);
  --crmp-shadow-sm: var(--litl-shadow-sm);
  --crmp-shadow-lg: var(--litl-shadow-lg);
}

html { scroll-behavior: smooth; }

body.crmp-app {
  min-height: 100vh;
  color: var(--crmp-ink);
  background:
    radial-gradient(circle at 82% 4%, rgb(32 128 159 / .08), transparent 24rem),
    var(--crmp-canvas);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* App shell */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 45;
  border-color: rgb(220 226 234 / .9) !important;
  background: rgb(255 255 255 / .92) !important;
  box-shadow: 0 1px 0 rgb(23 32 51 / .04) !important;
  backdrop-filter: blur(14px);
}
.app-bar > div { min-height: 3.75rem; }
.app-brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--crmp-ink); text-decoration: none; }
.app-brand-mark {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border-radius: .7rem; color: #fff; background: var(--crmp-brand);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); font-size: .72rem; font-weight: 800; letter-spacing: .05em;
}
.app-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
.app-brand-copy strong { font-size: .88rem; letter-spacing: .04em; }
.app-brand-copy small { margin-top: .2rem; color: var(--crmp-muted); font-size: .67rem; }
.app-bar-divider { width: 1px; height: 1.8rem; margin: 0 .15rem; background: var(--crmp-border); }
.app-bar [id$="MenuBtn"] { color: #344158; transition: color .15s ease, background .15s ease; }
.app-bar [id$="MenuBtn"]:hover { color: var(--crmp-brand); background: #edf5f7; }
#fileStatus { min-width: 0; max-width: min(42vw, 28rem); padding: .38rem .65rem; border: 1px solid var(--crmp-border); border-radius: 999px; background: var(--crmp-surface-soft); }
#statusText { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-panel { border-color: var(--crmp-border) !important; border-radius: var(--crmp-radius) !important; box-shadow: var(--crmp-shadow-lg) !important; padding: .35rem; }
.menu-panel button { border-radius: .45rem; }

/* Page introduction */
.page-intro {
  position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid #d6e2e6; border-radius: var(--crmp-radius-lg);
  background: linear-gradient(115deg, #fff 0%, #f5fafb 72%, #e9f3f5 100%);
  box-shadow: var(--crmp-shadow-sm);
}
.page-intro::after {
  content: ""; position: absolute; right: -4rem; top: -7rem; width: 17rem; height: 17rem;
  border: 3rem solid rgb(23 79 99 / .045); border-radius: 50%; pointer-events: none;
}
.page-intro-eyebrow { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; color: var(--crmp-brand); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.page-intro-eyebrow span { width: .5rem; height: .5rem; border-radius: 50%; background: var(--crmp-accent); box-shadow: 0 0 0 4px rgb(199 101 51 / .12); }
.page-intro h1 { position: relative; max-width: 48rem; color: #152c38; letter-spacing: -.035em; line-height: 1.12; }
.page-intro-summary { position: relative; max-width: 60rem; margin-top: .8rem; margin-bottom: 0 !important; color: var(--crmp-muted) !important; font-size: .98rem; }

/* Surfaces and hierarchy */
.crmp-app .bg-white.rounded-2xl.shadow,
.crmp-app section > .bg-white.rounded-2xl {
  border: 1px solid var(--crmp-border);
  box-shadow: var(--crmp-shadow-sm) !important;
}
.crmp-app .border.rounded-2xl { border-color: var(--crmp-border); background: var(--crmp-surface); }
.crmp-app h1, .crmp-app h2, .crmp-app h3, .crmp-app h4 { color: var(--crmp-ink); letter-spacing: -.015em; }

/* Tabs use a calm, familiar segmented navigation pattern. */
.tabs { gap: .2rem; overflow-x: auto; padding: .28rem; border: 0; border-radius: var(--crmp-radius); background: #eef2f6; scrollbar-width: thin; }
.tab-btn { flex: 0 0 auto; padding: .6rem .85rem; border: 0; border-radius: .55rem; color: var(--crmp-muted); background: transparent; font-size: .875rem; transition: color .15s ease, background .15s ease, box-shadow .15s ease; }
.tab-btn:hover { color: var(--crmp-ink); background: rgb(255 255 255 / .65); }
.tab-btn-active { color: var(--crmp-brand-strong); background: #fff; border: 0; box-shadow: 0 1px 3px rgb(23 32 51 / .1); }

/* Controls */
.crmp-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.crmp-app select,
.crmp-app textarea {
  border-color: var(--crmp-border-strong) !important;
  background-color: #fff;
  color: var(--crmp-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.crmp-app input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):hover,
.crmp-app select:hover, .crmp-app textarea:hover { border-color: #9fabb9 !important; }
.crmp-app input:focus, .crmp-app select:focus, .crmp-app textarea:focus, .crmp-app [contenteditable="true"]:focus {
  outline: none !important; border-color: var(--crmp-focus) !important; box-shadow: 0 0 0 3px rgb(32 128 159 / .16) !important;
}
.crmp-app button { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.crmp-app button:active:not(:disabled) { transform: translateY(1px); }
.crmp-app button:focus-visible, .crmp-app a:focus-visible { outline: 3px solid rgb(32 128 159 / .35); outline-offset: 2px; }
.crmp-app button:disabled { cursor: not-allowed; }
body.read-only-active.crmp-app input:disabled,
body.read-only-active.crmp-app select:disabled,
body.read-only-active.crmp-app textarea:disabled,
body.read-only-active.crmp-app [contenteditable="false"][data-readonly-disabled="1"] {
  border-color: #dbe2e8 !important;
  background: #f8fafc !important;
  color: var(--crmp-ink) !important;
  -webkit-text-fill-color: var(--crmp-ink);
  box-shadow: none !important;
  cursor: default;
  opacity: 1;
}
body.read-only-active.crmp-app select:disabled { appearance: none; background-image: none !important; }
body.read-only-active.crmp-app button[data-readonly-disabled="1"] { opacity: .42; }
body.read-only-active.crmp-app #addHazardBtn,
body.read-only-active.crmp-app #addEventBtn,
body.read-only-active.crmp-app #completedByAdd,
body.read-only-active.crmp-app #stakeholdersAdd,
body.read-only-active.crmp-app .chip [data-role="remove"],
body.read-only-active.crmp-app .rte-toolbar[data-rte-target="descEditor"],
body.read-only-active.crmp-app #rteTableTools,
body.read-only-active.crmp-app #addLinkBtn,
body.read-only-active.crmp-app #linksList [data-role="edit"],
body.read-only-active.crmp-app #linksList [data-role="remove"],
body.read-only-active.crmp-app [data-event-gap-projects],
body.read-only-active.crmp-app .score-step { display: none !important; }
.row-btn { border-color: var(--crmp-border); color: #435069; box-shadow: 0 1px 1px rgb(23 32 51 / .03); }

/* Data and editor details */
.rte-box { border-color: var(--crmp-border); box-shadow: inset 0 1px 2px rgb(23 32 51 / .025); }
.rte-toolbar { gap: .35rem; border-color: var(--crmp-border); background: var(--crmp-surface-soft); }
.rte-toolbar button { border-color: var(--crmp-border); color: #435069; }
.tag-suggest { border-color: var(--crmp-border); box-shadow: var(--crmp-shadow-lg); }
.searchable-dropdown-toggle { width: 100%; min-height: 2.625rem; padding: .5rem .75rem; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); background: var(--crmp-surface); display: flex; align-items: center; justify-content: space-between; gap: .75rem; text-align: left; }
.searchable-dropdown-menu { position: absolute; z-index: 70; width: 100%; margin-top: .25rem; padding: .5rem; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); background: var(--crmp-surface); box-shadow: var(--crmp-shadow-lg); }
.searchable-dropdown-options { max-height: 13rem; margin-top: .5rem; overflow-y: auto; }
.requirements-table thead th, .gantt-cell.header, .gantt-title.header { background: #f3f6f8; color: #526077; }
#controlsCard h3 { display: flex; align-items: center; gap: .55rem; }
#controlsCard h3::before { content: ""; width: .24rem; height: 1.2rem; border-radius: 99px; background: var(--crmp-accent); }
.modal-backdrop { background: rgb(15 23 42 / .56); backdrop-filter: blur(4px); }
.modal-backdrop > div { border: 1px solid rgb(255 255 255 / .7); box-shadow: var(--crmp-shadow-lg) !important; }

.project-workspace { width: min(88rem, calc(100% - 3rem)); margin: 1.5rem auto 4rem; color: #18313c; }
.project-workspace-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; gap: 1.5rem; }
.project-workspace-main { min-width: 0; padding: 1.25rem; border: 1px solid var(--crmp-border); border-radius: 1rem; background: white; box-shadow: var(--crmp-shadow); }
.project-workspace-header { color: #18313c; }
.project-workspace-header h1 { max-width: 55rem; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 750; line-height: 1.12; }
.project-back { margin-bottom: .8rem; color: var(--crmp-brand); font-size: .86rem; font-weight: 650; }
.project-back:hover { text-decoration: underline; }
.project-eyebrow { color: var(--crmp-accent); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-workspace-meta { margin-top: .4rem; color: #64748b; font-size: .88rem; }
.project-fixed-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--crmp-border); }
.project-fixed-details label, .project-grid label { display: grid; align-content: start; gap: .4rem; color: #294854; font-size: .82rem; font-weight: 700; }
.project-fixed-details input, .project-fixed-details select, .project-grid input, .project-grid select, .project-grid textarea { width: 100%; border: 1px solid #cbd9dc; border-radius: .65rem; padding: .7rem .8rem; background: #fbfdfd; color: #172f38; font-size: .9rem; font-weight: 400; }
.project-fixed-details input:focus, .project-fixed-details select:focus, .project-grid input:focus, .project-grid select:focus, .project-grid textarea:focus { outline: 2px solid #4b9991; outline-offset: 1px; border-color: transparent; background: white; }
.project-tabs { margin: 1.25rem 0 1rem; }
.project-content { min-width: 0; }
.project-tab-panel { display: none; }
.project-tab-panel.active { display: grid; }
.project-section { gap: 1.25rem; padding: 1.25rem 0 0; border-top: 1px solid var(--crmp-border); background: white; }
.project-section h2 { font-size: 1.3rem; font-weight: 750; color: #183b45; }
.project-section > div:first-child > p:last-child { color: #657980; font-size: .9rem; }
.project-section-kicker { color: #b75427 !important; font-size: .68rem !important; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.project-workspace-sidebar { position: sticky; top: 5.5rem; }
.project-controls-card { padding: 1.25rem; border: 1px solid var(--crmp-border); border-radius: 1rem; background: white; box-shadow: var(--crmp-shadow); }
.project-controls-card h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 750; }
.project-controls-card h2::before { content: ""; width: .24rem; height: 1.2rem; border-radius: 99px; background: var(--crmp-accent); }
.project-controls-card > p { margin-top: .5rem; color: var(--crmp-muted); font-size: .82rem; }
.project-control-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--crmp-border); }
.project-control-actions button { min-height: 2.6rem; border-radius: .7rem; padding: .65rem .8rem; font-size: .86rem; font-weight: 700; }
.project-save-button { background: #64b7a5; color: white; }
.project-save-button:hover { background: #419d8a; }
.project-delete-button { background: #eb7892; color: white; }
.project-delete-button:hover { background: #df5c79; }
.project-cancel-button { grid-column: 1 / -1; border: 1px solid var(--crmp-border); color: #435069; }
.project-cancel-button:hover { background: var(--crmp-surface-soft); }
.project-requirements-table-wrap { overflow-x: auto; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); }
.project-requirements-table { min-width: 38rem; border-collapse: collapse; background: var(--crmp-surface); }
.project-requirements-table th { padding: .7rem .8rem; background: var(--crmp-surface-soft); color: var(--crmp-muted); text-align: left; font-size: .75rem; letter-spacing: .025em; }
.project-requirements-table th:first-child { width: 50%; }
.project-requirements-table th:last-child { width: 9rem; }
.project-requirements-table td { padding: .8rem; border-top: 1px solid var(--crmp-border); vertical-align: top; }
.project-requirement-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.project-requirement-remove { flex: 0 0 auto; color: var(--litl-danger); font-size: .8rem; font-weight: 650; }
.project-requirement-remove:hover { text-decoration: underline; }
.project-requirements-empty { color: var(--crmp-muted); text-align: center; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.project-grid select[multiple] { min-height: 7rem; }
.project-grid textarea { resize: vertical; }
.project-field-help { color: var(--crmp-muted); font-size: .74rem; font-weight: 400; }
.project-cross-requirements { display: grid; gap: .75rem; }
.project-cross-requirements-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.project-cross-add, .project-cross-remove, .project-cross-period-add, .project-cross-period-remove { border: 1px solid #cbd9dc; border-radius: .55rem; padding: .5rem .7rem; color: var(--crmp-brand); background: white; font-size: .78rem; font-weight: 700; }
.project-cross-add:hover, .project-cross-period-add:hover { background: #eef8f6; }
.project-cross-remove, .project-cross-period-remove { color: var(--litl-danger); }
.project-cross-remove:hover, .project-cross-period-remove:hover { background: #fff1f2; }
.project-cross-requirements-list { display: grid; gap: .75rem; }
.project-cross-requirement { display: grid; gap: .75rem; padding: .85rem; border: 1px solid var(--crmp-border); border-radius: .75rem; background: var(--crmp-surface-soft); }
.project-cross-department-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.project-cross-period { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(8rem, 1fr) minmax(8rem, 1fr) auto; align-items: end; gap: .65rem; }
.project-cross-period label { gap: .25rem; font-size: .74rem; }
.project-cross-empty { padding: .85rem; border: 1px dashed #cbd9dc; border-radius: .75rem; color: var(--crmp-muted); font-size: .85rem; text-align: center; }
.project-dependencies { display: grid; gap: .75rem; }
.project-dependencies-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.project-dependencies-actions { display: flex; gap: .5rem; }
.project-dependency-picker { display: grid; gap: .6rem; padding: .75rem; border: 1px solid var(--crmp-border); border-radius: .75rem; background: var(--crmp-surface-soft); }
.project-dependency-picker input { width: 100%; border: 1px solid #cbd5e1; border-radius: .55rem; padding: .6rem .7rem; background: white; }
.project-dependency-options, .project-dependency-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.project-dependency-option, .project-dependency-pill { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid #cbd5e1; border-radius: 999px; padding: .4rem .65rem; background: white; color: #334155; font-size: .78rem; }
.project-dependency-option[aria-pressed="true"] { border-color: #a78bfa; background: #f5f3ff; color: #5b21b6; }
.project-dependency-pill { background: #f8fafc; }
.project-dependency-remove { color: #64748b; font-size: .75rem; }
.project-dependency-remove:hover { color: var(--litl-danger); }
.project-span-2 { grid-column: 1 / -1; }
.project-saved { min-height: 1.25rem; color: #14705d !important; font-size: .85rem !important; font-weight: 650; }
@media (max-width: 900px) { .project-workspace-layout { grid-template-columns: 1fr; } .project-workspace-sidebar { position: static; } }
@media (max-width: 760px) { .project-workspace { width: min(100% - 2rem, 88rem); } .project-workspace-main { padding: 1rem; } .project-grid, .project-fixed-details { grid-template-columns: 1fr; } .project-span-2 { grid-column: auto; } .project-cross-requirements-heading, .project-dependencies-heading { align-items: stretch; flex-direction: column; } .project-cross-department-row, .project-cross-period { grid-template-columns: 1fr; } }
.app-version-footer { color: #758196; letter-spacing: .03em; }

@media (max-width: 767px) {
  .app-bar > div { align-items: flex-start; gap: .65rem; padding: .65rem 1rem; }
  .app-bar > div > div:first-child { flex-wrap: wrap; gap: .2rem; }
  .app-brand { width: 100%; margin-bottom: .25rem; }
  .app-brand-copy small, .app-bar-divider { display: none; }
  #fileStatus { flex-shrink: 1; max-width: 9.5rem; margin-top: .15rem; }
  .crmp-app > .max-w-7xl { padding: 1rem; }
  .page-intro { padding: 1.25rem; }
  .page-intro h1 { font-size: 1.65rem; }
  .tabs { margin-inline: -.25rem; }
  #controlsCard { border-color: var(--crmp-border) !important; box-shadow: 0 -10px 30px rgb(23 32 51 / .14) !important; }

  /* Keep the generated Community Impact score controls within narrow phones. */
  #editorView, #editorView > *, #editorView .tab-panel,
  #tab_analysis #categories, #tab_analysis #categories > * { min-width: 0; max-width: 100%; }
  #tab_analysis .subrow > div:first-child,
  #tab_analysis .subrow > div:first-child > div,
  #tab_analysis .flex.items-center.justify-between { flex-wrap: wrap; }
  #tab_analysis .subrow > div:first-child > label,
  #tab_analysis .w-56 { width: auto; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Overview dashboard */
.dashboard-view { padding-top: .9rem; }
.dashboard-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, .55fr); gap: 1.5rem; align-items: center; padding: clamp(1.35rem, 3vw, 2.25rem); border-radius: 1rem; color: #fff; background: linear-gradient(125deg, #123c4b 0%, #17606b 58%, #247f7a 100%); box-shadow: 0 16px 34px rgb(16 60 76 / .2); }
.dashboard-hero::after { content: ""; position: absolute; width: 22rem; height: 22rem; right: -8rem; top: -11rem; border: 4rem solid rgb(255 255 255 / .055); border-radius: 50%; }
.dashboard-hero-copy, .dashboard-health { position: relative; z-index: 1; }
.dashboard-kicker { margin-bottom: .55rem; color: #9de4d7; font-size: .7rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.dashboard-hero h2 { color: #fff; font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 760; line-height: 1.12; }
.dashboard-hero-copy > p:last-child { max-width: 43rem; margin-top: .65rem; color: #d7eef0; font-size: .92rem; }
.dashboard-health { padding: 1rem; border: 1px solid rgb(255 255 255 / .18); border-radius: .9rem; background: rgb(255 255 255 / .1); backdrop-filter: blur(8px); }
.dashboard-health-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.dashboard-health-row strong { font-size: 1.8rem; line-height: 1; }
.dashboard-progress { height: .45rem; margin: .7rem 0 .55rem; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / .18); }
.dashboard-progress span { display: block; height: 100%; border-radius: inherit; background: #8ee2c4; }
.dashboard-health small { color: #d7eef0; }
.dashboard-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin: 1.6rem 0 .8rem; }
.dashboard-section-heading h3 { font-size: 1.05rem; font-weight: 750; }
.dashboard-section-heading p { color: var(--crmp-muted); font-size: .8rem; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.dashboard-card { --widget: #174f63; position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 13rem; padding: 1.15rem; border: 1px solid var(--crmp-border); border-radius: .9rem; background: #fff; box-shadow: var(--crmp-shadow-sm); cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.dashboard-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .25rem; background: var(--widget); }
.dashboard-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--widget) 38%, white); box-shadow: 0 14px 28px rgb(23 32 51 / .11); }
.dashboard-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.dashboard-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .72rem; color: var(--widget); background: color-mix(in srgb, var(--widget) 11%, white); font-size: 1.15rem; font-weight: 800; }
.dashboard-count { color: var(--crmp-ink); font-size: 2rem; font-weight: 780; line-height: 1; }
.dashboard-count small { display: block; margin-top: .25rem; color: var(--crmp-muted); font-size: .67rem; font-weight: 650; text-align: right; }
.dashboard-card h4 { margin-top: .9rem; font-size: 1rem; font-weight: 750; }
.dashboard-card-status { min-height: 2.55rem; margin-top: .35rem; color: var(--crmp-muted); font-size: .78rem; }
.dashboard-card-action { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: .85rem; border-top: 1px solid #edf0f4; color: var(--widget); font-size: .78rem; font-weight: 750; }
.dashboard-card-action span:last-child { font-size: 1.1rem; transition: transform .15s ease; }
.dashboard-card:hover .dashboard-card-action span:last-child { transform: translateX(3px); }
.dashboard-card[data-dashboard-tab="opportunities"] { --widget: #17805c; }
.dashboard-card[data-dashboard-tab="macro"] { --widget: #b76522; }
.dashboard-card[data-dashboard-tab="standards"] { --widget: #7150a5; }
.dashboard-card[data-dashboard-tab="continuity"] { --widget: #14768a; }
.dashboard-card[data-dashboard-tab="plans"] { --widget: #3659a8; }
@media (max-width: 900px) { .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-hero { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dashboard-grid { grid-template-columns: 1fr; } .dashboard-card { min-height: 11.5rem; } }
.file-lock-widget {
  align-items: center;
  background: #f8fafc;
  border: 2px solid #94a3b8;
  border-radius: 9999px;
  color: #475569;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  position: relative;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
  width: 2.5rem;
}
.file-lock-widget:hover { background: #f1f5f9; transform: translateY(-1px); }
.file-lock-widget:focus-visible { outline: 3px solid rgba(14, 165, 233, .35); outline-offset: 2px; }
.file-lock-widget.is-unlocked { background: #ecfdf5; border-color: #10b981; color: #047857; }
.file-lock-widget.is-blocked { background: #fff1f2; border-color: #e11d48; color: #be123c; }
.file-lock-widget.is-blocked::after {
  background: currentColor;
  border: 1px solid #fff;
  content: '';
  height: 2px;
  position: absolute;
  transform: rotate(-45deg);
  width: 1.65rem;
}
.app-alert-region {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  z-index: 60;
  display: grid;
  width: min(92vw, 42rem);
  gap: .65rem;
  transform: translateX(-50%);
  pointer-events: none;
}
.app-alert {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .85rem 1rem;
  border: 1px solid #a3cfbb;
  border-radius: .75rem;
  background: #d1e7dd;
  color: #0a3622;
  box-shadow: 0 .5rem 1rem rgba(15, 23, 42, .16);
  pointer-events: auto;
  touch-action: pan-x;
  transition: opacity .25s ease, transform .25s ease;
}
.app-alert.is-warning { border-color: #ffe69c; background: #fff3cd; color: #664d03; }
.app-alert.is-leaving { opacity: 0; transform: translateY(-1.25rem); }
.app-alert-icon { flex: 0 0 auto; line-height: 1.5; }
.app-alert-message { flex: 1; font-size: .925rem; line-height: 1.45; }
.app-alert-close {
  flex: 0 0 auto;
  margin: -.35rem -.4rem -.35rem 0;
  padding: .25rem .4rem;
  border: 0;
  background: transparent;
  color: currentColor;
  font-size: 1.25rem;
  line-height: 1;
  opacity: .65;
  cursor: pointer;
}
.app-alert-close:hover, .app-alert-close:focus-visible { opacity: 1; }
@media (max-width: 640px) {
  .app-alert-region { top: 4rem; width: calc(100vw - 1rem); }
  .app-alert { cursor: grab; }
}
@media (prefers-reduced-motion: reduce) {
  .app-alert { transition: none; }
}

/* Choice search: reusable large-library picker */
.choice-field { min-height: 3.25rem; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .4rem; padding-left: .8rem; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); background: var(--crmp-surface); }
.choice-field-value { min-width: 0; color: var(--crmp-muted); font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.choice-field-value.has-choice { color: var(--crmp-ink); font-weight: 600; }
.choice-field-actions { display: flex; flex-shrink: 0; gap: .4rem; }
.choice-field-select, .choice-field-new { min-height: 2.35rem; padding: .45rem .75rem; border-radius: calc(var(--crmp-radius) - .2rem); font-size: .875rem; font-weight: 650; }
.choice-field-select { border: 1px solid var(--crmp-brand); background: var(--crmp-brand); color: white; }
.choice-field-new { border: 1px solid var(--crmp-border); background: white; color: var(--crmp-ink); }
.choice-search-table-wrap { min-height: 15rem; overflow: auto; }
.choice-search-table { border-collapse: collapse; }
.choice-search-table th { position: sticky; z-index: 1; top: 0; padding: .7rem .8rem; background: var(--crmp-surface-soft); color: var(--crmp-muted); text-align: left; font-size: .75rem; letter-spacing: .025em; }
.choice-search-table td { padding: .8rem; border-top: 1px solid var(--crmp-border); vertical-align: top; }
.choice-search-table tbody tr { cursor: pointer; }
.choice-search-table tbody tr:hover, .choice-search-table tbody tr:focus-within { background: #f0fdf4; }
.choice-search-table button { color: var(--crmp-brand); font-weight: 700; text-align: left; }
.project-gap-library-table tbody tr { cursor: default; }
.project-gap-library-table tbody tr:hover { background: #f8fafc; }
.project-gap-library-table td[rowspan] { width: 28%; background: var(--crmp-surface-soft); border-right: 1px solid var(--crmp-border); }
.project-gap-requirement-title { position: sticky; top: 3rem; }
.project-gap-library-table input[type="checkbox"] { width: 1.1rem; height: 1.1rem; accent-color: var(--crmp-brand); }
.project-gap-source { font-weight: 650; color: var(--crmp-text); }
.project-gap-source-kind { display: block; margin-top: .2rem; color: var(--crmp-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.project-gap-help { display: grid; width: 1.65rem; height: 1.65rem; flex: 0 0 auto; place-items: center; border: 1px solid #d97706; border-radius: 999px; color: #92400e; background: rgb(255 255 255 / .72); font-size: .8rem; font-weight: 800; }
.project-gap-help:hover, .project-gap-help:focus-visible { background: white; box-shadow: 0 0 0 3px rgb(245 158 11 / .2); }
.project-gap-coverage-summary { display: flex; align-items: center; gap: 1rem; margin-top: .65rem; }
.project-gap-donut { display: grid; width: 5.5rem; height: 5.5rem; flex: 0 0 auto; place-items: center; position: relative; }
.project-gap-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.project-gap-donut circle { fill: none; }
.project-gap-donut-track { stroke: #fde68a; stroke-width: 10; }
.project-gap-donut-segment { stroke-width: 10; cursor: pointer; transition: filter 160ms ease, stroke-width 160ms ease; }
.project-gap-donut-with { stroke: #059669; }
.project-gap-donut-without { stroke: #f59e0b; }
.project-gap-donut-segment:hover, .project-gap-donut-segment:focus-visible { stroke-width: 12; filter: drop-shadow(0 2px 2px rgb(15 23 42 / .28)); outline: none; }
.project-gap-donut-segment[aria-pressed="true"] { stroke-width: 12; filter: drop-shadow(0 0 2px rgb(15 23 42 / .4)); }
.project-gap-donut span { position: relative; z-index: 1; color: #064e3b; font-size: 1rem; font-weight: 800; line-height: 1; text-align: center; }
.project-gap-donut small { display: block; margin-top: .25rem; color: #92400e; font-size: .62rem; font-weight: 700; }
@media (max-width: 640px) { .choice-field { align-items: stretch; flex-direction: column; padding: .65rem; } .choice-field-actions { width: 100%; } .choice-field-actions button { flex: 1; } .choice-search-secondary { display: none; } }

/* Keep every function workspace in the shared navigation → title → subnavigation order. */
.function-submenu { margin-top: .9rem; }
.function-submenu > .tabs { display: flex; width: 100%; }
.function-page-intro { margin-top: 1rem; padding: .25rem 0 .9rem; border-bottom: 1px solid var(--crmp-border); }
.function-page-intro .litl-eyebrow { margin-bottom: .4rem; }
.function-page-intro h1 { margin: 0; color: var(--crmp-ink); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.15; }
.function-page-intro > p:last-child { max-width: 60rem; margin: .45rem 0 0; color: var(--crmp-muted); }

/* Function pages: title/description → subnavigation → widgets → actions/tools. */
.function-submenu:not(.hidden) { margin-bottom: .9rem; }
.function-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .75rem 0 1rem; padding: .75rem; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); background: var(--crmp-surface-soft); }
.function-widgets { margin-top: .9rem; }
.function-toolbar-actions, .function-toolbar-tools { display: flex; align-items: center; flex-wrap: nowrap; gap: .5rem; }
.function-toolbar-tools { justify-content: flex-end; margin-left: auto; }
.function-toolbar-status { flex: 0 0 auto; color: var(--crmp-muted); font-size: .875rem; }
.function-toolbar-search, .function-toolbar-filter, .function-toolbar-date input { min-height: 2.5rem; border: 1px solid var(--crmp-border); border-radius: .7rem; background: white; padding: .5rem .75rem; color: var(--crmp-ink); font-size: .875rem; }
.function-toolbar-search { width: min(16rem, 100%); }
.function-toolbar-filter { max-width: 13rem; }
.function-toolbar-filter-summary { color: var(--crmp-muted); font-size: .75rem; font-weight: 500; white-space: nowrap; }
.function-toolbar-date { display: inline-flex; align-items: center; gap: .35rem; color: var(--crmp-muted); font-size: .75rem; font-weight: 650; }
.function-toolbar-date input { width: 8.8rem; }
.function-toolbar-clear { min-height: 2.5rem; padding: .45rem .3rem; color: #075985; font-size: .875rem; font-weight: 700; }
.function-toolbar-clear:hover { text-decoration: underline; }
.function-table-card { overflow: hidden; border: 1px solid var(--crmp-border); border-radius: var(--crmp-radius); background: var(--crmp-surface); box-shadow: var(--crmp-shadow-sm); }
.function-table { width: 100%; border-collapse: collapse; color: var(--crmp-ink); font-size: .875rem; }
.function-table thead { background: var(--crmp-surface-soft); color: var(--crmp-muted); text-align: left; }
.function-table th { font-size: .75rem; letter-spacing: .025em; text-transform: uppercase; }
.function-table tbody tr { border-top: 1px solid var(--crmp-border); }
.function-table tbody tr:hover { background: #f8fafc; }
.project-list-toolbar { margin-bottom: 0.75rem; }
.project-list-toolbar .function-toolbar-status { white-space: nowrap; }

/* KPI register: keep the performance indicator visible while its measure rows scroll. */
.kpi-list-table { border-collapse: separate; border-spacing: 0; }
.kpi-list-table .kpi-sticky-title { position: sticky; left: 0; width: 45%; min-width: 18rem; background: #fff; z-index: 2; box-shadow: 1px 0 0 #e2e8f0; }
.kpi-list-table thead .kpi-sticky-title { background: #f1f5f9; z-index: 4; }
.kpi-table-scroll { scrollbar-gutter: stable; }
@media (max-width: 760px) {
  .function-toolbar { align-items: stretch; flex-direction: column; }
  .function-toolbar-actions, .function-toolbar-tools { flex-wrap: wrap; }
  .function-toolbar-tools { justify-content: flex-start; margin-left: 0; }
  .function-toolbar-search { width: 100%; }
  .project-list-toolbar > div:last-child { justify-content: flex-start; }
  .project-list-toolbar > div:last-child > .relative { max-width: 100%; }
  .project-list-toolbar [data-project-filter-toggle] { max-width: 100%; }
  .project-list-toolbar [data-project-filter-menu] { right: auto; left: 0; max-width: calc(100vw - 3rem); }
}

/* Hazardous Events registers: remain part of the page while their two-tier headers stay visible. */
.hazard-events-table-frame {
  border: 1px solid var(--crmp-border);
  border-radius: .75rem;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}
.hazard-events-table { border-collapse: separate; border-spacing: 0; min-width: max-content; }
.hazard-events-table thead th {
  position: relative;
  z-index: 3;
  background: #e2e8f0;
  color: #1e293b;
  border-bottom: 1px solid #cbd5e1;
  padding-left: .75rem;
}
.hazard-events-table thead tr:nth-child(2) th {
  z-index: 4;
  background: #f1f5f9;
}
.hazard-events-table tbody tr:nth-child(even) { background: #f8fafc; }
.hazard-events-table tbody tr:hover { background: #eff6ff; }
.hazard-events-table th,
.hazard-events-table td { padding: .75rem 1rem !important; vertical-align: middle; }
.hazard-events-table tbody td { border-bottom: 1px solid #e2e8f0; line-height: 1.45; }
.hazard-events-table tbody tr:last-child td { border-bottom: 0; }
.hazard-events-table .hazard-event-title {
  position: sticky;
  left: 0;
  min-width: 14rem;
  z-index: 2;
  background: #fff;
  box-shadow: 1px 0 0 #cbd5e1;
}
.hazard-events-table thead .hazard-event-title { z-index: 6; background: #e2e8f0; }
.hazard-events-table tbody tr:nth-child(even) .hazard-event-title { background: #f8fafc; }
.hazard-events-table tbody tr:hover .hazard-event-title { background: #eff6ff; }
.risk-score-cell { display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; }

/* Incident register overview: compact, accessible visuals without a chart dependency. */
.incident-summary { display: grid; grid-template-columns: minmax(11rem, .7fr) minmax(18rem, 1fr) minmax(28rem, 2fr); gap: .75rem; margin: .9rem 0; }
.incident-summary-card { min-width: 0; min-height: 8.5rem; padding: 1rem; border: 1px solid var(--crmp-border); border-radius: 1rem; background: linear-gradient(145deg, #fff, #f8fafc); box-shadow: var(--crmp-shadow-sm); }
.incident-summary-eyebrow { margin: 0 0 .25rem; color: #64748b; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.incident-summary-total { display: flex; align-items: center; justify-content: space-between; overflow: hidden; }
.incident-summary-total strong { display: block; color: #0f172a; font-size: 2.5rem; line-height: 1; }
.incident-summary-total p:last-child { margin-top: .45rem; color: #64748b; font-size: .78rem; }
.incident-summary-icon { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 auto; place-items: center; border-radius: 1rem; background: linear-gradient(145deg, #e0f2fe, #bae6fd); color: #0369a1; font-size: 1.65rem; font-weight: 850; }
.incident-publication { display: flex; align-items: center; gap: 1rem; }
.incident-donut { display: grid; width: 6rem; height: 6rem; flex: 0 0 auto; place-items: center; position: relative; border-radius: 50%; background: conic-gradient(#0ea5e9 0 var(--published-angle), #e2e8f0 var(--published-angle) 360deg); }
.incident-donut::after { content: ""; position: absolute; inset: .65rem; border-radius: 50%; background: white; }
.incident-donut span { position: relative; z-index: 1; color: #0f172a; font-size: 1.1rem; font-weight: 800; text-align: center; }
.incident-donut small { display: block; color: #64748b; font-size: .58rem; font-weight: 650; }
.incident-publication ul { display: grid; gap: .35rem; margin-top: .45rem; color: #475569; font-size: .8rem; }
.incident-publication li { display: flex; align-items: center; gap: .4rem; }
.incident-publication i { width: .55rem; height: .55rem; border-radius: 999px; background: #e2e8f0; }
.incident-publication i.is-published { background: #0ea5e9; }
.incident-risk-heading { display: flex; align-items: start; justify-content: space-between; gap: .75rem; }
.incident-risk-heading h3 { font-size: 1rem; font-weight: 750; }
.incident-risk-heading > span { color: #64748b; font-size: .72rem; }
.incident-risk-bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; margin-top: .75rem; }
.incident-risk-bands > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .15rem .45rem; padding: .45rem; border-left: .25rem solid var(--band-colour); border-radius: .45rem; background: #f8fafc; }
.incident-risk-bands span { grid-row: 1 / 3; color: var(--band-colour); font-size: .72rem; font-weight: 850; }
.incident-risk-bands strong { color: #0f172a; font-size: 1.05rem; line-height: 1; }
.incident-risk-bands small { overflow: hidden; color: #64748b; font-size: .6rem; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 960px) { .incident-summary { grid-template-columns: 1fr 1fr; } .incident-risk-summary { grid-column: 1 / -1; } }
@media (max-width: 600px) { .incident-summary { grid-template-columns: 1fr; } .incident-risk-summary { grid-column: auto; } .incident-risk-bands { grid-template-columns: repeat(5, minmax(3.25rem, 1fr)); overflow-x: auto; } }

/* Requirement reuse picker and reporting-location style Featured pills. */
.requirement-picker-table { overflow:auto; max-height:55vh; border:1px solid #e2e8f0; border-radius:12px; }
.requirement-picker-table th { position:sticky; top:0; background:#f8fafc; text-align:left; }
.requirement-picker-table td, .requirement-picker-table th { padding:12px; border-bottom:1px solid #e2e8f0; vertical-align:top; }
.requirement-picker-add { border:1px solid #059669; color:#047857; background:#ecfdf5; border-radius:8px; padding:6px 12px; min-width:80px; transition:opacity .2s; }
.requirement-picker-add:disabled { opacity:.55; cursor:default; }
.requirement-featured { display:inline-flex; min-width:32px; justify-content:center; border-radius:999px; background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; padding:3px 10px; font-size:12px; font-weight:600; cursor:help; }
.shared-requirement-tooltip { position:fixed; z-index:100; width:320px; max-height:50vh; overflow:auto; border:1px solid #e2e8f0; background:white; color:#334155; border-radius:10px; padding:12px; box-shadow:0 8px 24px #0f172a26; font-size:12px; pointer-events:auto; }
.shared-requirement-tooltip li { margin-top:6px; }

.continuity-requirements-table th:nth-child(4), .continuity-requirements-table td:nth-child(4) { display:none; }

.requirement-picker-add:disabled { animation:requirement-added .2s ease-out; }
@keyframes requirement-added { from { opacity:1; } to { opacity:.55; } }

/* Shared gap definitions span source rows without crowding the source column. */
#requirementsTable { table-layout: fixed; min-width: 54rem; }
#requirementsTable td { overflow-wrap: anywhere; }
#requirementsTable td[rowspan] { width: auto; background: var(--crmp-surface); }
#requirementsTable th:nth-child(1) { width: 22%; }
#requirementsTable th:nth-child(2) { width: 28%; }
#requirementsTable th:nth-child(3) { width: 13%; }
#requirementsTable th:nth-child(4) { width: 17%; }
#requirementsTable th:nth-child(5) { width: 20%; }