/* ==========================================================================
   CT Alloy — admin console

   A LIGHT, high-contrast console. The storefront is dark; this tool is not,
   deliberately. It is used by people for whom light-on-dark text blooms and
   smears (light scatter in an older lens), so the admin drops the brand's
   dark ground and keeps only its wordmark and its monochrome palette.

   Rules this file holds itself to, because the audience is non-technical and
   long-sighted:

     - Body text is 17px, never below 15px. No 10px mono labels.
     - Every text colour clears WCAG AA (4.5:1) against the surface it sits
       on. The palette below records each ratio; check it if you change one.
     - Nothing is UPPERCASE with wide tracking — word shapes are what make a
       label readable at a glance, and caps throw them away.
     - Every button and input is at least 44px tall, the floor for an
       unsteady hand or a touch screen.
     - Labels are sentence case, sit above their field, and are real
       <label for>s so a tap on the words focuses the input.

   `site.css` loads before this file for the reset, .sr-only and the fonts.
   Its .btn family is uppercase mono and is NOT used here — the console has
   its own .abtn, so there is no specificity fight to lose.
   ========================================================================== */

body.admin {
  /* ---- surfaces ---- */
  --a-bg:        #f4f5f7;   /* page */
  --a-surface:   #ffffff;   /* cards, inputs, modals */
  --a-sunk:      #eef0f3;   /* wells, thumbnails, chips */
  --a-line:      #d3d7dd;   /* borders you should see */
  --a-line-soft: #e7e9ee;   /* borders that just separate */

  /* ---- text (ratio against --a-surface) ---- */
  --a-text:      #14171c;   /* 16.8:1  headings, values, anything read closely */
  --a-text-soft: #4a5058;   /*  8.1:1  labels, secondary lines */
  --a-text-mute: #656c75;   /*  5.2:1  hints — the lightest text allowed */

  /* ---- meaning ---- */
  --a-danger:    #b3241a;   /*  6.6:1 */
  --a-danger-bg: #fdf0ee;
  --a-ok:        #1c6b3f;   /*  6.4:1 */
  --a-ok-bg:     #eaf6ef;
  --a-focus:     #1b4dd8;   /*  6.8:1 — the one non-brand colour, so a focus
                                ring can never be mistaken for decoration */

  --a-radius:    14px;
  --a-radius-lg: 20px;
  --a-shadow:    0 1px 2px rgba(20, 23, 28, .06), 0 8px 24px -12px rgba(20, 23, 28, .18);
  --a-shadow-lg: 0 24px 60px -20px rgba(20, 23, 28, .35);

  /* Space Grotesk is the brand face and stays on the wordmark and the big
     titles. Everything you actually READ is the system UI face, which is
     drawn for screen text at small sizes and has less ambiguous letterforms. */
  --a-ui: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  margin: 0;
  min-height: 100vh;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: var(--a-ui);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.admin ::selection { background: #cfdcff; color: var(--a-text); }

/* `hidden` is how this console shows and hides everything, and ANY explicit
   display rule silently beats it — .abtn is inline-flex, so a hidden button
   stayed on screen. One rule rather than a per-component fix, because the
   next component to grow a `display` would reintroduce the same bug. */
.admin [hidden] { display: none !important; }

.noscript {
  margin: 0;
  padding: 40px 24px;
  text-align: center;
  font-size: 19px;
  color: var(--a-text);
}

/* A focus ring you cannot miss, on everything, always. */
.admin :focus-visible {
  outline: 3px solid var(--a-focus);
  outline-offset: 2px;
  border-radius: 6px;
}

.skiplink {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 60;
  background: var(--a-surface);
  color: var(--a-text);
  padding: 14px 20px;
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow-lg);
  font-weight: 600;
}
.skiplink:focus { left: 12px; }

/* ========================================================== primitives === */

.label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--a-text);
  margin: 0 0 7px;
  padding: 0;
}
.label__opt {
  font-weight: 400;
  color: var(--a-text-mute);
}

.hint {
  margin: 7px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--a-text-mute);
}
.hint--above { margin: 0 0 12px; }
.hint strong { color: var(--a-text-soft); font-weight: 600; }

