/* ==========================================================================
   crewgate-recruiter.css
   The recruiter's three screens. Everything here is either a shell the
   platform does not have (a tool header, a two-column review view) or a
   component DESIGN-RECRUITMENT-DAY.md names as new work (the QR plate, the
   name bar, the gap cards). Tokens, surfaces, buttons, fields, chips and
   bands all come from hexa.css and are not redeclared.
   ========================================================================== */

/* The dark theme never declares this, so a native date picker opens in
   white system chrome on a navy page. The create form has one. */
.cg { color-scheme: dark; }

/* hexa.css styles every field type except date: the create form is the
   only page on the platform that has one, so the box itself was never
   skinned and rendered as unstyled browser chrome — a white strip on a
   navy field row. Same border, background and radius as every other
   field; the calendar-icon glyph is inverted so it reads against dark. */
.field input[type="date"] {
  width: 100%; padding: 14px 18px;
  border-radius: var(--r-box); border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--text); font-family: inherit; font-size: 16px; font-weight: 300;
}
.field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; }
.field input[type="date"]:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 3px;
}

/* ── Shell ───────────────────────────────────────────────────
   The three sections run across the top, not down the side: the review
   view already has a column of names, and two columns of navigation
   either side of a panel is one too many.

   The parts are the platform's own (.cand-shell in hexa.css) in the
   horizontal arrangement it already falls into on a phone, applied at
   every width. Signed out there is no bar at all. */

body.cg .cand-shell { display: block; }
body.cg .cand-nav {
  position: static; height: auto; overflow: visible;
  flex-direction: row; align-items: center; gap: 8px;
  padding: 14px 30px;
  border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
body.cg .cand-brand { padding: 0 30px 0 6px; flex: 0 0 auto; }
body.cg .cand-brand img { height: 68px; }
body.cg .cand-links {
  flex-direction: row; gap: 4px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 2px 0;
}
body.cg .cand-links::-webkit-scrollbar { display: none; }
body.cg .cand-link { flex: 0 0 auto; }
body.cg .cand-link.is-current::before { display: none; }
body.cg .cand-foot {
  display: flex; align-items: center; gap: 2px; flex: 0 0 auto;
  margin-top: 0; padding: 0 0 0 12px;
  border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.12);
}
body.cg .cand-body { display: block; }
body.cg .cand-main { padding: 26px 22px 12px; }
/* .cand-main centres what it holds, and every recruiter page is a stack of
   full-width sections. */
body.cg .cand-main > * { width: 100%; }
body.cg .cand-main.cg-main-wide { max-width: 1680px; }

@media (max-width: 700px) {
  body.cg .cand-brand img { height: 46px; }
  body.cg .cand-nav { padding: 10px 16px; }
  body.cg .cand-main { padding: 20px 14px 10px; }
}

.cg-shell {
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
}
.cg-shell > * { width: 100%; max-width: 1060px; }

.cg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 0 26px;
}
.cg-brand { display: inline-flex; text-decoration: none; }
.cg-brand > img { display: block; height: 30px; width: auto; }
/* Signed out, the mark is ambient — this is the door, not the tool, so it
   sits low in the corner rather than acting as a header a person reads. */
.cg-brand.cg-brand-quiet > img { height: 22px; opacity: 0.55; }
/* The mark carries the page, so it is sized to be seen rather than tucked
   into a corner: four times what it was. */
.cg-brand.cg-brand-in > img { height: 88px; opacity: 1; }
@media (max-width: 700px) { .cg-brand.cg-brand-in > img { height: 56px; } }

/* Two fields and a button do not need the width a form with a hint line
   and a "days already open" list needs. */
.cg-auth-card { max-width: 380px; margin: 0 auto; }
/* The mark is a JPEG on solid white, built for a light page. On the
   recruiter's dark shell it needs the same white plate the QR code gets
   further down this page, or it prints as a grey box. */
.cg-brand-plate {
  display: block; background: #fff; border-radius: 8px;
  padding: 6px 10px; line-height: 0;
}
.cg-brand-plate img { display: block; height: 30px; width: auto; }
.cg-head nav { display: flex; align-items: center; gap: 14px; }
.cg-head nav a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; }
.cg-head nav a:hover { color: var(--text); }
.cg-who { font-size: 13px; font-weight: 300; color: var(--muted); }

.cg-main { display: flex; flex-direction: column; flex: 1; }
.cg-fine { padding: 32px 0 10px; text-align: center; }

/* ── Page header ─────────────────────────────────────────── */

.cg-title { margin: 0 0 6px; }
.cg-sub   { margin: 0; }
.cg-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin: 0 0 22px;
}

/* ── The QR plate ────────────────────────────────────────── */

/* White, because a code on a tinted ground is a code that sometimes reads.
   The plate is the one deliberately opaque surface in the tool. */
.cg-qr {
  display: flex; gap: 26px; align-items: center; flex-wrap: wrap;
}
.cg-qr-plate {
  background: #ffffff; border-radius: var(--r-box); padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  line-height: 0; flex: 0 0 auto;
}
.cg-qr-plate svg { display: block; width: 200px; height: 200px; }
.cg-qr-side { flex: 1 1 260px; min-width: 0; }
.cg-qr-url {
  display: block; margin: 10px 0 0; word-break: break-all;
  font-family: inherit;               /* a <code> would otherwise be a fourth typeface */
  font-size: 13px; font-weight: 300; line-height: 1.5; color: var(--muted);
}

/* ── The candidate list ──────────────────────────────────── */

.cg-count { font-variant-numeric: tabular-nums; }

/* Check-in open: the list is there but it is not the truth yet, and
   nothing in it can be opened. The reveal is the tool's one big moment,
   so the change of state is what animates, not the decoration. */
.cg-list-wrap { transition: opacity 0.35s var(--ease-emph), filter 0.35s var(--ease-emph); }
.cg-list-wrap.is-locked {
  opacity: 0.34; filter: saturate(0.35);
  pointer-events: none; user-select: none;
}
.cg-locked-note { margin: 0 0 18px; }

.cg-empty { padding: 30px 28px; text-align: center; }

/* ── The review view: names on the left, one panel on the right ── */

.cg-cols {
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 22px; align-items: start;
}
/* The day, above the two columns: where it was, when, how it stands, and
   the two things done to a day rather than to a person. */
.cg-day-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; padding: 16px 22px; margin-bottom: 18px;
}
.cg-day-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
/* How many came, beside the state it is a fact about, and a size down
   from it: it answers a question nobody asked first. */
.cg-day-count { font-size: 12.5px; font-weight: 300; color: var(--muted); }
.cg-day-place { margin: 0 0 2px; font-size: 26px; font-weight: 300; letter-spacing: -0.02em; }
.cg-day-id .meta { margin: 0; }
.cg-day-facts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cg-day-do { display: flex; align-items: center; gap: 8px; }
/* A button that is only its icon is square, not a pill with room for a
   word that is not there. */
.gbtn.cg-ico { width: 36px; padding: 0; }
.gbtn.cg-ico svg { width: 18px; height: 18px; }

/* The names, and the two ways to reach one: find it, or add it. */
.cg-rail {
  position: sticky; top: 18px;
  padding: 14px 12px; max-height: calc(100svh - 40px);
  display: flex; flex-direction: column; overflow: hidden;
}
.cg-rail-top { display: flex; flex-direction: column; gap: 8px; padding: 0 2px 10px; }
/* Add is a small thing you do once or twice a morning, under the field you
   use all of it. */
.gbtn.cg-add-sm {
  height: 28px; padding: 0 12px; font-size: 12.5px; font-weight: 600;
  align-self: flex-start; gap: 5px;
}

.cg-rail-list {
  display: flex; flex-direction: column; gap: 3px;
  overflow-y: auto; overflow-x: hidden;
  /* The marker on the current row sits 12px outside it, so the scroll box
     is widened by exactly that and pushed back — otherwise the one thing
     saying which candidate is open is clipped off by the scroll. */
  padding-left: 12px; margin-left: -12px;
  /* A scroll container is its own scroll anchor, so the rail does not jump
     when a row is hidden by the search. */
  overscroll-behavior: contain;
}
/* .cand-link carries the row; the second line and the state dot are the
   only things this view adds to it. */
