/* Phase 45 (docs/PHASE45_ASSURANCE_EXPERIENCE_PROMPT.md): preferences, pinned shortcuts, Account & devices,
   What's new, the sidebar workspace filter, keyboard shortcuts and accessibility polish. Navy & gold, both themes. */

/* ------------------------------------------------------------ preferences applied to the page */
#content, dialog.modal { zoom: var(--p45-text-scale, 1); }

:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}

:root[data-contrast="high"] { --muted: #26313a; --line: #8d969c; --shadow: 0 0 0 1px rgba(3, 27, 44, .25); }
:root[data-contrast="high"][data-theme="dark"] { --muted: #d7e3e9; --line: #6f8794; --ink: #ffffff; }
:root[data-contrast="high"] .panel, :root[data-contrast="high"] .metric-card, :root[data-contrast="high"] .modal { border-width: 2px; }
:root[data-contrast="high"] a { text-decoration: underline; text-underline-offset: 2px; }

:root[data-density="compact"] .panel { padding: 14px; }
:root[data-density="compact"] .nav-item { padding: 7px 11px; }
:root[data-density="compact"] .main-nav { gap: 1px; }
:root[data-density="compact"] th, :root[data-density="compact"] td { padding-top: 6px; padding-bottom: 6px; }
:root[data-density="compact"] .content { gap: 12px; }

/* ------------------------------------------------------------ accessibility */
.p45-skip { border: 0; cursor: pointer;
  position: fixed; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; border-radius: 10px;
  color: var(--navy-950); background: var(--gold); font-weight: 800; text-decoration: none; transition: top .18s ease;
}
.p45-skip:focus { top: 14px; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------------------ sidebar filter */
.p45-nav-filter {
  display: flex; align-items: center; gap: 7px; margin: 4px 4px 6px; padding: 0 8px 0 10px; height: 38px;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 11px; background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .55); transition: border-color .16s ease, background-color .16s ease;
}
.p45-nav-filter:focus-within { border-color: var(--gold); background: rgba(255, 255, 255, .1); }
.p45-nav-filter input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; }
.p45-nav-filter input::placeholder { color: rgba(255, 255, 255, .5); }
.p45-nav-filter input:focus-visible { outline: none; }
.p45-nav-filter kbd { padding: 1px 6px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 5px; font-size: 11px; font-family: inherit; }
.p45-nav-empty { margin: 10px 12px; color: rgba(255, 255, 255, .55); font-size: 12px; }

/* ------------------------------------------------------------ pin toggle beside the page title */
.p45-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.p45-title-row h1 { min-width: 0; }
.p45-pin {
  display: inline-flex; flex: none; align-items: center; gap: 6px; padding: 4px 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--muted);
  font: 700 12px/1.4 inherit; font-family: inherit; cursor: pointer; transition: all .16s ease;
}
.p45-pin:hover { border-color: var(--gold); color: var(--ink); }
.p45-pin.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 18%, var(--paper)); color: var(--gold-text); }
.p45-pin span:first-child { font-size: 14px; }
@media (max-width: 760px) { .p45-pin-label { display: none; } .p45-pin { padding: 4px 8px; } }

