/* SIYAI Editorial Planner — foundations
   Tokens are the app's own Siyai default theme (lib/themes/app_themes.dart),
   extended only where a web surface needs a value the app never had.
   Where a shipped app value fails WCAG AA on the app's own ground, the token
   carries the corrected value and names the original in a comment. */

@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('../fonts/InstrumentSans-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand — app default theme */
  --violet: #9153df;        /* primary, verbatim from the app */
  --violet-strong: #7f3ece; /* violet text on light ground (AA: 5.78:1) */
  --violet-deep: #6e32bc;   /* pressed, chip labels (AA: 7.07:1) */
  --violet-ink: #33195e;    /* violet-tinted headings on lilac */
  --lilac-200: #d7bbfa;
  --lilac-100: #e5d7f5;
  --lilac-50: #f1eafb;
  --lilac-mist: #f8f4fe;

  /* Warm side — the brand mark's own colours (app icon) */
  --mocha: #b89d8d;
  --mocha-deep: #7c5f4f;    /* mocha text on cream (AA: 5.4:1) */
  --cream: #fffdf8;
  --cream-2: #f8f2ea;

  /* Neutrals — app theme */
  --ground: #fafafa;
  --surface: #ffffff;
  --surface-2: #f5f5f5;
  --line: #e0e0e0;
  --line-soft: #ececec;
  --ink: #212121;
  --ink-2: #6b6b6b;         /* app ships #757575 = 4.41:1 on #fafafa; corrected */
  --ink-3: #8a8a8a;         /* decorative only, never body text */
  --success: #388e3c;
  --danger: #d32f2f;

  /* Type ramp. Ten steps, five fluid and five fixed: the build used to carry
     sixteen near-identical sizes, which is a mush no system can describe. */
  --fs-display: clamp(2.35rem, 5.6vw, 4.15rem);
  --fs-h2: clamp(1.85rem, 3.5vw, 2.9rem);
  --fs-h3: clamp(1.5rem, 2.5vw, 2.05rem);
  --fs-h4: clamp(1.25rem, 2vw, 1.55rem);
  --fs-lead: clamp(1.05rem, 1.4vw, 1.22rem);
  --fs-body: 1.0625rem;   /* 17px — body copy */
  --fs-sm: 1rem;          /* 16px — dense body, lists, table cells */
  --fs-note: .9375rem;    /* 15px — secondary and supporting lines */
  --fs-label: .875rem;    /* 14px — labels, chips, captions, legal */
  --fs-micro: .75rem;     /* 12px — badge kickers, grid-cell captions */

  /* Feedback and demo tones the components actually use */
  --warn: #e2a33c;
  --danger-line: #f2c9c9;
  --tint-ink-18: rgba(51, 25, 94, .18);
  --demo-mocha: #8e6f5e;
  --demo-lilac: #c9a9f9;

  /* Radii — app uses 8 for controls, ~20-24 for cards, ~40 for the device */
  --r-xs: 4px;   /* focus rings, inline code, marks */
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-device: 46px; /* the phone shell: --r-xl plus its 12px bezel */
  --r-pill: 999px;

  /* Elevation — offset + soft blur, violet-tinted like the app's cards */
  --sh-1: 0 1px 2px rgba(33, 19, 61, .05), 0 2px 8px rgba(33, 19, 61, .04);
  --sh-2: 0 2px 4px rgba(33, 19, 61, .05), 0 10px 24px rgba(33, 19, 61, .07);
  --sh-3: 0 4px 8px rgba(33, 19, 61, .06), 0 24px 48px rgba(33, 19, 61, .11);
  --sh-violet: 0 2px 4px rgba(110, 50, 188, .18), 0 12px 28px rgba(110, 50, 188, .24);

  --ease: cubic-bezier(.16, .84, .28, 1);
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 64ch;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-color: var(--lilac-200) var(--surface-2);
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}

h1 { font-size: var(--fs-display); letter-spacing: -.038em; line-height: 1.03; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h4); letter-spacing: -.02em; line-height: 1.25; }

p { margin: 0; max-width: var(--measure); }

a { color: var(--violet-strong); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--violet-deep); }

img, svg { display: block; max-width: 100%; }

/* An `img`'s width/height attributes are presentational hints, which any author
   rule outranks: the moment CSS constrains the width, the attribute's height
   stays and the picture distorts. `height: auto` hands the ratio back to the
   attribute pair, so it reserves the space instead of dictating the size. Only
   `img` — an `svg` sized by one axis in CSS depends on the other attribute. */
img { height: auto; }

ul, ol { margin: 0; padding: 0; list-style: none; }

strong { font-weight: 700; }

::selection { background: var(--lilac-200); color: var(--violet-ink); }

