@charset "UTF-8";
/* California State PTA — BOM Intranet
   Styling follows the CAPTA Site Aesthetic & Style Guide:
   one sans typeface (Raleway), warm navy/orange/yellow accent rotation,
   fully pill-shaped buttons with a trailing arrow-in-circle chip, soft rounded
   cards, alternating cream/grey section backgrounds, generous whitespace.
   Self-hosted font: the Content-Security-Policy blocks external font hosts. */

/* Raleway ships as a variable font, so one file covers 100–900. */
@font-face {
  font-family: 'Raleway';
  src: url('/assets/fonts/raleway-var.woff2') format('woff2-variations'),
       url('/assets/fonts/raleway-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy:   #2D326A;
  --navy-d: #232755;
  --orange: #F26E23;
  --orange-d: #d95c14;
  --yellow: #F9C734;
  --cream:  #FAF9F5;
  --grey:   #EDECF1;
  --grey-d: #dcdae4;
  --ink:    #000000;
  --muted:  #808080;
  --link:   #0369A1;
  --danger: #b3261e;
  --white:  #ffffff;

  --radius:      14px;
  --radius-lg:   22px;
  --pill:        999px;
  --wrap:        1180px;
  --gap:         clamp(1.25rem, 3vw, 2.5rem);
  --shadow:      0 1px 2px rgba(45,50,106,.06), 0 6px 20px rgba(45,50,106,.07);
  --shadow-hover:0 2px 4px rgba(45,50,106,.09), 0 12px 30px rgba(45,50,106,.12);

  --font: 'Raleway', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------ base --- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

h1, h2, h3, h4 {
  /* Guide: lighter/medium weight, fairly large, no uppercase — friendly not shouty. */
  font-weight: 500;
  color: var(--navy);
  line-height: 1.22;
  margin: 0 0 .6em;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(1.85rem, 1.2rem + 2.2vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.6rem); }
h3 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.muted { color: var(--muted); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--navy); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; border-radius: 4px; }

/* ----------------------------------------------------------------- pills --- */
/* Guide: fully pill-shaped, with a circular icon chip on the right in a
   lighter/contrasting colour against the button's own background. */
.pill {
  display: inline-flex; align-items: center; gap: .6em;
  padding: .62em 1.15em .62em 1.35em;
  border: 2px solid transparent; border-radius: var(--pill);
  font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pill:hover { text-decoration: none; transform: translateY(-1px); }
.pill:active { transform: none; }
.pill .chip {
  display: inline-grid; place-items: center;
  width: 1.6em; height: 1.6em; border-radius: 50%;
  background: rgba(255,255,255,.25); flex: none;
}
.pill-orange { background: var(--orange); color: #fff; }
.pill-orange:hover { background: var(--orange-d); }
.pill-navy   { background: var(--navy); color: #fff; }
.pill-navy:hover { background: var(--navy-d); }
.pill-ghost  { background: transparent; color: var(--navy); border-color: var(--grey-d); }
.pill-ghost:hover { border-color: var(--navy); background: var(--cream); }
.pill-ghost .chip { background: var(--grey); color: var(--navy); }
.pill-danger { background: transparent; color: var(--danger); border-color: #e6c9c6; }
.pill-danger:hover { background: #fdf3f2; border-color: var(--danger); }
.pill-sm { font-size: .84rem; padding: .45em .9em .45em 1.05em; }
.pill-lg { font-size: 1.05rem; padding: .8em 1.5em .8em 1.7em; }

/* ---------------------------------------------------------------- header --- */
.site-head { background: var(--white); border-bottom: 1px solid var(--grey); }
/* One row: brand left, controls right. The generous --gap plus a wide search
   field used to force the brand onto a line of its own, which read as a stray
   band above the header. */
.head-inner {
  display: flex; align-items: center; gap: .75rem 1.25rem;
  flex-wrap: wrap; padding-block: .85rem;
}
.brand {
  display: flex; align-items: center; gap: .85rem;
  text-decoration: none; flex: 0 1 auto; min-width: 0;
}
.brand img { width: 108px; height: auto; flex: none; }
.brand-tag {
  font-weight: 500; font-size: .92rem; color: var(--navy);
  padding-left: .85rem; border-left: 2px solid var(--grey-d); line-height: 1.25;
}
.head-user {
  display: flex; align-items: center; gap: .5rem;
  margin-left: auto; flex: 1 1 auto; justify-content: flex-end; flex-wrap: wrap;
}
.who { font-size: .86rem; color: var(--muted); }
.role {
  display: inline-block; border-radius: var(--pill); padding: .1em .6em;
  font-size: .72rem; font-weight: 700; color: #fff; background: var(--navy); vertical-align: 1px;
}
.role-bom   { background: var(--navy); }
.role-staff { background: var(--muted); }
.role-admin { background: var(--orange); }

.search { display: flex; align-items: center; }
/* Shown only at narrow widths, in place of the full search field. */
.search-compact { display: none; }
.search input {
  font: inherit; font-size: .88rem; padding: .5em .9em;
  border: 2px solid var(--grey-d); border-right: 0;
  border-radius: var(--pill) 0 0 var(--pill); background: var(--cream);
  width: clamp(8rem, 16vw, 15rem); min-width: 0;
}
.search input:focus { outline: none; border-color: var(--navy); }
.search button {
  font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer;
  padding: .55em 1.1em; border: 2px solid var(--navy); background: var(--navy); color: #fff;
  border-radius: 0 var(--pill) var(--pill) 0;
}
.search button:hover { background: var(--navy-d); }

/* ------------------------------------------------------------------- nav --- */
.site-nav { background: var(--navy); }
.nav-toggle {
  display: none; font: inherit; font-weight: 600; color: #fff;
  background: transparent; border: 2px solid rgba(255,255,255,.35);
  border-radius: var(--pill); padding: .4em 1.1em; margin-block: .6rem; cursor: pointer;
}
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .2rem; }
.nav-list > li > a {
  display: block; padding: .95rem 1.05rem; color: #fff; text-decoration: none;
  font-weight: 500; font-size: .95rem; border-radius: var(--radius) var(--radius) 0 0;
}
.nav-list > li > a:hover { background: rgba(255,255,255,.12); }
.nav-list > li.is-active > a { background: var(--white); color: var(--navy); font-weight: 600; }
.nav-sub {
  list-style: none; margin: 0; padding: 0;
  display: none;   /* second level shows in the sidebar; keeps the bar uncluttered */
}

/* ------------------------------------------------------------ page layout --- */
.page-grid {
  display: grid; gap: var(--gap);
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.page-grid.no-side { grid-template-columns: minmax(0, 1fr); }
.main { min-width: 0; }

/* ------------------------------------------------------- grey side boxes --- */
/* The original site's left column of grey boxes, restyled: soft corners, navy
   headings, thin rules between links. */
.side { display: grid; gap: 1.1rem; }
.box {
  background: var(--grey); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem;
}
.box-title {
  font-size: 1.02rem; font-weight: 600; color: var(--navy);
  margin: 0 0 .7rem; padding-bottom: .6rem; border-bottom: 2px solid var(--grey-d);
}
.box-body { font-size: .92rem; }
.box-body p:last-child { margin-bottom: 0; }
.box-links { list-style: none; margin: .2rem 0 0; padding: 0; }
.box-links li + li { border-top: 1px solid var(--grey-d); }
.box-link {
  display: block; padding: .55rem 0; font-size: .92rem; font-weight: 500;
  color: var(--navy); text-decoration: none;
}
.box-link:hover { color: var(--orange); text-decoration: underline; }
.box-edit { margin: .9rem 0 0; }
.box-add { background: var(--cream); border: 2px dashed var(--grey-d); text-align: center; }

/* ------------------------------------------------------------- crumbs ------ */
.crumbs { margin: 0 0 .75rem; font-size: .84rem; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.crumbs li + li::before { content: '›'; color: var(--muted); margin-right: .35rem; }
.crumbs a { color: var(--muted); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

.page-head { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { flex: 1 1 18rem; }

/* The inner :last-child rule zeroes the trailing paragraph margin, so the block
   itself carries the spacing — otherwise whatever follows sits flush against it. */
.intro { font-size: 1.06rem; max-width: 62ch; margin-bottom: 1rem; }
.intro > :last-child { margin-bottom: 0; }
.main > .muted { margin-top: 0; }
.lede { font-size: 1.1rem; color: var(--muted); max-width: 58ch; }

/* ------------------------------------------------------------ link lists --- */
/* Guide: simple horizontal-row list layout divided by thin horizontal rules. */
.link-group { margin-top: clamp(1.15rem, 2.4vw, 1.7rem); }
.group-title {
  font-size: 1.18rem; font-weight: 600; color: var(--navy);
  padding-bottom: .55rem; border-bottom: 3px solid var(--yellow); margin-bottom: .3rem;
}
.link-list { list-style: none; margin: 0; padding: 0; }
.link-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--grey);
}
.link-main { min-width: 0; flex: 1; }
.link-title {
  font-weight: 600; font-size: 1.03rem; color: var(--navy); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  line-height: 1.45;
}
.link-title:hover { color: var(--orange); text-decoration: underline; }
.link-title.is-doc::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--orange);
}
.link-title.is-link::before {
  content: ''; flex: none; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--navy);
}
.link-desc { margin: .1rem 0 0; font-size: .92rem; color: #444; line-height: 1.4; }
.link-path { margin: .1rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.4; }
.tag {
  display: inline-block; border-radius: var(--pill); padding: .05em .55em;
  font-size: .7rem; font-weight: 700; letter-spacing: .02em;
  background: var(--grey); color: var(--navy);
}
.aud { flex: none; font-size: .72rem; font-weight: 700; border-radius: var(--pill); padding: .15em .7em; }
.aud-staff { background: var(--grey); color: var(--navy); }
.aud-bom   { background: var(--navy); color: #fff; }
.aud-admin { background: var(--orange); color: #fff; }

/* ------------------------------------------------------------- cards ------- */
.cards { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.card-grid {
  display: grid; gap: 1rem; margin-top: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 235px), 1fr));
}
.card {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: var(--cream); border: 1px solid var(--grey);
  border-radius: var(--radius); padding: 1.05rem 1.15rem;
  text-decoration: none; color: var(--navy); box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: var(--grey-d); text-decoration: none; }
.card-title { font-weight: 600; }
.card .chip { background: var(--orange); color: #fff; width: 1.7rem; height: 1.7rem; flex: none;
  display: inline-grid; place-items: center; border-radius: 50%; }

/* ------------------------------------------------------------- notices ----- */
.ok, .error, .notice {
  border-radius: var(--radius); padding: .85rem 1.1rem; margin: 0 0 1.25rem;
  font-size: .95rem; border-left: 5px solid;
}
.ok     { background: #f0f7f0; border-color: #2e7d32; color: #1b5e20; }
.error  { background: #fdf3f2; border-color: var(--danger); color: #8c1d18; }
.notice { background: var(--cream); border-color: var(--yellow); color: #4a3c00; }
.fineprint { font-size: .86rem; color: var(--muted); }

/* -------------------------------------------------------------- sign-in ---- */
.signin {
  max-width: 34rem; margin-inline: auto; text-align: center;
  background: var(--cream); border: 1px solid var(--grey);
  border-radius: var(--radius-lg); padding: clamp(1.75rem, 5vw, 3rem);
}
.signin .lede { margin-inline: auto; }
.signin .error, .signin .notice, .signin .ok { text-align: left; }

/* --------------------------------------------------------------- search ---- */
.search-big { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.search-big input {
  flex: 1 1 18rem; font: inherit; padding: .7em 1.1em;
  border: 2px solid var(--grey-d); border-radius: var(--pill); background: var(--cream);
}
.search-big input:focus { outline: none; border-color: var(--navy); }

/* ---------------------------------------------------------------- forms ---- */
.editform {
  background: var(--cream); border: 1px solid var(--grey);
  border-radius: var(--radius); padding: 1.1rem 1.2rem; margin: 1rem 0;
}
.editform label { display: block; font-size: .84rem; font-weight: 600; color: var(--navy); margin-bottom: .8rem; }
.editform input[type=text], .editform input[type=url], .editform input[type=number],
.editform input:not([type]), .editform select, .editform textarea {
  display: block; width: 100%; margin-top: .3rem; font: inherit; font-size: .95rem; font-weight: 400;
  color: var(--ink); padding: .5em .7em; border: 2px solid var(--grey-d);
  border-radius: 10px; background: var(--white);
}
.editform textarea { line-height: 1.55; resize: vertical; }
.editform input:focus, .editform select:focus, .editform textarea:focus { outline: none; border-color: var(--navy); }
.editform .chk { display: flex; align-items: center; gap: .45rem; margin-top: 1.55rem; }
.editform .chk input { width: auto; margin: 0; }
.grid2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.grid3 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.row-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.row-form { border-left: 4px solid var(--grey-d); }
.link-add .editform { border-left-color: var(--orange); }
.hint { font-size: .82rem; color: var(--muted); margin: .1rem 0 .8rem; }
.edit-links { margin-top: 1.5rem; }

/* --------------------------------------------------------------- footer ---- */
/* Guide: light grey background split into clean columns. */
.site-foot { background: var(--grey); margin-top: clamp(2.5rem, 6vw, 4.5rem); padding-block: clamp(2rem, 5vw, 3rem); }
.foot-inner { display: flex; gap: var(--gap); flex-wrap: wrap; align-items: flex-start; }
.foot-logo { width: 110px; opacity: .9; }
.foot-cols { display: flex; gap: var(--gap); flex-wrap: wrap; margin-left: auto; }
.foot-cols h3 { font-size: .92rem; font-weight: 700; color: var(--navy); margin-bottom: .5rem; }
.foot-cols ul { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
.foot-cols li { margin-bottom: .35rem; }
.foot-cols a { color: var(--navy); text-decoration: none; }
.foot-cols a:hover { text-decoration: underline; color: var(--orange); }
.foot-note { margin-top: 1.5rem; font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 900px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
  /* Members come here to reach content; the grey boxes follow it on small screens. */
  .main { order: 1; }
  .side { order: 2; }
  .nav-toggle { display: inline-block; }
  .nav-wrap { display: none; padding-bottom: .75rem; }
  .nav-wrap.is-open { display: block; }
  .nav-list { flex-direction: column; gap: 0; }
  .nav-list > li > a { border-radius: var(--radius); padding: .7rem .9rem; }
  .nav-list > li.is-active > a { background: rgba(255,255,255,.16); color: #fff; }
  .nav-sub { display: block; padding-left: .9rem; }
  .nav-sub a { display: block; padding: .5rem .9rem; color: rgba(255,255,255,.85);
    text-decoration: none; font-size: .9rem; }
  .nav-sub a:hover { color: #fff; }
  /* Keep the header to two compact rows: brand, then a single row of controls.
     The full search field is replaced by a pill link to /search. */
  .head-inner { padding-block: .7rem; gap: .6rem; }
  .head-user { width: 100%; margin-left: 0; gap: .5rem; justify-content: flex-start; }
  .search { display: none; }
  .search-compact { display: inline-flex; }
  .who { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .brand img { width: 96px; }
  .brand-tag { font-size: .84rem; }
  .link-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pill:hover, .card:hover { transform: none; }
}
@media print {
  .site-nav, .head-user, .site-foot, .box-edit, .editform { display: none; }
  body { font-size: 12pt; }
}

/* ---------------------------------------------------- navy separator strip --- */
/* With "State Board" merged into home there is normally only one top-level nav
   entry, so the navy bar carries no menu. It stays as a slim strip that separates
   the header from the content. */
.site-nav-strip {
  height: 10px;
  background: var(--navy);
}

/* ------------------------------------------------- reorderable edit list ---- */
.sortable { list-style: none; margin: 1rem 0; padding: 0; }
.sort-row {
  display: flex; align-items: flex-start; gap: .6rem;
  border: 1px solid var(--grey); border-radius: var(--radius);
  background: var(--white); margin-bottom: .7rem; padding: .55rem .7rem .55rem .5rem;
}
.sort-row > .sort-body { flex: 1; min-width: 0; }
.sort-row .editform { margin: 0; border-left: 0; background: transparent; border: 0; padding: .2rem 0; }
.sort-row.is-dragging { opacity: .45; border-color: var(--orange); border-style: dashed; }

/* A separator row reads as a heading, so it stands out from the links it groups. */
.sort-row.is-sep {
  background: var(--cream);
  border-left: 5px solid var(--yellow);
}
.sort-row.is-sep .editform input[name="title"] {
  font-weight: 600; font-size: 1.02rem; color: var(--navy);
}

/* Drag handle. A real button so it can be focused and driven with arrow keys. */
.grip {
  flex: none; cursor: grab; font: inherit; font-size: 1.15rem; line-height: 1;
  color: var(--muted); background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: .35rem .3rem; margin-top: .3rem;
  touch-action: none;
}
.grip:hover { color: var(--navy); background: var(--grey); }
.grip:active { cursor: grabbing; }
.grip:focus-visible { border-color: var(--orange); color: var(--navy); }
.grip-demo { color: var(--muted); font-size: 1.05rem; }
.reorder-status { min-height: 1.2em; margin: .2rem 0 .5rem; }
.reorder-form { margin: 0; }

@media (hover: none) {
  /* Touch drag is unreliable across mobile browsers; the arrow-key handle and the
     numeric Order field remain, so ordering is still possible on a phone. */
  .grip { cursor: default; }
}

/* ------------------------------------------------------------- note rows ---- */
/* A note is a plain line of text carried over from the old site (rosters,
   "Moderators: …", "Available Soon"). It has no target, so it must not look
   clickable. */
.link-row.is-note { border-bottom: 0; padding: .35rem 0; }
.note-text { margin: 0; color: #333; font-size: .95rem; }
.sort-row.is-note { background: #fbfbfd; border-left: 5px solid var(--grey-d); }
.sort-row.is-note .editform input[name="title"] { font-weight: 400; }

/* --------------------------------------------------------------- box pen ---- */
/* Sidebar boxes are site-wide, so they are edited on their own — never as a side
   effect of "Edit this page". Each box carries its own pen for admins. */
.box-title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.box-pen {
  flex: none; display: inline-grid; place-items: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  color: var(--muted); background: transparent; text-decoration: none;
  border: 1px solid transparent; line-height: 1;
}
.box-pen:hover { color: #fff; background: var(--navy); border-color: var(--navy); text-decoration: none; }
.box-pen.is-on {
  width: auto; height: auto; padding: .12em .7em; border-radius: var(--pill);
  font-size: .74rem; font-weight: 700;
  background: var(--navy); color: #fff;
}
.box.is-editing { outline: 2px solid var(--orange); outline-offset: 3px; }
.box-addlink { margin: 0; font-size: .86rem; }
.box-addlink a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--muted); text-decoration: none; padding: .3rem .1rem;
}
.box-addlink a:hover { color: var(--navy); text-decoration: underline; }
.role-super { background: #111; color: #fff; }

/* ============================================================================
   EDIT MODE — in-place editing.
   The page keeps its reading layout; each row's bullet shrinks away and a pen
   takes its place, with add-above/add-below arrows sliding out vertically and a
   drag handle sliding out to the left. Sections are outlined with an
   "Add Section" pill centred on the top and bottom edge.
   Everything is transform/opacity only, so it stays on the compositor.
   ========================================================================== */
:root {
  --ease: cubic-bezier(.22, .68, 0, 1.0);
  --dur:  .26s;
}

.edit-links .hint { max-width: 68ch; }

/* ---- section outline -------------------------------------------------- */
.egroups { display: block; }
.egroup {
  position: relative;
  margin: 2.4rem 0;
  padding: 1.5rem 1.15rem 1.6rem;
  border: 1.5px dashed var(--grey-d);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.egroup:hover { border-color: #c9c6d8; background: rgba(250,249,245,.55); }
.egroup > .group-title, .egroup .ehead .group-title { margin-top: 0; }

/* "+ Add Section" pills, centred on the outline's top and bottom edge. */
.egroup-add {
  position: absolute; left: 50%; z-index: 2;
  transform: translate(-50%, -50%) scale(.94);
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .32em 1em;
  border: 1.5px dashed var(--grey-d); border-radius: var(--pill);
  background: var(--white); color: var(--muted);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.egroup-add.is-top    { top: 0; }
.egroup-add.is-bottom { bottom: 0; transform: translate(-50%, 50%) scale(.94); }
.egroup-add.is-only   { position: static; transform: none; opacity: 1; pointer-events: auto; margin: 1rem 0; }
/* Revealed on hover/focus of the section — keyboard users get it via :focus-within. */
.egroup:hover .egroup-add,
.egroup:focus-within .egroup-add {
  opacity: 1; pointer-events: auto;
}
.egroup:hover .egroup-add.is-top,
.egroup:focus-within .egroup-add.is-top { transform: translate(-50%, -50%) scale(1); }
.egroup:hover .egroup-add.is-bottom,
.egroup:focus-within .egroup-add.is-bottom { transform: translate(-50%, 50%) scale(1); }
.egroup-add:hover, .egroup-add:focus-visible {
  color: #fff; background: var(--orange); border-color: var(--orange); border-style: solid;
  text-decoration: none;
}

/* ---- rows -------------------------------------------------------------- */
.elist { list-style: none; margin: .2rem 0 0; padding: 0; }
.erow {
  position: relative;
  display: flex; align-items: flex-start; gap: .85rem;
  padding: .7rem 0 .7rem 0;
  border-bottom: 1px solid var(--grey);
  transition: background-color var(--dur) var(--ease);
  border-radius: 8px;
}
.erow:last-child { border-bottom: 0; }
.erow:hover { background: rgba(237,236,241,.42); }
.erow.is-empty:hover { background: none; }
.erow-body { flex: 1; min-width: 0; }
.erow-title { font-weight: 600; color: var(--navy); }

/* ---- the control cluster ---------------------------------------------- */
/* A fixed-size slot so nothing reflows when controls appear. */
.erow-ctl {
  position: relative; flex: none;
  width: 1.55rem; height: 1.55rem; margin-top: .15rem;
}
.erow-dot, .erow-ctl .ctl {
  position: absolute; top: 50%; left: 50%;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
/* the bullet, which shrinks away */
.erow-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--navy);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.erow.is-note .erow-dot { background: var(--grey-d); }
.ehead .erow-dot { background: var(--yellow); }

/* every control starts collapsed into the centre of the slot */
.erow-ctl .ctl {
  display: inline-grid; place-items: center;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: var(--navy); color: #fff;
  text-decoration: none; font: inherit; line-height: 1;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0; pointer-events: none;
}
.erow-ctl .ctl-add { width: 1.3rem; height: 1.3rem; background: var(--orange); }
.erow-ctl .ctl-grip {
  width: 1.15rem; height: 1.55rem; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: .95rem;
  cursor: grab; touch-action: none;
}
.ctl-plus { font-size: .62rem; font-weight: 800; margin-left: .05rem; }

/* reveal: dot shrinks out, pen scales in, satellites slide from the centre */
.erow:hover .erow-dot,
.erow:focus-within .erow-dot,
.ehead:hover .erow-dot,
.ehead:focus-within .erow-dot { transform: translate(-50%, -50%) scale(0); opacity: 0; }

.erow:hover .ctl, .erow:focus-within .ctl,
.ehead:hover .ctl, .ehead:focus-within .ctl { opacity: 1; pointer-events: auto; }

.erow:hover .ctl-pen, .erow:focus-within .ctl-pen,
.ehead:hover .ctl-pen, .ehead:focus-within .ctl-pen {
  transform: translate(-50%, -50%) scale(1);
}
/* arrows slide up / down out of the pen */
.erow:hover .ctl-up, .erow:focus-within .ctl-up,
.ehead:hover .ctl-up, .ehead:focus-within .ctl-up {
  transform: translate(-50%, calc(-50% - 1.5rem)) scale(1);
}
.erow:hover .ctl-down, .erow:focus-within .ctl-down,
.ehead:hover .ctl-down, .ehead:focus-within .ctl-down {
  transform: translate(-50%, calc(-50% + 1.5rem)) scale(1);
}
/* grip slides out to the left of the pen */
.erow:hover .ctl-grip, .erow:focus-within .ctl-grip,
.ehead:hover .ctl-grip, .ehead:focus-within .ctl-grip {
  transform: translate(calc(-50% - 1.45rem), -50%) scale(1);
}
.erow-ctl .ctl:hover { background: var(--orange-d); }
.erow-ctl .ctl-pen:hover { background: var(--navy-d); }
.erow-ctl .ctl-grip:hover { background: var(--grey); color: var(--navy); }
.erow-ctl .ctl:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* An open row stays revealed and highlighted. */
.erow.is-open, .ehead.is-open { background: var(--cream); }
.erow.is-open .erow-dot, .ehead.is-open .erow-dot { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.erow.is-open .ctl, .ehead.is-open .ctl { opacity: 1; pointer-events: auto; }
.erow.is-open .ctl-pen, .ehead.is-open .ctl-pen { transform: translate(-50%, -50%) scale(1); background: var(--orange); }

/* the expanded editor + new-row forms grow open */
.erow-edit, .erow-newform, .newsec-form {
  flex: 1 1 100%; width: 100%;
  animation: growIn var(--dur) var(--ease) both;
}
.erow-newform { list-style: none; }
.newsec-form { margin: 1rem 0 0; }
@keyframes growIn {
  from { opacity: 0; transform: translateY(-.35rem); }
  to   { opacity: 1; transform: none; }
}
.erow-edit .editform, .erow-newform .editform { margin: .7rem 0 .2rem; }

/* section heading row in edit mode */
.ehead { position: relative; }
.ehead .group-title { display: flex; align-items: center; gap: .8rem; }
.ehead .erow-ctl { margin-top: 0; }

/* dragging */
.erow.is-dragging, .egroup.is-dragging { opacity: .4; }
.erow.is-dragover { box-shadow: inset 0 2px 0 var(--orange); }

@media (hover: none) {
  /* No hover on touch: keep the controls permanently visible instead of
     unreachable, and let the dot go. */
  .erow .erow-dot, .ehead .erow-dot { transform: translate(-50%, -50%) scale(0); opacity: 0; }
  .erow .ctl, .ehead .ctl { opacity: 1; pointer-events: auto; }
  .erow .ctl-pen, .ehead .ctl-pen { transform: translate(-50%, -50%) scale(1); }
  .erow .ctl-up,   .ehead .ctl-up   { transform: translate(-50%, calc(-50% - 1.5rem)) scale(1); }
  .erow .ctl-down, .ehead .ctl-down { transform: translate(-50%, calc(-50% + 1.5rem)) scale(1); }
  .erow .ctl-grip, .ehead .ctl-grip { transform: translate(calc(-50% - 1.45rem), -50%) scale(1); }
  .erow { padding-left: 1.6rem; }
  .egroup-add { opacity: 1; pointer-events: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .egroup-add, .erow-dot, .erow-ctl .ctl, .erow, .egroup { transition: none !important; }
  .erow-edit, .erow-newform, .newsec-form { animation: none !important; }
}

/* ------------------------------------------------- header / strip layout ---- */
/* The navy strip carries the search box, so the brand row is never alone. */
.site-nav-strip { height: auto; padding-block: .4rem; }
.strip-inner { display: flex; align-items: center; justify-content: flex-end; }
.site-nav-strip .search input {
  border-color: rgba(255,255,255,.28); background: rgba(255,255,255,.1); color: #fff;
  width: clamp(10rem, 26vw, 22rem);
}
.site-nav-strip .search input::placeholder { color: rgba(255,255,255,.62); }
.site-nav-strip .search input:focus { border-color: #fff; background: rgba(255,255,255,.16); }
.site-nav-strip .search button {
  background: var(--orange); border-color: var(--orange); color: #fff;
}
.site-nav-strip .search button:hover { background: var(--orange-d); border-color: var(--orange-d); }
.search-compact { display: none !important; }

/* "Add Section" pills stay faintly visible so they're discoverable, and come
   fully forward on hover. */
.egroup-add { opacity: .4; pointer-events: auto; }

@media (max-width: 900px) {
  .strip-inner { justify-content: stretch; }
  .site-nav-strip .search { flex: 1; }
  .site-nav-strip .search input { width: auto; flex: 1; }
}

/* ---------------------------------------- edit-mode control geometry ------- */
/* The satellites sit ±1.35rem from the pen, so a row must be tall enough that
   neighbouring rows' arrows can't collide. The control slot is pulled out of the
   flex flow into a fixed gutter, which also leaves room to its left for the drag
   handle to slide into without being clipped. */
.erow, .ehead {
  position: relative;
  padding-left: 3.1rem;
}
.erow {
  padding-top: 1.15rem; padding-bottom: 1.15rem;
  min-height: 3.5rem;
  align-items: flex-start;
}
.erow.is-empty { min-height: 0; padding-top: .5rem; padding-bottom: .5rem; }
.erow-ctl {
  position: absolute; left: 1.6rem; top: 1.2rem;
  width: 1.55rem; height: 1.55rem; margin: 0;
}
.ehead .erow-ctl { top: .1rem; }
.ehead .group-title { display: block; }

/* Tighter satellite offsets now that they have room. */
.erow:hover .ctl-up, .erow:focus-within .ctl-up, .erow.is-open .ctl-up,
.ehead:hover .ctl-up, .ehead:focus-within .ctl-up, .ehead.is-open .ctl-up {
  transform: translate(-50%, calc(-50% - 1.35rem)) scale(1);
}
.erow:hover .ctl-down, .erow:focus-within .ctl-down, .erow.is-open .ctl-down,
.ehead:hover .ctl-down, .ehead:focus-within .ctl-down, .ehead.is-open .ctl-down {
  transform: translate(-50%, calc(-50% + 1.35rem)) scale(1);
}

/* Make the drag handle legible rather than a ghost. */
.erow-ctl .ctl-grip {
  background: var(--grey); color: var(--navy);
  border: 1px solid var(--grey-d);
}
.erow-ctl .ctl-grip:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* The row's own hover tint should cover the gutter too. */
.erow:hover, .erow.is-open { box-shadow: -1.6rem 0 0 0 rgba(237,236,241,.42); }
.erow.is-open { box-shadow: -1.6rem 0 0 0 var(--cream); }

@media (hover: none) {
  .erow .ctl-up,   .ehead .ctl-up   { transform: translate(-50%, calc(-50% - 1.35rem)) scale(1); }
  .erow .ctl-down, .ehead .ctl-down { transform: translate(-50%, calc(-50% + 1.35rem)) scale(1); }
  .erow { padding-left: 3.1rem; }
}

/* ------------------------------------------- roomier rows + swap polish ----- */
/* Neighbouring rows' add-arrows must never crowd each other, so give each row
   real vertical room. */
.erow {
  padding-top: 1.55rem; padding-bottom: 1.55rem;
  min-height: 4.3rem;
}
.erow-ctl { top: 1.6rem; }
.erow.is-empty { min-height: 0; padding-top: .6rem; padding-bottom: .6rem; }
.elist > .erow + .erow { border-top: 1px solid var(--grey); }
.erow { border-bottom: 0; }

/* While a swap is in flight, dim slightly instead of flashing. */
.edit-links { transition: opacity .16s var(--ease); }
.edit-links.is-busy { opacity: .55; pointer-events: none; }

/* The swapped-in block eases in rather than snapping. */
.edit-links .egroups { animation: swapIn .22s var(--ease) both; }
@keyframes swapIn { from { opacity: .35; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .edit-links, .edit-links .egroups { transition: none !important; animation: none !important; }
}

/* Measured: with a 3.1rem gutter the pen's right edge met the title text exactly.
   Widen it so the pen clears the text, and shift the slot right so the drag handle
   has room to slide into without touching the row edge. */
.erow, .ehead { padding-left: 4.1rem; }
.erow-ctl { left: 1.9rem; }

/* ------------------------------------------------------------- title pen ---- */
/* Sits to the right of the page title and slides in from the left, so it reads as
   part of the heading. Inline (not absolutely placed) so it follows the text when
   a long title wraps. */
.page-head h1 { display: block; }
.title-pen {
  display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  margin-left: .55rem; vertical-align: middle;
  background: var(--grey); color: var(--navy);
  border: 1px solid var(--grey-d);
  text-decoration: none; line-height: 1;
  opacity: 0;
  transform: translateX(-.7rem) scale(.7);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  pointer-events: none;
}
.page-head:hover .title-pen,
.page-head:focus-within .title-pen,
.title-pen.is-on {
  opacity: 1; transform: translateX(0) scale(1); pointer-events: auto;
}
.title-pen:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.title-pen.is-on {
  width: auto; height: auto; padding: .18em .8em; border-radius: var(--pill);
  font-size: .58em; font-weight: 700; letter-spacing: .02em;
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.title-pen:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }

.pagemeta-form { animation: growIn var(--dur) var(--ease) both; margin-bottom: 1.4rem; }

@media (hover: none) { .title-pen { opacity: 1; transform: none; pointer-events: auto; } }
@media (prefers-reduced-motion: reduce) {
  .title-pen { transition: none !important; }
  .pagemeta-form { animation: none !important; }
}

/* ============================================================================
   CONTROL CLUSTER — laid out to match the supplied mockup:
     [ tall rounded drag handle ] [ up-arrow ]
                                  [  pen    ]
                                  [ down-arrow ]
   The three circles stack vertically; the handle is a tall rounded rectangle to
   their left. Pen is orange (the mockup's red), the two add-arrows are a steel
   blue tint of the navy, and the handle is neutral grey — green isn't in the
   CAPTA palette, so the mockup's green reads as "this is the mover", not a brand
   colour.
   ========================================================================== */
:root { --steel: #5a84b8; --steel-d: #466994; }

.erow, .ehead { padding-left: 4.4rem; }
.erow {
  padding-top: 1.6rem; padding-bottom: 1.6rem;
  min-height: 5rem;
}
.erow.is-empty { min-height: 0; padding-top: .6rem; padding-bottom: .6rem; }
.erow-ctl { left: 2.2rem; top: 1.65rem; width: 1.4rem; height: 1.4rem; }
.ehead .erow-ctl { top: .15rem; }

/* all three circles the same size, so the stack reads as one control */
.erow-ctl .ctl { width: 1.4rem; height: 1.4rem; }
.erow-ctl .ctl-add { width: 1.4rem; height: 1.4rem; background: var(--steel); }
.erow-ctl .ctl-add:hover { background: var(--steel-d); }
.erow-ctl .ctl-pen { background: var(--orange); }
.erow-ctl .ctl-pen:hover { background: var(--orange-d); }
.ctl-plus { display: none; }   /* the arrow glyph alone is clearer at this size */

/* the drag handle: a tall rounded rectangle, not a circle */
.erow-ctl .ctl-grip {
  width: 1.05rem; height: 3.3rem; border-radius: var(--pill);
  background: var(--grey-d); color: transparent;
  border: 0; font-size: 0;
}
.erow-ctl .ctl-grip:hover { background: var(--muted); }
.ehead .ctl-grip { height: 2.2rem; }

/* offsets: circles stack tightly, handle sits to the left of the stack */
.erow:hover .ctl-up, .erow:focus-within .ctl-up, .erow.is-open .ctl-up,
.ehead:hover .ctl-up, .ehead:focus-within .ctl-up, .ehead.is-open .ctl-up {
  transform: translate(-50%, calc(-50% - 1.6rem)) scale(1);
}
.erow:hover .ctl-down, .erow:focus-within .ctl-down, .erow.is-open .ctl-down,
.ehead:hover .ctl-down, .ehead:focus-within .ctl-down, .ehead.is-open .ctl-down {
  transform: translate(-50%, calc(-50% + 1.6rem)) scale(1);
}
.erow:hover .ctl-grip, .erow:focus-within .ctl-grip, .erow.is-open .ctl-grip,
.ehead:hover .ctl-grip, .ehead:focus-within .ctl-grip, .ehead.is-open .ctl-grip {
  transform: translate(calc(-50% - 1.5rem), -50%) scale(1);
}

/* ------------------------------------------------ section outline fade-in --- */
/* The outlines used to snap into existence the moment edit mode opened, which is
   the jarring part. Fade the border and background in instead, staggered down the
   page so it reads as one motion. */
.egroup {
  border-color: transparent;
  animation: outlineIn .5s var(--ease) both;
}
@keyframes outlineIn {
  from { border-color: transparent; background: transparent; }
  to   { border-color: var(--grey-d); background: rgba(250,249,245,.4); }
}
.egroup:nth-child(1) { animation-delay: .04s; }
.egroup:nth-child(2) { animation-delay: .10s; }
.egroup:nth-child(3) { animation-delay: .16s; }
.egroup:nth-child(4) { animation-delay: .22s; }
.egroup:nth-child(n+5) { animation-delay: .28s; }
.egroup:hover { border-color: #bfbbd0; background: rgba(250,249,245,.75); }

/* Pills fade in with their section rather than popping. */
.egroup-add { animation: pillIn .5s var(--ease) both; animation-delay: inherit; }
@keyframes pillIn { from { opacity: 0; } to { opacity: .4; } }

@media (hover: none) {
  .erow .ctl-up,   .ehead .ctl-up   { transform: translate(-50%, calc(-50% - 1.6rem)) scale(1); }
  .erow .ctl-down, .ehead .ctl-down { transform: translate(-50%, calc(-50% + 1.6rem)) scale(1); }
  .erow .ctl-grip, .ehead .ctl-grip { transform: translate(calc(-50% - 1.5rem), -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .egroup, .egroup-add { animation: none !important; border-color: var(--grey-d); }
  .egroup-add { opacity: .4; }
}

/* ------------------------------------------- centre the cluster in the row --- */
/* It was pinned to a fixed top offset, which lined it up with the title text —
   so on a row with a description and a URL the controls floated near the top
   instead of sitting in the middle of their own area. Centre on the row box. */
.erow-ctl {
  top: 50%;
  transform: translateY(-50%);
}
/* The heading's control must stay positioned against .ehead, NOT the <h2>:
   making the h2 a containing block stacked its `left` on top of the row's own
   padding and dropped the cluster onto the heading text.
   .erow-ctl now carries translateY(-50%), so `top` is the cluster's CENTRE —
   half the slot height lower than the old top-edge value. */
.ehead .erow-ctl { top: .85rem; }

/* An empty page has no rows to hover, so it needs explicit starting points. */
.empty-start {
  border: 1.5px dashed var(--grey-d); border-radius: var(--radius-lg);
  padding: 1.5rem 1.35rem; margin: 1.5rem 0;
  animation: growIn var(--dur) var(--ease) both;
}
.empty-start > .muted { margin-top: 0; }

/* ------------------------------------- arrow+plus add buttons, resized ------ */
/* The add glyph now carries an arrow AND a plus, so it needs a slightly larger
   circle to stay legible, and a touch more offset to clear the pen. */
.erow-ctl .ctl-add { width: 1.6rem; height: 1.6rem; }
.erow { min-height: 5.6rem; padding-top: 1.8rem; padding-bottom: 1.8rem; }

.erow:hover .ctl-up, .erow:focus-within .ctl-up, .erow.is-open .ctl-up,
.ehead:hover .ctl-up, .ehead:focus-within .ctl-up, .ehead.is-open .ctl-up {
  transform: translate(-50%, calc(-50% - 1.75rem)) scale(1);
}
.erow:hover .ctl-down, .erow:focus-within .ctl-down, .erow.is-open .ctl-down,
.ehead:hover .ctl-down, .ehead:focus-within .ctl-down, .ehead.is-open .ctl-down {
  transform: translate(-50%, calc(-50% + 1.75rem)) scale(1);
}
@media (hover: none) {
  .erow .ctl-up,   .ehead .ctl-up   { transform: translate(-50%, calc(-50% - 1.75rem)) scale(1); }
  .erow .ctl-down, .ehead .ctl-down { transform: translate(-50%, calc(-50% + 1.75rem)) scale(1); }
}

/* A section heading has no "add above", so its handle only needs to span the pen
   and the single arrow below it. */
.erow-ctl.is-section .ctl-grip { height: 2.6rem; }
.ehead .erow-ctl { top: 1rem; }
/* Leave room under the gold rule for the heading's "add first link" arrow. */
.ehead { padding-bottom: 1.5rem; }

/* -------------------------------------------- empty-section add affordance --- */
/* Always visible: an empty section has no row to hover, so the way in cannot be
   hover-revealed. Sits in the same gutter as the row control clusters so it lines
   up with the pens above and below it. */
.erow.is-empty { min-height: 2.8rem; padding-top: .55rem; padding-bottom: .55rem; }
.empty-add {
  position: absolute; left: 2.2rem; top: 50%;
  transform: translateY(-50%);
  display: inline-grid; place-items: center;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--steel); color: #fff;
  text-decoration: none; line-height: 1;
  box-shadow: 0 1px 3px rgba(45,50,106,.25);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.empty-add:hover {
  background: var(--steel-d); text-decoration: none;
  transform: translateY(-50%) scale(1.12);
}
.empty-add:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.erow.is-empty .erow-body > .muted { margin: 0; font-size: .92rem; }
@media (prefers-reduced-motion: reduce) {
  .empty-add, .empty-add:hover { transition: none !important; transform: translateY(-50%); }
}

/* ------------------------------------------------------- Delete Section ----- */
/* Lives in the action row, after Cancel. Pushed to the right so a destructive
   button is never adjacent to Save. */
.row-actions { align-items: center; }
.sep-delete { margin-left: auto; white-space: nowrap; }
@media (max-width: 560px) { .sep-delete { margin-left: 0; } }

/* ---------------------------------------------------------------------------
   Address field + "Attach from SharePoint"
   A link's address can be typed OR picked from SharePoint, so the button lives
   with the field rather than in a separate panel elsewhere on the page.
   --------------------------------------------------------------------------- */
.url-row { display: flex; gap: .5rem; align-items: stretch; margin-top: .25rem; }
.url-row input { flex: 1 1 auto; min-width: 0; margin-top: 0 !important; }
.sp-attach {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
  white-space: nowrap; align-self: stretch;
}
@media (max-width: 620px) {
  .url-row { flex-direction: column; }
  .sp-attach { justify-content: center; }
}

/* --- the file picker, as a dialog ----------------------------------------- */
/* A dialog rather than a panel in the flow: choosing a file is one decision that
   interrupts editing a row, and inline it read as "more page". Server-rendered, so
   it works without JavaScript; the scrim is a link, so closing does too. */
.sp-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1.25rem; }
.sp-modal-scrim {
  position: absolute; inset: 0; background: rgba(16, 20, 45, .55);
  backdrop-filter: blur(2px); animation: spFade .16s ease-out both;
}
.sp-modal-card {
  /* max-width as well as width: on a viewport narrow enough that the rule below has
     not fired, min(46rem, 100%) can still resolve wider than the space actually
     available, and the row contents then run off the edge. */
  position: relative; z-index: 1; width: min(46rem, 100%); max-width: 100%;
  max-height: min(80vh, 44rem);
  display: flex; flex-direction: column; background: #fff; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(16, 20, 45, .3); overflow: hidden;
  animation: spRise .19s cubic-bezier(.2, .8, .3, 1) both;
}
@keyframes spFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes spRise { from { opacity: 0; transform: translateY(10px) scale(.985) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) {
  .sp-modal-scrim, .sp-modal-card { animation: none; }
}

.sp-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.05rem 1.25rem .85rem; border-bottom: 1px solid var(--line);
}
.sp-modal-head h2 { margin: 0; font-size: 1.15rem; color: var(--navy); }
.sp-modal-head .sp-target { margin: .15rem 0 0; font-size: .88rem; color: #6b7086; }
.sp-modal-x {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: 50%; color: #6b7086; text-decoration: none;
  transition: background .14s, color .14s;
}
.sp-modal-x:hover { background: var(--line); color: var(--navy); }

.sp-modal-body { padding: .9rem 1.25rem 1.1rem; overflow-y: auto; }
.sp-modal-body .crumbs { margin: 0 0 .5rem; }
.sp-modal-note { margin: .6rem 0 0; font-size: .86rem; color: #6b7086; }
.sp-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  padding: .8rem 1.25rem; border-top: 1px solid var(--line); background: var(--bg);
}

/* Rows: whole row is the target for a folder; for a file the name sits left and the
   one action sits right, so nothing competes with the decision. */
.sp-list { list-style: none; margin: 0; padding: 0; }
.sp-row { border-bottom: 1px solid var(--line); }
.sp-row:last-child { border-bottom: 0; }
.sp-row-main {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  padding: .62rem .35rem; text-decoration: none; color: inherit;
}
.sp-row.is-folder .sp-row-main { border-radius: 8px; }
.sp-row.is-folder .sp-row-main:hover { background: var(--bg); }
.sp-row.is-folder .sp-name { font-weight: 600; color: var(--navy); }
.sp-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; word-break: break-word; }
.sp-meta { flex: 0 0 auto; font-size: .78rem; color: #9aa0b4; }
.sp-use { flex: 0 0 auto; }
.sp-row .tag { flex: 0 0 auto; }
@media (max-width: 520px) {
  .sp-modal { padding: 0; }
  .sp-modal-card { width: 100%; max-height: 100vh; border-radius: 0; }
  .sp-row-main { flex-wrap: wrap; }
}

/* ---------------------------------------------------------------------------
   Row prefixes — the "B1"/"C3" exhibit codes beside each bullet.
   Given its own column so the titles line up down the page, which is the whole
   reason the codes are separated from the title in the first place.
   --------------------------------------------------------------------------- */
/* Three columns: the bullet, then the code, then the title — so the code reads as
   part of the row's label rather than sitting out to the left of the dot. The middle
   column is fixed so every title starts at the same x down the page. */
.link-row.has-prefix .link-main {
  display: grid; grid-template-columns: auto 2.9rem 1fr; align-items: baseline;
  column-gap: .5rem;
}
.link-row.has-prefix .link-main > * { min-width: 0; }
.link-row.has-prefix .link-desc,
.link-row.has-prefix .link-path { grid-column: 3; overflow-wrap: anywhere; }

/* The anchor draws its own bullet; for a coded row that dot is drawn separately in
   the first column instead, or there would be two. */
.link-row.has-prefix .link-title::before { content: none; }
.link-row.has-prefix .link-title { gap: 0; }

.link-bullet {
  width: .55rem; height: .55rem; border-radius: 50%; flex: none;
  /* Baseline-aligned text would hang the dot off the cap line; nudge it onto the
     middle of the first line, where .link-title::before used to sit. */
  align-self: baseline; position: relative; top: -.18em;
}
.link-bullet.is-link { background: var(--navy); }
.link-bullet.is-doc  { background: var(--orange); }

.link-prefix {
  font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* A long code (rare) must not squeeze the title into a sliver. */
@media (max-width: 480px) {
  .link-row.has-prefix .link-main { grid-template-columns: auto 2.4rem 1fr; column-gap: .4rem; }
}

/* Editor: Prefix beside Title, sized for two or three characters. */
.title-row { display: flex; gap: .6rem; align-items: flex-start; }
.title-row .fld-prefix { flex: 0 0 6.5rem; }
.title-row .fld-title  { flex: 1 1 auto; min-width: 0; }
@media (max-width: 520px) {
  .title-row { flex-direction: column; gap: 0; }
  .title-row .fld-prefix, .title-row .fld-title { flex: 1 1 auto; width: 100%; }
}

/* The code on a closed row in edit mode. Mirrors the public layout — fixed column so
   the titles line up while scanning, description and address under the title rather
   than under the code. */
.erow-body.has-prefix {
  display: grid; grid-template-columns: 2.9rem 1fr; align-items: baseline;
  column-gap: .5rem;
}
.erow-body.has-prefix > * { min-width: 0; }
.erow-body.has-prefix .link-desc { grid-column: 2; margin-top: .15rem; }
.erow-body.has-prefix .erow-title { overflow-wrap: anywhere; }
.erow-prefix {
  font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .erow-body.has-prefix { grid-template-columns: 2.4rem 1fr; column-gap: .4rem; }
}

/* ==================================================== compact edit rows =====
   Edit mode held every row at 5.6rem so the hover add-arrows had somewhere to go,
   which made the list much airier than the page it edits.
   The arrows sit in the left gutter, and that gutter is empty on every row — so
   they can overhang their neighbours instead of the row reserving space for them.
   The row is now as compact as the public list, and crucially nothing reflows: a
   row that grew on hover would move the rows below it, and with the pointer mid-list
   that shifts a different row under the cursor and the hover oscillates.
   ========================================================================== */
.erow { min-height: 0; padding-top: .5rem; padding-bottom: .5rem; }
.erow.is-empty { padding-top: .45rem; padding-bottom: .45rem; }
.elist { margin-top: 0; }

/* The active row's controls have to draw over the adjacent rows' gutters. */
.erow:hover, .erow:focus-within { z-index: 5; }
.erow-ctl { z-index: 6; }
/* A compact row needs a clearer "this one" signal than a tall one did. */
.erow:hover { background: rgba(90, 132, 184, .07); }

/* ------------------------------------------------- the editor as an overlay --
   Opening a row used to push it apart and shove everything below it down the page.
   The form is now anchored to the row and taken out of the flex flow, so it floats
   over what follows and the row it belongs to does not move at all.
   ========================================================================== */
.erow.is-open { z-index: 30; }
.erow.is-open:hover { background: transparent; }
.erow-edit {
  position: absolute; left: 0; right: 0; top: calc(100% - .15rem);
  z-index: 30;
  /* left/right decide the width; the shared in-flow rule's 100% would fight them */
  width: auto; flex: none;
  background: #fff;
  border: 1px solid var(--grey-d);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 38px rgba(16, 20, 45, .2);
  padding: .2rem 1rem .85rem;
}
.erow-edit .editform { margin: .55rem 0 .1rem; }

/* Hint under the Address field. Small and quiet — it exists to say "any address is
   fine", because the Attach from SharePoint button beside it implied otherwise. */
.editform .fld-help {
  margin: -.15rem 0 .55rem; font-size: .8rem; color: var(--muted); line-height: 1.45;
}