/* ==========================================================================
   Components — the parts every screen in the workspace is built from
   ========================================================================== */

/* --- panel: the base surface for every window / card -------------------- */
.panel {
  background: linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  box-shadow: var(--sh-2);
  position: relative;
}

.panel__bar {
  display: flex; align-items: center; gap: var(--s-2);
  height: 30px; padding-inline: var(--s-3);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-400);
  border-radius: var(--r-2) var(--r-2) 0 0;
  user-select: none;
}
.panel__dots { display: flex; gap: 5px; margin-right: var(--s-1); }
.panel__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-500); }
.panel__dots i:nth-child(1) { background: var(--rust-600); }
.panel__dots i:nth-child(2) { background: var(--gold-700); }
.panel__dots i:nth-child(3) { background: var(--sage-700); }
.panel__title { font-weight: 500; }
.panel__spacer { margin-left: auto; }
.panel__body { padding: var(--s-4); }

/* --- buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ink-700);
  --btn-fg: var(--bone-100);
  --btn-line: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 11px 18px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-line); border-radius: var(--r-2);
  font-size: var(--t-sm); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), background var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.btn:hover { border-color: var(--sage-600); background: var(--ink-600); }
.btn:active { transform: translateY(1px) scale(.994); }

.btn--primary {
  --btn-bg: var(--gold-400); --btn-fg: var(--ink-950); --btn-line: var(--gold-300);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 20px -8px rgba(224,168,56,.6);
}
.btn--primary:hover { background: var(--gold-300); border-color: var(--gold-300); }

.btn--ghost { --btn-bg: transparent; --btn-line: var(--ink-500); --btn-fg: var(--bone-300); }
.btn--go { --btn-bg: var(--go-900); --btn-line: #2c5c2b; --btn-fg: var(--go-400); }
.btn--sm { padding: 7px 12px; font-size: var(--t-xs); }
.btn[aria-disabled="true"], .btn:disabled { opacity: .45; pointer-events: none; }

/* --- chips: the status vocabulary --------------------------------------- */
.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px 9px;
  border: 1px solid var(--line); border-radius: var(--r-1);
  background: color-mix(in oklab, var(--ink-800) 80%, transparent);
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.chip__k { color: var(--bone-500); }
.chip__v { color: var(--bone-200); font-weight: 700; }
.chip--gold .chip__v { color: var(--gold-300); }
.chip--go   .chip__v { color: var(--go-400); }
.chip--warn .chip__v { color: var(--warn-400); }
.chip--bad  .chip__v { color: var(--bad-400); }
.chip--dim  .chip__v { color: var(--bone-300); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- pill statuses ------------------------------------------------------ */
.pill {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-1); border: 1px solid currentColor;
  white-space: nowrap;
}
.pill--done  { color: var(--sage-400); }
.pill--wip   { color: var(--gold-300); }
.pill--maybe { color: var(--bone-400); }
.pill--never { color: var(--rust-400); }

