/* Theme and phone fixes of the copy (PLAN decisions 5 and 6, milestone M9). Loaded after the original's CSS files,
   which stay verbatim. Every rule names its finding (docs/review/04-screens-design.md); docs/DIFFERENCES.md lists them. */

/* UI-10: Inter, self-hosted (SIL OFL 1.1, lib/fonts/inter/OFL.txt), the variable font for weights 400-700. */
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../lib/fonts/inter/inter-latin-wght-normal.woff2) format("woff2-variations"),url(../lib/fonts/inter/inter-latin-wght-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;src:url(../lib/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../lib/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* UI-9: one token set. Six neutrals, two blues, four semantic colours; the original's five secondary greys (and the
   thirty near-identical greys around them), four link blues, two error reds and two input borders map onto these. */
:root{
  --ld-ink:#293d54;--ld-text:#525252;--ld-text-muted:#566a80;--ld-border:#dfe5ee;--ld-input-border:#7b8a9b;--ld-surface:#f8fafd;
  --ld-navy:#002762;--ld-link:#1769a5;
  --ld-success:#1f6b4a;--ld-info:#173e64;--ld-warning-bg:#fff5dc;--ld-warning-text:#5c3d00;--ld-danger:#a33a28;--ld-danger-text:#a33a28;
  --ld-shadow:0 12px 40px #00276226;
}

/* UI-9: secondary text and link colours (generated: node tools/theme-fixes/generate.mjs colors). */
.ld-user small,.ld-menu-search,.ld-nav-group h2,.ld-nav-link,.ld-sidebar-footer,.ld-sidebar-footer small,.ld-breadcrumb,.ld-breadcrumb span:last-child,.ld-title-row p,.ld-tabs button,.ld-eyebrow,.ld-welcome p,.ld-stat>div,.ld-stat small,.ld-panel-heading p,.ld-tag,.ld-stage-grid button>span:last-child,.ld-action-list small,.ld-action-list button>svg,.ld-status-bars>div,.ld-text-button:disabled,.ld-table th,.ld-table td,.ld-table-foot,.ld-search,.ld-select,.ld-empty-icon,.ld-empty p,.ld-badge,.ld-footer,.ld-loading,.ld-helper,.ld-field,.ld-field small,.ld-activity-evidence dd,.ld-activity-summary span,.ld-candidate small,.ld-choice-list small,.ld-file small,.ld-detail-top,.ld-detail-grid small,.ld-need-card,.ld-participant small,.ld-funding-total,.ld-timeline small,.ld-timeline p,.ld-report-link,.ld-report-note,.ld-integration-grid p,.ld-title-row p,.ld-welcome p,.ld-app input::placeholder,.ld-app textarea::placeholder,.ld-brand-preview p,.ld-nav-group summary,.ld-assurance-record small,.ld-assurance-facts dt,.ld-eval-stats>div>span,.ld-eval-item-info small,.ld-eval-event-info small,.ld-eval-event-stats,.ld-combo-chevron,.ld-combo-clear,.ld-combo-empty{color:var(--ld-text-muted)}
.ld-tabs .active,.ld-tabs button span,.ld-text-button,.ld-report-link.active,.ld-eval-event-levels .ld-level-active{color:var(--ld-link)}
.ld-app :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--ld-link)}
.ld-parameter-card input:not([type=checkbox]),.ld-parameter-card select,.ld-parameter-card textarea{border:1px solid var(--ld-input-border)}
.ld-parameter-card .parameter-error{color:var(--ld-danger-text)}

/* UI-5: no text under 12 px (11 px for uppercase micro-labels) (generated: node tools/theme-fixes/generate.mjs fonts). */
.ld-brand small,.ld-user small,.ld-nav-link,.ld-sidebar-footer,.ld-sidebar-footer small,.ld-breadcrumb,.ld-tabs button span,.ld-eyebrow,.ld-app .atom-button,.ld-app .atom-button-outline,.ld-stat>div,.ld-stat small,.ld-panel-heading p,.ld-tag,.ld-stage-number,.ld-stage-grid b,.ld-stage-grid button>span:last-child,.ld-action-list b,.ld-action-list small,.ld-status-bars>div,.ld-text-button,.ld-table,.ld-table-foot,.ld-search input,.ld-select,.ld-empty p,.ld-badge,.ld-footer,.ld-view-note,.ld-helper,.ld-field small,.ld-activity-summary span,.ld-choice-list small,.ld-file small,.ld-detail-top,.ld-need-card>span,.ld-participant small,.ld-timeline small,.ld-report-link,.ld-report-note,.ld-eval-stats>div>span,.ld-eval-item-info small,.ld-eval-event-info small,.ld-eval-event-levels span,.ld-eval-event-stats,.ld-app-loading-brand small{font-size:12px}
.ld-nav-group h2,.ld-detail-grid small{font-size:11px}
@media(max-width:700px){.ld-portal-switch select,.ld-breadcrumb,.ld-brand small{font-size:12px}}
@media(max-width:640px){.ld-session-controls .atom-button{font-size:12px}}
@media(max-width:600px){.ld-app-loading-brand small{font-size:12px}}

