/* ============================================================================
   SquidSpark Store — design system
   Values are transcribed from the Claude design files. Anything that appears
   as a literal in the design (a 13.5px label, a #DFE6E9 hairline) is a token
   here so a change lands everywhere at once.
   ========================================================================= */

:root {
  /* Surface */
  --page:        #F4F7F8;
  --card:        #FFFFFF;
  --panel:       #EDF2F3;
  --panel-soft:  #F0F4F5;
  --panel-tint:  #FAFCFC;

  /* Ink */
  --ink:         #0A1A26;
  --ink-hover:   #17323F;
  --muted:       #3D5765;
  --muted-2:     #5B7383;
  --muted-3:     #6E8A99;
  --muted-4:     #8CA0AB;
  --on-dark:     #9FB6C2;
  --on-dark-2:   #B9CBD4;

  /* Line */
  --line:        #DFE6E9;
  --line-2:      #EEF2F3;
  --line-3:      #F3F6F7;
  --line-4:      #E3EAEC;
  --line-strong: #C3CFD3;
  --line-dark:   #24404E;
  --line-dark-2: #33505E;
  --line-dark-3: #2A4553;

  /* Brand */
  --blue:        #2E86DE;
  --blue-hover:  #1E6FBF;
  --link:        #1160B8;
  --blue-tint:   #EAF2FC;
  --blue-line:   #BCD6F3;
  --blue-line-2: #CFDDEF;
  --blue-soft:   #F8FAFD;

  /* Status */
  --green:       #0F7B4A;
  --green-bg:    #EAF6EF;
  --green-line:  #BFE3CE;
  --green-soft:  #F6FBF8;
  --amber:       #8A5B2B;
  --amber-bg:    #FBF2E6;
  --amber-line:  #EBD3AE;
  --red:         #8A3B3B;
  --red-bg:      #FCF1F1;
  --red-line:    #E7CFCF;
  --red-soft:    #FCF5F5;
  --red-muted:   #8A5B5B;
  --red-flat:    #C9B4B4;

  /* Type */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Metrics */
  --shell:       1240px;
  --gutter:      32px;
  --header-h:    63px;
  --radius-card: 14px;
  --radius-md:   11px;
  --radius-sm:   8px;
  --shadow-menu: 0 24px 60px rgba(10, 26, 38, .16);
}

/* ------------------------------------------------------------------ reset */

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

html {
  /* Reserve the scrollbar's width whether or not the page needs one. Without this, navigating
     from a page that scrolls to one that doesn't widens the viewport by the scrollbar, and every
     centred element — the masthead most visibly — jumps sideways. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--page);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--ink); }

input, select, button, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }
img { max-width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; }

/* Visible only to assistive tech, but focusable so keyboard users can skip. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 3px;
}

@keyframes ssRise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ layout */

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: 1080px; }
.shell--form   { max-width: 900px; }
.shell--auth   { max-width: 1040px; }
.shell--quote  { max-width: 760px; }

/* Document-like pages want a readable measure, but narrowing .shell itself also moves the
   content's left edge away from the masthead's, so the frame appears to shift on navigation.
   These constrain the content inside a full-width shell instead: same left edge everywhere. */
.measure        { max-width: 1080px; }
.measure--form  { max-width: 900px; }
.measure--quote { max-width: 760px; }

.page { min-height: 100vh; display: flex; flex-direction: column; }
.page__body { flex: 1; }

.stack { display: grid; }
.row { display: flex; align-items: center; }
.spacer { flex: 1; }

/* ------------------------------------------------------------------ topbar */

.topbar {
  background: var(--ink);
  color: var(--on-dark);
  font-size: 12.5px;
  letter-spacing: .02em;
}
.topbar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding-block: 9px;
}
.topbar__links { display: flex; align-items: center; gap: 20px; }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: #fff; }

/* ------------------------------------------------------------------ header */

.masthead {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}
.masthead__inner {
  display: flex; align-items: center; gap: 28px; padding-block: 16px;
}
.brand { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.brand__logo { height: 30px; width: auto; display: block; }
.brand__tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--link);
  border: 1px solid var(--blue-line); background: var(--blue-tint);
  padding: 3px 7px; border-radius: 4px;
}

