/* PRIMIS preview — dashboard shell
   Tokens lifted verbatim from insearchlabs-app/app/tokens.css so the demo and
   the site stay one system. Never write a hex below the token block. */

/* ─── The thirty ─── */
:root {
  --isl-ink-100:#474E56; --isl-ink-300:#303943; --isl-ink-500:#1B2531;
  --isl-ink-700:#091521; --isl-ink-900:#010610;

  --isl-neutral-100:#F1F6FA; --isl-neutral-300:#DFE5EC; --isl-neutral-500:#B6BFC8;
  --isl-neutral-700:#88949F; --isl-neutral-900:#65707B;

  --isl-signature-100:#FBE8CD; --isl-signature-300:#EDB04A; --isl-signature-500:#BE861B;
  --isl-signature-700:#845A01; --isl-signature-900:#503400;

  --isl-support-100:#DDF0EE; --isl-support-300:#9FCFCB; --isl-support-500:#47A39E;
  --isl-support-700:#15726D; --isl-support-900:#0D4341;

  --isl-alert-100:#FFE4DE; --isl-alert-300:#F5B1A1; --isl-alert-500:#DC6C55;
  --isl-alert-700:#A1402D; --isl-alert-900:#612519;

  --isl-success-100:#E0F0E4; --isl-success-300:#A7D0B1; --isl-success-500:#5DA572;
  --isl-success-700:#327347; --isl-success-900:#1D4429;
}

:root, [data-theme="light"] {
  --isl-surface-page:#F1F6FA; --isl-surface-sunken:#DFE5EC; --isl-surface:#FFFFFF;
  --isl-surface-raised:#FFFFFF;
  --isl-border-subtle:#DFE5EC; --isl-border:#B6BFC8; --isl-border-strong:#88949F;
  --isl-text:#010610; --isl-text-muted:#474E56; --isl-text-subtle:#65707B;
  --isl-text-disabled:#B6BFC8;
  --isl-action:#15726D; --isl-action-hover:#0D4341; --isl-action-fg:#F1F6FA;
  --isl-link:#15726D; --isl-link-hover:#845A01;
  --isl-signature:#845A01; --isl-signature-fill:#EDB04A;
  --isl-focus-ring:#845A01;
  --isl-success:#327347; --isl-success-surface:#E0F0E4;
  --isl-danger:#A1402D; --isl-danger-surface:#FFE4DE;
  --isl-info:#15726D; --isl-info-surface:#DDF0EE;
}

[data-theme="dark"] {
  --isl-surface-page:#010610; --isl-surface-sunken:#010610; --isl-surface:#091521;
  --isl-surface-raised:#1B2531;
  --isl-border-subtle:#1B2531; --isl-border:#303943; --isl-border-strong:#474E56;
  --isl-text:#F1F6FA; --isl-text-muted:#B6BFC8; --isl-text-subtle:#88949F;
  --isl-text-disabled:#474E56;
  --isl-action:#EDB04A; --isl-action-hover:#FBE8CD; --isl-action-fg:#010610;
  --isl-link:#9FCFCB; --isl-link-hover:#EDB04A;
  --isl-signature:#EDB04A; --isl-signature-fill:#EDB04A;
  --isl-focus-ring:#EDB04A;
  --isl-success:#A7D0B1; --isl-success-surface:#1D4429;
  --isl-danger:#F5B1A1; --isl-danger-surface:#612519;
  --isl-info:#9FCFCB; --isl-info-surface:#0D4341;
}