.fieldset { margin-bottom: 22px; border: 0; padding: 0; min-width: 0; }
.fieldset--plain { margin-bottom: 26px; }
.fieldset > legend { padding: 0; }

.input {
  width: 100%;
  min-height: 52px;
  background: var(--a-surface);
  border: 2px solid var(--a-line);
  border-radius: var(--a-radius);
  color: var(--a-text);
  font-family: var(--a-ui);
  font-size: 17px;
  padding: 12px 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #8d949d; }      /* 3.4:1 — placeholders are
                                                examples, never instructions;
                                                the real label is above. */
.input:hover { border-color: #b9bfc7; }
.input:focus {
  outline: none;
  border-color: var(--a-focus);
  box-shadow: 0 0 0 4px rgba(27, 77, 216, .16);
}
textarea.input { resize: vertical; line-height: 1.5; padding-top: 14px; }
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5058' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 22px;
  padding-right: 46px;
  cursor: pointer;
}

.grid2, .grid3 { display: grid; gap: 18px; }
.grid2 { grid-template-columns: 1fr 1fr; }
.grid3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--a-surface);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-radius-lg);
  box-shadow: var(--a-shadow);
  padding: 26px;
}
.card__title {
  margin: 0 0 4px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--a-text);
}
.card__lede {
  margin: 0 0 22px;
  font-size: 15px;
  color: var(--a-text-mute);
}

/* ------------------------------------------------------------ buttons --- */

.abtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 100px;
  font-family: var(--a-ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.abtn--big { min-height: 54px; padding: 14px 28px; font-size: 17px; }
.abtn--block { width: 100%; }

.abtn--primary { background: var(--a-text); color: #fff; }
.abtn--primary:hover { background: #2b3038; }

.abtn--quiet {
  background: var(--a-surface);
  border-color: var(--a-line);
  color: var(--a-text);
}
.abtn--quiet:hover { background: var(--a-sunk); border-color: #b9bfc7; }

/* Delete is never the loud option. It reads as a plain control until you are
   on it — the weight in this UI belongs to the safe path. */
.abtn--danger {
  background: var(--a-surface);
  border-color: #e3b5b0;
  color: var(--a-danger);
}
.abtn--danger:hover { background: var(--a-danger); border-color: var(--a-danger); color: #fff; }

.abtn[disabled] { opacity: .5; cursor: not-allowed; }

/* ------------------------------------------------------------- alerts --- */

.alert {
  margin: 0 0 20px;
  padding: 15px 18px;
  border-radius: var(--a-radius);
  font-size: 16px;
  line-height: 1.5;
  border: 2px solid transparent;
}
.alert[hidden] { display: none; }
.alert--error {
  background: var(--a-danger-bg);
  border-color: #e3b5b0;
  color: #8e1c14;                 /* 8.2:1 on the pink ground */
  font-weight: 500;
}

/* Success messages. Stacked, dismissible, and announced politely so they do
   not interrupt someone mid-sentence in a text field. */
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(420px, calc(100vw - 40px));
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--a-ok-bg);
  border: 2px solid #a8d4bb;
  border-radius: var(--a-radius);
  box-shadow: var(--a-shadow-lg);
  padding: 15px 16px;
  font-size: 16px;
  font-weight: 500;
  color: #14562f;                 /* 7.9:1 on the green ground */
  animation: a-toast .25s ease both;
}
.toast__tick { flex: none; width: 22px; height: 22px; color: var(--a-ok); }
.toast__tick svg { width: 100%; height: 100%; display: block; }
.toast__x {
  flex: none;
  width: 30px;
  height: 30px;
  margin: -4px -4px -4px 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #14562f;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.toast__x:hover { background: rgba(20, 86, 47, .12); }

@keyframes a-toast {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* =============================================================== login === */

.login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login[hidden] { display: none; }
.login__box { width: 100%; max-width: 440px; }

.login__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--a-text);
}
.login__mark { width: 34px; height: 34px; display: inline-flex; }
.login__mark svg { width: 100%; height: 100%; display: block; }

.login__card { padding: 34px 32px; }
.login__title {
  margin: 0 0 6px;
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.login__lede { margin: 0 0 26px; font-size: 17px; color: var(--a-text-soft); }
.login__note {
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--a-line-soft);
  font-size: 15px;
  line-height: 1.55;
  color: var(--a-text-soft);       /* 8.1:1 — this text says whether the work
                                      is real or a demo, so it is NOT faint */
  text-align: center;
}
.login__note strong { color: var(--a-text); font-weight: 700; }

/* ============================================================= console === */

.console {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 100vh;
}
.console[hidden] { display: none; }

/* ------------------------------------------------------------ sidebar --- */

.side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 18px;
  background: var(--a-surface);
  border-right: 1px solid var(--a-line-soft);
  position: sticky;
  top: 0;
  height: 100vh;
}
.side__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--a-line-soft);
}
.side__mark { width: 30px; height: 30px; flex: none; }
.side__mark svg { width: 100%; height: 100%; display: block; }
.side__name {
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 19px;
  font-weight: 700;
}