.cg-rail .cand-link { height: auto; padding: 9px 12px; flex-direction: column; align-items: flex-start; gap: 2px; }
.cg-rail-sub { font-size: 12px; font-weight: 300; letter-spacing: 0; opacity: 0.8; }
.cg-rail-none { margin: 10px 12px 0; font-size: 13px; }

/* ── Searching a list ────────────────────────────────────────
   One field, the same in the rail and on the candidates page: the list
   under it narrows as it is typed and every row left is somebody you can
   open. Built from the same parts as every other field on the site, at
   the size a rail can carry, with the magnifier saying what it is where a
   label will not fit. */
.cg-find { position: relative; }
.cg-find input {
  font-size: 16px;
  width: 100%; padding: 9px 12px 9px 34px;
  border-radius: 12px; border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2D8EC' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='m15.5 15.5 4 4'/%3E%3C/svg%3E")
    no-repeat 10px 50% / 15px 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--text); font-family: inherit; font-size: 14px; font-weight: 300;
  -webkit-appearance: none; appearance: none;
}
.cg-find input::placeholder { color: var(--muted); opacity: 0.7; }
.cg-find input:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.cg-find input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* On its own page the field is the first thing on it, so it is the size of
   something you type into rather than something in a margin. */
.cg-find-wide input { padding: 13px 16px 13px 44px; font-size: 16px; background-position: 16px 50%; background-size: 18px 18px; }

.cg-panel { padding: 30px 28px; }
.cg-panel > * + * { margin-top: 26px; }
.cg-panel-head h1 { margin: 0; }
.cg-panel-head .meta { margin: 4px 0 0; }
/* The name, the way to write to them, and the one thing that cannot be
   undone in its own corner. */
.cg-name-row { display: flex; align-items: center; gap: 14px; }
.cg-name-row h1 { min-width: 0; overflow-wrap: anywhere; }
.cg-mail-line { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cg-ico-plain {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  color: var(--muted); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: background 0.18s var(--ease-emph), color 0.18s var(--ease-emph);
}

/* The pencil is a mark, not a control: no ground under it, and it only
   shows when the name it edits is under the pointer. */
.cg-edit {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 24px; height: 24px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: var(--muted); opacity: 0;
  transition: opacity 0.18s var(--ease-emph), color 0.18s var(--ease-emph);
}
.cg-edit svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cg-name-row:hover .cg-edit { opacity: 0.75; }
.cg-edit:hover { opacity: 1; color: var(--text); }
.cg-edit:focus-visible { opacity: 1; outline: 2px solid var(--accent-bright); outline-offset: 2px; }
/* Nothing hovers on a touch screen. */
@media (hover: none) { .cg-edit { opacity: 0.75; } }
.cg-ico-plain svg {
  width: 20px; height: 20px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.cg-ico-plain:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.cg-ico-plain:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }
.gbtn.cg-del {
  margin-left: auto; flex: 0 0 auto;
  height: 30px; padding: 0 14px; font-size: 12.5px;
}
.cg-panel-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
/* Everything in this row is the same button: one height, one radius, one
   weight of type. Only the colour says which is which. */
.cg-panel-state .gbtn { height: 34px; padding: 0 16px; font-size: 13.5px; }


.cg-block-title {
  margin: 0 0 4px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold);
}

/* ── Reports ─────────────────────────────────────────────────
   A day is chosen once at the top and every report below answers for it,
   so the choice is a row of days rather than the same dropdown five
   times. */
.cg-report-days { display: flex; flex-wrap: wrap; gap: 8px; }
.cg-report-day {
  display: flex; flex-direction: column; gap: 1px;
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--glass-bg); color: var(--text); text-decoration: none;
  font-size: 14px; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: background 0.18s var(--ease-emph);
}
.cg-report-day:hover { background: rgba(255, 255, 255, 0.13); }
.cg-report-day.is-on {
  background: color-mix(in srgb, var(--accent-bright) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 55%, transparent);
}
.cg-report-day-when { font-size: 12px; font-weight: 300; color: var(--muted); }
.cg-report-day.is-on .cg-report-day-when { color: rgba(255, 255, 255, 0.8); }

.cg-reports { display: flex; flex-direction: column; gap: 10px; }
.cg-report {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 13px 18px; border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.cg-report-name { margin: 0; font-size: 16px; font-weight: 600; }
.cg-report-get { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .cg-report { flex-direction: column; align-items: flex-start; }
}

/* ── Documents held ──────────────────────────────────────── */

/* The title, how many tiles are in the merged file, and the two words
   that take all of them or none. */
.cg-docs-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cg-docs-head .cg-block-title { margin: 0; }
.cg-docs-count { margin-right: auto; }

.cg-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.cg-doc {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: inherit; text-decoration: none;
  transition: background 0.2s var(--ease-emph), box-shadow 0.25s var(--ease-emph);
}
.cg-doc:hover { background: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.cg-doc:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.cg-doc.is-dragging { opacity: 0.4; }
.cg-doc[draggable] { cursor: grab; }

/* Being in the merged file is the whole tile lighting up, and the badge
   is the page number it will become. A small square in a corner meant
   working out what was in the file by reading a row of squares. */
/* Picked is the tile lit, the way a phone lights a chosen photograph:
   a ring in the same blue, thick enough to read across the row. */
.cg-doc.is-picked {
  background: color-mix(in srgb, var(--accent-bright) 12%, transparent);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent-bright) 62%, transparent);
}
.cg-doc.is-picked:hover {
  background: color-mix(in srgb, var(--accent-bright) 17%, transparent);
  box-shadow: inset 0 0 0 3px var(--accent-bright);
}
/* The box is still there for the keyboard and the reader, and takes up no
   room: the tile itself is what is clicked, and the face and the three
   buttons on it have to stay reachable. */
.cg-doc-pick { position: absolute; top: 0; right: 0; width: 1px; height: 1px; overflow: hidden; }
.cg-doc-pick input {
  position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none;
}
.cg-doc-pick input:focus-visible ~ .sr-only,
.cg-doc:focus-within { outline: none; }
.cg-doc:has(.cg-doc-pick input:focus-visible) {
  outline: 2px solid var(--accent-bright); outline-offset: 3px;
}

/* Every face the same size, held or empty, so the row reads as the set
   of things a complete file is made of. */
.cg-doc-thumb {
  display: flex; align-items: center; justify-content: center;
  height: 170px; margin-bottom: 6px;
  border-radius: 10px; overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
}
.cg-doc-thumb img {
  max-width: 100%; max-height: 100%;
  transition: transform 0.25s var(--ease-emph);
}
.cg-doc-empty { font-size: 13px; font-weight: 300; color: var(--muted); }

.cg-doc-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.cg-doc-name { font-size: 13px; font-weight: 300; color: var(--text); overflow-wrap: anywhere; }
.cg-doc-meta { font-size: 12px; font-weight: 300; color: var(--muted); }
.cg-doc.is-missing .cg-doc-kind { opacity: 0.6; }

/* What can be done to one document, out of the way until the tile is
   looked at: turned, saved on its own, or taken off the record. Saving
   one at a time is the way out of anything the merge cannot manage, so
   it is on every tile and not only on the ones that give trouble. */
