/* ============================================================
   FORMS — Styleguide (§10): panel inputs, bold labels, accent actions
   ============================================================ */
.sg-form { display: flex; flex-direction: column; gap: var(--sp-6); }
.sg-row { display: flex; gap: var(--sp-6); }
.sg-field { display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.sg-label { font-size: var(--fs-4); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.sg-input {
  font-size: var(--fs-4); font-weight: 400; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 9px; padding: 9px var(--sp-5);
  width: 100%; box-sizing: border-box; outline: none; transition: border-color .12s;
}
.sg-input::placeholder { color: var(--faint); }
.sg-input:focus { border-color: var(--accent); outline: 2.5px solid rgba(252, 62, 34, .18); }
.sg-textarea { resize: vertical; min-height: 72px; }
.sg-form-actions { display: flex; align-items: center; gap: var(--sp-3); justify-content: flex-end; margin-top: var(--sp-2); }
.sg-form-or { font-family: var(--read); font-size: var(--fs-3); color: var(--muted); margin: 0 10px; }
.sg-btn-primary, .sg-btn-ghost {
  font-size: var(--fs-4); font-weight: 700; padding: 9px 18px;
  border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
}
.sg-btn-primary { border: 0; background: var(--accent); color: var(--white); }
.sg-btn-primary:hover { background: var(--accent-2); }
.sg-btn-ghost { border: 1px solid var(--line-2); background: var(--panel); color: var(--ink); }
.sg-btn-ghost:hover { border-color: var(--ink); }
/* Danger variant — reuses the ghost button's layout, swaps in red. */
.sg-btn-danger { color: var(--red); }
.sg-btn-danger:hover { background: var(--red-soft); border-color: var(--red); }

/* Native select styled to match sg-input, with a custom caret in place of the OS arrow. */
.sg-select-wrap { position: relative; }
.sg-select { appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer; }
.sg-caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}

/* Fieldset — groups related fields under an Archivo headline with a hairline.
   The .n span is the Instrument Serif italic accent word (e.g. "optional"). */
.sg-fieldset { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.sg-fs-head {
  font-family: var(--display); font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  color: var(--ink); margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.sg-fs-head .n {
  font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 19px;
  color: var(--accent); margin-left: 5px; letter-spacing: 0;
}

.hdr-add { position: relative; }
.hdr-add > summary { list-style: none; }
.hdr-add > summary::-webkit-details-marker { display: none; }
.hdr-add__pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  display: flex; gap: var(--sp-3); align-items: center;
  padding: 10px; border: 1px solid var(--line-2); border-radius: 11px;
  background: var(--panel); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
}
/* The folder form lays its input + Create button out in one line. */
.hdr-add__pop .sg-form-inline { display: flex; gap: var(--sp-4); align-items: center; margin: 0; }
.hdr-add__pop .sg-input { width: 190px; }

/* Vertical action menu variant (e.g. customer "Actions" button) */
.hdr-add__pop--menu { flex-direction: column; align-items: stretch; gap: var(--sp-1); padding: 5px; min-width: 188px; }
.hdr-add__pop--menu form { margin: 0; display: flex; }
.hdr-menu__item {
  display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box;
  padding: var(--sp-4) 11px; border-radius: 8px; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-4); font-weight: 600; color: var(--ink-2);
  text-align: left; text-decoration: none;
}
.hdr-menu__item:hover { background: var(--rail); color: var(--ink); }
.hdr-menu__item svg { color: var(--faint); flex: none; }
.hdr-menu__item--danger { color: var(--red); }
.hdr-menu__item--danger svg { color: var(--red); }
.hdr-menu__item--danger:hover { background: var(--red-soft); color: var(--red); }
.cl-head-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
/* A group of header buttons kept on one line (button_to forms are block-level). */
.cl-head-actions { display: flex; align-items: center; gap: var(--sp-4); }
.cl-search-wrap { position: relative; flex: 0 0 320px; min-width: 0; }
.cl-search {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--line-2);
  border-radius: 9px;
  padding: 9px 13px;
  color: var(--faint);
  font-size: var(--fs-4);
  transition: border-color .12s;
}
.cl-search:focus-within { border-color: var(--accent); }
.cl-search input {
  border: 0;
  outline: 0;
  background: none;
  font: inherit;
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.cl-search input::placeholder { color: var(--faint); }
.cl-search svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.cl-spacer { flex: 1; }

/* ---------- Global search dropdown ---------- */
.cl-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 120;
  width: 460px; max-width: min(92vw, 560px);
  max-height: min(70vh, 560px); overflow-y: auto;
  padding: var(--sp-3); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 12px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .35);
}
.cl-search-results[hidden] { display: none; }

/* ---------- Global search in the sidebar ---------- */
/* Sits above the main nav. The input picks up the dark sidebar palette, while
   the results popover (which overflows onto the light content area) restores
   the light palette so it looks like the rest of the app. */
.cl-side-search { padding: var(--sp-2) var(--sp-6) 14px; }
.cl-side-search .cl-search-wrap { flex: none; width: 100%; }
.cl-side .cl-search {
  background: var(--rail);
  border-color: var(--line-2);
}
.cl-side .cl-search:focus-within { border-color: var(--accent); }
.cl-side .cl-search input { color: var(--ink); }
.cl-side .cl-search input::placeholder { color: var(--faint); }
.cl-side .cl-search svg { color: var(--muted); }