/* ------------------------------------------------------------ pinned shortcuts on Home */
#p45Pinned:empty { display: none; }
.p45-pinned { margin: 0 0 18px; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); }
.p45-pinned header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.p45-pinned header .eyebrow { margin: 0; }
.p45-link { border: 0; background: none; color: var(--gold-text); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.p45-pinned-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.p45-pinned-item { position: relative; animation: p45-rise .42s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.p45-pinned-open {
  width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; min-height: 92px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); text-align: left; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer;
  background: linear-gradient(160deg, var(--paper), color-mix(in srgb, var(--gold) 7%, var(--paper)));
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.p45-pinned-open:hover { transform: translateY(-2px); border-color: var(--gold); box-shadow: 0 12px 24px rgba(3, 27, 44, .1); }
.p45-pinned-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--gold); background: var(--navy-900); font-size: 17px; }
.p45-pinned-unpin {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%;
  color: var(--muted); background: transparent; font-size: 15px; cursor: pointer; opacity: 0; transition: opacity .16s ease, background-color .16s ease;
}
.p45-pinned-item:hover .p45-pinned-unpin, .p45-pinned-unpin:focus-visible { opacity: 1; }
.p45-pinned-unpin:hover { background: var(--red-soft); color: var(--red); }
@media (hover: none) { .p45-pinned-unpin { opacity: .7; } }
.p45-pinned.empty { display: flex; align-items: center; gap: 14px; box-shadow: none; border-style: dashed; background: transparent; }
.p45-pinned.empty p { margin: 0; color: var(--muted); font-size: 13px; }
.p45-pinned.empty strong { color: var(--ink); }
.p45-pinned-mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold-text); font-size: 20px; }

/* ------------------------------------------------------------ dialogs */
.p45-modal { width: min(600px, calc(100% - 24px)); padding: 0; overflow: hidden; }
.p45-body { display: grid; gap: 14px; padding: 22px 22px 18px; max-height: min(86vh, 820px); overflow-y: auto; }
.p45-body h2 { margin: 2px 0 0; font-family: var(--heading-font); font-size: 22px; }
.p45-sub, .p45-muted { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.p45-group { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.p45-group h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.p45-group h3 small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.p45-segment { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.p45-segment button {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px; min-height: 64px; justify-content: center;
  border: 1.5px solid var(--line); border-radius: 13px; background: var(--paper); color: var(--ink); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}
.p45-segment button span { font-size: 18px; line-height: 1; }
.p45-segment button:hover { border-color: var(--gold); }
.p45-segment button:active { transform: scale(.98); }
.p45-segment button.on { border-color: var(--navy-900); background: var(--navy-900); color: #fff; }
.p45-segment button.on span { color: var(--gold); }
:root[data-theme="dark"] .p45-segment button.on { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, var(--paper)); color: var(--ink); }
.p45-aa[data-scale="90"] { font-size: 13px !important; }
.p45-aa[data-scale="100"] { font-size: 15px !important; }
.p45-aa[data-scale="115"] { font-size: 17px !important; }
.p45-aa[data-scale="130"] { font-size: 20px !important; }
.p45-preview { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--cream); color: var(--ink); font-size: 14px; }
.p45-preview[data-scale="90"] { font-size: 12.6px; }
.p45-preview[data-scale="115"] { font-size: 16.1px; }
.p45-preview[data-scale="130"] { font-size: 18.2px; }

.p45-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; cursor: pointer; }
.p45-toggle strong { display: block; font-size: 14px; }
.p45-toggle small { color: var(--muted); font-size: 12px; }
.p45-toggle input { position: absolute; left: 0; top: 0; opacity: 0; width: 1px; height: 1px; }
.p45-toggle i { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; background: var(--line); transition: background-color .18s ease; }
.p45-toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); transition: transform .18s ease; }
.p45-toggle input:checked + i { background: var(--green); }
.p45-toggle input:checked + i::after { transform: translateX(18px); }
.p45-toggle input:focus-visible + i { outline: 3px solid var(--gold); outline-offset: 2px; }

.p45-pin-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: pin; }
.p45-pin-list li { display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.p45-pin-list li strong { flex: 1; font-size: 13px; }
.p45-pin-list .icon-button { width: 32px; height: 32px; }
.p45-pin-list .icon-button:disabled { opacity: .35; }

.p45-profile-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 6px 0 4px; }
.p45-profile-links button {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-align: left;
  transition: border-color .16s ease, transform .12s ease;
}
.p45-profile-links button:hover { border-color: var(--gold); transform: translateY(-1px); }
.p45-profile-links span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--navy-900); color: var(--gold); font-size: 13px; font-weight: 800; }