.cg-doc-do {
  position: absolute; left: 10px; bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease-emph);
}
.cg-doc:hover .cg-doc-do,
.cg-doc:focus-within .cg-doc-do { opacity: 1; pointer-events: auto; }
@media (hover: none) { .cg-doc-do { opacity: 1; pointer-events: auto; } }
/* Over a thumbnail the icons need their own footing. */
.cg-doc-do .gbtn {
  background: rgba(4, 16, 32, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Icons rather than words, so square rather than a pill with room for
   them. The size, the stroke and the colour are the shared .gbtn svg rule
   in hexa.css; only the shape of the button is set here. */
.cg-doc-do .gbtn { width: 34px; height: 34px; padding: 0; }
.cg-doc-do .gbtn svg { width: 17px; height: 17px; }

/* Taking a document off the record sits in its own corner, opposite the
   tick, well away from the two controls that only change how it is used.
   The one thing here that destroys something should not be a neighbour of
   the ones that do not. */
/* Written against .gbtn.sm rather than the class alone: .gbtn.sm sets a
   height and 16px of side padding, and a rule of one class loses to it —
   which squeezed the cross down to two pixels of nothing. */
.gbtn.cg-doc-drop {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 34px; height: 34px; padding: 0;
  opacity: 0; transition: opacity 0.18s var(--ease-emph);
}
.gbtn.cg-doc-drop svg { width: 17px; height: 17px; stroke: var(--danger); }
.cg-doc:hover .gbtn.cg-doc-drop,
.cg-doc:focus-within .gbtn.cg-doc-drop { opacity: 1; }
@media (hover: none) { .gbtn.cg-doc-drop { opacity: 1; } }
.gbtn.cg-doc-drop:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }

.cg-merge-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* While the file is being built.
   A merge is most of a minute on a full file and it used to spend that
   minute looking exactly like a button nobody had pressed. The row of
   tiles is the thing being turned into the file, so the row is what says
   so: a light travelling under it, and the documents going in breathing
   while they wait their turn. */
.cg-docs.is-merging { position: relative; }
.cg-docs.is-merging::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -15px; height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-bright), transparent);
  background-size: 42% 100%; background-repeat: no-repeat;
  animation: cg-merging 1.15s var(--ease-emph) infinite;
}
@keyframes cg-merging {
  from { background-position: -45% 0; }
  to   { background-position: 145% 0; }
}
.cg-docs.is-merging .cg-doc.is-picked { animation: cg-merge-breath 1.7s ease-in-out infinite; }
@keyframes cg-merge-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.66; } }

@media (prefers-reduced-motion: reduce) {
  .cg-docs.is-merging::after { animation: none; background-size: 100% 100%; opacity: 0.55; }
  .cg-docs.is-merging .cg-doc.is-picked { animation: none; }
}

/* ── The verdict, in colour ──────────────────────────────────
   Four states and four colours, and the whole card takes the colour. A
   list of twenty names is read by sweeping down it, and a stripe along
   one edge is not something a sweep sees.

   The surface itself does not change. Glass here is a colour held behind
   a blur under a lit top edge — .glass supplies the blur, the edge and
   the shadow, and all these rules change is which colour is being held.
   Frosted green, frosted amber, frosted blue, frosted red. */
:root {
  --v-ok:      #3FD97A;
  --v-query:   #FFB43D;
  --v-missing: #6FBEFF;
  --v-no:      #FF5F6E;
}

/* Glass, tinted. Not paint.
 *
 * The colour is thin — a fifth of the surface at the top, half that at
 * the bottom — so the room behind still comes through it, which is the
 * whole of the effect. What makes it read as green rather than as a
 * grey-green smear is not more colour, it is the saturation lifted hard
 * behind the blur, the lit top edge, and a rim of the colour around the
 * pane. Those are what a sheet of coloured glass actually does to what is
 * behind it.
 *
 * Nothing here touches the type. The text is the text it always was. */
.test-card.cg-v-ok,
.test-card.cg-v-query,
.test-card.cg-v-missing,
.test-card.cg-v-no,
.cg-rail .cand-link.cg-v-ok,
.cg-rail .cand-link.cg-v-query,
.cg-rail .cand-link.cg-v-missing,
.cg-rail .cand-link.cg-v-no,
.cg-v-btn {
  -webkit-backdrop-filter: blur(22px) saturate(240%);
  backdrop-filter: blur(22px) saturate(240%);
}

.cg-v-ok {
  background: linear-gradient(157deg, rgba(63, 217, 122, 0.22), rgba(63, 217, 122, 0.1));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
              inset 0 0 0 1px rgba(63, 217, 122, 0.42),
              inset 0 -18px 34px -22px rgba(63, 217, 122, 0.7),
              0 12px 40px rgba(0, 0, 0, 0.35);
}
.cg-v-query {
  background: linear-gradient(157deg, rgba(255, 180, 61, 0.24), rgba(255, 180, 61, 0.11));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
              inset 0 0 0 1px rgba(255, 180, 61, 0.46),
              inset 0 -18px 34px -22px rgba(255, 180, 61, 0.7),
              0 12px 40px rgba(0, 0, 0, 0.35);
}
.cg-v-missing {
  background: linear-gradient(157deg, rgba(111, 190, 255, 0.22), rgba(111, 190, 255, 0.1));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
              inset 0 0 0 1px rgba(111, 190, 255, 0.44),
              inset 0 -18px 34px -22px rgba(111, 190, 255, 0.7),
              0 12px 40px rgba(0, 0, 0, 0.35);
}
.cg-v-no {
  background: linear-gradient(157deg, rgba(255, 95, 110, 0.22), rgba(255, 95, 110, 0.1));
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
              inset 0 0 0 1px rgba(255, 95, 110, 0.44),
              inset 0 -18px 34px -22px rgba(255, 95, 110, 0.7),
              0 12px 40px rgba(0, 0, 0, 0.35);
}

/* The rail sits inside a pane that is already blurred, so its rows get a
   softer shadow than a card floating on the page. */
.cg-rail .cand-link.cg-v-ok,
.cg-rail .cand-link.cg-v-query,
.cg-rail .cand-link.cg-v-missing,
.cg-rail .cand-link.cg-v-no { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
                                          inset 0 0 0 1px currentColor; }
.cg-rail .cand-link.cg-v-ok      { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
                                               inset 0 0 0 1px rgba(63, 217, 122, 0.42); }
.cg-rail .cand-link.cg-v-query   { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
                                               inset 0 0 0 1px rgba(255, 180, 61, 0.46); }
.cg-rail .cand-link.cg-v-missing { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
                                               inset 0 0 0 1px rgba(111, 190, 255, 0.44); }
.cg-rail .cand-link.cg-v-no      { box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.32),
                                               inset 0 0 0 1px rgba(255, 95, 110, 0.44); }
.cg-rail .cand-link.cg-v-ok:hover      { background: rgba(63, 217, 122, 0.3); }
.cg-rail .cand-link.cg-v-query:hover   { background: rgba(255, 180, 61, 0.32); }
.cg-rail .cand-link.cg-v-missing:hover { background: rgba(111, 190, 255, 0.3); }
.cg-rail .cand-link.cg-v-no:hover      { background: rgba(255, 95, 110, 0.3); }

/* The pill keeps the shape every other pill on the site has.
   The word itself is written in its own colour, taken up in brightness
   rather than down: on glass this dark, a darker green is a green nobody
   can read. It is the only thing here that takes a colour — the name and
   the address stay exactly what they were. */