/* Which store you are on is the expensive thing to get wrong, so it is a
   badge with a word in it, not a colour you have to know how to read. */
.mode {
  margin-left: auto;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 700;
  border: 2px solid var(--a-line);
  color: var(--a-text-soft);
  background: var(--a-sunk);
}
body[data-store="api"] .mode {
  background: var(--a-ok-bg);
  border-color: #a8d4bb;
  color: #14562f;
}

.side__nav { display: flex; flex-direction: column; gap: 6px; }

.navbtn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  background: transparent;
  border: 2px solid transparent;
  border-radius: var(--a-radius);
  color: var(--a-text-soft);
  font-family: var(--a-ui);
  font-size: 17px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.navbtn:hover { background: var(--a-sunk); color: var(--a-text); }
/* The current section is filled, not merely tinted — a 1px accent line is
   invisible to the person this console is for. */
.navbtn[aria-current="page"] {
  background: var(--a-text);
  color: #fff;
}
.navbtn__icon { flex: none; width: 24px; height: 24px; }
.navbtn__icon svg { width: 100%; height: 100%; display: block; }
.navbtn__text { flex: 1; }
.navbtn__count {
  flex: none;
  min-width: 30px;
  padding: 2px 9px;
  border-radius: 100px;
  background: var(--a-sunk);
  color: var(--a-text-soft);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}
.navbtn[aria-current="page"] .navbtn__count {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.side__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--a-line-soft);
}
.side__foot .abtn { font-size: 16px; }

/* --------------------------------------------------------------- main --- */

.main { padding: 32px 36px 72px; min-width: 0; }

.main__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.main__titles { min-width: 0; }
.main__title {
  margin: 0 0 4px;
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.main__lede { margin: 0; font-size: 17px; color: var(--a-text-soft); }

.backlink { margin-bottom: 22px; }

/* ------------------------------------------------------------- search --- */

.searchbar { margin-bottom: 26px; max-width: 560px; }
.searchbar__row { display: flex; gap: 10px; }
.searchbar__row .input { flex: 1; }
.searchbar__result {
  margin: 9px 0 0;
  font-size: 15px;
  color: var(--a-text-mute);
  min-height: 23px;
}

/* -------------------------------------------------------- empty states --- */

.empty {
  background: var(--a-surface);
  border: 2px dashed var(--a-line);
  border-radius: var(--a-radius-lg);
  padding: 44px 28px;
  text-align: center;
}
.empty[hidden] { display: none; }
.empty h2 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
.empty p { margin: 0; font-size: 17px; color: var(--a-text-soft); }
.empty strong { color: var(--a-text); }
.empty--inline { padding: 26px 20px; text-align: left; }

/* ========================================================= wheel cards === */

.pgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}

.pcard {
  display: flex;
  flex-direction: column;
  background: var(--a-surface);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-radius-lg);
  box-shadow: var(--a-shadow);
  overflow: hidden;
}

.pcard__head { display: flex; gap: 16px; padding: 18px 18px 14px; }
.pcard__thumb {
  flex: none;
  width: 88px;
  height: 88px;
  border-radius: var(--a-radius);
  background: var(--a-sunk) 50% / cover no-repeat;
  border: 1px solid var(--a-line-soft);
}
.pcard__meta { min-width: 0; flex: 1; }
.pcard__name {
  margin: 0 0 3px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.pcard__cat { margin: 0 0 8px; font-size: 15px; color: var(--a-text-soft); }
.pcard__spec {
  margin: 0;
  font-size: 15px;
  color: var(--a-text-mute);
  overflow-wrap: anywhere;
}

.pcard__sizes {
  padding: 0 18px 16px;
  border-bottom: 1px solid var(--a-line-soft);
}
.pcard__sizes-label {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--a-text-soft);
}
.pcard__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.pcard__chip {
  padding: 4px 11px;
  border-radius: 100px;
  background: var(--a-sunk);
  border: 1px solid var(--a-line-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--a-text-soft);
}

.pcard__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-top: auto;
}
/* Show/hide the password.
   A long passphrase typed blind is the single most common reason somebody
   cannot get into a console they have the password for — and three wrong
   tries now pauses sign-in, so guessing at your own typing is expensive.
   The button sits inside the field; the input gets padding so the text can
   never run underneath it. 44px tall like every other control here. */
.reveal { position: relative; }
.reveal .input { padding-right: 86px; }
.reveal__btn {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  min-width: 72px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--a-line);
  border-radius: 8px;
  background: var(--a-sunk);
  font-family: var(--a-ui);
  font-size: 15px;
  font-weight: 600;
  color: var(--a-text-soft);        /* 7.1:1 on --a-sunk */
  cursor: pointer;
}
.reveal__btn:hover { background: #e4e7ec; color: var(--a-text); }
.reveal__btn:focus-visible {
  outline: 3px solid var(--a-focus);
  outline-offset: 2px;
}

/* A hidden wheel has to be obvious in the list. Without this the only way to
   tell why something is missing from the website is to open every wheel in
   turn, which is exactly the phone call this label prevents. */
.pcard__hidden {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  padding: 3px 9px;
  border: 1px solid var(--a-line);
  border-radius: 999px;
  background: var(--a-sunk);
  font-family: var(--a-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--a-text-soft);        /* 7.1:1 on --a-sunk */
}

/* Edit and Delete are pushed apart, and Delete is last. They used to sit
   shoulder to shoulder at 50x26px, which is a misclick waiting to happen. */
.pcard__actions { margin-left: auto; display: flex; gap: 10px; }
.pcard__actions .abtn { min-height: 44px; padding: 10px 18px; }

/* ========================================================== categories === */

.cats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}
.cats__list { display: flex; flex-direction: column; gap: 14px; }

.crow {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--a-surface);
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-radius-lg);
  box-shadow: var(--a-shadow);
  padding: 18px 20px;
}
.crow__body { flex: 1; min-width: 0; }
.crow__body h3 { margin: 0 0 3px; font-size: 20px; font-weight: 700; }
.crow__body p { margin: 0; font-size: 15px; color: var(--a-text-mute); }
.crow__count {
  flex: none;
  padding: 5px 13px;
  border-radius: 100px;
  background: var(--a-sunk);
  border: 1px solid var(--a-line-soft);
  font-size: 15px;
  font-weight: 600;
  color: var(--a-text-soft);
}
.crow__actions { flex: none; display: flex; gap: 10px; }
.crow__actions .abtn { min-height: 44px; padding: 10px 18px; }

/* ====================================================== category detail === */

.detail__lede {
  margin: 0 0 24px;
  font-size: 18px;
  color: var(--a-text-soft);
  max-width: 62ch;
}
.detail__lede[hidden] { display: none; }
.detail__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.detail__col { padding: 24px; }

.stack { display: flex; flex-direction: column; gap: 12px; }

