/* Same palette/typography as the RiskKPI landing page (public/index.html)
   — ink/paper/ochre, editorial-industrial — so the app and the marketing
   site read as one product. Token names are unchanged (pl-primary etc.)
   so nothing elsewhere needs to change, just the values. Values from the
   2026-07 design handoff (design_handoff_landing_page/plimsoll-theme-tokens.css) —
   ochre #b8862a is the agreed brand accent; rust red #a83a2c is reserved
   as a semantic "risk" color in the landing page and not reused generally
   here, so pl-danger uses a related but distinct tone. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500&display=swap');

:root {
  --color-bg: #f1ede4;
  --color-bg-white: #ffffff;
  --color-text: #14181f;
  --color-text-muted: #5b6472;
  --color-divider: #e2ddd1;
  --pl-primary: #b8862a;
  --pl-primary-dark: #93691f;
  --pl-primary-light: #f3e9d4;
  --pl-danger: #a83a2c;
  --pl-danger-light: #f6e6e3;
  --pl-success: #3f6b4a;
  --pl-success-light: #e6efe8;
  --pl-warn: #93691f;
  --pl-warn-light: #f3e9d4;
}

:root[data-theme="dark"] {
  --color-bg: #14181f;
  --color-bg-white: #1c222c;
  --color-text: #faf8f4;
  --color-text-muted: #aab2c0;
  --color-divider: #2c333f;
  --pl-primary: #d1a44c;
  --pl-primary-dark: #b8862a;
  --pl-primary-light: #362c17;
  --pl-danger: #d17b6c;
  --pl-danger-light: #3a231f;
  --pl-success: #7fae8c;
  --pl-success-light: #1e2f22;
  --pl-warn: #d1a44c;
  --pl-warn-light: #362c17;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #14181f;
    --color-bg-white: #1c222c;
    --color-text: #faf8f4;
    --color-text-muted: #aab2c0;
    --color-divider: #2c333f;
    --pl-primary: #d1a44c;
    --pl-primary-dark: #b8862a;
    --pl-primary-light: #362c17;
    --pl-danger: #d17b6c;
    --pl-danger-light: #3a231f;
    --pl-success: #7fae8c;
    --pl-success-light: #1e2f22;
    --pl-warn: #d1a44c;
    --pl-warn-light: #362c17;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
}
a { color: var(--pl-primary); }

html, body { height: 100%; }
.pl-app { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.pl-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--color-bg-white); border-bottom: 1px solid var(--color-divider);
  flex: 0 0 auto; position: relative; z-index: 62; /* stays above the drawer sidebar/backdrop below */
}
.pl-topbar .pl-topbar-left { display: flex; align-items: center; gap: 10px; }
.pl-topbar .pl-topbar-brand { font-size: 16px; font-weight: 700; color: var(--pl-primary); display: flex; align-items: center; }
.pl-topbar .pl-topbar-logo { max-height: 28px; max-width: 160px; object-fit: contain; }
.pl-topbar .pl-topbar-right { display: flex; align-items: center; gap: 10px; font-size: 13px; flex-wrap: wrap; justify-content: flex-end; }
/* Trigger for nav.js's profile modal (name/last-login/change-password/sign
   out) — replaces what used to be separate topbar buttons. */
.pl-topbar .pl-topbar-user {
  text-align: right; line-height: 1.3; background: none; border: none; cursor: pointer;
  padding: 4px 6px; border-radius: 6px; color: inherit; font: inherit;
}
.pl-topbar .pl-topbar-user:hover { background: var(--pl-primary-light); }
.pl-topbar .pl-topbar-user .pl-muted { font-size: 11px; }
.pl-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--color-divider);
  background: var(--color-bg-white); color: var(--color-text); text-decoration: none; font-size: 14px;
}
.pl-icon-btn:hover { color: var(--pl-primary); border-color: var(--pl-primary); }

.pl-reminder-wrap { position: relative; }
.pl-reminder-count {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--pl-danger); color: #fff; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.pl-reminder-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-height: 420px; overflow-y: auto;
  background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15); z-index: 70; padding: 6px;
}
.pl-reminder-item { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: inherit; }
.pl-reminder-item:hover { background: var(--pl-primary-light); }
.pl-reminder-item + .pl-reminder-item { margin-top: 2px; }