:root {
  --isl-font-display:'EB Garamond', Georgia, serif;
  --isl-font-body:'Schibsted Grotesk', system-ui, sans-serif;
  --isl-font-label:'Martian Mono', ui-monospace, monospace;

  --isl-space-1:4px;  --isl-space-2:8px;   --isl-space-3:12px; --isl-space-4:16px;
  --isl-space-6:24px; --isl-space-8:32px;  --isl-space-12:48px;
  --isl-space-16:64px;

  --isl-radius-tag:6px; --isl-radius-input:10px; --isl-radius-card:14px;
  --isl-radius-panel:20px; --isl-radius-button:999px;

  /* Rails give ground before the layout does — a 1024-wide window is ordinary
     and must still read as a dashboard, not collapse to a stack. */
  --rail-l: clamp(208px, 17vw, 268px);
  --rail-r: clamp(304px, 24vw, 372px);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--isl-font-body);
  background: var(--isl-surface-page);
  color: var(--isl-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

/* A class that sets `display` beats the UA stylesheet's [hidden] rule, so
   toggling `hidden` silently does nothing. Bit us on the Enstruct contact
   form; see durable-decisions. */
[hidden] { display: none !important; }

:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--isl-focus-ring);
  outline-offset: 2px;
  border-radius: var(--isl-radius-tag);
}

.skip {
  position: absolute; left: -9999px;
  background: var(--isl-action); color: var(--isl-action-fg);
  padding: var(--isl-space-3) var(--isl-space-4); border-radius: var(--isl-radius-tag);
}
.skip:focus { left: var(--isl-space-4); top: var(--isl-space-4); z-index: 50; }

.hint { font-size: 0.8125rem; color: var(--isl-text-subtle); line-height: 1.5; }

.eyebrow, .rail__label, .card__crumb, .step__n, .running__step {
  font-family: var(--isl-font-label);
  font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--isl-text-subtle);
}

/* ─── Shell ─── */
.shell {
  display: grid;
  grid-template-columns: var(--rail-l) minmax(0, 1fr) var(--rail-r);
  min-height: 100vh;
}

.rail {
  background: var(--isl-surface);
  display: flex; flex-direction: column;
  padding: var(--isl-space-6);
  gap: var(--isl-space-6);
}
.rail--steps { border-right: 1px solid var(--isl-border-subtle); container-type: inline-size; }
.rail--try   { border-left: 1px solid var(--isl-border-subtle); }

@media (min-width: 1000px) {
  .rail { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
@media (max-width: 999px) {
  .shell { grid-template-columns: 1fr; }
  .rail--steps { order: 3; border-right: none; border-top: 1px solid var(--isl-border-subtle); }
  .rail--try   { order: 1; border-left: none; border-bottom: 1px solid var(--isl-border-subtle); }
  .canvas      { order: 2; }
  .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--isl-space-2); }
}

/* ─── Brand ─── */
.rail__head { display: grid; gap: var(--isl-space-1); }
.brand { display: flex; align-items: center; gap: var(--isl-space-3); }
.brand__mark { width: 9px; height: 9px; border-radius: 999px; background: var(--isl-signature-fill); }
.brand__name { font-family: var(--isl-font-label); font-weight: 500; letter-spacing: 0.2em; font-size: 0.875rem; }
.brand__by { font-size: 0.75rem; color: var(--isl-text-subtle); }

.rail__label { display: block; }

/* ─── Steps ─── */
.steps { display: grid; gap: 2px; flex: 1; align-content: start; }
.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--isl-space-3);
  padding: var(--isl-space-3);
  border-radius: var(--isl-radius-card);
  color: var(--isl-text-disabled);
}
.step__body { display: grid; min-width: 0; }
.step__t { font-size: 0.8125rem; font-weight: 600; color: var(--isl-text-subtle); line-height: 1.3; }
.step__d { font-size: 0.6875rem; color: var(--isl-text-disabled); line-height: 1.35; }
.step__icon, .step__tick, .step__dot { width: 15px; height: 15px; flex-shrink: 0; }
.step__icon { color: var(--isl-text-disabled); }
.step__tick { color: var(--isl-success); display: none; }
.step__dot {
  border-radius: 999px;
  border: 2px solid var(--isl-signature-fill);
  background: transparent;
}