.band-pill.cg-v-ok      { background: rgba(63, 217, 122, 0.2);  color: #6BF0A2; }
.band-pill.cg-v-query   { background: rgba(255, 180, 61, 0.22); color: #FFC96B; }
.band-pill.cg-v-missing { background: rgba(111, 190, 255, 0.2); color: #9CD4FF; }
.band-pill.cg-v-no      { background: rgba(255, 95, 110, 0.2);  color: #FF97A1; }

/* The same word, on the second line of a rail row. */
.cg-rail .cand-link.cg-v-ok      .cg-rail-sub { color: #6BF0A2; opacity: 1; }
.cg-rail .cand-link.cg-v-query   .cg-rail-sub { color: #FFC96B; opacity: 1; }
.cg-rail .cand-link.cg-v-missing .cg-rail-sub { color: #9CD4FF; opacity: 1; }
.cg-rail .cand-link.cg-v-no      .cg-rail-sub { color: #FF97A1; opacity: 1; }

/* The four buttons that set it, in the glass they will apply. */
.cg-verdicts { display: grid; gap: 10px; margin-top: 18px; }
.cg-verdicts .gbtn { width: 100%; }
.cg-v-btn:hover { filter: brightness(1.25); }
/* Under a stack of full-width choices, a lone Cancel sits centred; hung
   off the right edge it read as part of no row at all. */
#cgMergeDialog .dialog-actions { justify-content: center; }

/* The status, and the list of what it can become. The same pane as
   everything else on the page: a colour held behind a blur under a lit
   top edge. */
.cg-status { position: relative; }
.cg-status-pill { border: none; font-family: inherit; cursor: pointer; }
.cg-status-pill:not([class*="cg-v-"]) {
  background: var(--glass-bg); color: var(--muted);
}
.cg-status-pill:hover { filter: brightness(1.2); }
.cg-status-pill:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.cg-status-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  display: grid; gap: 6px; min-width: 172px; padding: 8px;
  border-radius: var(--r-box);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 0 rgba(255, 255, 255, 0.06),
              0 16px 44px rgba(0, 0, 0, 0.45);
  animation: rise 0.22s var(--ease-decel) backwards;
}
.cg-status-menu[hidden] { display: none; }
.cg-status-opt {
  padding: 9px 14px; border: none; border-radius: var(--r-pill);
  font-family: inherit; font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); text-align: left; cursor: pointer;
  transition: filter 0.18s var(--ease-emph);
}
.cg-status-opt:hover { filter: brightness(1.3); }
.cg-status-opt:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* The question, in a box under the pill, with the room quiet behind it.
   The overlay is the one every other question here uses — the page goes
   soft and nothing else can be clicked. What changes is the box: it is
   the size of the sentence in it rather than the size of a briefing, and
   it stands under the pill it belongs to rather than in the middle of a
   page it has nothing to do with. The page puts it there by measuring
   where the pill is, so the overlay stops centring anything. */
/* Above the list of names, where a missing one is noticed. */
.cg-add-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cg-add-plus { font-size: 20px; font-weight: 400; line-height: 1; margin-right: 2px; }

/* Three fields in a dialog, left-aligned: a form is read down, not
   centred like the sentence above it. */
.cg-add-form { margin-top: 18px; text-align: left; }
.cg-add-form .field + .field { margin-top: 12px; }
.cg-add-form .form-note { margin-top: 12px; }

/* Under the three fields, the same act at the other size: a rule with
   "Or a whole list" sitting on it, then the box and the file. */
.cg-add-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0 12px; color: var(--muted); font-size: 13px;
}
/* The pasted list, and the file that can stand in for it. The native
   input stays off-screen whatever any input rule says about display:
   the ghost button is the only file control this row shows. */
.cg-add-form textarea { min-height: 96px; resize: vertical; }
.cg-add-file-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.cg-add-file-row .meta { overflow-wrap: anywhere; }
.cg-add-file-row input[type="file"] { display: none !important; }

/* Each line that did not go on, quoted back under the count that did. */
.cg-add-skip { display: block; margin-top: 6px; }

/* ── Gap and blocking cards ──────────────────────────────── */

/* A gap is a question, not a failure: gold while it is open, blue once it
   is settled. Red is kept for the blocking facts. */
.cg-ask {
  padding: 16px 20px; border-radius: var(--r-box);
  background: rgba(237, 214, 0, 0.09);
  background: color-mix(in srgb, var(--gold) 11%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  animation: rise 0.5s var(--ease-decel) backwards;
}
.cg-ask + .cg-ask { margin-top: 12px; }
.cg-ask:nth-child(2) { animation-delay: 0.06s; }
.cg-ask:nth-child(3) { animation-delay: 0.12s; }
.cg-ask:nth-child(4) { animation-delay: 0.18s; }
.cg-ask:nth-child(5) { animation-delay: 0.24s; }
.cg-ask:nth-child(6) { animation-delay: 0.30s; }
.cg-ask:nth-child(n+7) { animation-delay: 0.36s; }
.cg-ask.is-answered {
  background: rgba(0, 170, 255, 0.11);
  background: color-mix(in srgb, var(--accent-bright) 13%, transparent);
  transition: background 0.4s var(--ease-emph);
}
.cg-ask-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.cg-ask-q { margin: 0 0 4px; font-size: 16px; font-weight: 300; line-height: 1.45; color: var(--text); }
.cg-ask-why { margin: 0 0 12px; }
.cg-ask .field { margin: 0; }
.cg-ask textarea { min-height: 78px; resize: vertical; }

.cg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; }

/* Recommendation 10 in the design reference: a form-heavy tool needs the
   field itself to answer, not only an outline around it. */
.cg .field input:focus, .cg .field textarea:focus, .cg .field select:focus {
  border-color: var(--accent-bright);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 3px rgba(0, 128, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14),
              0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  outline: none;
}
.cg .field input:focus-visible, .cg .field textarea:focus-visible, .cg .field select:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 3px;
}

.cg-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 18px; }

/* ── Coverage bar: the whole history as one line ─────────── */

.cg-cover { display: flex; height: 10px; border-radius: var(--r-pill); overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.cg-cover span { display: block; height: 100%; }
.cg-cover .t-education  { background: color-mix(in srgb, var(--accent-bright) 55%, transparent); }
.cg-cover .t-work       { background: color-mix(in srgb, var(--accent) 82%, transparent); }
.cg-cover .t-additional { background: color-mix(in srgb, var(--accent-bright) 32%, transparent); }
.cg-cover .t-explained  { background: color-mix(in srgb, var(--gold) 45%, transparent); }
.cg-cover .t-hole       { background: color-mix(in srgb, var(--danger) 55%, transparent); }
.cg-cover-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 0; }
.cg-cover-key span { font-size: 12px; font-weight: 300; color: var(--muted); }

/* ── Days on the front page ──────────────────────────────── */

.cg-days { display: flex; flex-direction: column; gap: 10px; }
.cg-day-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 18px; border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: inherit; text-decoration: none;
  transition: background 0.2s var(--ease-emph), transform 0.18s var(--ease-emph);
}
.cg-day-row:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.cg-day-row:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.cg-day-where { font-size: 16px; font-weight: 300; color: var(--text); }
.cg-day-when  { font-size: 13px; font-weight: 300; color: var(--muted); }

.cg-day-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
}
/* ── Everybody, whichever day they came on ───────────────────
   The same row as a day, carrying a person: who they are on the left, the
   day they belong to and how they were left on the right. */
.cg-people { display: flex; flex-direction: column; gap: 8px; }
.cg-person-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: inherit; text-decoration: none;
  transition: background 0.2s var(--ease-emph), transform 0.18s var(--ease-emph);
}
.cg-person-row:hover { background: rgba(255, 255, 255, 0.09); transform: translateY(-1px); }
.cg-person-row:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.cg-person-who  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cg-person-name { font-size: 16px; font-weight: 300; color: var(--text); }
.cg-person-mail { font-size: 13px; font-weight: 300; color: var(--muted); overflow-wrap: anywhere; }
.cg-person-side { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cg-person-day  { display: flex; flex-direction: column; gap: 1px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: right; }
.cg-person-when { font-size: 12px; font-weight: 300; opacity: 0.8; }

.cg-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* Live, the way a person's presence dot is live: green while check-in is
   still taking candidates, red once it has stopped. */
.cg-dot-open   { background: var(--live-green); box-shadow: 0 0 8px color-mix(in srgb, var(--live-green) 55%, transparent); }
.cg-dot-closed { background: var(--danger); box-shadow: 0 0 8px color-mix(in srgb, var(--danger) 60%, transparent); }

/* ── Narrow screens ──────────────────────────────────────── */

@media (max-width: 900px) {
  .cg-cols { grid-template-columns: minmax(0, 1fr); }
  .cg-rail { position: static; max-height: none; overflow: visible; }
  /* Names run sideways rather than down, so the panel starts on the first
     screen instead of below a column of everybody. */
  .cg-rail-list {
    flex-direction: row; overflow-x: auto; overflow-y: hidden; gap: 8px;
    scrollbar-width: none; padding-left: 0; margin-left: 0;
  }
  .cg-rail-list::-webkit-scrollbar { display: none; }
  .cg-rail .cand-link { flex: 0 0 auto; }
  .cg-rail .cand-link.is-current::before { display: none; }
  /* Search and Add side by side, the field taking what is left. */
  .cg-rail-top { flex-direction: row; align-items: center; }
  .cg-rail-top .gbtn { flex: 0 0 auto; width: auto; }
  .cg-rail-top .cg-find { flex: 1 1 auto; min-width: 0; }
  .cg-day-bar { padding: 14px 16px; }
  .cg-panel { padding: 24px 20px; }
  .cg-qr-plate svg { width: 160px; height: 160px; }
}

/* ── Motion, held to the same two switches as the platform ── */

@media (prefers-reduced-motion: reduce) {
  .cg-ask, .cg-list-wrap, .cg-doc, .cg-day-row, .cg-person-row, .cg-cover span {
    animation: none !important;
    transition: none !important;
  }
  .cg-day-row:hover, .cg-person-row:hover { transform: none; }
}
body.reduce-motion .cg-ask, body.reduce-motion .cg-list-wrap,
body.reduce-motion .cg-doc, body.reduce-motion .cg-day-row,
body.reduce-motion .cg-person-row,
body.reduce-motion .cg-cover span {
  animation: none !important; transition: none !important;
}
body.reduce-motion .cg-day-row:hover,
body.reduce-motion .cg-person-row:hover { transform: none; }

@media (prefers-reduced-transparency: reduce) {
  .cg-doc, .cg-day-row, .cg-person-row, .cg-ask { background: var(--opaque-fallback); }
}

/* ── Document thumbnails and the viewer ─────────────────── */
.cg-doc.has-thumb { padding-top: 12px; }
.cg-doc-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin: 0 0 12px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
}
.cg-doc-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s var(--ease-emph);
}
.cg-doc.has-thumb:hover .cg-doc-thumb img { transform: scale(1.04); }