:focus-visible {
  outline: 2px solid var(--violet-deep);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb {
  background: var(--lilac-200);
  border: 3px solid var(--surface-2);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--violet); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  border-radius: var(--r-sm);
  background: var(--violet);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; color: #fff; }

.wrap {
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Utilities. They exist so no page needs a style attribute: the CSP ships
   without 'unsafe-inline' for styles. */
[hidden] { display: none !important; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.u-full { width: 100%; }
.u-note { margin-top: 1.2rem; color: var(--ink-2); }
.u-facts-gap { margin-top: 1.6rem; }
.u-tick { color: var(--success); }
.u-white { display: inline-block; color: #fff; }
.u-mailrow { display: block; margin-top: .5rem; }

code {
  padding: .12em .35em;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  color: var(--violet-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}

/* ---------- Wordmark ---------- */

.wordmark {
  display: block;
  width: 116px;
  height: 60px;
  background-color: currentColor;
  -webkit-mask: url('../img/wordmark.svg') no-repeat center / contain;
  mask: url('../img/wordmark.svg') no-repeat center / contain;
}

/* ---------- Language toggle (both surfaces) ---------- */

.lang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
}
.lang__btn {
  min-width: 40px;
  padding: .3rem .55rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.lang__btn[aria-pressed='true'] { background: var(--violet); color: #fff; }
.lang__btn:not([aria-pressed='true']):hover { color: var(--violet-deep); background: var(--lilac-50); }

/* ---------- Instagram link (both surfaces) ----------
   One glyph, three densities: a bare icon in the nav chrome, a labelled pill on
   the violet footer where it is an invitation rather than a control, and a plain
   inline pair on the document footers, which are a row of text links. */

.ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease),
    border-color .18s var(--ease), transform .18s var(--ease);
}
.ig svg { width: 20px; height: 20px; flex: none; }

/* Nav: sized to the language toggle beside it so the two read as one set of
   chrome; the inset pseudo-element restores a 44px target around the 40px box. */
.ig--btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
}
.ig--btn::before { content: ''; position: absolute; inset: -2px; border-radius: inherit; }
.ig--btn:hover {
  border-color: var(--lilac-200);
  background: var(--lilac-50);
  color: var(--violet-deep);
}
.ig--btn:active { transform: scale(.94); }

/* Footer: white type on deep violet, so the field is a veil, not a tint. */
.ig--pill {
  min-height: 44px;
  margin-top: 1.1rem;
  padding: .5rem 1rem .5rem .85rem;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: var(--fs-note);
  font-weight: 500;
}
.ig--pill:hover {
  border-color: rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* Document footers: a row of underlined text links, so the label is underlined
   too and only the glyph stays clear of the rule. */
.ig--inline { gap: .4rem; color: inherit; }
.ig--inline svg { width: 17px; height: 17px; }
.ig--inline span { text-decoration: underline; }

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: var(--violet);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 52px;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sh-violet);
  transition: background-color .2s var(--ease), transform .2s var(--ease),
    box-shadow .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover { --btn-bg: var(--violet-strong); color: var(--btn-fg); transform: translateY(-2px); }
.btn:active { --btn-bg: var(--violet-deep); transform: translateY(0); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--line);
  box-shadow: var(--sh-1);
}
.btn--ghost:hover {
  --btn-bg: var(--surface);
  --btn-fg: var(--violet-deep);
  border-color: var(--lilac-200);
}

.btn--onviolet {
  --btn-bg: #fff;
  --btn-fg: var(--violet-deep);
  box-shadow: 0 2px 4px rgba(40, 12, 80, .18), 0 14px 32px rgba(40, 12, 80, .22);
}
.btn--onviolet:hover { --btn-bg: var(--cream); --btn-fg: var(--violet-deep); }

.btn--outline-onviolet {
  /* The field it sits on is deep violet, so this stays a translucent veil rather
     than a tint: white type measures 4.8:1 over the lit state and better below,
     and the button stays visibly subordinate to the white primary. */
  --btn-bg: rgba(255, 255, 255, .14);
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, .62);
  box-shadow: none;
}
.btn--outline-onviolet:hover { --btn-bg: rgba(255, 255, 255, .2); --btn-fg: #fff; }

.btn[aria-disabled='true'] {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  opacity: .78;
}

.btn__icon { width: 22px; height: 22px; flex: none; }

/* Store button: two-line label, the shape store badges use */
.btn--store {
  padding: .7rem 1.4rem;
  text-align: left;
  line-height: 1.15;
}
.btn--store .btn__lines { display: grid; }
.btn--store .btn__kicker { font-size: var(--fs-micro); font-weight: 500; opacity: .95; letter-spacing: .04em; }
.btn--store .btn__name { font-size: var(--fs-body); font-weight: 700; letter-spacing: -.02em; }

/* Counting state, while the app is not on the store yet. Tabular figures, so
   a ticking second never shifts the button, and `hidden` forced: the label the
   countdown parks is display:grid above, which outranks the UA rule. */
.btn__count { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.btn__lines[hidden], .btn__label[hidden] { display: none !important; }

/* ---------- Status chips (the app's own post states) ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .28rem .7rem;
  border-radius: var(--r-pill);
  background: var(--lilac-50);
  color: var(--violet-deep);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.chip--review { background: var(--lilac-200); color: #4c2288; }
.chip--approved { background: #e6f2e6; color: #22662a; }
.chip--scheduled { background: var(--violet); color: #fff; }
.chip--published { background: var(--violet-ink); color: #fff; }
.chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- Aurora: the app's header light ---------- */

.aurora { position: relative; isolation: isolate; overflow: clip; }
.aurora::before,
.aurora::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
}
.aurora::before {
  /* The app's light burst, held in the value range where white type is legible:
     measured 4.4:1 at the palest point a headline crosses and 4.7:1+ wherever
     body copy sits, rays included. The lilac lives on in the rays and in the
     white cards that sit on top. */
  background:
    radial-gradient(125% 100% at 50% -20%, #9a63e2 0%, #8548d4 22%,
      #7a3ac8 46%, #6c2fb8 72%, #5f2aa6 100%);
}
.aurora::after {
  background:
    repeating-conic-gradient(from 200deg at 50% -14%,
      rgba(255, 255, 255, .15) 0deg 3.2deg,
      rgba(255, 255, 255, 0) 3.2deg 9.4deg);
  -webkit-mask: radial-gradient(95% 82% at 50% -12%, #000 10%, transparent 78%);
  mask: radial-gradient(95% 82% at 50% -12%, #000 10%, transparent 78%);
}