/* ==== DocForge — admin, settings and finishing touches ====
   Loaded last, so anything here wins. */

/* -------------------------------------------------------- landing page --*/
/* The first screen after signing in: what this is, what you have, what to do
   next. The hero art is inline SVG rather than a shipped image — it scales, it
   takes the brand colours, and there is no asset to go stale. */

/* The Nexus Health lockup, very large and very faint, pinned to the bottom
   right of the viewport behind the landing page's cards: an accent, not an
   image. It leaves with the view — it lives inside #view-container's markup. */
.home-watermark {
  position: fixed;
  right: -70px;
  bottom: -50px;
  width: min(680px, 62vw);
  height: auto;
  opacity: .05;
  z-index: -1;
  pointer-events: none;
  user-select: none;
  filter: grayscale(20%);
}
@media (max-width: 900px) { .home-watermark { width: 80vw; right: -20vw; bottom: -10vh; } }

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: linear-gradient(115deg, #17334C 0%, var(--pri) 52%, #2C7FA8 100%);
  color: #fff;
  margin-bottom: 18px;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.hero-art {
  position: absolute;
  inset: 0 0 0 auto;
  height: 100%;
  width: min(58%, 520px);
  pointer-events: none;
}
.hero-body {
  position: relative;
  padding: 34px 34px 32px;
  max-width: 610px;
}
.hero-eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .72);
}
.hero h1 {
  margin: 0 0 8px;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: #fff;
}
.hero-sub {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .82);
  max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-on-hero {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .3);
  color: #fff;
}
.btn-on-hero:hover {
  background: rgba(255, 255, 255, .2);
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

@media (max-width: 780px) {
  .hero-art { display: none; }
  .hero-body { padding: 26px 22px 24px; max-width: none; }
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.stat-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--grad-well);
  color: var(--pri);
  box-shadow: inset 0 0 0 1px rgba(31, 95, 139, .08);
  margin-bottom: 10px;
}

.home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 900px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
}

.recent-list { display: flex; flex-direction: column; }
.recent-row {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--txt);
}
.recent-row:last-child { border-bottom: 0; }
.recent-row:hover { background: var(--surface-2); }
.recent-glyph { color: var(--txt-faint); display: flex; }
.recent-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.recent-text strong {
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.recent-text .muted { font-size: 12px; }
.recent-when { font-size: 12px; white-space: nowrap; }
.recent-row .icon { color: var(--txt-faint); flex: 0 0 auto; }

.home-steps { list-style: none; margin: 0; padding: 0; }
.home-steps li { display: flex; gap: 11px; padding: 10px 0; }
.home-steps li + li { border-top: 1px solid var(--border); }
.step-n {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pri-soft);
  color: var(--pri);
  font-size: 11.5px;
  font-weight: 700;
}
.home-steps strong { font-size: 13px; font-weight: 650; }
.home-steps p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--txt-muted); }

/* --------------------------------------------------- collapsible panels --*/
/* <details> rather than a div and a click handler: it collapses, takes focus
   and answers the keyboard on its own, and the open state is a real attribute
   rather than a class every re-render has to restore. */

.panel { padding: 0; }
.panel-head,
.opt-group > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
/* Safari draws its own triangle without this. */
.panel-head::-webkit-details-marker,
.opt-group > summary::-webkit-details-marker { display: none; }

.panel-head {
  padding: 15px 18px;
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -.005em;
  color: var(--txt);
  border-radius: var(--radius);
}
.panel[open] > .panel-head {
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel-head:hover { background: var(--surface-2); }
.panel-head:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: -2px;
}
.panel-body { padding: 16px 18px 18px; }
/* A closed <details> hides its contents with content-visibility, which still
   leaves the element's own box — so the padding renders as a blank strip under
   the header of a collapsed card. */
.panel:not([open]) > .panel-body { display: none; }

.panel-chevron {
  flex: 0 0 auto;
  color: var(--txt-faint);
  transition: transform .15s ease;
}
[open] > .panel-head > .panel-chevron,
.opt-group[open] > summary > .panel-chevron { transform: rotate(90deg); }

/* ------------------------------------------- document settings groups --*/
/* The document panel carries eleven settings. Grouping them under headings is
   what tells the reader which part of the document each one touches, so the
   labels underneath can stay short — "Fit to page" under TABLE OF CONTENTS
   rather than "Contents fit" floating in a flat list. */