.cg-viewer {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 72px 24px 32px;
  background: rgba(2, 13, 31, 0.92);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}
.cg-viewer[hidden] { display: none; }
.cg-viewer img {
  max-width: 100%;
  max-height: calc(100vh - 150px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.cg-viewer-name { margin: 0; font-size: 13px; color: var(--muted); }
.cg-viewer-close {
  position: absolute;
  top: 20px; right: 24px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font: inherit; font-size: 13px;
  cursor: pointer;
}
.cg-viewer-close:hover { background: rgba(255, 255, 255, 0.14); }

@media (prefers-reduced-motion: reduce) {
  .cg-doc.has-thumb:hover .cg-doc-thumb img { transform: none; }
  .cg-doc-thumb img { transition: none; }
}

/* ── What is still to be asked ───────────────────────────────
   Under the name, in a colour nothing else on the panel uses, so the
   questions are the first thing read and the block visibly empties as
   they are answered. */
.cg-asks {
  --pink: #FF8FB1;
  border-radius: var(--r-box); padding: 18px 20px; margin-bottom: 26px;
  background: color-mix(in srgb, var(--pink) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 34%, transparent);
}
.cg-asks-title {
  margin: 0; display: flex; align-items: center; gap: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--pink);
}
.cg-asks-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--pink) 22%, transparent);
  font-size: 11px; letter-spacing: 0;
}
.cg-asks-one {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--pink) 22%, transparent);
}
.cg-asks-one:first-of-type { border-top: 0; }
.cg-asks-one .cg-ask-q { margin: 0 0 4px; }
.cg-asks-one .cg-ask-why { margin: 0 0 12px; }
.cg-asks-one .field { margin: 0; }
.cg-asks-one .cg-chips { margin-top: 10px; }
/* Answered under the cursor: it stops being pink where it stands and
   moves to the thing it explains on the next load. */
.cg-asks-one.is-answered { opacity: 0.55; }

/* An answer where it belongs: the months it accounts for, or the ELA it
   is printed on. */
.cg-said + .cg-said { margin-top: 14px; }
.cg-said-when { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--muted); }

/* ── The calendar ────────────────────────────────────────── */
.cg-cal { position: relative; }
.cg-cal[hidden] { display: none; }
/* Every pane on this site blurs what is behind it, and a blurred pane is
   a stacking context of its own: the calendar can only ever be drawn
   inside the card that holds it, and the cards written after that one
   paint over the top of it. So the card is raised, not only the calendar
   inside it. */
.cg-cal-card,
.glass:has(.cg-cal) { z-index: 5; }

.cg-cal-field {
  width: 100%;
  padding: 14px 18px;
  text-align: left;
  border-radius: var(--r-box);
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--muted);
  font-family: inherit; font-size: 16px; font-weight: 300;
  cursor: pointer;
  transition: border-color 0.18s var(--ease-emph), background 0.18s var(--ease-emph);
}
.cg-cal-field.has-value { color: var(--text); }
.cg-cal-field:hover { background: rgba(255, 255, 255, 0.08); }
.cg-cal-field:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

.cg-cal-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 8px);
  left: 0;
  width: min(330px, 92vw);
  padding: 16px;
  border-radius: var(--r-box);
  border: 1px solid var(--glass-border);
  background: rgba(10, 22, 43, 0.86);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 20px 44px rgba(0, 0, 0, 0.5);
  animation: cg-cal-in 0.2s var(--ease-decel) backwards;
}
.cg-cal-pop[hidden] { display: none; }
@keyframes cg-cal-in { from { opacity: 0; transform: translateY(-6px); } }

.cg-cal-bar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cg-cal-month { font-size: 15px; font-weight: 600; color: var(--text); }
.cg-cal-nav {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font: inherit; font-size: 18px; line-height: 1;
  cursor: pointer;
}
.cg-cal-nav:hover { background: rgba(255, 255, 255, 0.12); }

.cg-cal-dow, .cg-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cg-cal-dow {
  margin-bottom: 6px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); opacity: 0.7; text-align: center;
}
.cg-cal-pad { display: block; }
.cg-cal-day {
  aspect-ratio: 1;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: inherit; font-size: 14px;
  cursor: pointer;
  transition: background 0.14s var(--ease-emph), border-color 0.14s var(--ease-emph);
}
.cg-cal-day:hover { background: rgba(255, 255, 255, 0.1); }
.cg-cal-day.is-today { border-color: var(--glass-border); }
.cg-cal-day.is-on {
  background: var(--accent);
  border-color: var(--accent-bright);
  font-weight: 600;
}
.cg-cal-day:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) { .cg-cal-pop { animation: none; } }