.nav { display: flex; align-items: center; gap: 22px; margin-left: 8px; position: relative; }
.nav__trigger {
  cursor: pointer; color: var(--muted); display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 500;
}
.nav__caret { font-size: 10px; color: var(--muted-4); transition: transform .18s ease; }
.nav__trigger[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.mega {
  position: absolute; top: 34px; left: -24px; width: 760px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-menu);
  padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; z-index: 40;
}
.mega[hidden] { display: none; }
.mega__item {
  display: flex; gap: 13px; padding: 14px; border-radius: var(--radius-md);
  cursor: pointer; text-align: left; width: 100%;
}
.mega__item:hover { background: var(--page); }
.mega__icon { width: 38px; height: 38px; flex: none; border-radius: 9px; object-fit: cover; display: block; }
.mega__name { font-family: var(--font-display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.mega__blurb { font-size: 13px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.mega__price { font-size: 12.5px; color: var(--link); margin-top: 6px; }
.mega__footer {
  grid-column: span 2; border-top: 1px solid var(--line-2); margin-top: 8px; padding-top: 14px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}

.currency-select {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm);
  padding: 8px 10px; font-size: 13px; font-weight: 500; cursor: pointer;
}

.masthead__link { font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; }
.masthead__link:hover { color: var(--ink); }

.cart-button {
  display: flex; align-items: center; gap: 9px;
  background: var(--ink); color: #fff; padding: 9px 15px;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 600;
}
.cart-button:hover { background: var(--ink-hover); color: #fff; }
.cart-button__count {
  font-family: var(--font-mono); font-size: 12px; background: var(--blue); color: #fff;
  border-radius: 20px; min-width: 20px; height: 20px;
  display: grid; place-items: center; padding: 0 6px;
}

/* Both exist only below the layout breakpoint; the media query re-shows them. */
.burger { display: none; }
.masthead__mobile { display: none; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; text-align: center; white-space: nowrap;
}
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: var(--blue-hover); color: #fff; }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--ink-hover); color: #fff; }
.btn--ghost { border-color: var(--line); background: var(--card); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn--outline-dark { border-color: var(--line-dark-2); color: #fff; }
.btn--outline-dark:hover { color: #fff; border-color: var(--on-dark); }
.btn--danger { border-color: var(--red-line); color: var(--red); background: var(--card); }
.btn--danger:hover { background: var(--red-soft); color: var(--red); }
.btn--block { display: flex; width: 100%; }

.btn--md { font-size: 14px; padding: 11px 18px; }
.btn--sm { font-size: 13.5px; padding: 9px 15px; }
.btn--xs { font-size: 12.5px; padding: 7px 12px; border-radius: 7px; }
.btn--lg { font-size: 15.5px; padding: 14px; border-radius: 9px; font-weight: 700; }
.btn--hero { font-size: 15px; padding: 13px 22px; border-radius: 9px; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.linkish {
  font-size: 13.5px; font-weight: 600; color: var(--link); cursor: pointer; background: none;
}
.linkish:hover { color: var(--ink); }
.linkish--muted { color: var(--muted); font-weight: 400; }
.linkish--danger { color: var(--red-muted); }

/* ------------------------------------------------------------------ cards */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 26px;
}
.card--flush { padding: 0; overflow: hidden; }
.card--tight { padding: 22px 24px; }
.card--pad24 { padding: 24px; }
.card--sm { border-radius: 13px; }

.card-title { font-family: var(--font-display); font-weight: 700; font-size: 17px; }

.kicker {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--link);
}
.eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2);
}
.mono { font-family: var(--font-mono); }
/* Breadcrumb links stay muted like the rest of the trail rather than turning blue. */
.crumbs { font-size: 13.5px; color: var(--muted-2); }
.crumbs a, .crumbs button { font-size: inherit; color: inherit; cursor: pointer; }
.crumbs a:hover, .crumbs button:hover { color: var(--ink); }

.note-ok  { font-size: 12.5px; color: var(--green); font-weight: 600; min-height: 16px; }
.note-err { font-size: 12.5px; color: var(--red); font-weight: 600; min-height: 16px; }
.note-info{ font-size: 12.5px; color: var(--link); font-weight: 600; min-height: 18px; }

/* ------------------------------------------------------------------ forms */

.field { display: block; }
.field__label {
  font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 6px; display: block;
}
.input, .select, .textarea {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); padding: 0 12px; height: 42px;
}
.textarea { height: auto; padding: 10px 12px; line-height: 1.55; resize: vertical; }
.select { padding: 0 10px; }
.input--tall { height: 44px; }
.input--short { height: 40px; padding: 0 11px; }
.input--mono { font-family: var(--font-mono); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(46, 134, 222, .14);
}
.input[aria-invalid="true"] { border-color: var(--red-line); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-2 > .span-2 { grid-column: span 2; }

.validation { color: var(--red); font-size: 12.5px; margin-top: 5px; display: block; }

/* Required marker. No underline — browsers style <abbr> with one by default, and a dotted red
   asterisk reads as a defect rather than a cue. */
.field__required { color: var(--red); text-decoration: none; margin-left: 2px; font-weight: 600; }
.field-error { border-color: var(--red-line) !important; }

/* ------------------------------------------------------------------ chips */

.tag {
  font-size: 12px; color: var(--muted); background: var(--panel-soft);
  border: 1px solid var(--line-4); padding: 4px 9px; border-radius: 5px;
}
.tag--dark { color: var(--on-dark-2); border-color: var(--line-dark); background: none; font-size: 12.5px; padding: 5px 10px; }

.pill {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--link); background: var(--blue-tint); border: 1px solid var(--blue-line);
  padding: 3px 7px; border-radius: 4px;
}
.status {
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 5px; border: 1px solid; justify-self: start;
  display: inline-block; white-space: nowrap;
}
.status--paid    { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.status--pending { color: var(--amber); background: var(--amber-bg); border-color: var(--amber-line); }
.status--refund  { color: var(--red);   background: var(--red-bg);   border-color: var(--red-line); }
.status--neutral { color: var(--muted-2); background: var(--panel-soft); border-color: var(--line); }

/* ------------------------------------------------------------------ toggles */

.choice {
  border: 1px solid var(--line); background: var(--card);
  border-radius: 9px; padding: 11px 14px; cursor: pointer; width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.choice.is-selected { border-color: var(--blue); background: var(--blue-tint); }

.radio-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong);
  margin-top: 3px; display: grid; place-items: center; flex: none;
}
.radio-dot__fill { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.is-selected .radio-dot { border-color: var(--blue); }
.is-selected .radio-dot__fill { background: var(--blue); }

.checkbox-box {
  width: 17px; height: 17px; border-radius: 4px; border: 2px solid var(--line-strong);
  background: transparent; flex: none; margin-top: 2px;
}
.is-checked .checkbox-box { border-color: var(--blue); background: var(--blue); }

/* Checkbox row with a title and explanatory line. Shared by the storefront's
   maintenance add-on and the admin's "revoke keys" option. */
.maint-toggle {
  border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px;
  display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  width: 100%; text-align: left; background: var(--card);
}
.maint-toggle:hover { border-color: var(--line-strong); }
.maint-toggle__title { font-weight: 600; font-size: 14px; }
.maint-toggle__note { font-size: 12.5px; color: var(--muted-2); }

.segmented { display: flex; gap: 8px; flex-wrap: wrap; }
.segmented__item {
  border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm);
  padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--muted);
}
.segmented__item.is-active { border-color: var(--blue); background: var(--blue-tint); color: var(--link); }

/* ------------------------------------------------------------------ footer */

.footer { background: var(--ink); color: var(--on-dark); margin-top: auto; }
.footer__grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px;
  padding-block: 52px 30px;
}
.footer__logo { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }
.footer__tag {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue); border: 1px solid var(--line-dark); padding: 3px 7px; border-radius: 4px;
}
.footer__heading {
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted-3); margin-bottom: 12px;
}
.footer__links { display: grid; gap: 9px; font-size: 14px; }
.footer a, .footer button { color: var(--on-dark); font-size: inherit; text-align: left; cursor: pointer; }
.footer a:hover, .footer button:hover { color: #fff; }
.footer__accent { color: var(--blue); font-weight: 600; font-size: 14px; }
.footer__legal {
  border-top: 1px solid var(--line-dark); padding-top: 18px; padding-bottom: 40px;
  display: flex; justify-content: space-between; gap: 20px; font-size: 13px;
}

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

.alert {
  border-radius: var(--radius-md); padding: 14px 16px; font-size: 14px;
  border: 1px solid; margin-bottom: 16px; line-height: 1.5;
}
.alert--ok    { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.alert--error { color: var(--red);   background: var(--red-bg);   border-color: var(--red-line); }
.alert--info  { color: var(--link);  background: var(--blue-tint);border-color: var(--blue-line); }

/* ------------------------------------------------------------------ tables */

.table { width: 100%; }
.table__head, .table__row {
  display: grid; gap: 16px; align-items: center; padding: 15px 24px;
}
.table__head {
  padding-block: 13px; border-bottom: 1px solid var(--line-2);
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2);
}
.table__row { border-bottom: 1px solid var(--line-3); font-size: 14px; }
.table__row:last-child { border-bottom: 0; }
a.table__row, button.table__row { width: 100%; text-align: left; color: inherit; cursor: pointer; }
a.table__row:hover, button.table__row:hover { background: var(--panel-tint); color: inherit; }
.table__empty { padding: 40px 24px; text-align: center; color: var(--muted-2); font-size: 14px; }
.table__label { display: none; }

/* ------------------------------------------------------------------ scroll */

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }