/* Core tokens as the product ships them (packages/core-ui), plus the stage the loops play on. */

@font-face {
  font-family: "Inter Variable";
  src: url("../hero/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: block;
}

:root {
  --cx-ink: #26262b;
  --cx-ink-muted: #6f6f77;
  --cx-ink-subtle: #a3a3a3;
  --cx-border: #e6e6e9;
  --cx-canvas: #fff;
  --cx-subtle: #f5f5f5;
  --cx-chrome-selected: #e9e9ec;
  --cx-activity-running: #2b9659;
  --cx-diff-added: #21643b;
  --cx-diff-after: #f6faf7;
  --cx-diff-before: #fdf8f7;
  --cx-danger: #a12622;
  --cx-danger-ground: #f8eeed;
  --cx-warning: #b45309;
  --cx-diff-deleted-highlight: #f4dbd7;
  --cx-diff-inserted-highlight: #dceede;
  --cx-shadow-pop: 0 8px 28px #00000017;
  --cx-radius-sm: 4px;
  --cx-radius-shell: 12px;
  --cx-font-sans: "Inter Variable", "Inter", system-ui, sans-serif;

  /* One type scale for every loop, Core UI and drawn documents alike. Weights are 400, 500 and
     600; tracking is Core's, tighter as the size grows. Mini is only for drawn miniatures: the
     website and guide previews and the catalogue's pages. */
  --fs-mini: 10px;
  --lh-mini: 13px;
  --fs-micro: 11px;
  --lh-micro: 14px;
  --fs-small: 12px;
  --lh-small: 16px;
  --fs-body: 14px;
  --lh-body: 20px;
  --fs-title: 20px;
  --lh-title: 26px;
  --track-body: -0.006em;
  --track-title: -0.017em;

  --card-shadow: 0 1px 2px #0000000d, 0 10px 30px #0000001a;
  --paper: #fbfaf7;

  color-scheme: light;
  background: #1c1c1f;
}

/* Until the script has set the page up, an embedding frame shows its own backdrop tone. */
:root:not([data-bg]) {
  background: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  font-family: var(--cx-font-sans);
  font-feature-settings: "cv11", "ss01";
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  color: var(--cx-ink);
  overflow: hidden;
}

.stage {
  position: relative;
  width: 600px;
  height: 420px;
  overflow: hidden;
  background-size: cover;
  transform: scale(var(--fit, 1));
  flex: none;
  opacity: 0;
}

/* Shown once its backdrop and font are ready, so the stage never paints half-built. */
.is-ready .stage {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .stage {
    transition: none;
  }
}

/* Each colour is its backdrop's average tone; the homepage's slots hold the same. */
[data-bg="sandstone"] .stage { background-color: #eee5c7; background-image: url("./backdrops/sandstone.svg"); }
[data-bg="sage"] .stage { background-color: #d1d9c8; background-image: url("./backdrops/sage.svg"); }
[data-bg="slate"] .stage { background-color: #ced8e2; background-image: url("./backdrops/slate.svg"); }
[data-bg="clay"] .stage { background-color: #ead0c3; background-image: url("./backdrops/clay.svg"); }
[data-bg="graphite"] .stage { background-color: #8c8e93; background-image: url("./backdrops/graphite.svg"); }

.is-capture body {
  display: block;
  place-items: normal;
  background: none;
}

.is-capture .stage {
  transform: none;
  transition: none;
}

.is-capture .loop-bar {
  display: none;
}

/* Embedded on the website: the stage fills the frame from its top-left corner. */
.is-embed,
.is-embed body {
  background: none;
}

/* Block layout honours place-items too, which would centre the 600 px stage in a narrower frame
   and cut its right edge off; embedded, the stage starts at the frame's left edge. */
.is-embed body {
  display: block;
  place-items: normal;
}

.is-embed .stage {
  transform-origin: 0 0;
}

.is-embed .loop-bar {
  display: none;
}

/* The website's feature slots are 4:3. */
.stage.is-4x3 {
  height: 450px;
}

.loop-bar {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 14px;
  font: 12px/1 var(--cx-font-sans);
  color: #9a9aa2;
  font-variant-numeric: tabular-nums;
}

.loop-bar a {
  color: inherit;
}

.loop-bar a[aria-current] {
  color: #fff;
}

/* Everything on the stage is placed by the script. */
.abs {
  position: absolute;
  will-change: transform, opacity;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Assistant ---------- */

.panel {
  background: var(--cx-canvas);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-shell);
  box-shadow: var(--cx-shadow-pop);
}

/* Core's header: the conversation menu (title and chevron), then new conversation, expand and
   minimize. */
.panel-head {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px 0 14px;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  letter-spacing: var(--track-body);
}

/* Both titles share one cell; each keeps its chevron right after its own text. */
.panel-head .conv {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.panel-head .conv > * {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.panel-head .conv .txt {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.panel-head .conv .icon {
  width: 14px;
  height: 14px;
  color: var(--cx-ink-muted);
}

.panel-head .tools {
  display: flex;
  gap: 14px;
  color: var(--cx-ink-subtle);
}

.panel-head .tools .icon {
  width: 15px;
  height: 15px;
}

/* The Assistant's empty state, as Core draws it: the mark in a ring and the greeting, at the top
   of the thread. */
.welcome {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 58px;
  display: grid;
  justify-items: start;
}

.welcome-mark {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border: 1px solid var(--cx-border);
  border-radius: 50%;
  background: var(--cx-canvas);
  box-shadow: var(--cx-shadow-pop);
  display: grid;
  place-items: center;
  color: var(--cx-ink);
}

.welcome-mark svg {
  width: 28px;
  height: 28px;
}

.welcome-title {
  font-size: var(--fs-title);
  line-height: var(--lh-title);
  font-weight: 600;
  letter-spacing: var(--track-title);
}

.composer {
  background: var(--cx-canvas);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-shell);
  padding: 10px 10px 8px 12px;
  display: flex;
  flex-direction: column;
}

.composer .field {
  position: relative;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  min-height: 20px;
  letter-spacing: var(--track-body);
}

.composer .placeholder {
  position: absolute;
  inset: 0;
  color: var(--cx-ink-subtle);
}

.composer .caret {
  display: inline-block;
  width: 1px;
  height: 16px;
  margin-left: 1px;
  vertical-align: -3px;
  background: var(--cx-ink);
}

/* Core's companion row: the context chip, then Skills, the paperclip and Send. */
.composer .row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.composer .row .spacer {
  flex: 1;
}

.skills {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 4px;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--cx-ink);
  white-space: nowrap;
}

.skills .icon {
  width: 14px;
  height: 14px;
}

.skills .icon + span + .icon {
  width: 12px;
  height: 12px;
  color: var(--cx-ink-muted);
}

.clip {
  position: relative;
  display: grid;
  place-items: center;
  width: 20px;
  height: 26px;
  color: var(--cx-ink-muted);
}

/* Files waiting to be sent: a count on the paperclip, as Core shows them. */
.clip .count {
  position: absolute;
  top: -2px;
  right: -8px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: var(--cx-radius-sm);
  background: var(--cx-subtle);
  color: var(--cx-ink);
  font-size: var(--fs-micro);
  font-weight: 500;
  line-height: var(--lh-micro);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.send {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: var(--cx-ink);
  color: #fff;
  display: grid;
  place-items: center;
}

.send .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.25;
}

/* The page context, removable: its × sits inside the chip's outline. */
.chip.ctx {
  color: var(--cx-ink-muted);
  padding-right: 5px;
  min-width: 0;
}

.chip.ctx .x {
  margin-left: 2px;
  color: var(--cx-ink-subtle);
}

/* A file in the sent message, as Core's attachment row draws it: name and size. */
.attachment {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  background: var(--cx-canvas);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}

.attachment .name {
  color: var(--cx-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.attachment .meta {
  color: var(--cx-ink-muted);
}

/* While the Assistant works: one line, the current step with a turning ring and the time so far.
   Once it is done, the line folds into Core's collapsed summary of the work. */
.activity {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--cx-ink-muted);
  white-space: nowrap;
}

.activity > * {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.activity .ring {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--cx-border);
  border-top-color: currentColor;
}

.activity .clock {
  margin-left: -4px;
  font-variant-numeric: tabular-nums;
}

.activity summary,
.sources summary {
  display: list-item;
  cursor: default;
}

.answer {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
}

/* One card per reply, as Core's results card: the subject, what was found, the fields it touches,
   and the review button on the left. Its research and sources follow as a closed disclosure. */
.result {
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  background: var(--cx-canvas);
  padding: 12px;
}

.result .name,
.result .sub {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.result .name {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  letter-spacing: var(--track-body);
}

.result .sub {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--cx-ink-muted);
}

.result .fields {
  margin: 6px 0 0;
  padding-left: 16px;
  list-style: disc;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--cx-ink-muted);
  white-space: nowrap;
}

.result .foot {
  display: flex;
  margin-top: 12px;
}

.sources {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--cx-ink-muted);
  white-space: nowrap;
}

/* ---------- Type ---------- */

.t-mini { font-size: var(--fs-mini); line-height: var(--lh-mini); letter-spacing: 0; }
.t-micro { font-size: var(--fs-micro); line-height: var(--lh-micro); letter-spacing: 0; }
.t-small { font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: var(--track-body); }
.t-title { font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: var(--track-title); font-weight: 600; }
b,
strong { font-weight: 600; }
.muted { color: var(--cx-ink-muted); }
.strong { font-weight: 500; }
.one-line { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Shared pieces of Core ---------- */

/* A window on the stage: a record, register, review or check. */
.window {
  background: var(--cx-canvas);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-shell);
  box-shadow: var(--cx-shadow-pop);
}

/* A layer whose children the page places absolutely. */
.fill {
  position: absolute;
  inset: 0;
}

.fill > * {
  position: absolute;
}

/* One button: primary (ink), secondary (outlined) and quiet (underlined text), all one height. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--cx-ink);
  border-radius: var(--cx-radius-sm);
  background: var(--cx-ink);
  color: #fff;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 500;
  white-space: nowrap;
}

.btn.secondary {
  background: var(--cx-canvas);
  color: var(--cx-ink);
  border-color: var(--cx-border);
}

.btn.quiet {
  padding: 0;
  border-color: transparent;
  background: none;
  color: var(--cx-ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn .icon {
  width: 14px;
  height: 14px;
}

/* One chip, as Core's: white, a hairline, muted label. Statuses use it too. */
.chip,
.status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-sm);
  background: var(--cx-canvas);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  font-weight: 400;
  color: var(--cx-ink-muted);
  white-space: nowrap;
}

.chip .icon,
.status .icon {
  width: 12px;
  height: 12px;
  color: var(--cx-ink-muted);
}

/* Field rows: the key small and muted, the value at body size. */
.kv {
  display: grid;
  grid-template-columns: var(--key, 104px) minmax(0, 1fr);
}

.kv > span {
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--cx-border);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kv > span:nth-child(odd) {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  letter-spacing: 0;
  color: var(--cx-ink-muted);
}

/* Register rows: one height, a thumbnail, the title at body size, the rest small. */
.trow {
  height: 44px;
  border-bottom: 1px solid var(--cx-border);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  white-space: nowrap;
}

.trow.hdr {
  height: 26px;
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--cx-ink-muted);
}

.trow b {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-body);
  font-weight: 500;
}

.thumb {
  background: var(--cx-subtle);
  border-radius: var(--cx-radius-sm);
  overflow: hidden;
}

/* Artworks are shown whole: scaled to fit, never cropped. */
.thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* The ring a click leaves. */
.click-ring {
  z-index: 49;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(38, 38, 43, 0.45);
  pointer-events: none;
}

.clip .count:empty {
  display: none;
}