/* ── Each section is its own card ───────────────────────── */
.cg-block {
  padding: 22px 24px;
  border-radius: var(--r-row);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.cg-block + .cg-block,
form .cg-block { margin-top: 18px; }
.cg-block > .cg-docs,
.cg-block > .cg-cover,
.cg-block > .cg-two { margin-top: 16px; }

@media (max-width: 700px) { .cg-block { padding: 18px 16px; } }

/* ── Waiting on an answer ───────────────────────────────────
   Pink, not red: nothing here is wrong, it is unfinished. A recruiter
   scanning the page needs to see what is still owed without reading it,
   and the colour leaves the moment it is answered. */
:root {
  --cg-await:        #FF7AA8;
  --cg-await-bg:     rgba(255, 122, 168, 0.10);
  --cg-await-border: rgba(255, 122, 168, 0.42);
}

.cg-doc.is-missing {
  background: var(--cg-await-bg);
  border-color: var(--cg-await-border);
}
.cg-doc.is-missing .cg-doc-kind,
.cg-doc.is-missing .cg-doc-empty { color: var(--cg-await); }
.cg-doc.is-missing .cg-doc-thumb { background: transparent; }

.cg-ask[data-gap]:not(.is-answered),
.cg-ask.is-await {
  background: var(--cg-await-bg);
  border-color: var(--cg-await-border);
}
/* The card carries it, not a label on the card. */
.cg-block.cg-ask[data-gap]:not(.is-answered),
.cg-block.cg-ask.is-await {
  background: var(--cg-await-bg);
  border-color: var(--cg-await-border);
}


/* A step is a card, so where the two classes meet the card wins: one
   surface, one padding, one radius. The gold wash stays only where it means
   something, which is a question still carrying its own state. */
.cg-block.cg-ask {
  padding: 22px 24px;
  border-radius: var(--r-row);
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: none;
}
.cg-block.cg-ask + .cg-block.cg-ask { margin-top: 0; }

@media (max-width: 700px) { .cg-block.cg-ask { padding: 18px 16px; } }

/* Three questions in one card, kept apart by a rule rather than by a gap
   so it still reads as one thing. */
.cg-reason + .cg-reason {
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

/* ── The record: what happened, and when ───────────────────
   One card per section of the form, each holding what belongs in it. A
   row is a line you read across — when, then what — and the two actions
   stay out of the way until that line is the one being looked at. */
.cg-section + .cg-section { margin-top: 18px; }

.cg-entry-list { display: flex; flex-direction: column; }
.cg-entry-none { margin: 0; }

.cg-entry {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 11px 12px; margin: 0 -12px;
  border-radius: var(--r-box);
  transition: background 0.18s var(--ease-emph);
}
.cg-entry:hover { background: rgba(255, 255, 255, 0.055); }
.cg-entry + .cg-entry { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07); }

.cg-entry-when {
  font-size: 13px; font-weight: 300; color: var(--muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cg-entry-what { font-size: 15px; font-weight: 300; line-height: 1.45; color: var(--text); }

.cg-entry-do {
  display: inline-flex; gap: 6px; white-space: nowrap;
  opacity: 0;
  transition: opacity 0.18s var(--ease-emph);
}
.cg-entry:hover .cg-entry-do,
.cg-entry:focus-within .cg-entry-do { opacity: 1; }
/* Nothing to hover with: the actions simply stay. */
@media (hover: none) { .cg-entry-do { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cg-entry-do, .cg-entry { transition: none; } }

@media (max-width: 760px) {
  .cg-entry { grid-template-columns: 1fr; gap: 4px; }
  .cg-entry-do { opacity: 1; margin-top: 4px; }
}

/* ── Adding or correcting one period ──────────────────────
   Ordinary controls at ordinary size, in the order the sentence is said:
   what it was, when it ran, whether it still runs, then who and what.
   Everything wears the same skin as every other field on the platform;
   only the widths differ, because a month is not as wide as a sentence. */
.cg-entry-form {
  margin-top: 16px; padding: 18px 20px;
  border-radius: var(--r-box);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
.cg-entry-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.cg-entry-form select,
.cg-entry-form input[type="text"],
.cg-entry-form .cg-cal-field {
  padding: 12px 16px;
  border-radius: var(--r-box); border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--text); font-family: inherit; font-size: 15px; font-weight: 300;
}
.cg-entry-form input::placeholder { color: var(--muted); opacity: 0.6; }
.cg-entry-form select:focus-visible,
.cg-entry-form input:focus-visible,
.cg-entry-form .cg-cal-field:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: 3px;
}

.cg-entry-form select { width: auto; min-width: 152px; }
.cg-entry-form .cg-mon { flex: 0 0 auto; }
.cg-entry-form .cg-cal-field { width: 164px; text-align: left; cursor: pointer; }
.cg-entry-form .cg-cal-field:hover { background: rgba(255, 255, 255, 0.08); }

.cg-entry-present {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 300; color: var(--muted); white-space: nowrap;
}

.cg-entry-fields { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.cg-entry-fields input { flex: 1 1 220px; min-width: 0; }

.cg-entry-actions { display: flex; gap: 8px; margin-top: 16px; }

/* The month panel, in the shape the day date already uses. */
.cg-mon .cg-cal-pop { width: 264px; padding: 14px; }
.cg-mon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 12px; }
.cg-mon-cell { aspect-ratio: auto; padding: 9px 0; font-size: 13px; }

@media (max-width: 700px) {
  .cg-entry-form .cg-cal-field { width: 100%; }
  .cg-entry-form select { width: 100%; }
  .cg-entry-form .cg-mon { flex: 1 1 100%; }
}

/* ── Adding a file to the record ─────────────────────────── */
.cg-attach {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  padding: 18px 20px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--r-box);
  transition: background 0.2s var(--ease-emph), border-color 0.2s var(--ease-emph);
}
.cg-attach.is-over {
  border-style: solid;
  border-color: var(--accent-bright);
  background: rgba(255, 255, 255, 0.05);
}
.cg-attach.is-busy { opacity: 0.6; pointer-events: none; }
.cg-attach-say { margin: 0; font-size: 14px; color: var(--muted); }

/* ── Process tests ──────────────────────────────────────────
   The run's own words while it goes, then the four buckets. */
.cg-chrome-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.cg-import-log {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  max-height: 320px;
  overflow: auto;
}
.cg-import-log li {
  padding: 8px 0;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.cg-import-log li:last-child { border-bottom: none; }
.cg-import-log .is-ok  { color: var(--text); }
/* Not an error: a result with nobody to file it against is ordinary, and
   colouring it red would have the recruiter chasing something that is
   fine. Red is kept for the rows that actually went wrong. */
.cg-import-log .is-skip { color: var(--muted); }
.cg-import-log .is-bad  { color: var(--danger); }
.cg-import-log .is-head {
  padding-top: 18px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--muted);
  border-bottom: none;
}

/* ── Request documents ───────────────────────────────────────
   A field whose whole job is to be selected, and a preview of the
   email that is deliberately shown on white: what is copied has to
   look like what lands in Outlook, not like this portal. */

.cg-copy-field {
  width: 100%;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.25);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
textarea.cg-copy-field { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }

.cg-mail-preview {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px 24px;
  overflow-x: auto;
}
/* It is written in, so it has to look writable and show where the caret
   is without shouting about it. */
.cg-mail-preview[contenteditable="true"] {
  outline: 1px solid rgba(0, 0, 0, 0.08);
  cursor: text;
  transition: outline-color 0.2s ease;
}
.cg-mail-preview[contenteditable="true"]:hover { outline-color: rgba(0, 0, 0, 0.16); }
.cg-mail-preview[contenteditable="true"]:focus {
  outline: 2px solid var(--accent-bright);
  outline-offset: 1px;
}

/* ── Folded sections ─────────────────────────────────────────
   Shut, with the defaults already in them and the summary saying what is
   inside: most files are issued exactly as they arrive, and the ones that
   are not are two clicks from being changed. */
.cg-fold > summary {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; list-style: none;
}
.cg-fold > summary::-webkit-details-marker { display: none; }
.cg-fold > summary::after {
  content: ""; margin-left: auto; flex: 0 0 auto;
  width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.18s var(--ease-emph);
}
.cg-fold[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.cg-fold > summary:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 4px; border-radius: 8px; }
.cg-fold > summary .cg-block-title { margin: 0; }
.cg-fold-say { font-size: 13px; font-weight: 300; color: var(--muted); }
.cg-fold[open] > summary { margin-bottom: 4px; }

/* Deleting a day sits with the day's other buttons and says what it is
   by its colour only once it is under the cursor. */
.gbtn.cg-day-del { color: var(--danger); }
.gbtn.cg-day-del:hover { background: color-mix(in srgb, var(--danger) 16%, transparent); }
.dialog-say { margin: 14px 0 0; font-size: 15px; font-weight: 300; color: var(--muted); }

/* ── The interview, over the page ────────────────────────────
   The questions and the record they are about, on one sheet above
   everything else. The page behind is blurred rather than dimmed: it is
   still there, it is just not what is being read. Lighter than the panel
   under it, because this is where the typing happens. */
.cg-ask-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 18px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  /* The panel is the thing; the page behind it is only pushed back. So the
     backdrop is a light blur and barely a tint — enough to say the page is
     no longer what you are reading, not a sheet drawn over it. */
  background: rgba(2, 13, 31, 0.28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: cg-ask-fade 0.2s var(--ease-decel);

  /* Ink on white glass — the owner's call: light for readability, glass
     for the material. Everything inside is token-driven and follows. */
  --text: #14202C;
  --muted: #5A6C7E;
  --gold: #8A6D00;
  --glass-bg: rgba(20, 32, 44, 0.05);
  --glass-bg-strong: rgba(20, 32, 44, 0.09);
  --glass-border: rgba(20, 32, 44, 0.16);
  color: var(--text);
}
.cg-ask-modal[hidden] { display: none; }
@keyframes cg-ask-fade { from { opacity: 0; } }
body.cg-modal-on { overflow: hidden; }

/* The panel: a solid pane of paper that holds the interview, floating on
   the blurred page. This is the surface — the fields and questions sit on
   it, not on cards of their own. */
.cg-ask-sheet {
  width: min(820px, 100%); margin: auto;
  /* One height for every card: moving quickly through the sheet, the
     frame holds still and only what is on it changes. The body under
     the bars is the part that scrolls. */
  height: min(780px, calc(100dvh - 40px));
  display: flex; flex-direction: column;
  overflow: hidden;
  border-radius: var(--r-card, 28px);
  background: linear-gradient(180deg, rgba(244, 249, 254, 0.94), rgba(230, 239, 249, 0.88));
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.98),
              inset 0 -1px 0 rgba(255, 255, 255, 0.5),
              inset 1px 1px 3px rgba(255, 255, 255, 0.55),
              0 24px 70px rgba(0, 0, 0, 0.5);
  padding: 0 26px 26px;
  animation: cg-ask-rise 0.24s var(--ease-decel) backwards;
}
.cg-ask-sheet:focus { outline: none; }
@keyframes cg-ask-rise { from { opacity: 0; transform: translateY(12px) scale(0.99); } }


/* Save and Close travel down the sheet with no bar under them: the ground
   is already the material, and a second one over it was a seam. */
/* No bar at all: the cross floats in the corner on its own small pane,
   and the sheet is the only ground there is. */
.cg-sheet-do {
  display: flex; justify-content: flex-end; align-items: flex-start; gap: 10px;
  position: sticky; top: 12px; z-index: 4;
  height: 0; margin: 12px 0 0; padding: 0; overflow: visible;
}
.cg-ask-body {
  padding: 52px 0 8px;
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.cg-sheet-do, .cg-step-nav { flex: 0 0 auto; }
/* Save sits bottom right of its card, where the sentence ends. */
.cg-approved .row { justify-content: flex-end; }
.cg-step > * + * { margin-top: 16px; }
.cg-step[hidden] { display: none; }
.cg-step { animation: cg-step-in 0.2s var(--ease-decel); }
@keyframes cg-step-in { from { opacity: 0; transform: translateX(8px); } }

/* One card to the next. The count is between the arrows because it is the
   only thing that says how much is left. */
.cg-step-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 18px 0 4px;
}
.cg-step-nav .gbtn { width: 40px; height: 40px; padding: 0; border-radius: 50%; }
/* The arrow, armed into a word: leaving open questions is said before it
   is done. Amber, because it is a caution and not an error. */
.cg-step-nav .gbtn.cg-skip-armed {
  width: auto; padding: 0 20px; border-radius: var(--r-pill, 999px);
  background: rgba(255, 180, 61, 0.28);
  box-shadow: inset 0 0 0 1px rgba(138, 109, 0, 0.45);
  color: #14202C; font-weight: 600; white-space: nowrap;
}
.cg-step-nav .gbtn svg {
  width: 19px; height: 19px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.cg-step-nav .gbtn[disabled] { opacity: 0.35; pointer-events: none; }
.cg-step-count {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: center;
}
/* On the sheet the questions are the sheet, so the section drops the tint
   it needs when it sits in a panel. */
.cg-ask-card .cg-asks-one { margin-top: 26px; }
.cg-ask-modal .cg-asks-one.is-said { opacity: 0.72; }
.cg-said-text { margin: 6px 0 0; font-size: 15px; font-weight: 300; line-height: 1.5; }

/* The button that opens it, where the name is. */
.gbtn.cg-ask-open {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 46%, transparent);
  color: var(--gold);
}
.gbtn.cg-ask-open:hover { background: color-mix(in srgb, var(--gold) 26%, transparent); }
.cg-asks-n {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: color-mix(in srgb, var(--gold) 32%, transparent);
  font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* The mark turns while the documents are being built. Icon alone, on the
   far right of its row: Save already issues the forms, so this button is
   the recheck, not part of the writing. */
.gbtn.cg-build { gap: 8px; }
.cg-panel-state .gbtn.cg-build { margin-left: auto; padding: 0 10px; }

/* What the file is about to go out without, one line each. */
.cg-warn-list { padding-left: 18px; }
.cg-warn-list li { margin-top: 6px; }
.cg-build-spin { display: inline-flex; line-height: 0; }
.cg-build-spin svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gbtn.cg-build.is-going .cg-build-spin { animation: cg-spin 0.9s linear infinite; }
@keyframes cg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .gbtn.cg-build.is-going .cg-build-spin { animation-duration: 2.4s; }
  .cg-ask-modal, .cg-ask-sheet { animation: none; }
}

/* ── The sheet is paper ──────────────────────────────────────
   Inside it every surface that was a pane of dark glass becomes ink on
   white — but there is no card behind the fields. What the recruiter
   writes into floats on the frost: the white inputs are the thing to
   fill, and a panel around them was one surface too many. */
.cg-ask-modal .cg-block,
.cg-ask-modal .cg-said {
  background: transparent; border: 0; box-shadow: none; padding: 0;
}
.cg-ask-modal .cg-block + .cg-block { margin-top: 22px; }
/* The record is a stack of rows to open, so those get a faint fill a finger
   can see it is pressing — a shade off the panel, not a card on it. */
.cg-ask-modal .cg-section {
  background: rgba(20, 32, 44, 0.035);
  border: 1px solid rgba(20, 32, 44, 0.10);
  border-radius: var(--r-box); padding: 0 18px;
}
.cg-ask-modal .cg-section[open] { background: rgba(20, 32, 44, 0.05); }
/* A question is a row on a card: the space around it is the separation. */
.cg-ask-modal .cg-asks-one { background: transparent; border: 0; box-shadow: none; }
.cg-ask-modal .cg-block.cg-ask.is-await { background: transparent; }
.cg-ask-modal .cg-ask.is-await { box-shadow: none; }
.cg-ask-modal .cg-ask-q { color: var(--text); font-weight: 600; }
.cg-ask-modal .field label,
.cg-ask-modal .cg-said-when,
.cg-ask-modal .cg-entry-what { color: var(--text); }
.cg-ask-modal .meta,
.cg-ask-modal .hint,
.cg-ask-modal .cg-fold-say,
.cg-ask-modal .cg-entry-when,
.cg-ask-modal .cg-cover-key { color: var(--muted); }

.cg-ask-sheet input[type="text"],
.cg-ask-sheet input[type="email"],
.cg-ask-sheet input[type="search"],
.cg-ask-sheet textarea,
.cg-ask-sheet select,
.cg-ask-modal .cg-cal-field {
  background: #FFFFFF;
  border: 1px solid rgba(22, 33, 44, 0.20);
  box-shadow: none;
  color: var(--text);
}
.cg-ask-sheet input::placeholder,
.cg-ask-sheet textarea::placeholder { color: #93A3B4; }
.cg-ask-modal .cg-cal-field:hover { background: #F1F4F8; }
.cg-ask-modal .cg-cal-pop {
  background: #FFFFFF; border-color: rgba(22, 33, 44, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}
.cg-ask-modal .cg-cal-day, .cg-ask-modal .cg-cal-nav { color: var(--text); }
.cg-ask-modal .cg-cal-day:hover { background: rgba(22, 33, 44, 0.07); }

/* Buttons: the ghost ones are drawn for a dark ground and vanish here. */
.cg-ask-modal .gbtn.ghost {
  background: #FFFFFF; color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(22, 33, 44, 0.18);
}
.cg-ask-modal .gbtn.ghost:hover { background: #EEF1F6; }
.cg-ask-modal .gbtn:not(.primary):not(.ghost):not(.danger) {
  background: rgba(22, 33, 44, 0.07); color: var(--text); box-shadow: none;
}
.cg-ask-modal .cg-fold-head::after { border-color: var(--muted); }
.cg-ask-modal .cg-fold > summary { color: var(--text); }


/* ── A hole in the file is a place to put something ──────────
   The empty slot is a button: it takes a document dropped on it from the
   row, or one chosen from the machine by clicking it. Everything the
   filled tiles wear it wears too, so the row stays one row. */
button.cg-doc {
  font: inherit; color: inherit; text-align: inherit;
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.cg-doc.is-missing:hover {
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px var(--glass-border);
}
.cg-doc.is-missing:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
/* A document is being held over it. */
.cg-doc.is-target {
  background: color-mix(in srgb, var(--accent-bright) 16%, transparent);
  box-shadow: inset 0 0 0 2px var(--accent-bright);
}
.cg-doc.is-target .cg-doc-empty { color: var(--text); }
.cg-doc.is-busy { opacity: 0.5; pointer-events: none; }

/* Nothing to save is not a button to press. */
.gbtn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── The assessment: taps, not typing ─────────────────────────
   A row per mark, the question on the left and the choices on the
   right as one segmented control. The chosen segment is filled the way
   every other selected thing here is filled; the rest stay glass. */
.cg-seg-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 10px;
}
.cg-seg-label { font-size: 13px; color: var(--text); min-width: 0; }
.cg-seg {
  display: inline-flex; flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--muted) 40%, transparent);
  border-radius: 9px; overflow: hidden;
}
.cg-seg label { position: relative; display: inline-flex; }
.cg-seg label + label {
  border-left: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}
.cg-seg input {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0;
}
.cg-seg span {
  display: inline-block; padding: 5px 11px;
  font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--muted); cursor: pointer; user-select: none;
}
.cg-seg input:checked + span {
  background: color-mix(in srgb, var(--accent-bright) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-bright) 55%, transparent);
  color: var(--text);
}
.cg-seg input:focus-visible + span {
  outline: 2px solid var(--accent-bright); outline-offset: -2px;
}
/* The merge's own dialogs speak over the file room, which sits at the
   sheet's height (200) — without this they would open underneath it. */
#cgMergeDialog, #cgMergeWarn, #cgFinishDlg { z-index: 300; }

/* The file room's one instruction on the left, Close on the right. */
.cg-room-do {
  position: static; height: auto; overflow: visible;
  justify-content: space-between;
  padding: 18px 0 12px;
}
.cg-room-do .cg-block-title { margin: 0; }

/* A record being read: the documents sit greyed and breathing until the
   reading and the reissue are done, so nobody works on shifting ground. */
.cg-docs.is-reading {
  pointer-events: none;
  animation: cg-reading 1.5s ease-in-out infinite;
}
@keyframes cg-reading {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.2; }
}