.pl-search-wrap { margin-left: 12px; }
.pl-search-input { width: 220px; }
.pl-search-wrap .pl-reminder-panel { left: 0; right: auto; }

/* Hamburger toggle: hidden on desktop, shown only at the mobile breakpoint below. */
.pl-nav-toggle {
  display: none; border: 1px solid var(--color-divider); background: var(--color-bg-white);
  border-radius: 6px; padding: 6px 10px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--color-text);
}

.pl-body { display: flex; flex: 1; min-height: 0; }
.pl-sidebar {
  flex: 0 0 220px;
  background: var(--color-bg-white);
  border-right: 1px solid var(--color-divider);
  padding: 16px 0;
  overflow-y: auto;
}
.pl-sidebar a {
  display: block; padding: 10px 20px; font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); text-decoration: none;
}
.pl-sidebar a.active, .pl-sidebar a:hover { color: var(--pl-primary); background: var(--pl-primary-light); }
.pl-sidebar-backdrop { display: none; }

/* Expandable sidebar groups (Checklists/Admin) — collapsed by default,
   auto-open only when the current page is inside that group. Sub-links
   reuse .pl-sidebar a's styling but are indented and slightly smaller. */
.pl-sidebar-group-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 10px 20px; font-size: 13px; font-weight: 600; text-align: left;
  color: var(--color-text-muted); background: none; border: none; cursor: pointer;
}
.pl-sidebar-group-toggle:hover { color: var(--pl-primary); }
.pl-sidebar-group-chevron { transition: transform 0.15s ease; font-size: 11px; }
.pl-sidebar-group-toggle.open .pl-sidebar-group-chevron { transform: rotate(180deg); }
.pl-sidebar-group-body { display: none; }
.pl-sidebar-group-body.open { display: block; }
.pl-sidebar-group-body a { padding-left: 36px; font-size: 12.5px; font-weight: 500; }

/* .pl-main is the one scroll container in the whole app shell — the
   topbar and left nav sidebar are pinned by .pl-app's fixed viewport
   height above, so only page content (and, via .pl-answer-nav's own
   sticky positioning below, everything except the element list) scrolls. */
.pl-main { flex: 1; min-width: 0; padding: 28px 32px; overflow-y: auto; }
.pl-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.pl-page-header h1 { font-size: 20px; font-weight: 700; margin: 0; }
.pl-page-header p { font-size: 13px; color: var(--color-text-muted); margin: 4px 0 0; }

.pl-progress { width: 220px; height: 6px; border-radius: 4px; background: var(--color-divider); margin-top: 8px; overflow: hidden; }
.pl-progress-bar { height: 100%; background: var(--pl-primary); border-radius: 4px; transition: width 0.3s ease; }
.pl-progress-sm { width: 120px; height: 4px; margin-top: 5px; }

/* ── Analytics: stat strip, ranked bar rows, donut ────────────────────
   Ported from the pattern used on this author's other *-analytics.html
   pages, re-expressed against plimsoll.css's own --pl-* tokens instead
   of introducing a second color system. Charts here are hand-built
   inline SVG/HTML (not a canvas library) specifically so they inherit
   var(--pl-*) directly and repaint for free on the light/dark toggle —
   a canvas chart would need every color resolved to a literal string
   up front and manually redrawn on theme change. */
.pl-stat-strip { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.pl-stat-tile { flex: 1; min-width: 140px; background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px; padding: 14px 16px; }
.pl-stat-tile .sv { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; }
.pl-stat-tile .sl { font-size: 10.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }

.pl-section-lbl { font-size: 15px; font-weight: 700; margin: 24px 0 4px; }
.pl-section-sub { font-size: 12.5px; color: var(--color-text-muted); margin-bottom: 12px; max-width: 760px; line-height: 1.5; }

.pl-rank-rows { display: flex; flex-direction: column; gap: 2px; }
.pl-rank-row { display: grid; grid-template-columns: 170px 1fr 56px; align-items: center; gap: 10px; padding: 7px 4px; border-radius: 8px; }
.pl-rank-row > div { min-width: 0; }
.pl-rank-row .rname { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-rank-row .rmeta { font-size: 10.5px; color: var(--color-text-muted); display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-bar-track { position: relative; height: 16px; background: var(--color-bg); border-radius: 5px; }
.pl-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; transition: width 0.4s ease; }
.pl-bar-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-text-muted); opacity: 0.5; }
.pl-rank-row .rval { font-size: 12.5px; font-weight: 800; text-align: right; }

