/* =========================================================================
   Gridma Talent: the black and white kit for sign in, password and the
   application (docs/wireframes/gridma-talent-auth.html, section 00).

   One centered column, 440 wide on desktop, full width on a phone with the
   main button held at the bottom of the screen. No color: done, in progress
   and errors show through shape and weight.
   ========================================================================= */

:root {
  --k: #000;
  --w: #fff;
  --g1: #f6f6f6;
  --g2: #eee;
  --g3: #e2e2e2;
  --g4: #afafaf;
  --g5: #6b6b6b;
  --g6: #2b2b2b;
  --ph: #6b6b6b; /* 4.6:1 on the field gray, AA */
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.g-body {
  margin: 0;
  background: var(--w);
  color: var(--k);
  font: 15px/1.45 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.g-body h1, .g-body h2, .g-body h3, .g-body p, .g-body ol, .g-body ul, .g-body dl, .g-body dd, .g-body fieldset { margin: 0; padding: 0; }
.g-body ol, .g-body ul { list-style: none; }
.g-body fieldset { border: 0; min-width: 0; }
.g-body legend { padding: 0; }
.g-body a { color: inherit; }
.g-body button { font: inherit; color: inherit; }
.g-body [hidden] { display: none !important; }

.g-ic { width: 18px; height: 18px; flex: none; }
.g-ic.sm { width: 15px; height: 15px; }
.g-ic.lg { width: 28px; height: 28px; }

.g-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* ---------- Page shell ---------- */

.g-top {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  border-bottom: 1px solid var(--g3);
}
.g-logo { display: flex; align-items: center; }
.g-logo img { height: 22px; width: auto; display: block; }
.g-top-r { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.g-top-r form { margin: 0; }
.g-top-email { color: var(--g5); max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.g-main { padding: 40px 16px 48px; }
.g-col { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }

.g-foot {
  border-top: 1px solid var(--g3);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 12px 16px;
  font-size: 12.5px;
  color: var(--g5);
}
.g-foot a { text-decoration: none; }
.g-foot a:hover { color: var(--k); }

/* ---------- Screens ---------- */

.g-screen, .g-screen > form { display: flex; flex-direction: column; gap: 20px; }
.g-stack { display: flex; flex-direction: column; gap: 18px; }
.g-actions { display: flex; flex-direction: column; gap: 16px; padding-top: 4px; }

/* Step bar: back or close, "2 of 4 · Your craft", the save state, the line. */
.g-stepbar { display: flex; flex-direction: column; gap: 10px; }
.g-stepbar-top { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.g-stepbar-label { flex: 1; font-size: 13px; font-weight: 600; }
.g-saved { font-size: 12.5px; color: var(--g5); white-space: nowrap; }
.g-ib {
  width: 36px; height: 36px; margin-left: -8px;
  border: 0; border-radius: 4px; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.g-ib:hover { background: var(--g2); }
.g-prog { display: flex; gap: 4px; }
.g-prog i { flex: 1; height: 4px; border-radius: 4px; background: var(--g3); }
.g-prog i.on { background: var(--k); }

/* ---------- Type ---------- */

.g-title { font-size: 34px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 700; }
.g-title.md { font-size: 24px; line-height: 1.2; letter-spacing: -0.02em; }
.g-title:focus { outline: none; }
.g-sub { font-size: 15px; color: var(--g5); margin-top: 8px; }
.g-over { font-size: 12px; font-weight: 600; color: var(--g5); margin-bottom: 6px; }
.g-micro { font-size: 12px; color: var(--g5); }
.g-center { text-align: center; }
.g-right { align-self: flex-end; }
.g-mid { align-items: center; text-align: center; }

/* ---------- Fields ---------- */

.g-lab { font-size: 13px; font-weight: 600; display: block; margin-bottom: 7px; }

/* The 2px border stays transparent (the gray fills under it) until focus or
   an error colors it; padding is 2px less, so the text sits 14px in. The
   colored ring on focus is in gridma-glow.css. */
.g-in {
  width: 100%;
  height: 50px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--g2);
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  color: var(--k);
  appearance: none;
  -webkit-appearance: none;
}
.g-in::placeholder { color: var(--ph); }
.g-in:focus, .g-in[aria-invalid="true"] { outline: none; background-color: var(--w); border-color: var(--k); }
.g-in[readonly] { color: var(--g5); }
.g-in[readonly]:focus { background-color: var(--g2); border-color: transparent; }
select.g-in {
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}
select.g-in:invalid { color: var(--ph); }
select.g-in option { color: var(--k); }
input.g-in[type="number"] { -moz-appearance: textfield; }
input.g-in::-webkit-outer-spin-button,
input.g-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* "$ 35 per hour": the input sits between a prefix and a suffix. */
.g-affix { position: relative; }
.g-affix .g-in { padding-left: 28px; padding-right: 90px; }
.g-affix-pre, .g-affix-end {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  font-size: 16px; color: var(--g5); pointer-events: none;
}
.g-affix-pre { left: 14px; }
.g-affix-end { right: 14px; font-size: 14px; }

/* Date field: typed as DD/MM/YYYY, or picked in the calendar under it. */
.g-date { position: relative; }
.g-date .g-in { padding-right: 50px; }
.g-date-btn {
  position: absolute; right: 6px; top: 7px;
  width: 36px; height: 36px;
  border: 0; border-radius: 4px; background: none;
  display: grid; place-items: center; cursor: pointer;
}
.g-date-btn:hover, .g-date-btn[aria-expanded="true"] { background: var(--g3); }

.g-cal {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 5;
  width: 100%; max-width: 340px;
  background: var(--w);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--g3), 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 12px;
}
.g-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.g-cal-head .g-ib { margin-left: 0; flex: none; }
.g-cal-head .g-ib:disabled { color: var(--g4); background: none; cursor: default; }
.g-cal-sel {
  flex: 1; min-width: 0; height: 36px;
  border: 0; border-radius: 8px; background: var(--g2);
  padding: 0 8px; font: inherit; font-size: 14px; font-weight: 600; color: var(--k);
  cursor: pointer;
}
.g-cal-week, .g-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.g-cal-week span { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--g5); padding: 4px 0; }
.g-cal-day {
  height: 40px; border: 0; border-radius: 4px; background: none;
  font: inherit; font-size: 14px; cursor: pointer;
}
.g-cal-day:hover { background: var(--g2); }
.g-cal-day:disabled { color: var(--g4); background: none; cursor: default; }
.g-body .g-cal-day.is-on { background: var(--k); color: var(--w); font-weight: 600; }

/* Password show and hide (public/js/talent-auth.js builds the wrapper). */
.hub-pw { position: relative; }
.hub-pw .g-in { padding-right: 68px; }
.hub-pw-toggle {
  position: absolute; right: 6px; top: 7px;
  height: 36px; padding: 0 10px;
  border: 0; border-radius: 8px; background: none;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.hub-pw-toggle:hover { background: var(--g3); }

.g-hint { font-size: 12.5px; color: var(--g5); margin-top: 7px; }
.g-hint.is-warn { color: var(--k); font-weight: 600; }
.g-err { font-size: 13px; font-weight: 600; display: flex; gap: 7px; margin-top: 9px; align-items: flex-start; }
.g-err .g-ic { margin-top: 1px; }
.g-rule { display: flex; gap: 7px; align-items: center; font-size: 13px; margin-top: 9px; color: var(--g5); }
.g-rule .g-ic { color: var(--g4); }
.g-rule.is-met { color: var(--k); }
.g-rule.is-met .g-ic { color: var(--k); }

/* ---------- Buttons and links ---------- */

/* The main button follows the sample profile's .btn-dark in
   public/css/styles.css: a translucent wash over a light to dark gradient,
   a 1px edge, an inset white top highlight and an inset dark bottom edge,
   with soft drop shadows. Hover darkens the wash and the outer shadows fall
   away. .sec and .w are the same build in light grays. */
.g-btn {
  height: 52px;
  width: 100%;
  border: 1px solid #383838;
  border-radius: 8px;
  background:
    linear-gradient(#2020201a 0% 100%),
    linear-gradient(#4f4f4f 0%, #202020d9 100%);
  color: var(--w);
  box-shadow:
    0 0 0 1px #4040401f,
    inset 0 2px #ffffff3d,
    inset 0 -0.5px 2px #00000040,
    0 2px 8px #00000008,
    0 3px 4px #00000029;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.g-body .g-btn { color: var(--w); }
.g-btn:not(:disabled):not([aria-disabled="true"]):hover,
.g-btn:focus-visible {
  background:
    linear-gradient(#202020cc 0% 100%),
    linear-gradient(#4f4f4f 0%, #202020d9 100%);
  box-shadow:
    0 0 0 1px #4040401f,
    inset 0 2px #fff6,
    inset 0 -0.5px 2px #00000040;
}
.g-btn:focus-visible { outline: 2px solid var(--k); outline-offset: 2px; }

/* Light: white to light gray, a light gray edge, dark text. */
.g-body .g-btn.sec {
  color: var(--k);
  border-color: #d6d6d6;
  background:
    linear-gradient(#0000000a 0% 100%),
    linear-gradient(#fff 0%, #ececec 100%);
  box-shadow:
    0 0 0 1px #0000000a,
    inset 0 2px #fff,
    inset 0 -0.5px 2px #0000001f,
    0 2px 8px #00000008,
    0 3px 4px #00000014;
}
.g-body .g-btn.sec:not(:disabled):not([aria-disabled="true"]):hover,
.g-body .g-btn.sec:focus-visible {
  background:
    linear-gradient(#0000001a 0% 100%),
    linear-gradient(#fff 0%, #ececec 100%);
  box-shadow:
    0 0 0 1px #0000000a,
    inset 0 2px #fff,
    inset 0 -0.5px 2px #0000001f;
}

/* Light, for the black cards. */
.g-body .g-btn.w {
  color: var(--k);
  border-color: var(--w);
  background:
    linear-gradient(#00000000 0% 100%),
    linear-gradient(#fff 0%, #e8e8e8 100%);
  box-shadow:
    0 0 0 1px #ffffff1f,
    inset 0 2px #fff,
    inset 0 -0.5px 2px #00000033,
    0 2px 8px #00000014,
    0 3px 4px #0000003d;
}
.g-body .g-btn.w:not(:disabled):not([aria-disabled="true"]):hover,
.g-body .g-btn.w:focus-visible {
  background:
    linear-gradient(#00000014 0% 100%),
    linear-gradient(#fff 0%, #e8e8e8 100%);
  box-shadow:
    0 0 0 1px #ffffff1f,
    inset 0 2px #fff,
    inset 0 -0.5px 2px #00000033;
}
.g-card.dark .g-btn:focus-visible { outline-color: var(--w); }

.g-btn.sm { height: 44px; font-size: 15px; }

/* `.g-body button { font: inherit }` would otherwise make a <button> label
   smaller and lighter than the same button written as a link. */
.g-body .g-btn { font-size: 16px; font-weight: 600; }
.g-body .g-btn.sm { font-size: 15px; }

/* Not available yet, or busy: flat gray, no depth, no motion (focus too). */
.g-body .g-btn:disabled,
.g-body .g-btn[aria-disabled="true"],
.g-body .g-btn.sec[aria-disabled="true"]:focus-visible,
.g-body .g-btn.w[aria-disabled="true"]:focus-visible {
  background: var(--g2);
  border-color: var(--g2);
  color: var(--g5);
  box-shadow: none;
  cursor: default;
  translate: none;
  scale: none;
  transition: none;
}

/* Press settles to 0.97; hover lifts 1px where a pointer can hover. Off
   when the system asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .g-btn {
    transition:
      background 0.2s ease,
      box-shadow 0.2s ease,
      translate 0.18s cubic-bezier(0.32, 0.72, 0, 1),
      scale 0.06s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .g-btn:not(.admin):not(:disabled):not([aria-disabled="true"]):active { scale: 0.97; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .g-btn:not(.admin):not(:disabled):not([aria-disabled="true"]):hover { translate: 0 -1px; }
  .g-btn:not(.admin):not(:disabled):not([aria-disabled="true"]):active { translate: 0 0; }
}

.g-link {
  font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.g-link.plain { text-decoration: none; }
.g-link.plain:hover { text-decoration: underline; }

.g-or { display: flex; align-items: center; gap: 12px; color: var(--g5); font-size: 13px; }
.g-or::before, .g-or::after { content: ""; flex: 1; height: 1px; background: var(--g3); }

/* ---------- Notes, banners, cards ---------- */

.g-note { display: flex; gap: 10px; font-size: 12.5px; color: var(--g5); align-items: flex-start; }
.g-note .g-ic { color: var(--k); margin-top: 1px; }

.g-banner {
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--g3);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  align-items: flex-start;
}
.g-banner b { font-weight: 600; }
.g-banner .g-link { font-size: 13px; }
.g-banner.dark { background: var(--k); color: var(--w); box-shadow: none; }
.g-banner-actions { display: inline-flex; gap: 6px; flex-wrap: wrap; }

/* A notice in the bottom right corner, above the page. */
.g-toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  width: 360px;
  max-width: calc(100vw - 32px);
  background: var(--w);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--g3), 0 18px 40px rgba(0, 0, 0, 0.14);
  padding: 14px 10px 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13.5px;
  animation: g-toast-in 0.25s ease-out;
}
.g-toast > .g-ic { margin-top: 1px; }
.g-toast-body { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.g-toast-body b { font-weight: 600; }
.g-toast .g-link { font-size: 13.5px; }
.g-toast-x {
  width: 28px; height: 28px; margin-top: -4px; flex: none;
  border: 0; border-radius: 4px; background: none;
  display: grid; place-items: center; cursor: pointer; color: var(--g5);
}
.g-toast-x:hover { background: var(--g2); color: var(--k); }
@keyframes g-toast-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .g-toast { animation: none; } }
/* Between a phone and a wide screen the corner overlaps the 488px card and
   its main button, so the notice sits in the card's flow, like a banner. */
@media (min-width: 601px) and (max-width: 1279px) {
  .g-toast { position: static; width: auto; max-width: none; box-shadow: 0 0 0 1px var(--g3); animation: none; }
}

.g-card { background: var(--g1); border-radius: 8px; padding: 16px; }
.g-card b { display: block; font-size: 15.5px; letter-spacing: -0.01em; }
.g-card .g-sub { font-size: 13.5px; margin-top: 4px; }
.g-card.dark { background: var(--k); color: var(--w); }
.g-card.dark .g-sub, .g-card.dark .g-over { color: #b5b5b5; }
.g-card .g-btn { margin-top: 14px; }

/* ---------- Lists ---------- */

.g-list { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--g3); overflow: hidden; }
.g-li { display: flex; align-items: center; gap: 12px; padding: 13px 14px; min-height: 58px; text-decoration: none; }
.g-li + .g-li, .g-kv + .g-kv { border-top: 1px solid var(--g3); }
a.g-li:hover, button.g-li:hover { background: var(--g1); }
button.g-li { width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
.g-li .tx { flex: 1; min-width: 0; }
.g-li .tx b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.g-li .tx span { display: block; font-size: 12.5px; color: var(--g5); margin-top: 1px; }
.g-li .chev { color: var(--g4); }
.g-li-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px 4px; }
.g-li-head b { font-size: 12px; color: var(--g5); font-weight: 600; }
.g-li-head + .g-kv { border-top: none; }
.g-kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 14px; }
.g-kv > span { color: var(--g5); flex: none; }
.g-kv > b { font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.g-num {
  width: 28px; height: 28px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--k);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; flex: none;
}

/* ---------- Choices ---------- */

.g-choice { position: relative; }
.g-choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.g-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.g-tile {
  height: 44px; border-radius: 8px; background: var(--g2);
  display: flex; align-items: center; padding: 0 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.g-choice > input:checked + .g-tile { background: var(--k); color: var(--w); }
.g-choice > input:focus-visible + .g-tile,
.g-choice > input:focus-visible + .g-chip,
.g-choice > input:focus-visible + .g-seg-opt,
.g-choice > input:focus-visible + .g-opt { outline: 2px solid var(--k); outline-offset: 2px; }

.g-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.g-chip {
  height: 34px; padding: 0 13px; border-radius: 8px; background: var(--g2);
  font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; cursor: pointer;
}
.g-choice > input:checked + .g-chip { background: var(--k); color: var(--w); }

.g-seg { display: flex; background: var(--g2); border-radius: 8px; padding: 3px; }
.g-seg .g-choice { flex: 1; display: flex; }
.g-seg-opt {
  flex: 1; text-align: center;
  font-size: 12.5px; font-weight: 600;
  padding: 9px 2px; border-radius: 4px; color: var(--g6);
  white-space: nowrap; cursor: pointer;
}
.g-choice > input:checked + .g-seg-opt { background: var(--w); color: var(--k); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }

.g-opts { display: flex; flex-direction: column; gap: 10px; }
.g-opt {
  border-radius: 8px; box-shadow: inset 0 0 0 1px var(--g3);
  padding: 15px 14px;
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.35; cursor: pointer;
}
.g-opt:hover { background: var(--g1); }
.g-radio { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--g4); flex: none; }
.g-choice > input:checked + .g-opt { box-shadow: inset 0 0 0 2px var(--k); }
.g-choice > input:checked + .g-opt .g-radio { box-shadow: inset 0 0 0 7px var(--k); }

/* ---------- Status ---------- */

.g-pill {
  font-size: 11.5px; font-weight: 600;
  height: 24px; padding: 0 10px; border-radius: 4px;
  display: inline-flex; align-items: center;
  white-space: nowrap; flex: none;
}
.g-pill.solid { background: var(--k); color: var(--w); }
.g-pill.line { box-shadow: inset 0 0 0 1.2px var(--k); }
.g-pill.mute { background: var(--g2); color: var(--g5); }

.g-gi { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.g-gi.done, .g-gi.act { background: var(--k); color: var(--w); }
.g-gi.now { box-shadow: inset 0 0 0 2px var(--k); }
.g-gi.now::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--k); }
.g-gi.lock { box-shadow: inset 0 0 0 1.5px var(--g3); color: var(--g4); }

.g-hero {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--k); color: var(--w);
  display: grid; place-items: center; flex: none;
}
.g-hero.line { background: var(--w); color: var(--k); box-shadow: inset 0 0 0 2px var(--k); }
.g-hero.sm { width: 52px; height: 52px; }

.g-avatar {
  width: 44px; height: 44px; border-radius: 50%; background: var(--g2);
  display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none;
}
.g-row { display: flex; gap: 12px; align-items: center; }

.g-ticks { display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; }
.g-ticks li { display: flex; gap: 8px; align-items: center; }
.g-when { display: flex; gap: 12px; align-items: center; font-size: 14px; }
.g-when + .g-when { margin-top: 10px; }

/* ---------- Reading pages: legal text, help ---------- */

/* A wider column for long text; forms keep the 440 column. */
.g-col.g-wide { max-width: 680px; }

.g-prose { font-size: 15px; line-height: 1.6; color: var(--g6); }
.g-prose > * + * { margin-top: 12px; }
.g-prose h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; color: var(--k); margin-top: 32px; }
.g-prose h3 { font-size: 16px; line-height: 1.35; color: var(--k); margin-top: 20px; }
.g-prose ul, .g-prose ol { padding-left: 20px; }
.g-prose ul { list-style: disc; }
.g-prose ol { list-style: decimal; }
.g-prose li + li { margin-top: 6px; }
.g-prose a { color: var(--k); text-decoration: underline; text-underline-offset: 3px; }
.g-prose strong { color: var(--k); font-weight: 600; }
.g-prose .g-micro { color: var(--g5); }

/* Questions and answers that open in place. */
.g-faq { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--g3); }
.g-faq details + details { border-top: 1px solid var(--g3); }
.g-faq summary {
  list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
  content: ""; flex: none; width: 8px; height: 8px;
  border-right: 2px solid var(--k); border-bottom: 2px solid var(--k);
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease;
}
.g-faq details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.g-faq details > div { padding: 0 14px 14px; font-size: 14px; line-height: 1.55; color: var(--g6); }
.g-faq details > div > * + * { margin-top: 8px; }
.g-faq a { color: var(--k); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- TEMPORARY: admin pass and preview (not part of the design) ---------- */

.g-body .g-btn.admin { background: none; color: var(--k); border: 1.5px dashed var(--g4); box-shadow: none; transition: none; }
.g-body .g-btn.admin:hover, .g-body .g-btn.admin:focus-visible { background: var(--g1); box-shadow: none; }
.g-admin {
  border: 1.5px dashed var(--g4);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
}
.g-admin b { font-weight: 600; }
.g-admin-actions { display: inline-flex; gap: 16px; }
.g-admin .g-link { font-size: 13px; }

/* ---------- Documents and the Talent agreement (wireframe section 05) ---------- */

/* A row that opens its own screen: the li holds a full-width button. */
.g-list > .g-li-wrap + li,
.g-list > li + .g-li-wrap { border-top: 1px solid var(--g3); }
.g-li-wrap > .g-li:focus-visible { outline-offset: -2px; }
.g-li.is-top { align-items: flex-start; }
/* The reviewer's reason on a file that needs another look. */
.g-li .tx em { display: block; font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--k); margin-top: 4px; }
/* A document not uploaded yet: its own icon in a soft square. */
.g-gi.doc { border-radius: 4px; background: var(--g2); color: var(--k); }

/* Drop zone: takes a tap, a click or a dropped file. The input stays
   reachable by keyboard and draws its focus ring on the zone. */
.g-drops { display: flex; flex-direction: column; gap: 10px; }
.g-drop { position: relative; }
.g-drop-in { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }
.g-drop-zone {
  border: 1.5px dashed var(--g4);
  border-radius: 8px;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  cursor: pointer;
}
.g-drop-zone b { font-size: 15px; font-weight: 600; }
.g-drop-zone span { font-size: 12.5px; color: var(--g5); }
.g-drop-zone:hover { background: var(--g1); border-color: var(--k); }
.g-drop.is-over .g-drop-zone { background: var(--g1); border: 2px solid var(--k); padding: 27.5px 15.5px; }
.g-drop-in:focus-visible + .g-drop-zone { outline: 2px solid var(--k); outline-offset: 2px; }
.g-drop-in[aria-invalid="true"] + .g-drop-zone { border: 2px solid var(--k); padding: 27.5px 15.5px; }
.g-drop-in:disabled + .g-drop-zone { cursor: default; background: none; border-color: var(--g3); color: var(--g4); }
.g-drop-in:disabled + .g-drop-zone span { color: var(--g4); }

/* The chosen file, waiting for Upload. */
.g-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px; background: var(--g1); }
.g-file .tx { flex: 1; min-width: 0; }
.g-file .tx b { display: block; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-file .tx span { display: block; font-size: 12.5px; color: var(--g5); margin-top: 1px; }
.g-file .g-link { font-size: 13px; flex: none; }
.g-file .g-link:disabled { color: var(--g4); cursor: default; }

/* While a file uploads: a moving line, not a count. */
.g-upbar { height: 4px; border-radius: 4px; background: var(--g3); overflow: hidden; }
.g-upbar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: var(--k); animation: g-upbar 1.1s ease-in-out infinite; }
@keyframes g-upbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .g-upbar i { animation: none; width: 100%; } }

/* A line that appears after an action; screen readers hear it through #regLive. */
.g-live:empty { display: none; }

/* Long file names and reviewer notes wrap instead of pushing the page sideways. */
#docsList .tx span, #docsList .tx em, #agreeRow .tx span { overflow-wrap: anywhere; }
#docsDone > div, #docsOff > div, #docState > div, #docOff > div, #agreeOff > div,
#docForm .g-err span { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Phone: full width, the button stays at the bottom ---------- */

@media (max-width: 600px) {
  .g-top { height: 56px; padding: 0 16px; }
  .g-logo img { height: 20px; }
  .g-top-email { display: none; }
  .g-title { font-size: 28px; }
  .g-title.md { font-size: 22px; }
  .g-main { padding: 20px 16px 0; min-height: calc(100svh - 56px); display: flex; }
  .g-col { flex: 1; width: 100%; }
  .g-screen:not([hidden]) { flex: 1; }
  .g-screen > form { flex: 1; }
  .g-screen > .g-mid, .g-screen > form > .g-mid { flex: 1; justify-content: center; }
  /* Full width, just above the main button. */
  .g-toast { left: 16px; right: 16px; width: auto; max-width: none; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .g-toast.is-low { bottom: calc(16px + env(safe-area-inset-bottom)); }
  .g-actions {
    margin-top: auto;
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--w);
    padding: 14px 0 calc(18px + env(safe-area-inset-bottom));
  }
}

/* Phone: the top bar links stay on one line, down to 360px (the account
   mode has four). After the 600px block so these win. */
@media (max-width: 420px) {
  .g-top { gap: 12px; }
  .g-top-r { gap: 12px; }
  .g-top-r .g-link { font-size: 13px; white-space: nowrap; }
}
@media (max-width: 374px) {
  .g-top { gap: 8px; padding: 0 12px; }
  .g-top-r { gap: 10px; }
  .g-top-r .g-link { font-size: 12.5px; }
  .g-logo img { height: 18px; }
}

/* ---------- Under 18: a parent or guardian (Talents aged 13 to 17) ---------- */

/* The note under the date of birth on About you. */
.g-body .g-minor-note { margin-top: 9px; color: var(--g6); }

/* The agreement line for a Talent under 18. */
.g-body .g-minor-sub { margin-top: 8px; color: var(--k); }

/* Their details on the Parent or guardian upload screen (.g-body resets
   fieldset padding, so the box needs the extra class weight). */
.g-body .g-guardian {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px var(--g3);
}
.g-guardian .g-in:disabled { color: var(--g4); cursor: default; }
.g-guardian .g-choice > input:disabled + .g-seg-opt { color: var(--g4); cursor: default; }
/* A relationship still to choose gets the same black ring as a field. */
.g-guardian .g-seg:has(input[aria-invalid="true"]) { box-shadow: inset 0 0 0 2px var(--k); }

/* One row per signer on the agreement: long names wrap. */
.g-signers .g-li .tx b, .g-signers .g-li .tx span { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .g-body .g-guardian { padding: 14px; }
}

/* ---------- Sign in: the city drawing behind the form ---------- */

/* Desktop: the drawing fills the page from the top edge to the footer, the
   top bar sits on it with no background or line, and the form sits on it as
   a white card. Phone: the drawing is a band from the top edge, under the
   logo, that fades into white above the form, so the button keeps its place
   at the bottom. The image is decorative, so it lives in CSS. */

/* Day or night drawing: sign-in.blade.php sets .g-night on <html> from
   19:00 to 7:00 on the visitor's clock. */
.g-city {
  --city: url("../assets/auth/sign-in-city.webp?v=2");
  --city-bg: var(--g1);
}
.g-night .g-city {
  --city: url("../assets/auth/sign-in-city-night.webp?v=1");
  --city-bg: #131d32;
}
/* The apply page (register.blade.php) shows Baku instead, day only. */
.g-city.g-apply { --city: url("../assets/auth/apply-baku.webp?v=1"); }
/* The black logo turns white on the night drawing. */
.g-night .g-city .g-logo img { filter: invert(1); }

/* The top bar sits on the sky with no fill, blur or line. */
.g-city .g-top {
  position: relative;
  z-index: 1;
  border-bottom-color: transparent;
  background: none;
}
/* Pulled up under the 64px top bar, the drawing fills the viewport and the
   card sits in its middle; the footer follows below the fold. The bar is
   see-through but still takes clicks, so a tall card stops 16px under it
   (its Back button stays whole); equal padding keeps the card centered. */
.g-city .g-main {
  margin-top: -64px;
  padding-top: 80px;
  padding-bottom: 80px;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--city-bg) var(--city) center top / cover no-repeat;
}
.g-city .g-col {
  width: 100%;
  max-width: 488px;
  padding: 32px 24px;
  background: var(--w);
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--g3), 0 18px 40px rgba(0, 0, 0, 0.12);
}
@media (max-width: 600px) {
  /* Pulled up under the 56px top bar. */
  .g-city .g-main {
    margin-top: -56px;
    padding-top: 20px;
    padding-bottom: 0;
    min-height: 100svh;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--w);
  }
  .g-city .g-main::before {
    content: "";
    flex: none;
    height: 256px;
    margin: -20px -16px 20px;
    background:
      linear-gradient(to bottom, rgba(255, 255, 255, 0) 55%, var(--w)),
      var(--city) 52% 0 / cover no-repeat;
  }
  .g-city .g-col {
    max-width: none;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- The theme button in the top bar ---------- */

/* partials/theme-toggle sits last in .g-top-end. On a phone the account
   mode's four links, the full logo and the button need about 450px on one
   line, so up to 520px the links take a second row under the logo and the
   button, and the bar never wraps a label or scrolls sideways. */
@media (max-width: 420px) {
  .g-top-end { gap: 10px; }
}
@media (max-width: 520px) {
  .g-top:has(nav.g-top-r) {
    height: auto;
    flex-wrap: wrap;
    row-gap: 4px;
    padding-top: 6px;
    padding-bottom: 12px;
  }
  .g-top:has(nav.g-top-r) .g-top-end { display: contents; }
  .g-top:has(nav.g-top-r) .g-top-r { order: 1; flex: 1 0 100%; gap: 16px; }
}

/* On the night drawing the logo turns white (above); the button follows it
   in the light theme. The dark theme already has light text. */
:root.g-night:not([data-theme="dark"]) .g-city .theme-btn { color: var(--w); }
:root.g-night:not([data-theme="dark"]) .g-city .theme-btn:hover { background: rgba(255, 255, 255, 0.12); }
/* The black focus ring would vanish on the night sky, so it turns white. */
:root.g-night:not([data-theme="dark"]) .g-city .theme-btn:focus-visible,
:root.g-night:not([data-theme="dark"]) .g-city .g-logo:focus-visible { outline-color: var(--w); }

/* =========================================================================
   Dark theme: the --dk-* palette from gridma-theme.css.

   The tokens carry most of it: --k becomes the light ink, --w the page,
   the grays turn into surfaces, lines and muted text. Where --w is a
   raised surface (calendar, toast, the sign in card) or a black block
   would glare when inverted, the rules below set it per selector.
   Screen only: printing always uses the light kit on white paper.
   ========================================================================= */

@media screen {
  :root[data-theme="dark"] {
    --k: var(--dk-ink);
    --w: var(--dk-page);
    --g1: var(--dk-surface);
    --g2: var(--dk-surface-2);
    --g3: var(--dk-line);
    --g4: var(--dk-faint);
    --g5: var(--dk-muted);
    --g6: var(--dk-ink-2);
    --ph: var(--dk-muted);
  }

  /* Fields: a faint edge, so the field still reads on the dark card. */
  :root[data-theme="dark"] .g-in { box-shadow: inset 0 0 0 1px var(--dk-line); }
  :root[data-theme="dark"] .g-in:focus,
  :root[data-theme="dark"] .g-in[aria-invalid="true"] { box-shadow: none; }
  /* The select's arrow in the ink color (the light one is black). */
  :root[data-theme="dark"] select.g-in {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23f4f4f5' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }

  /* Raised layers: the calendar and the toast sit on the surface color. */
  :root[data-theme="dark"] .g-cal,
  :root[data-theme="dark"] .g-toast {
    background: var(--dk-surface);
    box-shadow: 0 0 0 1px var(--dk-line-2), 0 18px 40px var(--dk-shadow);
  }
  :root[data-theme="dark"] .g-cal .g-ib:hover,
  :root[data-theme="dark"] .g-cal-day:hover,
  :root[data-theme="dark"] .g-toast-x:hover { background: var(--dk-surface-3); }
  :root[data-theme="dark"] .g-cal-day:disabled { background: none; }

  /* Main button: inverted, a light face with dark text, built like
     .btn-dark in styles.css (ink to ink-2 over the page color, no
     color-mix, so older Safari still paints the face). On hover the face
     settles to flat ink-2. The hover glow in gridma-glow.css stays. */
  :root[data-theme="dark"] .g-btn {
    border-color: var(--dk-ink);
    background: linear-gradient(var(--dk-ink) 0%, var(--dk-ink-2) 100%), linear-gradient(var(--dk-page) 0 0);
    color: var(--dk-on-ink);
    box-shadow:
      inset 0 -0.5px 2px var(--dk-shadow),
      0 3px 4px var(--dk-shadow);
  }
  :root[data-theme="dark"] .g-btn:not(:disabled):not([aria-disabled="true"]):hover,
  :root[data-theme="dark"] .g-btn:focus-visible {
    background: linear-gradient(var(--dk-ink-2) 0 0), linear-gradient(var(--dk-page) 0 0);
    box-shadow: inset 0 -0.5px 2px var(--dk-shadow);
  }

  /* Second button: a dark face, a light edge, a faint top highlight. */
  :root[data-theme="dark"] .g-body .g-btn.sec {
    color: var(--dk-ink);
    border-color: var(--dk-line-2);
    background: linear-gradient(var(--dk-surface-3) 0%, var(--dk-surface-2) 100%);
    box-shadow: inset 0 1px var(--dk-tint), 0 3px 4px var(--dk-shadow);
  }
  :root[data-theme="dark"] .g-body .g-btn.sec:not(:disabled):not([aria-disabled="true"]):hover,
  :root[data-theme="dark"] .g-body .g-btn.sec:focus-visible {
    background:
      linear-gradient(var(--dk-tint) 0% 100%),
      linear-gradient(var(--dk-surface-3) 0%, var(--dk-surface-2) 100%);
    box-shadow: inset 0 1px var(--dk-tint);
  }

  /* The white button of the black card stays light: the card turns dark
     gray below, so this is the inverted main button. */
  :root[data-theme="dark"] .g-body .g-btn.w {
    color: var(--dk-on-ink);
    border-color: var(--dk-ink);
    background: linear-gradient(var(--dk-ink) 0%, var(--dk-ink-2) 100%), linear-gradient(var(--dk-page) 0 0);
    box-shadow: 0 3px 4px var(--dk-shadow);
  }
  :root[data-theme="dark"] .g-body .g-btn.w:not(:disabled):not([aria-disabled="true"]):hover,
  :root[data-theme="dark"] .g-body .g-btn.w:focus-visible {
    background: linear-gradient(var(--dk-ink-2) 0 0), linear-gradient(var(--dk-page) 0 0);
    box-shadow: none;
  }
  :root[data-theme="dark"] .g-card.dark .g-btn:focus-visible { outline-color: var(--dk-ink); }

  /* The admin pass keeps its dashed outline (the main button rule above
     would fill it). */
  :root[data-theme="dark"] .g-body .g-btn.admin {
    background: none;
    color: var(--dk-ink);
    border: 1.5px dashed var(--dk-faint);
    box-shadow: none;
  }
  :root[data-theme="dark"] .g-body .g-btn.admin:hover,
  :root[data-theme="dark"] .g-body .g-btn.admin:focus-visible { background: var(--dk-tint); box-shadow: none; }

  /* Not available yet, or busy: flat, after the faces above so it wins. */
  :root[data-theme="dark"] .g-body .g-btn:disabled,
  :root[data-theme="dark"] .g-body .g-btn[aria-disabled="true"],
  :root[data-theme="dark"] .g-body .g-btn.sec[aria-disabled="true"]:focus-visible,
  :root[data-theme="dark"] .g-body .g-btn.w[aria-disabled="true"]:focus-visible {
    background: var(--dk-surface-2);
    border-color: var(--dk-surface-2);
    color: var(--dk-muted);
    box-shadow: none;
  }

  /* The black card and banner become a raised dark gray: inverted they
     would be the brightest block on the page. */
  :root[data-theme="dark"] .g-card.dark,
  :root[data-theme="dark"] .g-banner.dark {
    background: var(--dk-surface-3);
    color: var(--dk-ink);
    box-shadow: inset 0 0 0 1px var(--dk-line);
  }
  :root[data-theme="dark"] .g-card.dark .g-sub,
  :root[data-theme="dark"] .g-card.dark .g-over { color: var(--dk-muted); }

  /* The chosen segment: a lighter face with an edge on the dark track. */
  :root[data-theme="dark"] .g-choice > input:checked + .g-seg-opt {
    background: var(--dk-surface-3);
    color: var(--dk-ink);
    box-shadow: inset 0 0 0 1px var(--dk-line-2), 0 1px 3px var(--dk-shadow);
  }

  /* Sign in: always the night drawing and its sky color, as .g-night does
     by the clock. */
  :root[data-theme="dark"] .g-city:not(.g-apply) {
    --city: url("../assets/auth/sign-in-city-night.webp?v=1");
    --city-bg: #131d32;
  }
}

@media screen and (min-width: 601px) {
  /* The form card on the drawing. Cards, files and hovers inside it take
     the next step up, so they still show on the card. */
  :root[data-theme="dark"] .g-city .g-col {
    --g1: var(--dk-surface-2);
    background: var(--dk-surface);
    box-shadow: 0 0 0 1px var(--dk-line), 0 18px 40px var(--dk-shadow);
  }
  /* The apply page's Baku photo has no night version: a scrim dims it, so
     the dark card and the top bar read on it. */
  :root[data-theme="dark"] .g-city.g-apply .g-main {
    background-image: linear-gradient(var(--dk-scrim), var(--dk-scrim)), var(--city);
  }
  /* On the card the avatar disc is the same step as an inner card, so it
     goes one step lighter; the calendar opens over the card, so it lifts
     one step too (its shadow cannot show on dark). */
  :root[data-theme="dark"] .g-city .g-card .g-avatar { background: var(--dk-surface-3); }
  :root[data-theme="dark"] .g-city .g-cal { background: var(--dk-surface-2); }
  :root[data-theme="dark"] .g-city .g-cal-sel { background: var(--dk-surface-3); }
  /* 4.5:1 on the dimmed sky. */
  :root[data-theme="dark"] .g-city .g-top-email { color: var(--dk-ink-2); }
}

@media screen and (max-width: 600px) {
  /* The band under the logo fades into the dark page. */
  :root[data-theme="dark"] .g-city .g-main::before {
    background:
      linear-gradient(to bottom, transparent 55%, var(--dk-page)),
      var(--city) 52% 0 / cover no-repeat;
  }
  :root[data-theme="dark"] .g-city.g-apply .g-main::before {
    background:
      linear-gradient(to bottom, transparent 55%, var(--dk-page)),
      linear-gradient(var(--dk-scrim), var(--dk-scrim)),
      var(--city) 52% 0 / cover no-repeat;
  }
}

@media screen {
  /* The outlined hero is a ring only: a page-colored fill would show as a
     darker hole on a card. */
  :root[data-theme="dark"] .g-hero.line { background: none; }
}