/* A no-dates card writing itself down. */
.cg-entry-form.is-busy { opacity: 0.5; pointer-events: none; }

/* The approved card: the decision, so the biggest control on the sheet. */
.cg-approved .cg-seg-row { justify-content: center; }
.cg-seg-big span { padding: 12px 34px; font-size: 17px; font-weight: 600; }

/* "Set all": the same segments, as plain buttons — press, not choose. */
.cg-seg .cg-seg-b {
  border: 0; background: transparent; margin: 0;
  padding: 5px 11px; font-size: 13px; font-weight: 500; line-height: 1;
  color: var(--muted); cursor: pointer;
}
.cg-seg .cg-seg-b + .cg-seg-b {
  border-left: 1px solid color-mix(in srgb, var(--muted) 30%, transparent);
}
.cg-seg .cg-seg-b:hover {
  background: color-mix(in srgb, var(--accent-bright) 14%, transparent);
  color: var(--text);
}
.cg-seg .cg-seg-b:focus-visible {
  outline: 2px solid var(--accent-bright); outline-offset: -2px;
}
@media (max-width: 560px) {
  .cg-seg-row { flex-wrap: wrap; }
}

/* ── The moment of arrival ─────────────────────────────────────
   One beat between the sign-in and the tool: the mark lands on the
   page's own dark, a ring leaves it, and the overlay lets go. Drawn by
   cg_head() only on the first page after sign-in. */