.pl-status-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 2px 6px; border-radius: 8px; }
.pl-status-badge.good { color: var(--pl-success); background: var(--pl-success-light); }
.pl-status-badge.warn { color: var(--pl-warn); background: var(--pl-warn-light); }
.pl-status-badge.crit { color: var(--pl-danger); background: var(--pl-danger-light); }

.pl-chart-wrap { position: relative; }
.pl-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--color-text-muted); margin-top: 8px; }
.pl-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.pl-chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }

.pl-donut-wrap { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.pl-donut-center-v { font-size: 22px; font-weight: 800; }
.pl-donut-center-l { font-size: 10px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.pl-donut-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 160px; }
.pl-leg-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pl-leg-swatch { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.pl-leg-name { flex: 1; font-weight: 600; }
.pl-leg-pct { color: var(--color-text-muted); font-size: 11px; }

.pl-dumbbell-row { margin-bottom: 10px; }
.pl-dumbbell-label { font-size: 12.5px; font-weight: 600; margin-bottom: 4px; }
.pl-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .pl-two-col { grid-template-columns: 1fr; } }

.pl-card { background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px; overflow-x: auto; }
.pl-card-pad { padding: 20px; }

/* Clients page — each client row expands inline to show its own vessels/companies. */
.pl-client-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; cursor: pointer; flex-wrap: wrap; }
.pl-client-header:hover { background: var(--pl-primary-light); }
.pl-client-name { font-weight: 700; font-size: 14px; }
.pl-client-actions { display: flex; align-items: center; gap: 10px; }
.pl-client-chevron { display: inline-block; transition: transform 0.15s ease; font-size: 11px; color: var(--color-text-muted); }
.pl-client-chevron.open { transform: rotate(180deg); }
.pl-client-body { display: none; border-top: 1px solid var(--color-divider); }
.pl-client-body.open { display: block; }
.pl-client-body table.pl-table { border: none; }

table.pl-table { width: 100%; border-collapse: collapse; }
table.pl-table th { text-align: left; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; padding: 10px 16px; border-bottom: 2px solid var(--color-divider); }
table.pl-table td { padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--color-divider); }
table.pl-table tr:last-child td { border-bottom: none; }
table.pl-table tr.clickable { cursor: pointer; }
table.pl-table tr.clickable:hover { background: var(--pl-primary-light); }

.pl-field { margin-bottom: 14px; }
.pl-field label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 4px; }
.pl-input, .pl-select, .pl-textarea {
  width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--color-divider);
  border-radius: 6px; background: var(--color-bg-white); color: var(--color-text); font-family: inherit;
}
.pl-textarea { resize: vertical; min-height: 60px; }

.pl-password-wrap { position: relative; }
.pl-password-wrap .pl-input { padding-right: 34px; }
.pl-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; line-height: 1;
  padding: 6px; display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
}
.pl-password-toggle:hover { color: var(--pl-primary); }

.pl-btn {
  display: inline-block; padding: 8px 16px; font-size: 13px; font-weight: 600;
  border-radius: 6px; border: 1px solid var(--color-divider); background: var(--color-bg-white);
  color: var(--color-text); cursor: pointer; text-decoration: none;
}
.pl-btn:hover { background: var(--pl-primary-light); }
.pl-btn-primary { background: var(--pl-primary); border-color: var(--pl-primary); color: white; }
.pl-btn-primary:hover { background: var(--pl-primary-dark); }
.pl-btn-danger { color: var(--pl-danger); }
.pl-btn-sm { padding: 4px 10px; font-size: 12px; }