.step--live { background: var(--isl-surface-raised); }
.step--live .step__n { color: var(--isl-signature); }
.step--live .step__t { color: var(--isl-text); }
.step--live .step__d { color: var(--isl-text-subtle); }

.step--active { box-shadow: inset 0 0 0 1px var(--isl-signature-fill); }
.step--active .step__dot { background: var(--isl-signature-fill); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }

.step--complete .step__dot { display: none; }
.step--complete .step__tick { display: block; }

/* When the rail is squeezed, the sub-labels are the first thing to go — a
   wrapped two-line title in a narrow column reads worse than no description.
   NB the threshold is the rail's CONTENT box, so it is ~48px under the rail width. */
@container (max-width: 184px) {
  .step__d { display: none; }
  .step { padding: var(--isl-space-2) var(--isl-space-3); gap: var(--isl-space-2); }
}

/* ─── Rail foot ─── */
.rail__foot { display: grid; gap: var(--isl-space-3); }
.proof {
  font-size: 0.75rem; color: var(--isl-text-subtle);
  padding-top: var(--isl-space-4); border-top: 1px solid var(--isl-border-subtle);
}
.proof strong { color: var(--isl-text); }
.rail__cta {
  display: block; text-align: center; text-decoration: none;
  font-size: 0.8125rem; font-weight: 600;
  padding: var(--isl-space-3); border-radius: var(--isl-radius-button);
  border: 1px solid var(--isl-border); color: var(--isl-text);
}
.rail__cta:hover { border-color: var(--isl-signature-fill); }

/* ─── Canvas ─── */
.canvas { display: flex; flex-direction: column; min-width: 0; }
.canvas__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--isl-space-4); flex-wrap: wrap;
  padding: var(--isl-space-8) clamp(var(--isl-space-4), 2.5vw, var(--isl-space-8)) var(--isl-space-6);
  border-bottom: 1px solid var(--isl-border-subtle);
}
.canvas h1 {
  font-family: var(--isl-font-display); font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.1;
  margin-top: var(--isl-space-2);
}
.canvas__tools { display: flex; align-items: center; gap: var(--isl-space-3); }
.badge {
  display: inline-flex; align-items: center; gap: var(--isl-space-2);
  font-size: 0.75rem; color: var(--isl-text-subtle);
  border: 1px solid var(--isl-border-subtle); border-radius: var(--isl-radius-button);
  padding: var(--isl-space-2) var(--isl-space-4);
}
.badge__icon { width: 14px; height: 14px; color: var(--isl-success); flex-shrink: 0; }

.ghost {
  background: transparent; border: 1px solid var(--isl-border);
  color: var(--isl-text-muted); border-radius: var(--isl-radius-button);
  padding: var(--isl-space-2) var(--isl-space-4); cursor: pointer;
  font-size: 0.8125rem;
}
.ghost:hover { border-color: var(--isl-border-strong); color: var(--isl-text); }
.ghost.small { padding: var(--isl-space-1) var(--isl-space-3); font-size: 0.75rem; }

.canvas__body {
  flex: 1; padding: clamp(var(--isl-space-4), 2.5vw, var(--isl-space-8));
  container-type: inline-size;
}

/* ─── Output states ─── */
.idle {
  min-height: 380px; display: grid; place-items: center; text-align: center;
  border: 1px dashed var(--isl-border-subtle); border-radius: var(--isl-radius-panel);
  padding: var(--isl-space-8);
}
.idle__t { font-family: var(--isl-font-display); font-size: 1.5rem; margin-bottom: var(--isl-space-3); }
.idle .hint { max-width: 46ch; margin-inline: auto; }

.running {
  border: 1px solid var(--isl-border-subtle); border-radius: var(--isl-radius-panel);
  background: var(--isl-surface); padding: var(--isl-space-8);
}
.running__step { display: block; margin-bottom: var(--isl-space-4); }
.bar { height: 3px; background: var(--isl-surface-sunken); border-radius: 999px; overflow: hidden; }
.bar__fill { display: block; height: 100%; width: 0%; background: var(--isl-signature-fill); transition: width .5s ease; }
.running .hint { margin-top: var(--isl-space-3); }

