/* PD Manager — house style.
   Shares PC Site Manager's structural design language (brand chip, phase-led
   top nav, left phase rail, calm cards) but keeps PD Manager's blue identity
   so the two sibling apps read as one family yet stay distinguishable. */
:root {
  --brand: #1c4e80;
  --brand-dark: #143a61;
  --accent: #2f7fc0;
  --accent-soft: #e7f0f9;
  --ink: #233748;
  --muted: #5d6f7e;
  --line: #e1e8f0;
  --line-strong: #cdd8e4;
  --bg: #eef2f7;
  --card: #ffffff;
  --red: #c0392b;
  --amber: #d98324;
  --green: #2e9e5b;
  --red-soft: #fbe9e7;
  --amber-soft: #fcf1e2;
  --green-soft: #e8f6ee;
  --radius: 9px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(20, 40, 70, .06), 0 1px 8px rgba(20, 40, 70, .05);
  --topbar-height: 60px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
}

a { color: var(--brand); }
a:hover { color: var(--accent); }

h1 {
  color: var(--brand-dark);
  font-size: 1.55rem;
  font-weight: 650;
  margin: 4px 0 4px;
  letter-spacing: -.01em;
}
h2 {
  color: var(--brand);
  font-size: 1.02rem;
  font-weight: 640;
  margin: 26px 0 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
h3 {
  color: var(--muted);
  font-size: .82rem;
  font-weight: 640;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 14px 0 4px;
}

/* ------------------------------------------------------------- top bar */
.topbar {
  background: var(--brand-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .15);
}
.topbar-inner {
  padding: 9px 20px;
  display: flex;
  flex-wrap: wrap;
  row-gap: 8px;
  justify-content: space-between;
  align-items: center;
}
.topbar-left { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.08rem;
  white-space: nowrap;
}
.brand-logo-chip {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 3px 7px;
  line-height: 0;
}
.brand-logo-chip img { display: block; height: 26px; width: auto; }
.brand-name { opacity: .96; }

.topbar-nav-rows { display: flex; flex-direction: column; gap: 5px; }
.topbar-nav { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }

.nav-button {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .76rem;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .26);
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
  cursor: pointer;
}
.nav-button:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.nav-button.active { background: #fff; color: var(--brand-dark); border-color: #fff; }

/* Second row = supporting registers, in soft blue so they read as distinct
   from the lifecycle stages above them. */
.nav-button-secondary {
  background: var(--accent-soft);
  border-color: #bcd6ee;
  color: var(--brand-dark);
}
.nav-button-secondary:hover { background: #d6e6f5; color: var(--brand-dark); }
.nav-button-secondary.active { background: #fff; color: var(--brand-dark); border-color: #fff; }

.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown-toggle { cursor: pointer; user-select: none; }
.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 9px 6px 6px;
  background: #fff;
  background-clip: padding-box;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  flex-direction: column;
  min-width: 180px;
  z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu { display: flex; }
.nav-dropdown-menu a {
  color: var(--brand-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: .86rem;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.nav-dropdown-menu a:hover { background: var(--accent-soft); }

.topbar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.user-email {
  opacity: .88;
  font-size: .82rem;
  color: #eaf1f8;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------- page layout */
.container {
  max-width: 100%;
  margin: 0 auto;
  padding: 26px 26px 56px;
}
.app-layout { display: flex; align-items: flex-start; gap: 26px; }
.app-main { flex: 1; min-width: 0; }

/* ------------------------------------------------------- phase sidebar */
.phase-sidebar {
  flex: 0 0 244px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: sticky;
  top: calc(var(--topbar-height) + 34px);
  max-height: calc(100vh - var(--topbar-height) - 48px);
  overflow-y: auto;
}
.sidebar-project { padding: 2px 4px 6px; }
.sidebar-project-name {
  display: block;
  font-weight: 680;
  font-size: 1rem;
  color: var(--brand-dark);
  line-height: 1.25;
}
.sidebar-project-meta { display: block; font-size: .74rem; color: var(--muted); margin-top: 2px; }
.sidebar-lock { color: var(--amber); font-weight: 700; }
.sidebar-heading {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 700;
  margin: 6px 4px 2px;
}
.phase-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 550;
  transition: border-color .15s ease, background .15s ease;
}
.phase-tab:hover { border-color: var(--accent); color: var(--brand-dark); }
.phase-tab.active { background: var(--brand); color: #fff; border-color: var(--brand); box-shadow: var(--shadow); }
.phase-tab.phase-tab-complete:not(.active) { border-color: var(--green); }
.phase-tab.locked { opacity: .6; cursor: default; background: #eef1f5; }
.phase-tab-label { display: flex; align-items: center; gap: 7px; line-height: 1.25; }
.phase-progress { font-size: .74rem; font-weight: 600; opacity: .8; white-space: nowrap; }
.phase-mark { display: inline-flex; width: 14px; justify-content: center; font-size: .8rem; }
.phase-mark.done { color: var(--green); }
.phase-tab.active .phase-mark.done { color: #cfe3f5; }
.phase-mark.now { width: 8px; height: 8px; background: currentColor; border-radius: 50%; opacity: .9; }

@media (max-width: 900px) {
  .app-layout { flex-direction: column; }
  .phase-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
    max-height: none;
    width: 100%;
  }
  .sidebar-project, .sidebar-heading { width: 100%; }
  .phase-tab { flex: 1 1 auto; }
}

/* -------------------------------------------------------------- cards */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 14px 0;
  box-shadow: var(--shadow);
}

/* ------------------------------------------------------------- tables */
table.list { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.list th {
  background: #f4f7fb;
  color: var(--muted);
  text-align: left;
  padding: 9px 11px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 1px solid var(--line-strong);
}
table.list td { border-bottom: 1px solid var(--line); padding: 9px 11px; vertical-align: top; }
table.list tr:last-child td { border-bottom: none; }
table.list tbody tr:hover td { background: #f8fbff; }
table.list.small th, table.list.small td { font-size: .8rem; padding: 6px 8px; }
table.grid td, table.grid th { text-align: center; }
table.grid { border-collapse: collapse; }
table.grid td, table.grid th { border: 1px solid var(--line); padding: 6px 8px; }

.cell-pre { background: #d7e8f7; } .cell-con { background: #f7e2c6; }
.row-done { background: var(--green-soft); } .row-na { background: #f1f4f7; color: #7a8894; }

/* --------------------------------------------------------- stat tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; margin: 16px 0; }
.tile {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 13px 15px;
  text-decoration: none;
  color: var(--ink);
  display: block;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tile:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(20, 40, 70, .1); }
.tile b { display: block; font-size: 1.7rem; font-weight: 680; color: var(--brand); line-height: 1.1; }
.tile span { font-size: .74rem; color: var(--muted); }
.tile-red { border-left-color: var(--red); } .tile-red b { color: var(--red); }
.tile-amber { border-left-color: var(--amber); } .tile-amber b { color: var(--amber); }
.tile-green { border-left-color: var(--green); } .tile-green b { color: var(--green); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- accents */
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.mono { font-family: Consolas, "SF Mono", monospace; font-size: .85em; }
.red { color: var(--red); } .amber { color: var(--amber); } .green { color: var(--green); }
.ok { color: var(--green); font-weight: 600; }
.error { color: var(--red); font-weight: 600; }
.lock { color: var(--amber); }

.warnbar {
  background: var(--amber-soft);
  border: 1px solid #f0d3a6;
  border-left: 4px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin: 12px 0;
}

/* -------------------------------------------------------------- chips */
.chip {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid #cadcee;
  color: var(--brand);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 600;
  padding: 2px 9px;
  margin-left: 4px;
  vertical-align: middle;
}
.chip-answered { background: var(--green-soft); color: var(--green); border-color: #bfe4cd; }
.chip-na { background: #f1f4f7; color: #7a8894; border-color: var(--line-strong); }
.chip-unknown, .chip-blank { background: var(--amber-soft); color: var(--amber); border-color: #f0d3a6; }

/* -------------------------------------------------------------- forms */
form.inline-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0; }
form.stack-form { display: flex; flex-direction: column; gap: 9px; margin: 8px 0; max-width: 640px; }
form .row { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }

input, select, textarea {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 127, 192, .16);
}
input.mini, select.mini { font-size: .78rem; padding: 3px 5px; max-width: 120px; }
textarea { width: 100%; }
label { display: block; font-size: .84rem; color: var(--ink); font-weight: 550; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; font-weight: 500; }

button {
  font: inherit;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease;
}
button:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
button.danger { background: var(--red); border-color: var(--red); }
button.danger:hover { background: #9c2c20; border-color: #9c2c20; }
button.mini { padding: 3px 9px; font-size: .78rem; }

/* --------------------------------------------------------- auth screens */
.authbox {
  max-width: 420px;
  margin: 64px auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px;
  box-shadow: var(--shadow);
}
.authbox input { width: 100%; margin: 4px 0 12px; }
.authbox button { width: 100%; }

/* --------------------------------------------------------- misc content */
.question { border-top: 1px solid var(--line); padding: 12px 0; }
.help { color: var(--muted); font-size: .82rem; margin: 2px 0 8px; }
ol.next { margin: 6px 0; padding-left: 20px; }
ol.next li { margin: 7px 0; }
details summary { cursor: pointer; color: var(--brand); font-size: .84rem; margin: 8px 0; font-weight: 600; }

/* Front-door "what next" panel on the dashboard. */
.nextpanel {
  background: linear-gradient(180deg, #fff, #f7fbff);
  border: 1px solid #d3e2f2;
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 14px 0 4px;
  box-shadow: var(--shadow);
}
.nextpanel h2 { margin-top: 4px; }

.foot, .app-footer {
  max-width: 100%;
  margin: 28px auto 18px;
  padding: 14px 24px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .78rem;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.app-footer-sep { opacity: .5; }

/* ---------------------------------------------------- drag & drop upload */
.dropzone {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  background: #fafcfe;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone.dropzone-active {
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}
.dropzone-hint { font-size: .72rem; color: var(--muted); }
.dropzone.dropzone-active .dropzone-hint { color: var(--brand); }
input[type="file"] { font-size: .8rem; max-width: 200px; }
input[type="file"].mini { font-size: .74rem; max-width: 150px; }

/* ------------------------------------------------ role preview (admin) */
.role-switcher { display: inline-flex; margin: 0; }
.role-switcher select {
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, .3);
  background: #fff;
  color: var(--brand-dark);
  font-weight: 600;
  font-size: .78rem;
  cursor: pointer;
}
.preview-bar {
  background: var(--amber-soft);
  border-bottom: 1px solid #f0d3a6;
  color: #7a5900;
  font-size: .82rem;
  padding: 7px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.preview-bar button { background: #7a5900; border-color: #7a5900; }
.preview-bar button:hover { background: #5e4500; border-color: #5e4500; }

/* Small context strip (e.g. "Phase 3 of 6 · show all") above a filtered list. */
.section-context {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 2px 0 6px;
  font-size: .82rem;
  color: var(--muted);
}

/* --------------------------------------------- checklist item cards */
/* Each checklist item (duty, survey, H&S File item) is its own bounded card
   with a dark-blue header bar, so it's always obvious where one box starts and
   the next begins. */
.phase-section { margin: 0 0 30px; }
.item-card {
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  margin: 0 0 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.item-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  background: var(--brand-dark);
  color: #fff;
  padding: 10px 16px;
}
.item-head strong { color: #fff; font-size: .98rem; font-weight: 600; }
.item-head .doc-number {
  display: inline-block;
  background: #fff;
  color: var(--brand-dark);
  border-radius: var(--radius-sm);
  padding: 2px 9px;
  font-weight: 700;
  font-size: .82rem;
}
.head-chip {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 600;
  padding: 1px 9px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.head-status {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 600;
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 2px 11px;
}
.item-body { padding: 14px 16px; }
.item-evidence { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-strong); }
/* Labelled multi-field editor inside an item card (e.g. DRM2 survey rows). */
.field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 14px;
  align-items: end;
  margin: 4px 0 2px;
}
.field-grid label { font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.field-grid input, .field-grid select { width: 100%; margin-top: 3px; }
.field-grid .field-actions { grid-column: 1 / -1; }

/* F10 notifiability calculator (dashboard). */
.f10-calc .field-grid { margin-bottom: 12px; }
.f10-result { border-radius: var(--radius-sm); padding: 10px 13px; font-size: .86rem; line-height: 1.45; }
.f10-result.f10-notifiable { background: var(--amber-soft); border: 1px solid #f0d3a6; color: #7a5900; }
.f10-result.f10-not { background: var(--green-soft); border: 1px solid #bfe4cd; color: #1f6b3a; }
/* Status tint on the body + a coloured edge, header stays brand blue. */
.item-card.row-done { border-color: var(--green); }
.item-card.row-done .item-body { background: var(--green-soft); }
.item-card.row-done .head-status { background: var(--green); }
.item-card.row-na { border-color: #b8c2cd; }
.item-card.row-na .item-body { background: #f1f4f7; }
.evidence-label {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
}
.evidence { max-width: 100%; }
.evidence-table { margin: 4px 0 10px; background: #fff; }
.evidence-table th { background: #eaf0f7; }
.no-evidence { margin: 2px 0 8px; }
.linkbtn {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  padding: 3px 9px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand);
  text-decoration: none;
}
.linkbtn:hover { background: var(--accent-soft); color: var(--brand-dark); }
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  text-decoration: underline;
  font-size: inherit;
  cursor: pointer;
}
.link-button:hover { background: none; color: var(--accent); }

/* ----------------------------------------------------- doc preview modal */
.doc-preview-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 50, .62);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.doc-preview-overlay.open { display: flex; }
.doc-preview-panel {
  background: #fff;
  border-radius: var(--radius);
  width: 92vw;
  height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 10px 44px rgba(0, 0, 0, .45);
}
.doc-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--brand-dark);
}
.doc-preview-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  background: #f6f8fb;
}
.doc-preview-body iframe { width: 100%; height: 100%; border: none; background: #fff; }
.doc-preview-body img { max-width: 100%; max-height: 100%; object-fit: contain; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .app-layout { display: block; }
}

/* ==== THE CLARITY BAR (v0.96.0) ==========================================
   Shared by Clarity Planner, Clarity Resource and Clarity PC Site Manager -
   copy this block, do not redraw it (0000-Software/CLARITY BANNER AND HELP.md).
   One dark for every product and every customer; Green 2 marks where you are
   and that a new version is ready. */
:root {
  --cbar-bg: #17231C; --cbar-ink: #FFFFFF; --cbar-ink-soft: rgba(255, 255, 255, 0.74);
  --cbar-accent: #49A91D; --cbar-deep: #096126; --crow-rule: #D7DED9;
}
.cbar { display: flex; align-items: center; gap: 1.4rem; height: 56px; padding: 0 1.1rem; background: var(--cbar-bg); color: var(--cbar-ink);
  font-family: inherit; position: relative; z-index: 20; }
.cbar-prod { display: inline-flex; align-items: center; gap: 0.6rem; flex: none; color: var(--cbar-ink); text-decoration: none; }
.cbar-prod img { width: 30px; height: 30px; display: block; }
.cbar-prod span { font-size: 17px; font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; }
.cbar-prod b { font-weight: 700; }
.cbar-tabs { display: flex; gap: 0.15rem; align-self: stretch; }
.cbar-tabs a, .cbar-menu nav a { display: inline-flex; align-items: center; padding: 0 0.75rem; color: var(--cbar-ink-soft); font-size: 14.5px; font-weight: 600;
  text-decoration: none; border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.cbar-tabs a:hover, .cbar-tabs a:focus-visible { color: var(--cbar-ink); }
.cbar-tabs a[aria-current="page"] { color: var(--cbar-ink); border-bottom-color: var(--cbar-accent); }
.cbar-menu { display: none; position: relative; }
.cbar-menu > summary { list-style: none; cursor: pointer; color: var(--cbar-ink); font-weight: 600; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 6px; padding: 0.3rem 0.7rem; }
.cbar-menu > summary::-webkit-details-marker { display: none; }
.cbar-menu nav { position: absolute; left: 0; top: calc(100% + 0.5rem); min-width: 12rem; background: #fff; border: 1px solid var(--crow-rule); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(22, 32, 43, 0.16); display: flex; flex-direction: column; padding: 0.3rem 0; }
.cbar-menu nav a { color: #1f2a30; padding: 0.5rem 0.9rem; border: 0; border-left: 3px solid transparent; }
.cbar-menu nav a[aria-current="page"] { border-left-color: var(--cbar-accent); color: var(--cbar-deep); }
.cbar-side { margin-left: auto; display: flex; align-items: center; gap: 1rem; white-space: nowrap; min-width: 0; }
.cbar-chip { background: #fff; border-radius: 6px; padding: 4px 9px; display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; flex: none; }
.cbar-chip img { max-height: 24px; max-width: 140px; display: block; }
.cbar-chip-name { color: var(--cbar-bg); font-size: 13px; font-weight: 700; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 24px; }
.cbar-help, .cbar-ticket { color: var(--cbar-ink); font-weight: 600; text-decoration: none; }
.cbar-help:hover, .cbar-help:focus-visible, .cbar-ticket:hover, .cbar-ticket:focus-visible { text-decoration: underline; }
.cbar-who { color: var(--cbar-ink-soft); font-size: 14px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.cbar-out { font: inherit; font-weight: 600; font-size: 14px; color: var(--cbar-ink); background: transparent; border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px; padding: 0.3rem 0.7rem; cursor: pointer; }
.cbar-out:hover, .cbar-out:focus-visible { background: rgba(255, 255, 255, 0.12); }
.cbar a:focus-visible, .cbar button:focus-visible, .cbar summary:focus-visible { outline: 2px solid var(--cbar-accent); outline-offset: 2px; }
/* WHERE IT FOLDS - measured, and the same on every Clarity product
   (v0.96.01). The bar wants ~900px with four tabs, the chip, Help, the name
   and Sign out; at 700-780 it ran off the edge. So the name goes under
   1000px, the tabs fold into Menu under 820px, the chip and the product's
   name under 520px - the numbers Clarity Resource measured too. */
@media (max-width: 999px) { .cbar-who { display: none; } }
@media (max-width: 819px) {
  .cbar { height: 52px; gap: 0.8rem; padding: 0 0.75rem; }
  .cbar-tabs { display: none; }
  .cbar-menu { display: block; }
  .cbar-prod span { font-size: 15px; }
  .cbar-side { gap: 0.7rem; }
}
@media (max-width: 519px) { .cbar-chip, .cbar-prod span { display: none; } }
/* The row under the bar: Back first, in the shared button shape. */
.crow { min-height: 48px; box-sizing: border-box; }
.crow-back { font: inherit; font-size: 0.9rem; font-weight: 600; color: #1f2a30; background: #fff; border: 1px solid var(--crow-rule);
  border-radius: 6px; padding: 0.3rem 0.75rem; cursor: pointer; text-decoration: none; display: inline-block; white-space: nowrap; }
.crow-back:hover, .crow-back:focus-visible { border-color: var(--cbar-deep); color: var(--cbar-deep); }
/* The update strip: the same green and words on every product. */
.netbar-new { background: var(--cbar-accent); color: #fff; font-weight: 600; justify-content: center; border-bottom-color: var(--cbar-accent); }
.netbar-reload { font: inherit; font-weight: 600; background: #fff; color: var(--cbar-deep); border: 0; border-radius: 6px; padding: 0.2rem 0.8rem; cursor: pointer; }
/* ==== end of the Clarity bar ============================================= */

/* ---- Clarity PC's additions to the shared bar (v4.103.0) ------------------
   Paul, 2026-10-02: the thin Clarity strip goes ABOVE Clarity PC's existing
   header - "I'm comfortable with the top menu bar on Clarity PC. That's fine
   as it is." So the strip carries no tabs (the menus below it are the
   product's tabs) and never needs the Menu fold. */
.cbar-side form { margin: 0; display: inline; }
.cbar-help .notif-badge { margin-left: 4px; }
@media print { .cbar { display: none; } }

/* ==== THE CLARITY HELP (v0.97.0) =========================================
   The shared manual layout, the same as Clarity Resource's: an index of topic
   cards with a search box, then a topic page with the contents down the side
   (200px) and the article (up to 760px). 0000-Software/CLARITY BANNER AND HELP.md. */
.helpmain { display: block; padding: 0 1rem; }
.helpidx { max-width: 1000px; margin: 24px auto; padding: 22px 26px; background: #fff; border-radius: 10px; box-shadow: 0 1px 3px rgba(23, 35, 28, 0.08); }
.helpmast { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.helpmast img { flex: none; display: block; border-radius: 11px; }
.helpmast h1 { margin: 2px 0 0; font-size: 26px; }
.helpmast .eyebrow { font-family: inherit; font-size: 11px; letter-spacing: 0.12em; color: #8a93a0; margin: 0; }
.helpsearch { margin: 16px 0 6px; }
.helpsearch input { width: 100%; box-sizing: border-box; padding: 9px 12px; font: inherit; font-size: 14.5px; border: 1px solid #b8c0ca; border-radius: 8px; }
.helpsearch input:focus { outline: 2px solid var(--cbar-accent); outline-offset: 1px; }
.helpsearch p { margin: 6px 0 0; font-size: 12.5px; min-height: 1em; }
.helpnone { margin: 10px 0 0; }
.helpgroup { margin-top: 26px; }
.helpgroup > h2 { margin: 0; font-family: inherit; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a0; font-weight: 600; }
.helpgrid { display: grid; gap: 12px; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 699px) { .helpgrid { grid-template-columns: minmax(0, 1fr); } }
.helpcard { display: block; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--crow-rule); border-radius: 8px; padding: 12px 16px; }
.helpcard:hover, .helpcard:focus-visible { border-color: var(--cbar-accent); background: #FBFDFB; }
.helpcard strong { display: block; color: var(--cbar-deep); font-weight: 700; font-size: 15px; }
.helpcard span { display: block; color: #5a6672; font-size: 13.5px; margin-top: 2px; }
.helpmore { margin-top: 22px; font-size: 13.5px; color: #5a6672; }
.helpback { margin: 18px 0 0; font-weight: 600; }
.helpback a, .helpmore a { color: var(--cbar-deep); }
.helpwrap { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 28px; max-width: 1040px; margin: 24px auto; align-items: start; }
.helpcontents { position: sticky; top: 14px; font-size: 14px; }
.helpcontents > summary { display: none; }
.helpcontents-title { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a93a0; margin: 0 0 6px 10px; font-weight: 600; }
.helpcontents nav a { display: block; padding: 5px 10px; border-radius: 6px; color: #1c2430; text-decoration: none; }
.helpcontents nav a:hover { background: #F2F5F3; }
.helpcontents nav a[aria-current="page"] { background: #EEF2EF; color: var(--cbar-deep); font-weight: 700; }
.helparticle { background: #fff; border-radius: 10px; padding: 20px 26px; box-shadow: 0 1px 3px rgba(23, 35, 28, 0.08); min-width: 0; }
@media (max-width: 899px) {
  .helpwrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .helpcontents { position: static; background: #fff; border-radius: 10px; padding: 8px 14px; }
  .helpcontents > summary { display: list-item; cursor: pointer; font-weight: 700; color: var(--cbar-deep); }
  .helpcontents-title { display: none; }
}
.crumb { margin: 0 0 8px; font-size: 12.5px; color: #66707d; }
.crumb a { color: inherit; }
.inshort { background: #EEF2EF; border-left: 4px solid var(--cbar-accent); border-radius: 0 6px 6px 0; padding: 10px 14px; margin: 12px 0 6px; font-size: 14.5px; max-width: 760px; }
.inshort strong { color: var(--cbar-deep); margin-right: 6px; }
.helpbody { margin-top: 14px; }
.related { margin-top: 26px; padding-top: 12px; border-top: 1px solid #e2e7ed; font-size: 14px; color: #5a6672; }
.related a { color: var(--cbar-deep); font-weight: 600; }
.helpall-actions { display: flex; gap: 1rem; align-items: center; margin: 12px 0; }
.helpall .manual > h2 { margin-top: 2rem; padding-bottom: 5px; border-bottom: 1px solid #e2e7ed; }
@media print { .helpidx, .helparticle { box-shadow: none; padding: 0; } .helpcontents { display: none; } }
/* ==== end of the Clarity help ============================================ */

/* ---- Clarity PD's additions to the shared bar (v0.8.0) --------------------
   Like Clarity PC's strip: no tabs - Clarity PD's project menus stay in the
   (blue) row under it. Raise a ticket stays on the bar at every width (the
   no-tabs rule in CLARITY BANNER AND HELP.md section 2); Team and Account
   fold into Menu on a narrow screen. */
.cbar-name { display: inline-flex; flex-direction: column; line-height: 1.1; }
.cbar-by { font-size: 11px; color: var(--cbar-ink-soft); letter-spacing: 0.02em; }
.cbar-link { color: var(--cbar-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.cbar-link:hover, .cbar-link:focus-visible { text-decoration: underline; }
.cbar-side form { margin: 0; display: inline; }
.cbar-menu nav { left: auto; right: 0; }
.cbar-narrow { display: none; }
@media (max-width: 1099px) { .cbar-who { display: none; } }
@media (max-width: 819px) { .cbar-chip { display: none; } }
@media (max-width: 699px) {
  .cbar-wide { display: none; }
  .cbar-narrow { display: block; }
  .cbar { gap: 0.8rem; padding: 0 0.75rem; }
  .cbar-side { gap: 0.7rem; }
}
@media (max-width: 519px) { .cbar-name { display: none; } }
/* measured at 360px (v0.8.0): the bar ran 6px over - tighter spacing on the smallest phones */
@media (max-width: 399px) {
  .cbar { gap: 0.5rem; padding: 0 0.5rem; }
  .cbar-side { gap: 0.55rem; }
  .cbar-out, .cbar-menu > summary { padding: 0.25rem 0.5rem; }
}
@media print { .cbar { display: none; } }
/* the old brand chip is gone; the project menus sit under the strip */
.topbar { top: 0; }

/* ---- sign-in pages (v0.8.0) ---- */
.auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 18px; }
.auth-brand img { border-radius: 9px; display: block; }
.auth-by { margin: 18px 0 0; font-size: .78rem; color: var(--muted); text-align: center; }
.qr { display: flex; justify-content: center; margin: 12px 0; }
.qr svg { max-width: 100%; height: auto; }
.qr-manual { margin: 0 0 12px; font-size: .9rem; }
.secret { font-size: 1rem; letter-spacing: .04em; word-break: break-all; }
.codes { columns: 2; list-style: none; padding: 0; margin: 12px 0 18px; font-size: 1.02rem; }
.codes li { padding: 3px 0; }
/* bot check: the trap box, off screen (never an inline style - the CSP) */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.app-footer-company { flex-basis: 100%; font-size: .72rem; }
.mt-10 { margin-top: 10px; }
.mt-12 { margin-top: 12px; }

/* ---- opened from the Clarity account (v0.9.0) ---- */
.authbox .account-signin { display: block; text-align: center; background: var(--cbar-accent); color: #fff;
  border: 0; border-radius: 6px; padding: 10px 14px; font-weight: 700; text-decoration: none; margin: 4px 0 6px; }
.authbox .account-signin:hover, .authbox .account-signin:focus-visible { background: var(--cbar-deep); color: #fff; }
.account-state { margin: 0; border-radius: 0; text-align: center; }

/* ---- installable app (v0.10.0): Clarity Planner's install banner, pin tip and
   update strip, copied (CLARITY BANNER AND HELP.md - copy, do not redraw) ---- */
.netbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 1rem; font-size: 0.9rem; }
.netbar[hidden] { display: none; }
.pin-edge { display: none; }
.app-edge .pin-edge { display: block; }
.app-edge .pin-chrome { display: none; }
.install-pin-tip { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin: 0.75rem 1.5rem 0; }
.install-pin-tip p { margin: 0; }
.install-pin-tip[hidden], .install-banner[hidden], [data-install-variant][hidden] { display: none; }
/* ---------------------------------------------------------------------------
   Install as an app - the BANNER (v4.102.0). Paul, 2026-10-01: "a lot more
   visible, so it's clear what we're asking them to do and not part of the
   tables and badges". Full width above the page title, the strong Clarity
   green, white text, one big white button. Nothing else in the app looks like
   this, which is the point.
   --------------------------------------------------------------------------- */
.install-banner {
  position: relative;
  margin: 0 0 22px;
  padding: 20px 24px;
  border-radius: 14px;
  color: #fff;
  background: #1E8C2E;
  background: linear-gradient(100deg, #096126 0%, #1E8C2E 55%, #49A91D 100%);
  box-shadow: 0 6px 18px rgba(9, 97, 38, 0.28);
}
.install-banner-row {
  display: flex;
  gap: 22px;
  align-items: center;
  padding-right: 26px;
}
.install-banner-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  padding: 5px;
  border-radius: 19px;
  background: #fff;
  color: #096126;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}
.install-banner-icon img { display: block; width: 74px; height: 74px; }
.install-banner-icon .ui-icon { width: 40px; height: 40px; margin: 0; }
.install-banner-icon-done { border-radius: 50%; }
.install-banner-body { flex: 1; min-width: 0; }
.install-banner .install-banner-kicker {
  margin: 0 0 2px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.9;
}
.install-banner .install-banner-title {
  margin: 0 0 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.install-banner .install-banner-why { margin: 0; font-size: 1rem; opacity: 0.95; }
.install-banner a { color: #fff; }
.install-banner-actions {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.install-banner .install-banner-cta {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  padding: 14px 26px;
  border: none;
  border-radius: 10px;
  background: #fff;
  color: #096126;
  font-size: 1.12rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.18);
}
.install-banner .install-banner-cta:hover { background: #F0F8F2; }
.install-banner .install-banner-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.install-banner-cta svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.install-banner-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 0.92rem;
}
.install-banner .install-banner-links a,
.install-banner .install-banner-links .link-button {
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  font: inherit;
  text-decoration: underline;
}
.install-banner-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 30px;
  margin: 16px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  list-style: none;
  font-size: 0.95rem;
}
.install-banner-steps li { display: flex; gap: 9px; align-items: center; }
.install-banner-steps b {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  color: #096126;
  font-size: 0.85rem;
}
.install-banner .install-banner-close {
  position: absolute;
  top: 8px;
  right: 10px;
  padding: 2px 8px;
  border: none;
  background: none;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  opacity: 0.85;
}
.install-banner .install-banner-close:hover { opacity: 1; background: none; }
@media (max-width: 860px) {
  .install-banner-row { flex-wrap: wrap; padding-right: 0; }
  .install-banner-actions { width: 100%; }
}