.pl-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.pl-badge-open { background: var(--pl-warn-light); color: var(--pl-warn); }
.pl-badge-submitted { background: var(--pl-primary-light); color: var(--pl-primary-dark); }
.pl-badge-closed { background: var(--color-divider); color: var(--color-text-muted); }
.pl-badge-accepted { background: var(--pl-success-light); color: var(--pl-success); }
.pl-badge-needs_revision { background: var(--pl-danger-light); color: var(--pl-danger); }
.pl-badge-pending { background: var(--color-divider); color: var(--color-text-muted); }
.pl-badge-critical { background: var(--pl-danger-light); color: var(--pl-danger); }
.pl-badge-requires_attention { background: var(--pl-warn-light); color: var(--pl-warn); }
.pl-badge-minor { background: var(--color-divider); color: var(--color-text-muted); }
.pl-badge-draft { background: var(--pl-warn-light); color: var(--pl-warn); }
.pl-badge-under_review { background: var(--pl-primary-light); color: var(--pl-primary-dark); }
.pl-badge-final { background: var(--pl-success-light); color: var(--pl-success); }
.pl-badge-in_progress { background: var(--pl-primary-light); color: var(--pl-primary-dark); }
.pl-badge-resolved { background: var(--pl-success-light); color: var(--pl-success); }

.pl-report-narrative { font-size: 13px; line-height: 1.6; white-space: pre-line; }
.pl-report-narrative textarea { width: 100%; min-height: 260px; font-family: inherit; font-size: 13px; line-height: 1.6; }
.pl-finding { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.pl-finding:last-child { border-bottom: none; }

.pl-alert { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.pl-alert-danger { background: var(--pl-danger-light); color: var(--pl-danger); }
.pl-alert-success { background: var(--pl-success-light); color: var(--pl-success); }
.pl-alert-info { background: var(--pl-primary-light); color: var(--pl-primary-dark); }

.pl-impersonation-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  background: var(--pl-warn-light); color: var(--pl-warn);
  position: relative; z-index: 51; /* above .pl-modal-backdrop's 50 — exiting impersonation must never be blockable by a modal */
}

.pl-empty { text-align: center; color: var(--color-text-muted); font-size: 13px; padding: 40px; }
.pl-muted { color: var(--color-text-muted); }

.pl-loading-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: var(--pl-primary); opacity: 0; transition: width 0.2s ease, opacity 0.15s ease;
}
.pl-loading-bar.active { width: 70%; opacity: 1; transition: width 4s cubic-bezier(0.1, 0.6, 0.2, 1), opacity 0.15s ease; }

.pl-toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
.pl-toast {
  background: var(--color-text); color: var(--color-bg-white); padding: 10px 16px;
  border-radius: 8px; font-size: 13px; box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  opacity: 0; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease;
  max-width: 320px;
}
.pl-toast.show { opacity: 1; transform: translateY(0); }
.pl-toast-error { background: var(--pl-danger); color: white; }
.pl-toast-success { background: var(--pl-success); color: white; }