.cg-enter {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.5s ease;
}
.cg-enter.is-done { opacity: 0; pointer-events: none; }
.cg-enter img {
  width: clamp(200px, 32vw, 480px); height: auto; position: relative;
  filter: drop-shadow(0 0 48px rgba(0, 170, 255, 0.55));
  animation: cg-enter-mark 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cg-enter-halo {
  position: absolute; width: clamp(480px, 74vw, 1100px); height: clamp(480px, 74vw, 1100px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 128, 255, 0.28) 0%, transparent 65%);
  animation: cg-enter-halo 1.3s ease-out both;
}
.cg-enter-ring {
  position: absolute; width: clamp(290px, 44vw, 660px); height: clamp(290px, 44vw, 660px);
  border-radius: 50%;
  border: 1px solid rgba(0, 170, 255, 0.55);
  box-shadow: 0 0 22px rgba(0, 170, 255, 0.35), inset 0 0 14px rgba(0, 170, 255, 0.18);
  animation: cg-enter-ring 1.1s cubic-bezier(0.05, 0.7, 0.1, 1) 0.25s both;
}
@keyframes cg-enter-mark {
  from { opacity: 0; transform: scale(0.72) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cg-enter-ring {
  from { opacity: 0.9; transform: scale(0.55); }
  to   { opacity: 0;   transform: scale(2.1); }
}
@keyframes cg-enter-halo {
  from { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; }
  to   { opacity: 0.7; transform: scale(1); }
}

/* The Remove on a no-dates card sits under the months, apart enough not
   to be pressed reaching for a picker. */
.cg-entry-form .cg-fix-remove { margin-top: 10px; align-self: flex-start; }

/* ── The search that stays ─────────────────────────────────────
   A candidate's page reached through Candidates keeps that section's
   search pinned to the top of the column: type the next name here, not
   back on the list. The results drop below the bar as the record's own
   rows, every day at once. */
.cg-all-find {
  position: sticky; top: 10px; z-index: 120;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: var(--r-box, 18px);
}
.cg-all-list {
  position: absolute;
  left: 10px; right: 10px;
  top: calc(100% - 2px);
  max-height: 46vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  backdrop-filter: blur(24px) saturate(170%);
  border-radius: var(--r-box, 18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 22px 54px rgba(0, 0, 0, 0.5);
  z-index: 130;
}
.cg-all-list .cg-person-row.is-here {
  outline: 1px solid var(--accent-bright);
  outline-offset: -1px;
}

/* The armed Remove: the question the first tap asked. */
.gbtn.cg-drop-armed { width: auto; padding: 0 12px; color: #FF8B96; }

@media (pointer: coarse) {
  .cg-seg span { min-height: 44px; display: inline-flex; align-items: center; }
  .gbtn.cg-add-sm { height: 44px; }
}

/* The phone sheet: same pane, tighter clothes. Below the base rules so
   the cascade lets it speak. */
@media (max-width: 640px) {
  .cg-ask-sheet { padding: 0 16px 20px; border-radius: 22px; max-height: calc(100dvh - 24px); }
}

/* The arrows and the cross lie on the card bare; the circle is the
   hover's answer, not the resting state. */
.cg-ask-modal .cg-step-nav .gbtn.gbtn.gbtn,
.cg-ask-modal .cg-sheet-do .cg-ico.cg-ico.cg-ico {
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background 0.15s var(--ease-emph), box-shadow 0.15s var(--ease-emph),
              transform 0.15s var(--ease-emph);
}
.cg-ask-modal .cg-step-nav .gbtn.gbtn.gbtn:hover,
.cg-ask-modal .cg-sheet-do .cg-ico.cg-ico.cg-ico:hover {
  background: rgba(20, 32, 44, 0.08);
  transform: translateY(-1px);
}
.cg-ask-modal .cg-step-nav .gbtn.gbtn.gbtn:focus-visible,
.cg-ask-modal .cg-sheet-do .cg-ico.cg-ico.cg-ico:focus-visible {
  background: rgba(20, 32, 44, 0.08);
}