.rrow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-radius);
  background: var(--a-surface);
}
.rrow--ghost { background: var(--a-sunk); }
.rrow__thumb {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  background: var(--a-sunk) 50% / cover no-repeat;
  border: 1px solid var(--a-line-soft);
}
.rrow__body { flex: 1; min-width: 0; }
.rrow__body h4 { margin: 0 0 2px; font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.rrow__body p { margin: 0; font-size: 15px; color: var(--a-text-mute); }
.rrow__body p.is-here { color: var(--a-ok); font-weight: 600; }
.rrow .abtn { flex: none; min-height: 44px; padding: 9px 16px; font-size: 15px; }

/* =========================================================== the modal === */

.amodal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 20px;
  background: rgba(20, 23, 28, .55);
  overflow-y: auto;
}
.amodal[hidden] { display: none; }

.amodal__panel {
  width: 100%;
  max-width: 760px;
  background: var(--a-surface);
  border-radius: var(--a-radius-lg);
  box-shadow: var(--a-shadow-lg);
  display: flex;
  flex-direction: column;
  animation: a-rise .22s ease both;
}
@keyframes a-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.amodal__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--a-line-soft);
}
.amodal__title {
  margin: 0;
  flex: 1;
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.amodal__x {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--a-surface);
  border: 2px solid var(--a-line);
  border-radius: 50%;
  color: var(--a-text);
  cursor: pointer;
}
.amodal__x svg { width: 100%; height: 100%; display: block; }
.amodal__x:hover { background: var(--a-sunk); }

.amodal__body { padding: 26px; }

/* The form is three numbered steps, not one wall of inputs. */
.step { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--a-line-soft); }
.step:last-of-type { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.step__title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.step__num {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--a-text);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}

.amodal__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 26px;
  background: var(--a-surface);
  border-top: 1px solid var(--a-line-soft);
  border-radius: 0 0 var(--a-radius-lg) var(--a-radius-lg);
}

/* ---------------------------------------------- construction selector --- */