.pl-answer-layout { display: flex; gap: 20px; align-items: flex-start; }
.pl-answer-nav { flex: 0 0 260px; background: var(--color-bg-white); border: 1px solid var(--color-divider); border-radius: 10px; position: sticky; top: 0; max-height: calc(100vh - 120px); overflow-y: auto; }
.pl-answer-nav .pl-el-head { padding: 10px 16px; font-size: 11px; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.pl-answer-nav .pl-el-item { padding: 8px 16px; font-size: 12px; cursor: pointer; }
.pl-answer-nav .pl-el-item.active { background: var(--pl-primary-light); color: var(--pl-primary-dark); font-weight: 600; }
.pl-answer-main { flex: 1; min-width: 0; }

.pl-question { padding: 16px 0; border-bottom: 1px solid var(--color-divider); }
.pl-question:last-child { border-bottom: none; }
.pl-question .q-text { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.pl-question .q-guidance { font-size: 12px; color: var(--color-text-muted); margin-bottom: 10px; }
.pl-question .q-guidance summary { cursor: pointer; color: var(--pl-primary); font-weight: 600; }

.pl-stage-picker { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.pl-stage-btn { padding: 6px 14px; border-radius: 6px; border: 1px solid var(--color-divider); background: var(--color-bg-white); font-size: 12px; font-weight: 700; cursor: pointer; }
.pl-stage-btn.selected { background: var(--pl-primary); color: white; border-color: var(--pl-primary); }
.pl-stage-btn[disabled] { cursor: not-allowed; opacity: .6; }

.pl-yn-picker { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.pl-yn-btn { padding: 6px 18px; border-radius: 6px; border: 1px solid var(--color-divider); background: var(--color-bg-white); font-size: 12px; font-weight: 700; cursor: pointer; }
.pl-yn-btn.pl-yn-yes.selected { background: var(--pl-success); color: white; border-color: var(--pl-success); }
.pl-yn-btn.pl-yn-no.selected { background: var(--pl-danger); color: white; border-color: var(--pl-danger); }
.pl-yn-btn[disabled] { cursor: not-allowed; opacity: .6; }

/* Inspection checklist answer picker: Y/N/NA/NI (4 options, not yes/no) —
   reuses .pl-yn-btn's base look, adds its own selected-state colors. */
.pl-yn-btn.pl-yn-Y.selected { background: var(--pl-success); color: white; border-color: var(--pl-success); }
.pl-yn-btn.pl-yn-N.selected { background: var(--pl-danger); color: white; border-color: var(--pl-danger); }
.pl-yn-btn.pl-yn-NA.selected, .pl-yn-btn.pl-yn-NI.selected { background: var(--color-text-muted); color: white; border-color: var(--color-text-muted); }

.pl-evidence-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pl-evidence-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: var(--pl-primary-light); font-size: 12px; }
.pl-evidence-chip a { color: var(--pl-primary-dark); text-decoration: none; }
.pl-evidence-chip button { border: none; background: none; cursor: pointer; color: var(--pl-danger); font-size: 13px; padding: 0; }

.pl-review-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pl-review-split .pl-col-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 6px; }
.pl-comment { background: var(--color-bg); border-radius: 8px; padding: 8px 10px; font-size: 12px; margin-bottom: 6px; }
.pl-comment .meta { color: var(--color-text-muted); font-size: 11px; margin-top: 4px; }
.pl-comment.visible { border-left: 3px solid var(--pl-primary); }

.pl-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.pl-modal { background: var(--color-bg-white); border-radius: 10px; padding: 24px; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; }

.pl-tabbar { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--color-divider); overflow-x: auto; }
.pl-tab { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; white-space: nowrap; flex-shrink: 0; }
.pl-tab:hover { color: var(--pl-primary); }
.pl-tab.active { color: var(--pl-primary); border-bottom-color: var(--pl-primary); }

.pl-query-toggle { background: none; border: none; color: var(--pl-primary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; }
.pl-query-box { margin-top: 10px; padding: 10px; background: var(--color-bg); border-radius: 8px; }

/* Mobile app shell: the fixed sidebar becomes an off-canvas drawer, toggled
   by the hamburger button nav.js renders next to the brand. Above this
   width the desktop layout (sidebar always visible, no hamburger) is
   untouched. */
@media (max-width: 860px) {
  .pl-nav-toggle { display: inline-block; }
  .pl-search-wrap { display: none; }

  .pl-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; width: 240px; z-index: 61;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.2);
  }
  .pl-sidebar.open { transform: translateX(0); }
  .pl-sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 60;
  }

  .pl-main { padding: 16px; }

  /* Element-list nav on answer/review pages: a 260px fixed side column
     leaves almost nothing for content on a phone, so stack it above the
     main pane instead, capped and independently scrollable rather than
     sticky for the full page height. */
  .pl-answer-layout { flex-direction: column; }
  .pl-answer-nav { position: static; width: 100%; flex: 0 0 auto; max-height: 180px; }

  .pl-review-split { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  /* The role/org sub-line doesn't fit a narrow phone screen — but
     .pl-topbar-user itself must stay visible and tappable: it's now the
     only way to reach change-password/sign-out/last-login (nav.js's
     profile modal), not just a text label like it used to be. */
  .pl-topbar-user .pl-muted { display: none; }
}