.opt-group { margin-top: 22px; }
.opt-group-title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--txt-faint);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}
.opt-group[open] > .opt-group-title { margin-bottom: 14px; }
.opt-group > .opt-group-title:hover { color: var(--txt-muted); }
.opt-group > .opt-group-title:focus-visible {
  outline: 2px solid var(--pri);
  outline-offset: 2px;
  border-radius: 2px;
}
/* `.field:last-child` zeroes the bottom margin, which inside a two-up row means
   the row's last control sits tight against the next label. The children carry
   the gap instead, so the rhythm holds whether the pair is side by side or
   stacked in a narrow sidebar. */
.opt-group .field-row > .field { margin-bottom: 15px; }
.opt-group > *:last-child,
.opt-group > .field-row:last-child > .field:last-child { margin-bottom: 0; }
.opt-loading { font-size: 12.5px; }

/* ---- the "?" and its popover ---- */

.field label:has(.opt-help) {
  display: flex;
  align-items: center;
  gap: 6px;
}
.opt-help {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--txt-faint);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  transition: color .12s, border-color .12s, background .12s;
}
.opt-help:hover,
.opt-help:focus-visible,
.opt-help.active {
  border-color: var(--pri);
  color: var(--pri);
  outline: none;
}
.opt-help.active { background: var(--pri-soft); }

.opt-help-pop {
  position: fixed;
  z-index: 80;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--txt);
  color: #fff;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
}

/* Without :has() the label stays a block and the "?" sits inline after the
   text, which still reads correctly. */
@supports not selector(:has(*)) {
  .opt-help { vertical-align: middle; margin-left: 4px; }
}

/* ------------------------------------------------------------ attention --*/

.attention { border-color: var(--warn-soft); background: #FFFDF8; }
.attention-list { list-style: none; margin: 0; padding: 0; }
.attention-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  border-bottom: 1px solid var(--border);
}
.attention-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.attention-list li span { flex: 1; }
.attention-list .icon { flex: 0 0 auto; }
.attention-err .icon { color: var(--danger); }
.attention-warn .icon { color: var(--warn); }

.maintenance-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.maintenance-row > div { flex: 1; }

/* ---------------------------------------------------------- user table --*/

.user-cell { display: flex; align-items: center; gap: 10px; }
.user-cell .avatar { width: 30px; height: 30px; flex: 0 0 30px; font-size: 11px; }
.user-name { display: block; font-weight: 550; line-height: 1.25; }
.user-handle { display: block; font-size: 12px; color: var(--txt-faint); }

.data-table td.num, .data-table th.num { text-align: right; }

.job-error-text {
  font-size: 11.5px;
  color: var(--danger);
  margin-top: 3px;
  max-width: 320px;
  line-height: 1.4;
}

.config-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-top: 14px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* ------------------------------------------------------------- profile --*/

.profile-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.avatar-lg { width: 44px; height: 44px; flex: 0 0 44px; font-size: 15px; }

.kv {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px 20px;
  margin: 0;
  font-size: 13.5px;
}
.kv dt { color: var(--txt-muted); }
.kv dd { margin: 0; }

/* ------------------------------------------------------------ strength --*/

.strength { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.strength-bar {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.strength-bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width var(--transition), background var(--transition);
}
.strength-bar[data-score="1"] span { width: 25%;  background: var(--danger); }
.strength-bar[data-score="2"] span { width: 50%;  background: #C97A0E; }
.strength-bar[data-score="3"] span { width: 75%;  background: #7A9A1E; }
.strength-bar[data-score="4"] span { width: 100%; background: var(--ok); }
.strength-label { font-size: 12px; flex: 0 0 auto; min-width: 11ch; }

/* ---------------------------------------------------------- pill tabs --*/
/* Defined in structure.css for the document editor; repeated intent here so
   the admin tabs sit correctly under a page header. */

#admin-panel { margin-top: 4px; }
#admin-panel .card:first-child { margin-top: 0; }

/* --------------------------------------------------------------- misc --*/

.library-toolbar { flex-wrap: wrap; }
.doc-badges .pill { border: 1px solid transparent; }

/* Links inside muted copy should still read as links. */
.hint a, .muted a { text-decoration: underline; text-underline-offset: 2px; }

/* A card that is the only thing on a page shouldn't stretch to the window. */
.view-narrow > .card, .view-narrow > .page-head { max-width: 720px; }

@media (max-width: 640px) {
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .profile-head { flex-wrap: wrap; }
  .maintenance-row { flex-direction: column; align-items: flex-start; }
}