/*
  Tools I Wish I Had: shared stylesheet for every extension and web app.
  Rules for using it are in DESIGN.md. Change values here, never in app code.
*/

@font-face {
  font-family: "Host Grotesk";
  font-weight: 300;
  font-display: swap;
  src: url("fonts/host-grotesk-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Host Grotesk";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/host-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Host Grotesk";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/host-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

/* ---------- Tokens ---------- */

:root,
:host {
  --font-sans: "Host Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --danger: #b3261e;

  --r-pill: 999px;
  --r-panel: 36px;
  --r-card: 28px;
  --r-field: 20px;
  --r-small: 14px;
  --r-thumb: 8px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-9: 48px;
  --s-10: 64px;
  --s-11: 88px;

  --t-small: 13px;
  --t-meta: 14px;
  --t-body: 16px;
  --t-lede: 18px;
  --t-title: 22px;
  --t-display: 44px;

  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
  --fast: 150ms;
  --slow: 400ms;

  /* The app's one hue. Set with data-hue on the root element. */
  --accent-ground: #e9f6d5;
  --accent: #95bb46;
  --accent-deep: #4a6203;

  color-scheme: light;
}

[data-hue="rose"]        { --accent-ground: #feebec; --accent: #fa7f91; --accent-deep: #923144; }
[data-hue="coral"]       { --accent-ground: #feece7; --accent: #fa8467; --accent-deep: #92361f; }
[data-hue="apricot"]     { --accent-ground: #feedde; --accent: #ed9235; --accent-deep: #814800; }
[data-hue="butter"]      { --accent-ground: #f9f1cf; --accent: #c9a90c; --accent-deep: #695701; }
[data-hue="lime"]        { --accent-ground: #e9f6d5; --accent: #95bb46; --accent-deep: #4a6203; }
[data-hue="mint"]        { --accent-ground: #dff9e9; --accent: #40c786; --accent-deep: #056940; }
[data-hue="aqua"]        { --accent-ground: #dcf9f8; --accent: #03c3c3; --accent-deep: #026565; }
[data-hue="sky"]         { --accent-ground: #e3f3fe; --accent: #3cb5fe; --accent-deep: #045e8c; }
[data-hue="periwinkle"]  { --accent-ground: #ecefff; --accent: #93a3ff; --accent-deep: #454e9f; }
[data-hue="lilac"]       { --accent-ground: #f8eaff; --accent: #ce8ceb; --accent-deep: #733d89; }

/*
  Soft gray paper, frosted white glass, and the app's hue as the accent and the
  one glow behind the glass. Declared on the element that carries data-hue so
  the accent tokens pick up that hue.
*/
:root,
:host,
.twh,
[data-hue] {
  --paper: #efefef;
  --surface: #ffffff;
  --ink: #1c1c1c;
  --text-2: rgba(20, 20, 20, 0.72);
  --text-3: #666666;
  --text-4: #8a8a8a;
  --fill: rgba(20, 20, 20, 0.05);
  --fill-hover: rgba(20, 20, 20, 0.09);
  --line: rgba(20, 20, 20, 0.1);
  --line-soft: rgba(20, 20, 20, 0.07);

  --glass: rgba(255, 255, 255, 0.58);
  --glass-strong: rgba(255, 255, 255, 0.8);
  --glass-blur: blur(28px) saturate(170%);
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 2px 8px rgba(20, 20, 20, 0.04);
  --shadow-2: 0 2px 4px rgba(20, 20, 20, 0.03), 0 28px 64px -16px rgba(20, 20, 20, 0.2);

  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  --glow-soft: color-mix(in srgb, var(--accent-ground) 90%, transparent);
  --backdrop:
    radial-gradient(52% 44% at 88% 6%, var(--glow), transparent 72%),
    radial-gradient(60% 50% at 4% 100%, var(--glow-soft), transparent 70%),
    var(--paper);

  --primary: var(--accent-ground);
  --primary-hover: color-mix(in srgb, var(--accent-ground) 78%, var(--accent));
  --on-primary: var(--accent-deep);
  --accent-strong: var(--accent-deep);
  --highlight: rgba(255, 255, 255, 0.6);
}

/*
  Modes. Glass is the default. Put data-mode on the same element as data-hue.
*/
[data-mode="light"] {
  --paper: #f4f4f4;
  --glass: #fbfbfb;
  --glass-strong: #ffffff;
  --glass-blur: none;
  --glass-edge: inset 0 0 0 1px rgba(20, 20, 20, 0.06);
  --backdrop: var(--paper);
}

[data-mode="dark"] {
  --paper: #121212;
  --surface: #424242;
  --ink: #f2f2f2;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: #a3a3a3;
  --text-4: #7a7a7a;
  --fill: rgba(255, 255, 255, 0.07);
  --fill-hover: rgba(255, 255, 255, 0.12);
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --danger: #ff8a80;

  --glass: #1c1c1c;
  --glass-strong: rgba(255, 255, 255, 0.09);
  --glass-blur: none;
  --glass-edge: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 28px 64px -16px rgba(0, 0, 0, 0.7);
  --backdrop:
    radial-gradient(52% 44% at 88% 6%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%),
    var(--paper);

  --primary: color-mix(in srgb, var(--accent) 26%, #1c1c1c);
  --primary-hover: color-mix(in srgb, var(--accent) 36%, #1c1c1c);
  --on-primary: var(--accent-ground);
  --accent-strong: var(--accent);
  --highlight: rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

/* ---------- Base ---------- */

.twh,
:where(.twh) *,
:where(.twh) *::before,
:where(.twh) *::after {
  box-sizing: border-box;
}

.twh {
  margin: 0;
  min-height: 100%;
  background: var(--backdrop);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}

:where(.twh) h1,
:where(.twh) h2,
:where(.twh) h3 {
  margin: 0;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
}
:where(.twh) h1 { font-size: var(--t-title); }
:where(.twh) h2 { font-size: var(--t-lede); }
:where(.twh) h3 { font-size: var(--t-body); }
:where(.twh) p { margin: 0; }
:where(.twh) a { color: inherit; text-underline-offset: 3px; }
:where(.twh) button,
:where(.twh) input,
:where(.twh) select,
:where(.twh) textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:where(.twh) button { cursor: pointer; }
:where(.twh) :focus { outline: none; }
:where(.twh) :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
:where(.twh) ::placeholder { color: var(--text-4); }
.twh [hidden] { display: none !important; }

.lede { font-size: var(--t-lede); line-height: 1.5; }
.hint { color: var(--text-3); font-size: var(--t-meta); }
.display { font-size: var(--t-display); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.label { font-size: 15px; font-weight: 500; letter-spacing: -0.02em; }
.meta { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--text-3); }
.error { color: var(--danger); font-size: var(--t-meta); }

/* ---------- Layout ---------- */

.stack { display: flex; flex-direction: column; gap: var(--s-4); }
.stack-tight { display: flex; flex-direction: column; gap: var(--s-2); }
.row { display: flex; align-items: center; gap: var(--s-2); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

/* Extension popup: 360px wide, header / body / footer. */
.popup { width: 360px; min-height: 200px; display: flex; flex-direction: column; }
.popup-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-5) var(--s-3) var(--s-6); }
.popup-body { flex: 1; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-2) var(--s-4) var(--s-4); }
.popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-6) var(--s-5);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  color: var(--text-3);
  text-decoration: none;
}
.more:hover { color: var(--ink); }
.more .logo {
  display: block;
  flex: none;
  color: currentColor;
}

/* Frosted glass. Anything that floats or groups content sits on this. */
.glass {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--shadow-2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-strong); }
}

/* Full pages: options pages and web apps. */
.page { width: min(40rem, calc(100% - 2 * var(--s-7))); margin: 0 auto; padding: var(--s-10) 0 var(--s-11); }
.page-wide { width: min(72rem, calc(100% - 2 * var(--s-7))); }

/* ---------- Components ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: 0 var(--s-5);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--fast) ease, box-shadow var(--fast) ease, opacity var(--fast) ease;
}
.btn:hover { background: var(--surface); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 1px 0 var(--highlight); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-large { min-height: 52px; padding: 0 var(--s-6); }
.btn-block { width: 100%; }

/* Round icon button: close, add, pick. Always has an aria-label. */
.btn-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--glass-strong);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  transition: background var(--fast) ease, transform var(--fast) var(--ease);
}
.btn-icon:hover { background: var(--surface); }
.btn-icon:active { transform: scale(0.94); }
.btn-icon-quiet { background: transparent; box-shadow: none; color: var(--text-3); }
.btn-icon-quiet:hover { background: var(--fill); color: var(--ink); }
.btn-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field > span { font-size: var(--t-meta); color: var(--text-2); }
.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: var(--r-field);
  background: var(--glass-strong);
  box-shadow: inset 0 0 0 1px var(--line-soft);
  color: var(--ink);
  transition: box-shadow var(--fast) ease, background var(--fast) ease;
}
.textarea { resize: vertical; line-height: 1.45; }
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible { outline: 0; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.search { border-radius: var(--r-pill); padding: 0 22px; }

.segmented {
  display: inline-flex;
  width: max-content;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--fill);
}
.segmented button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  font-size: 15px;
}
.segmented button[aria-pressed="true"] { background: var(--surface); box-shadow: var(--shadow-1); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill);
  font-size: var(--t-meta);
  transition: background var(--fast) ease;
}
.chip:hover { background: var(--fill-hover); }
.chip[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); }

.switch {
  position: relative;
  flex: none;
  width: 46px;
  height: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--fill-hover);
  transition: background var(--fast) ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-1);
  transition: transform var(--fast) var(--ease);
}
.switch[aria-checked="true"] { background: var(--accent-strong); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }

.card {
  padding: var(--s-6);
  border-radius: var(--r-card);
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-edge), var(--shadow-1);
}
.card-raised { background: var(--glass-strong); box-shadow: var(--glass-edge), var(--shadow-2); }