.p45-devices { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.p45-devices li { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.p45-devices li.current { border-color: color-mix(in srgb, var(--green) 55%, var(--line)); background: color-mix(in srgb, var(--green) 6%, var(--paper)); }
.p45-devices li > div { flex: 1; min-width: 0; }
.p45-devices strong { font-size: 14px; }
.p45-devices small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.p45-device-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--cream); font-size: 20px; }
.p45-chip { margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-size: 11px; font-style: normal; font-weight: 800; }
.p45-danger { color: var(--red) !important; border-color: color-mix(in srgb, var(--red) 40%, var(--line)) !important; }
.p45-danger:hover { background: var(--red-soft) !important; }
.p45-skeleton { display: grid; gap: 10px; }
.p45-skeleton i { display: block; height: 62px; border-radius: 14px; background: linear-gradient(90deg, var(--cream), var(--line), var(--cream)); background-size: 200% 100%; animation: p45-shimmer 1.2s linear infinite; }

.p45-whatsnew { padding: 0 0 18px; gap: 0; }
.p45-whatsnew-hero {
  position: relative; padding: 26px 24px 22px; color: #fff;
  background: radial-gradient(circle at 92% -20%, rgba(240, 180, 41, .45), transparent 52%), linear-gradient(140deg, var(--navy-950), var(--navy-800));
}
.p45-whatsnew-hero h2 { color: #fff; font-size: 26px; }
.p45-whatsnew-hero .icon-button { position: absolute; top: 14px; right: 14px; color: #fff; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); }
.p45-news { display: grid; gap: 4px; margin: 0; padding: 14px 18px 4px; list-style: none; }
.p45-news li { display: flex; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--line); animation: p45-rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(120ms + var(--i, 0) * 70ms); }
.p45-news li:last-child { border-bottom: 0; }
.p45-news li > span { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 20%, var(--paper)); color: var(--gold-text); font-weight: 800; }
.p45-news strong { font-size: 14px; }
.p45-news p { margin: 3px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.p45-whatsnew .modal-actions { padding: 6px 22px 0; }

.p45-keys { display: grid; gap: 2px; margin: 0; }
.p45-keys div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.p45-keys dt span { color: var(--muted); font-size: 11px; }
.p45-keys dd { margin: 0; color: var(--muted); font-size: 13px; }
kbd { display: inline-block; min-width: 24px; padding: 2px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--paper); color: var(--ink); font: 700 12px/1.4 inherit; font-family: inherit; text-align: center; }

@keyframes p45-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes p45-shimmer { to { background-position: -200% 0; } }

@media (max-width: 560px) {
  .p45-body { padding: 18px 16px 16px; }
  .p45-profile-links { grid-template-columns: 1fr; }
  .p45-devices li { flex-wrap: wrap; }
  .p45-devices li .secondary-button { width: 100%; }
  .p45-pinned-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .p45-pinned { padding: 14px; }
  .p45-pinned-open { flex-direction: row; align-items: center; min-height: 60px; padding: 10px; gap: 10px; font-size: 12.5px; }
  .p45-pinned-icon { flex: none; width: 32px; height: 32px; font-size: 15px; }
}

/* ------------------------------------------------------------ Phase 45 assurance fixes (platform crawl, phone width) */
/* The title column must be allowed to shrink, or a long workspace title pushed the account button off a 390px phone. */
.topbar > div:nth-child(2), .topbar > div:has(#pageTitle) { min-width: 0; }
/* Workspaces are single-column grids; an "auto" column grew to the widest unbreakable child (a tab strip, a date
   field) and widened the whole Command Centre, Ambassador Network and Reading Analytics pages on phones by up to
   724px. The column is now minmax(0, 1fr) at the source (reformation.css, phase41.css); this keeps nested grids honest. */
.rf-workspace > *, .p41-filters > * { min-width: 0; }