.seg { display: flex; flex-wrap: wrap; gap: 10px; }
.seg button {
  min-height: 52px;
  padding: 11px 18px;
  background: var(--a-surface);
  border: 2px solid var(--a-line);
  border-radius: var(--a-radius);
  color: var(--a-text);
  font-family: var(--a-ui);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.seg button:hover { background: var(--a-sunk); border-color: #b9bfc7; }
/* The chosen one is filled AND carries a tick — colour alone is not a signal
   everyone receives. */
.seg button[aria-pressed="true"] {
  background: var(--a-text);
  border-color: var(--a-text);
  color: #fff;
}
.seg button[aria-pressed="true"]::before { content: "✓ "; font-weight: 700; }

/* ---------------------------------------------------------- the sizes --- */

.sizeadd { display: flex; gap: 10px; margin-bottom: 14px; }
.sizeadd .input { flex: 1; max-width: 220px; }

.sizegrid { display: flex; flex-wrap: wrap; gap: 10px; }
.sizegrid__empty {
  margin: 0;
  font-size: 15px;
  color: var(--a-text-mute);
}
.sizechip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 7px 7px 15px;
  border-radius: 100px;
  background: var(--a-sunk);
  border: 2px solid var(--a-line);
  font-size: 16px;
  font-weight: 700;
  color: var(--a-text);
}
.sizechip button {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 23, 28, .08);
  color: var(--a-text);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.sizechip button:hover { background: var(--a-danger); color: #fff; }

/* ------------------------------------------------------------- photos --- */

.uploads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.upload {
  position: relative;
  min-height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 12px;
  text-align: center;
  background: var(--a-sunk);
  border: 2px dashed var(--a-line);
  border-radius: var(--a-radius);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.upload:hover { border-color: var(--a-focus); background: #eef2fd; }
.upload.is-over { border-color: var(--a-focus); background: #e6ecfc; border-style: solid; }
.upload.is-filled { border-style: solid; border-color: var(--a-line); background: var(--a-surface); padding: 0; }

.upload__label { font-size: 17px; font-weight: 700; color: var(--a-text); }
.upload__req {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 100px;
  background: var(--a-danger-bg);
  border: 1px solid #e3b5b0;
  color: #8e1c14;
  font-size: 13px;
  font-weight: 700;
}
.upload__hint { font-size: 15px; color: var(--a-text-soft); }
.upload__note { font-size: 14px; color: var(--a-text-mute); }

.upload__preview {
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.upload__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 5px 12px;
  border-radius: 100px;
  background: rgba(255, 255, 255, .95);
  border: 1px solid var(--a-line);
  font-size: 14px;
  font-weight: 700;
  color: var(--a-text);
}
.upload__clear {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--a-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  color: var(--a-danger);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}
.upload__clear:hover { background: var(--a-danger); border-color: var(--a-danger); color: #fff; }

/* ==================================================== confirm dialog ==== */

.confirm {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 23, 28, .6);
}
.confirm[hidden] { display: none; }
.confirm__panel {
  width: 100%;
  max-width: 500px;
  background: var(--a-surface);
  border-radius: var(--a-radius-lg);
  box-shadow: var(--a-shadow-lg);
  padding: 30px;
  animation: a-rise .2s ease both;
}
.confirm__title {
  margin: 0 0 10px;
  font-family: 'Space Grotesk', var(--a-ui);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.confirm__body { margin: 0 0 26px; font-size: 17px; color: var(--a-text-soft); }
.confirm__body strong { color: var(--a-text); }
.confirm__foot { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

/* =============================================================== team === */

/* Same two-column shape as .cats: the lists carry the weight, the form sits
   beside them. Under 1100px it stacks and the form goes first, because the
   thing you came here to do is invite somebody. */
.team {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 24px;
  align-items: start;
}
.team__lists { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.team__form { padding: 24px; position: sticky; top: 32px; }
.team .card { padding: 24px; }

/* ------------------------------------------------------ a person's row --- */

.trow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--a-line-soft);
  border-radius: var(--a-radius);
  background: var(--a-surface);
}
.trow--pending { background: var(--a-sunk); border-style: dashed; }

.trow__avatar {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--a-text);
  color: #fff;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}
.trow--pending .trow__avatar {
  background: var(--a-surface);
  color: var(--a-text-soft);
  border: 1px dashed var(--a-line);
}

.trow__body { flex: 1; min-width: 0; }
.trow__name {
  margin: 0 0 3px;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.trow__meta { margin: 0; font-size: 15px; color: var(--a-text-mute); overflow-wrap: anywhere; }

.trow__actions { flex: none; display: flex; align-items: center; gap: 10px; }
.trow__actions .abtn { min-height: 44px; padding: 10px 16px; font-size: 15px; }
.trow__actions .input { min-height: 44px; padding: 9px 12px; font-size: 15px; width: auto; }

/* The word "you" next to your own row. Quieter than a role, because it is a
   fact about the list rather than a level of access. */
.trow__you {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--a-text-mute);
}

/* ------------------------------------------------------------- the pill --- */

/* Filled for owner, outlined for the rest: the level that can hand out access
   should not look like the level that cannot. */
.rolepill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid var(--a-line);
  color: var(--a-text-soft);
  background: var(--a-surface);
  white-space: nowrap;
}
.rolepill--owner { background: var(--a-text); border-color: var(--a-text); color: #fff; }

/* ------------------------------------------------------------ the key --- */

.rolekey { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.rolekey dt { margin: 0 0 4px; }
.rolekey dd { margin: 0; font-size: 16px; color: var(--a-text-soft); }

/* --------------------------------------------------------- invite form --- */

/* Each level is a full-width row with its own sentence under it, not three
   words in a row — the choice matters and is worth the space. */
.seg--stack { flex-direction: column; gap: 8px; }
.seg--stack button {
  width: 100%;
  text-align: left;
  display: block;
  padding: 13px 16px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 17px;
  line-height: 1.35;
}
.seg--stack button small {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 500;
  color: var(--a-text-mute);
}
.seg--stack button[aria-pressed="true"] small { color: rgba(255, 255, 255, .82); }

.invited {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--a-radius);
  background: var(--a-ok-bg);
  border: 1px solid #bfe0cd;
}
.invited[hidden] { display: none; }
.invited__status { margin: 0 0 16px; font-size: 16px; color: var(--a-text); }
.invited__status strong { font-weight: 700; }
.invited__row { display: flex; gap: 10px; }
.invited__row .input { flex: 1; min-width: 0; font-size: 15px; }
.invited__row .abtn { flex: none; min-height: 48px; }
.invited .hint { margin-top: 10px; margin-bottom: 0; }

/* A note, not a failure: same box as .alert--error, different temperature. */
.alert--note {
  background: var(--a-sunk);
  border-color: var(--a-line);
  color: var(--a-text-soft);
}
.alert--note strong { color: var(--a-text); font-weight: 700; }

/* ------------------------------------------------- accepting an invite --- */

.accept__who {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 26px;
  padding: 14px 16px;
  border-radius: var(--a-radius);
  background: var(--a-sunk);
}
.accept__who[hidden] { display: none; }
.accept__email { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }

/* This sits between the level pill and the first field, so it needs the gap a
   .hint under a field does not: without it the sentence reads as the label of
   the username box below it. */
#accept-can { margin: -16px 0 24px; }
#accept-back { margin-top: 12px; }

/* ========================================================= responsive === */

@media (max-width: 1100px) {
  .cats { grid-template-columns: 1fr; }
  .cats__form { order: -1; }
  .detail__cols { grid-template-columns: 1fr; }
  /* Inviting somebody is what this screen is for, so it goes first once the
     two columns become one. Sticky is meaningless in a single column. */
  .team { grid-template-columns: 1fr; }
  .team__form { order: -1; position: static; }
}

@media (max-width: 900px) {
  /* The sidebar stops being a column and becomes a bar across the top. It is
     not collapsed behind a burger on purpose: a hidden menu is one more thing
     to know about. */
  .console { grid-template-columns: 1fr; }
  .side {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--a-line-soft);
    padding: 14px 18px;
  }
  .side__brand {
    width: 100%;
    padding: 0 0 12px;
    margin: 0;
  }
  .side__nav { flex-direction: row; flex: 1; gap: 8px; }
  .navbtn { flex: 1; }
  .side__foot {
    margin: 0;
    flex-direction: row;
    padding-top: 0;
    border-top: 0;
    width: 100%;
  }
  .side__foot .abtn { flex: 1; }
  .main { padding: 24px 20px 64px; }
  .main__title { font-size: 29px; }
}

@media (max-width: 720px) {
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .uploads { grid-template-columns: 1fr; }
  .upload { min-height: 150px; }
  .upload__preview { min-height: 150px; }
  .amodal { padding: 0; }
  .amodal__panel { border-radius: 0; min-height: 100vh; }
  .amodal__foot { border-radius: 0; }
  .amodal__foot .abtn { flex: 1; }
  .pcard__foot { flex-wrap: wrap; }
  .pcard__actions { width: 100%; margin-left: 0; }
  .pcard__actions .abtn { flex: 1; }
  .crow { flex-wrap: wrap; }
  .crow__actions { width: 100%; }
  .crow__actions .abtn { flex: 1; }
  .confirm__foot .abtn { flex: 1; }
  .toasts { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  /* Once the row wraps, the avatar belongs beside the name rather than
     floating in the middle of a three-line block — and the "this is you" tag
     has to drop to its own line, or it squeezes the email address into a
     two-character column beside it. */
  .trow { flex-wrap: wrap; align-items: flex-start; }
  .trow__you { width: 100%; }
  .trow__actions { width: 100%; }
  .trow__actions .abtn { flex: 1; }
  .trow__actions .input { flex: 1; width: auto; }
  /* The link is long and the Copy button is the point of the box, so the
     input stops trying to share a line with it. */
  .invited__row { flex-wrap: wrap; }
  .invited__row .input { flex: 1 1 100%; }
  .invited__row .abtn { flex: 1; }
}

@media (max-width: 480px) {
  body.admin { font-size: 16px; }
  .side__nav { flex-wrap: wrap; }
  .navbtn { flex: 1 1 100%; }
  .main__title { font-size: 25px; }
  .searchbar__row { flex-wrap: wrap; }
  .searchbar__row .input { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .admin *, .admin *::before, .admin *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}