/* The app's color as a soft glow. One per screen, never behind text-heavy content. */
.bloom {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-card);
  background:
    radial-gradient(circle at 50% 58%, var(--accent) 0, color-mix(in srgb, var(--accent) 45%, var(--accent-ground)) 32%, var(--accent-ground) 72%);
  color: var(--accent-deep);
}

.list { list-style: none; margin: 0; padding: 0; }
.list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-soft);
}
.list > li:first-child { border-top: 1px solid var(--line-soft); }

.swatch { width: 28px; height: 28px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-soft); }
.kbd { font-family: var(--font-mono); font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--fill); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--accent); }

.empty { padding: var(--s-9) var(--s-4); text-align: center; }
.empty h2 { margin-bottom: var(--s-2); }
.empty p { color: var(--text-3); }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  padding: 12px var(--s-5);
  border-radius: var(--r-pill);
  background: var(--glass-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--ink);
  font-size: var(--t-meta);
  box-shadow: var(--glass-edge), var(--shadow-2);
}

.accent-tile {
  display: grid;
  place-items: center;
  border-radius: var(--r-card);
  background: var(--accent-ground);
  color: var(--accent-deep);
}

@media (prefers-reduced-motion: reduce) {
  .twh *,
  .twh *::before,
  .twh *::after { transition: none !important; animation: none !important; }
}