/* UI-4: contrast at least 4.5:1 for text and 3:1 for control boundaries; navy for active fills. */
.ld-eval-event-levels span{color:var(--ld-text-muted)}
.ld-rating button{color:var(--ld-text-muted);border-color:var(--ld-input-border)}
.ld-rating button:hover{border-color:var(--ld-link);color:var(--ld-link)}
.ld-rating button.active{background:var(--ld-navy);border-color:var(--ld-navy);color:#fff}
.ld-session-controls select{border-color:var(--ld-input-border)}
.ld-nav-dot{border-color:var(--ld-input-border)}
.active .ld-nav-dot{background:var(--ld-navy);border-color:var(--ld-navy)}

/* UI-11: the secondary button the original referenced but never defined. */
.atom-button.atom-button-secondary,.ld-app .atom-button.atom-button-secondary{background:#fff;color:var(--ld-navy);border:1px solid var(--ld-input-border)}
.atom-button.atom-button-secondary:hover{background:hsl(var(--accent))}

/* UI-23: the Approvals count as the same accent pill as the Notifications count (the original's white badge vanished). */
.ld-nav-link b.ld-nav-pending-count{margin-left:auto;flex-shrink:0;min-width:28px;padding:2px 8px;border-radius:999px;background:hsl(var(--accent));color:var(--ld-navy);font-size:12px;font-weight:600;line-height:1.5;text-align:center;font-variant-numeric:tabular-nums}
.ld-nav-link.active b.ld-nav-pending-count{background:var(--ld-navy);color:#fff}

/* UI-3 and UI-35: toast variants; a manual popover, so it shows above an open dialog. */
.ld-toast[popover]{inset:auto 24px 24px auto;margin:0;border:0;overflow:visible;color:#fff;background:var(--ld-info)}
.ld-toast[popover]:not(:popover-open){display:none}
.ld-toast>span{flex:1;overflow-wrap:anywhere}
.ld-toast.ld-toast-success{background:var(--ld-info)}
.ld-toast.ld-toast-info{background:var(--ld-navy)}
.ld-toast.ld-toast-warning{background:var(--ld-warning-bg);color:var(--ld-warning-text);border:1px solid #e3c477}
.ld-toast.ld-toast-error{background:var(--ld-danger);color:#fff}
/* M10 phone journeys: below the 60 px header, so the menu, bell and account buttons stay reachable while it shows. */
@media(max-width:700px){.ld-toast[popover]{inset:68px 12px auto 12px;max-width:none}}

/* UI-1: the selected tab is visible (markup); keyboard focus on tabs. */
.ld-tabs [role=tab][aria-selected=true]{color:var(--ld-link);border-color:#1a85cf;font-weight:600}

/* UI-11 and UI-2: the account menu (identity, workspace view, My Profile, Sign out). */
.ld-account{position:relative}
.ld-account-button{display:flex;align-items:center;gap:10px;min-height:44px;padding:3px 8px 3px 3px;border-radius:999px;text-align:left;color:var(--ld-ink)}
.ld-account-button:hover,.ld-account-button[aria-expanded=true]{background:hsl(var(--accent))}
.ld-account-button .ld-avatar{display:grid}
.ld-account-scrim{position:fixed;inset:0;z-index:55;background:transparent;cursor:default}
.ld-account-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(280px,calc(100vw - 20px));display:flex;flex-direction:column;gap:4px;padding:8px;background:#fff;border:1px solid var(--ld-border);border-radius:10px;box-shadow:var(--ld-shadow)}
.ld-account-identity{padding:8px 10px 10px;border-bottom:1px solid var(--ld-border);overflow-wrap:anywhere}
.ld-account-identity b{display:block;font-size:14px;font-weight:600;color:var(--ld-ink)}
.ld-account-identity small{display:block;font-size:12px;color:var(--ld-text-muted);margin-top:2px}
.ld-account-views{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px 2px}
.ld-account-views button{min-height:38px;border:1px solid var(--ld-input-border);border-radius:6px;font-size:12px;font-weight:500;color:var(--ld-navy);background:#fff}
.ld-account-views button[aria-pressed=true]{background:var(--ld-navy);border-color:var(--ld-navy);color:#fff}
.ld-account-link{display:flex;align-items:center;gap:8px;min-height:40px;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--ld-ink)}
.ld-account-link:hover{background:hsl(var(--accent))}
.ld-account-menu .ld-session-controls{padding:8px 2px 2px;border-top:1px solid var(--ld-border)}
.ld-account-menu .ld-session-controls .atom-button{width:100%;padding:9px 15px;font-size:12px}

/* UI-2: one 60 px phone header (menu, short product name, bell, account menu); no second row at 420 px and below. */
@media(max-width:700px){
  .ld-header{height:60px;padding:0 10px;gap:6px}
  .ld-brand{gap:6px}
  .ld-brand-copy{max-width:none}
  .ld-brand strong{font-size:0;letter-spacing:0}
  .ld-brand strong::after{content:attr(data-short);font-size:17px;letter-spacing:-.3px}
  .ld-brand small{display:none}
  .ld-brand.has-client small{display:block;margin-top:2px;max-width:100%}
  .ld-portal-switch,.ld-user,.ld-account-chevron{display:none}
  .ld-account-button{padding:2px;gap:0}
  .ld-account-button .ld-avatar{display:grid;width:36px;height:36px;font-size:15px}
  .ld-sidebar,.ld-scrim{top:60px}
  .ld-main{padding:16px 14px 0;min-height:calc(100vh - 60px)}
}
@media(max-width:480px){.ld-header-right{margin-left:0}}
@media(max-width:420px){
  .ld-header{height:60px;flex-wrap:nowrap;row-gap:0;padding:0 8px}
  .ld-brand{flex:1 1 auto}
  .ld-header-right{width:auto;gap:4px}
  .ld-sidebar,.ld-scrim{top:60px}
}

/* UI-34: tab rows scroll sideways on a phone, with a fade at the edge that has more tabs. */
@media(max-width:700px){
  .ld-tabs{flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;overflow-y:hidden;gap:0 20px;padding-right:28px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
  .ld-tabs::-webkit-scrollbar{display:none}
  .ld-tabs button{flex-shrink:0}
}

/* UI-13: wide tables scroll inside their card and keep the "View" action in reach (sticky at the right edge). */
.ld-table-actions th:last-child,.ld-table-actions td:last-child{position:sticky;right:0;z-index:1}
.ld-table-actions td:last-child{background:#fff}
.ld-table-actions th:last-child{background:var(--ld-surface)}
.ld-table-actions tbody tr:hover td:last-child{background:#fbfdff}
@media(max-width:1023px){.ld-table-actions th:last-child,.ld-table-actions td:last-child{box-shadow:-10px 0 10px -10px #00276240}}
@media(max-width:700px){.ld-table th{padding:11px 12px}.ld-table td{padding:12px;max-width:240px}.ld-table-foot{flex-wrap:wrap;gap:8px}}

/* UI-29: on a phone the Detail footer shows Close, one decision and "More actions". */
.ld-more-actions{position:relative}
.ld-more-actions>button{gap:6px}
.ld-more-actions-list{position:absolute;right:0;bottom:calc(100% + 8px);z-index:5;display:flex;flex-direction:column;gap:6px;min-width:min(260px,calc(100vw - 48px));padding:8px;background:#fff;border:1px solid var(--ld-border);border-radius:10px;box-shadow:var(--ld-shadow)}
.ld-more-actions-list button{width:100%}

/* UI-20: the in-progress variant of the explicit status map (Statics/StatusBadgeMap). */
.ld-badge-blue{background:#e8f2fb;color:var(--ld-link)}

/* Decision 10: the Integrations page's connection checks. */
.ld-integration-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:18px}
.ld-integration-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:8px}
.ld-integration-head h2{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;color:var(--ld-ink)}
.ld-integration-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
@media(max-width:700px){.ld-integration-cards{grid-template-columns:minmax(0,1fr)}}

/* UI-13 at phone width: columns keep a readable width (the original squeezed them until words broke letter by letter)
   and the table scrolls inside its card instead. */
@media(max-width:700px){
  .ld-table td{overflow-wrap:break-word;min-width:112px}
  .ld-table td.ld-primary-cell{min-width:168px}
  .ld-table td:last-child{min-width:0}
  /* M10 employee journey: the invited-survey and audience tables keep words whole too (the action stays sticky). */
  .ld-audience-table td{overflow-wrap:break-word;min-width:112px}
  .ld-audience-table td:first-child{min-width:168px}
  .ld-audience-table td:last-child{min-width:0}
}

/* UI-5: unclassed small text (the browser's 80 %, 11.2 px) and the bell count at 12 px. :where keeps any class rule
   in charge of its own size. */
:where(.ld-app) small{font-size:max(12px,.8em)}
.ld-bell-unread-count{font-size:12px}

/* Phone width: panel headings put their text on its own row and the buttons below it (the Evaluation Center's "Form
   templates" and the assurance areas' "Prepare record" were squeezed into narrow columns). */
@media(max-width:700px){
  .ld-panel-heading{flex-wrap:wrap;padding:18px}
  .ld-panel-heading>div:first-child{flex:1 1 100%}
}

/* M10 journeys (access reviewers at 390 px): the /nspire-access tables stack each request and grant on a phone, so
   the link form and the Approve / Revoke buttons are not cut off at the right edge. */
@media(max-width:700px){
  .ld-access-table thead{display:none}
  .ld-access-table,.ld-access-table tbody,.ld-access-table tr,.ld-access-table td{display:block;width:100%}
  .ld-access-table td{padding:6px 0}
  .ld-access-table tr{padding:10px 0}
}