/* Lift the sidebar's stacking context above the main pane so the overflowing
   results popover renders on top of the page content. */
.cl-side { z-index: 10; }

/* Hardcoded LITERALS on purpose — do NOT tokenise. This popover is nested in
   .cl-side, which redefines --ink/--muted/etc. for the dark sidebar, so we
   can't reference those tokens here (var(--ink) would resolve to the dark
   value). These literals restore the light palette for the popover. */
.cl-side .cl-search-results {
  --paper: #ffffff; --panel: #ffffff; --rail: #f4f5f6;
  --ink: #0c0d0e; --ink-2: #3c4048; --muted: #6b7077; --faint: #aab0b7;
  --line: #ececec; --line-2: #d9dcdf;
  --accent: #fc3e22; --accent-2: #e0341a; --accent-soft: #ffe9e5;
  color: var(--ink);
}

.sr-group { padding: var(--sp-3) var(--sp-2); }
.sr-group + .sr-group { border-top: 1px solid var(--line); }
.sr-glabel {
  display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4) var(--sp-2);
  font-size: var(--fs-2); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--muted);
}
.sr-glabel svg { width: 14px; height: 14px; }
.sr-glabel .ct { color: var(--faint); }

.sr-row {
  display: flex; align-items: center; gap: var(--sp-5); padding: 9px 10px;
  border-radius: 9px; text-decoration: none; color: inherit; cursor: pointer;
}
.sr-row:hover { background: rgba(0, 0, 0, .04); }
.sr-row > svg:last-child { width: 15px; height: 15px; color: var(--faint); flex: none; }

.sr-av {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  display: grid; place-items: center; color: var(--white); font-weight: 700; font-size: var(--fs-3);
}
.sr-ic {
  width: 32px; height: 32px; border-radius: 6px; flex: none;
  display: grid; place-items: center; background: var(--rail); color: var(--ink-2);
}
.sr-ic svg { width: 16px; height: 16px; }
.sr-dir { width: 32px; height: 32px; border-radius: 6px; flex: none; display: grid; place-items: center; }
.sr-dir svg { width: 15px; height: 15px; }
.sr-dir.in { background: var(--green-soft); color: var(--green); }
.sr-dir.out { background: var(--rail); color: var(--ink-2); }
.sr-dir.missed { background: var(--red-soft); color: var(--red); }

.sr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.sr-main .nm {
  font-size: var(--fs-4); font-weight: 600; letter-spacing: -.01em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-main .nm .co { font-weight: 400; color: var(--muted); }
.sr-main .sub {
  font-size: var(--fs-3); color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-row mark {
  background: color-mix(in oklch, var(--gold) 40%, white);
  color: inherit; border-radius: 2px; padding: 0 1px;
}
.sr-time { flex: none; font-size: var(--fs-3); color: var(--muted); font-variant-numeric: tabular-nums; }

.sr-empty {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 36px 0; color: var(--muted); text-align: center;
}
.sr-empty svg { width: 28px; height: 28px; color: var(--faint); margin-bottom: var(--sp-2); }
.sr-empty p { margin: 0; font-size: var(--fs-5); color: var(--ink-2); }
.sr-empty span { font-size: var(--fs-3); color: var(--faint); }

/* editorial ribbon header */
.cl-head {
  display: flex;
  align-items: center;
  gap: 22px;
  /* First row of the main pane now that the separate top bar is gone: the title
     sits on the same line as the primary action buttons (right slot) and lines
     up with the sidebar's availability switcher. */
  padding: var(--sp-5) var(--sp-8) 9px;
  position: relative;
  margin-bottom: 13px;
}
/* The bottom divider is a pseudo-element (not a border) so the lime corner can
   paint over it: the circle (.cl-main::after) and this line share z-index 0, but
   the circle comes later in the DOM, so at the top-right corner the line tucks in
   behind the circle instead of slicing across it. Elsewhere the line shows. */
.cl-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--line);
  z-index: 0;
}
/* The header forms no stacking context of its own (no z-index) so the divider
   above can sit below the body circle; the header's actual content is lifted
   above the lime individually instead. */
.cl-head > * { position: relative; z-index: 3; }

/* While the actions menu is open, lift the header above the lime + content so
   the popup overlays everything below it. */
.cl-head:has(.hdr-add[open]) { z-index: 100; }
.cl-head h1 {
  font-family: var(--display);
  font-size: var(--fs-9);
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0;
  white-space: nowrap;
  color: var(--ink);
}
/* The italic accent subtitle: any <em> in a page-header title, by default. */
.cl-head h1 em, .cl-head h1 .cl-head-date {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  letter-spacing: -.01em;
  margin-left: .12em;
}

/* section divider */
.cl-divider { display: flex; align-items: baseline; gap: 14px; padding: var(--sp-7) 0 var(--sp-4); }
.cl-divider:first-child { padding-top: var(--sp-5); }
.cl-divider .lab { font-size: var(--fs-8); font-weight: 700; color: var(--ink); font-family: var(--display); }
.cl-divider .ct { font-size: var(--fs-4); color: var(--faint); }
.cl-divider .ln { flex: 1; height: 1px; background: var(--line); }

.cl-empty { color: var(--muted); font-family: var(--read); padding: var(--sp-3) 0; }