/* --- key/value readout -------------------------------------------------- */
.kv { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.kv__row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3) var(--s-4); flex-wrap: wrap; padding: 9px 12px; background: var(--ink-800); min-width: 0; }
.kv__k { font-size: var(--t-xs); letter-spacing: .14em; color: var(--bone-500); text-transform: uppercase; }
.kv__v { font-size: var(--t-sm); font-weight: 700; color: var(--bone-100); letter-spacing: .06em; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kv__v--go { color: var(--go-400); }
.kv__v--warn { color: var(--warn-400); }
.kv__v--gold { color: var(--gold-300); }

/* --- meters ------------------------------------------------------------- */
.meter { display: grid; gap: 6px; }
.meter__top { display: flex; justify-content: space-between; font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase; }
.meter__label { color: var(--bone-500); }
.meter__val { color: var(--bone-100); font-weight: 700; }
.meter__track { height: 6px; background: var(--ink-700); border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.meter__fill {
  height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, var(--sage-500) 0 6px, var(--sage-600) 6px 8px);
  transition: width var(--dur-4) var(--ease-out);
}
.meter--gold .meter__fill { background: repeating-linear-gradient(90deg, var(--gold-400) 0 6px, var(--gold-500) 6px 8px); }
.meter--bad .meter__fill  { background: repeating-linear-gradient(90deg, var(--bad-400) 0 6px, #8f3129 6px 8px); }
.meter--go .meter__fill   { background: repeating-linear-gradient(90deg, var(--go-400) 0 6px, #3f9c3f 6px 8px); }

/* --- console / log ------------------------------------------------------ */
.console {
  background: var(--ink-950);
  border: 1px solid var(--line); border-radius: var(--r-2);
  padding: var(--s-3);
  font-size: var(--t-sm); line-height: 1.7;
  color: var(--sage-400);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--ink-500) transparent;
}
.console::-webkit-scrollbar { width: 8px; height: 8px; }
.console::-webkit-scrollbar-thumb { background: var(--ink-500); border-radius: var(--r-pill); }
.console::-webkit-scrollbar-track { background: transparent; }
.console p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.c-dim { color: var(--bone-500); }
.c-go { color: var(--go-400); }
.c-gold { color: var(--gold-300); }
.c-bad { color: var(--bad-400); }
.c-user { color: var(--bone-100); }

/* --- toasts: his notifications ------------------------------------------ */
.toasts {
  position: fixed; z-index: 70;
  right: clamp(12px, 3vw, 24px); bottom: clamp(12px, 3vw, 24px);
  display: grid; gap: var(--s-2); width: min(320px, calc(100vw - 24px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--ink-500); border-left: 2px solid var(--gold-400);
  border-radius: var(--r-2); box-shadow: var(--sh-3);
  padding: 10px 12px;
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start;
  animation: toast-in var(--dur-3) var(--ease-out) both;
}
.toast.is-out { animation: toast-out var(--dur-2) var(--ease) both; }
.toast__icon { width: 22px; height: 22px; border-radius: var(--r-1); overflow: hidden; opacity: .9; }
.toast__app { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--bone-500); }
.toast__msg { font-size: var(--t-sm); color: var(--bone-100); line-height: 1.45; }
.toast--go { border-left-color: var(--go-400); }
.toast--bad { border-left-color: var(--bad-400); }
@keyframes toast-in  { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(12px); } }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { animation: none; }
}

/* --- sticky notes ------------------------------------------------------- */
.sticky {
  font: inherit; color: inherit; border: 0;
  background: linear-gradient(180deg, #d8c98a, #c7b675);
  color: #2b2411;
  padding: 10px 12px;
  font-size: var(--t-sm); line-height: 1.35;
  box-shadow: var(--sh-2);
  border-radius: 1px;
  max-width: 200px;
}
.sticky b {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; margin-bottom: 3px; font-weight: 700;
}

/* --- nav ---------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-4);
  padding-inline: clamp(12px, 3vw, 24px);
  background: color-mix(in oklab, var(--ink-950) 84%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__brand { display: flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--bone-100); }
.nav__brand img { width: 26px; height: 26px; }
.nav__brand b {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.01em;
  font-size: var(--t-base); text-transform: uppercase; white-space: nowrap;
}
.nav__status {
  display: none; align-items: center; gap: 7px; white-space: nowrap;
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-500);
  padding: 6px 10px 6px var(--s-4); border-left: 1px solid var(--line);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__status:hover { color: var(--bone-200); background: var(--ink-800); }
.nav__dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--go-400);
  box-shadow: 0 0 8px var(--go-400); animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nav__dot { animation: none; } }

.nav__links { display: none; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  padding: 7px 11px; border-radius: var(--r-1);
  font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase;
  color: var(--bone-400); text-decoration: none;
  /* A two-word label breaking across two lines makes the whole bar look
     broken, which is what happened once the ninth link arrived. */
  white-space: nowrap;
  transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--bone-100); background: var(--ink-700); }
.nav__menu { position: relative; display: flex; align-items: center; }
.nav__link--menu::after { content: " +"; color: var(--gold-500); }
.nav__submenu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 3;
  min-width: 210px; padding: 7px;
  border: 1px solid var(--line); border-radius: var(--r-2);
  background: color-mix(in oklab, var(--ink-900) 97%, transparent);
  box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: translateY(-5px);
  transition: opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), visibility var(--dur-1);
}
.nav__submenu::before { content: ""; position: absolute; inset: -9px 0 auto; height: 9px; }
.nav__menu:hover .nav__submenu,
.nav__menu:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: none; }
.nav__submenu a {
  display: block; padding: 9px 10px; border-radius: var(--r-1);
  color: var(--bone-400); text-decoration: none; white-space: nowrap;
  font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
}
.nav__submenu a:hover, .nav__submenu a:focus-visible { color: var(--bone-100); background: var(--ink-700); }
.nav__cta { margin-left: var(--s-3); }
.nav__toggle { margin-left: auto; display: inline-flex; }

/* The status chip is decoration; the section links are navigation. With nine
   links the two no longer fit together on a middling laptop, so the chip waits
   until there is room rather than squeezing the links. */
@media (min-width: 1400px) { .nav__status { display: flex; } }

@media (min-width: 1120px) {
  .nav__links { display: flex; }
  .nav__toggle { display: none; }
}

/* mobile drawer */
.drawer {
  position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
  background: color-mix(in oklab, var(--ink-950) 97%, transparent);
  backdrop-filter: blur(6px);
  padding: var(--s-5) clamp(16px, 5vw, 32px);
  display: grid; align-content: start; gap: 0;
  overflow-y: auto;
  transform: translateY(-8px); opacity: 0; visibility: hidden;
  transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility var(--dur-2);
}
.drawer.is-open { opacity: 1; transform: none; visibility: visible; }
.drawer a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: 14px 4px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; text-transform: uppercase;
  color: var(--bone-100); text-decoration: none; letter-spacing: -.01em;
}
.drawer a span { font-family: var(--font-mono); font-size: var(--t-xs); color: var(--gold-500); letter-spacing: .1em; }
.drawer a.drawer__sub {
  margin-left: 34px; padding: 9px 4px;
  font-family: var(--font-mono); font-size: var(--t-sm); font-weight: 500;
  color: var(--bone-400); letter-spacing: .08em;
}
.drawer a.drawer__sub::before { content: "↳"; color: var(--gold-500); }
@media (min-width: 1120px) { .drawer { display: none; } }

/* --- icon button -------------------------------------------------------- */
.iconbtn {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--ink-500); border-radius: var(--r-2); color: var(--bone-300);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.iconbtn:hover { background: var(--ink-700); color: var(--bone-100); }
@media (min-width: 1120px) { .iconbtn.nav__toggle { display: none; } }

/* Status badge for the "what bro is cooking" stages.
   The state is carried by the word and the shape as much as the colour, and
   the full meaning is on the title attribute — so it survives being read
   aloud, printed, or looked at by someone who cannot separate sage from gold. */
.cook__badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border: 1px solid currentColor; border-radius: var(--r-pill);
  font-size: var(--t-xs); letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
  cursor: help;
}
.cook__badge-mark { font-size: .9em; line-height: 1; }

.cook__badge--shipped    { color: var(--sage-400); }
.cook__badge--building   { color: var(--gold-300); }
.cook__badge--next       { color: var(--bone-400); }
.cook__badge--experiment { color: var(--bone-500); border-style: dashed; }