.spinner {
  width: 22px; height: 22px; display: inline-block;
  border: 2px solid var(--isl-border); border-top-color: var(--isl-signature-fill);
  border-radius: 999px; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Card ─── */
.card {
  display: grid; grid-template-columns: 1fr; gap: var(--isl-space-8);
  border: 1px solid var(--isl-border-subtle); border-radius: var(--isl-radius-panel);
  background: var(--isl-surface); padding: var(--isl-space-8);
  animation: rise .4s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.card__media { display: flex; flex-direction: column; gap: var(--isl-space-3); width: 100%; max-width: 260px; margin-inline: auto; }

/* The card answers to its own column width, not the viewport. */
@container (min-width: 560px) {
  .card { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .card__media { max-width: none; margin-inline: 0; }
}

.card__img {
  aspect-ratio: 1; border: 1px solid var(--isl-border-subtle);
  border-radius: var(--isl-radius-card); background: #FFFFFF;
  display: grid; place-items: center; overflow: hidden;
}
.card__img img { width: 100%; height: 100%; object-fit: contain; }
.card__imgpend { display: grid; place-items: center; gap: var(--isl-space-3); }

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: var(--isl-space-2); }
.card__caption {
  font-family: var(--isl-font-label); font-size: 0.625rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--isl-text-subtle); text-align: center;
}
.thumb--failed { background: var(--isl-surface-sunken); cursor: default; }
.thumb__x { color: var(--isl-text-disabled); font-size: 0.875rem; }
.thumb {
  aspect-ratio: 1; border-radius: var(--isl-radius-tag);
  border: 1px solid var(--isl-border-subtle); background: #FFFFFF;
  overflow: hidden; cursor: pointer; padding: 0; display: grid; place-items: center;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb[aria-current="true"] { border-color: var(--isl-signature-fill); border-width: 2px; }
.thumb--feature {
  background: var(--isl-ink-900); align-content: center; gap: 2px;
  padding: var(--isl-space-2); overflow: hidden;
}
.thumb--feature span {
  font-size: 0.4375rem; line-height: 1.25; color: var(--isl-neutral-100);
  font-family: var(--isl-font-label);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* Slot 5 shown full size — the studio shot with the headline set over it. */
.feature-view { position: relative; width: 100%; height: 100%; }
.feature-view img { width: 100%; height: 100%; object-fit: cover; }
.feature-view__list {
  position: absolute; inset: auto 0 0 0;
  display: grid; gap: var(--isl-space-2);
  padding: var(--isl-space-6) var(--isl-space-4) var(--isl-space-4);
  background: linear-gradient(to top, rgb(1 6 16 / .92), rgb(1 6 16 / 0));
}
.feature-view__list li {
  font-family: var(--isl-font-label); font-size: 0.6875rem;
  color: var(--isl-neutral-100); line-height: 1.3;
  padding-left: var(--isl-space-4); position: relative;
}
.feature-view__list li::before {
  content: ''; position: absolute; left: 0; top: 0.45em;
  width: 5px; height: 5px; border-radius: 999px; background: var(--isl-signature-fill);
}

.card__title {
  font-family: var(--isl-font-display); font-weight: 500;
  font-size: clamp(1.25rem, 2.2cqw + 0.9rem, 1.75rem); line-height: 1.22;
  margin-block: var(--isl-space-2) var(--isl-space-6);
}
.card__bullets { display: grid; gap: var(--isl-space-3); margin-bottom: var(--isl-space-8); }
.card__bullets li { padding-left: var(--isl-space-6); position: relative; font-size: 0.9375rem; color: var(--isl-text-muted); }
.card__bullets li::before {
  content: ''; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 999px; background: var(--isl-signature-fill);
}
.card__bullets strong { color: var(--isl-text); font-weight: 600; }

.card__section { margin-bottom: var(--isl-space-6); }
.card__section h3 {
  font-family: var(--isl-font-label); font-size: 0.625rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--isl-text-subtle); margin-bottom: var(--isl-space-3);
}
.card__section p { font-size: 0.9375rem; color: var(--isl-text-muted); }

.chips { display: flex; flex-wrap: wrap; gap: var(--isl-space-2); }
.chips li {
  font-family: var(--isl-font-label); font-size: 0.625rem;
  padding: var(--isl-space-1) var(--isl-space-3);
  border: 1px solid var(--isl-border-subtle); border-radius: var(--isl-radius-tag);
  color: var(--isl-text-subtle);
}

.card__foot {
  margin-top: var(--isl-space-8); padding-top: var(--isl-space-4);
  border-top: 1px solid var(--isl-border-subtle);
  font-size: 0.75rem; color: var(--isl-text-subtle);
}

/* ─── Try-it form ─── */
.try { display: grid; gap: var(--isl-space-4); align-content: start; }
.field { display: grid; gap: var(--isl-space-2); }
.field label, .label-ish { font-weight: 600; font-size: 0.8125rem; }

input[type="text"], textarea {
  width: 100%; padding: var(--isl-space-3);
  background: var(--isl-surface-page); border: 1px solid var(--isl-border);
  border-radius: var(--isl-radius-input); color: var(--isl-text); resize: vertical;
  font-size: 0.875rem;
}
input::placeholder, textarea::placeholder { color: var(--isl-text-disabled); }

.drop {
  border: 1.5px dashed var(--isl-border); border-radius: var(--isl-radius-input);
  padding: var(--isl-space-6) var(--isl-space-4); text-align: center; cursor: pointer;
  background: var(--isl-surface-page);
}
.drop:hover, .drop--over { border-color: var(--isl-signature-fill); }
.drop--filled { padding: var(--isl-space-2); border-style: solid; }
.drop strong { font-size: 0.875rem; }
.drop__preview { border-radius: var(--isl-radius-tag); margin-inline: auto; max-height: 170px; width: auto; }

.cta {
  width: 100%; background: var(--isl-action); color: var(--isl-action-fg);
  border: none; border-radius: var(--isl-radius-button);
  padding: var(--isl-space-3) var(--isl-space-6);
  font-weight: 600; cursor: pointer; font-size: 0.9375rem;
}
.cta:hover:not(:disabled) { background: var(--isl-action-hover); }
.cta:disabled { opacity: .5; cursor: not-allowed; }

.error {
  padding: var(--isl-space-3); background: var(--isl-danger-surface);
  color: var(--isl-danger); border-radius: var(--isl-radius-tag); font-size: 0.8125rem;
}

/* ─── Privacy block ─── */
.privacy {
  margin-top: var(--isl-space-2);
  padding: var(--isl-space-4);
  border: 1px solid var(--isl-border-subtle);
  border-radius: var(--isl-radius-card);
  background: var(--isl-surface-page);
  display: grid; gap: var(--isl-space-3);
}
.privacy__h {
  display: flex; align-items: center; gap: var(--isl-space-2);
  font-size: 0.8125rem; font-weight: 600;
}
.privacy ul { display: grid; gap: var(--isl-space-2); }
.privacy li {
  font-size: 0.75rem; line-height: 1.5; color: var(--isl-text-subtle);
  padding-left: var(--isl-space-4); position: relative;
}
.privacy li::before {
  content: ''; position: absolute; left: 0; top: 0.55em;
  width: 4px; height: 4px; border-radius: 999px; background: var(--isl-border-strong);
}
.privacy strong { color: var(--isl-text-muted); }
.privacy__foot {
  font-size: 0.6875rem; color: var(--isl-text-subtle);
  padding-top: var(--isl-space-3); border-top: 1px solid var(--isl-border-subtle);
  font-style: italic;
}

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