/*
 * /overview/ hero: HTML mocks of the Task Matter app for one cooking goal: a desktop
 * app window, or phone Task and Matter screens. Simplified from the real app (Focus
 * bar, Open Tasks, the dark Matter pane, gold AI accents); each mock is one role="img"
 * whose content is decorative and aria-hidden.
 *
 * Sharpness: every size is in em and the frame's font size comes from the stage's width
 * (capped at 17px for the window, 15px for the phones), so the browser lays the
 * mocks out natively at their final size.
 * Nothing is scaled after layout, so hairlines, icons and text stay crisp.
 */

/* The window's sizing, shared with the page layout: overview.css derives where the
   window's right edge falls from it, to align the Matter legend with that edge. */
.ge-visuals {
  --om-window-font-cap: 17px;
  --om-window-ems: 45;
}

.ov-mock-stage {
  container-type: inline-size;
}

/* The desktop window is 45em wide and the phone pair 39.5em. */
.ov-mock-frame {
  --om-ink: #1d1c21;
  --om-text: #24221e;
  --om-muted: #706a61;
  --om-line: #e7e3da;
  --om-row: #f3f1ec;
  --om-gold: #c18d12;
  --om-gold-bright: #e6ad2e;
  --om-dark: #131318;
  --om-dark-card: #1c1c23;
  --om-dark-line: #2e2e37;
  --om-dark-text: #ece8df;
  --om-dark-muted: #a9a49a;
  --om-link: #6cc9c6;

  width: max-content;
  margin-inline: auto;
  color: var(--om-text);
  font-family: Inter, var(--tm-font), system-ui, sans-serif;
  font-size: min(var(--om-window-font-cap), calc(100cqi / var(--om-window-ems)));
  font-feature-settings: "cv11", "ss01";
  line-height: 1.35;
  letter-spacing: -0.003em;
  text-align: left;
  /* Unhinted glyph advances scale linearly with the font size, so the mocks wrap
     identically at every width (Chromium's hinted widths wrapped extra lines in
     the small phone mocks and pushed the Matter composer off the screen). */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.ge-visuals[data-preview-mode="mobile"] .ov-mock-frame {
  font-size: min(15px, calc(100cqi / 39.5));
}

.ge-visuals[data-preview-mode="desktop"] .ov-mock-phones,
.ge-visuals[data-preview-mode="mobile"] .ov-mock-desktop {
  display: none;
}

/* Zero-specificity resets, so every component rule below wins over them. */
:where(.ov-mock-frame) :where(p, ul) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.om-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Line icons from the sprite, sized by the text around them. */
.om-icon {
  flex: none;
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.om-icon--fill {
  fill: currentColor;
  stroke: none;
}

/* Status radios and checkboxes, drawn in CSS so they stay round and sharp. */
.om-radio {
  flex: none;
  box-sizing: border-box;
  width: 1.1em;
  height: 1.1em;
  border: 0.11em solid #8f897f;
  border-radius: 50%;
}

.om-radio--current {
  border: 0.13em solid var(--om-gold-bright);
  background: radial-gradient(circle, var(--om-gold-bright) 0 0.27em, transparent 0.29em);
}

.om-check {
  position: relative;
  flex: none;
  box-sizing: border-box;
  width: 1.05em;
  height: 1.05em;
  margin-top: 0.1em;
  border: 0.1em solid #a29c92;
  border-radius: 0.24em;
}

.om-check--on {
  border-color: var(--om-gold-bright);
  background: var(--om-gold-bright);
}

.om-check--on::after {
  position: absolute;
  top: 0.13em;
  left: 0.31em;
  box-sizing: border-box;
  width: 0.3em;
  height: 0.55em;
  border: solid #fff;
  border-width: 0 0.12em 0.12em 0;
  transform: rotate(45deg);
  content: "";
}

.om-chevron {
  flex: none;
  box-sizing: border-box;
  width: 0.48em;
  height: 0.48em;
  margin: 0 0.15em 0 auto;
  border: solid currentColor;
  border-width: 0 0.11em 0.11em 0;
  opacity: 0.6;
  transform: translateY(-0.14em) rotate(45deg);
}

.om-chevron--up {
  transform: translateY(0.12em) rotate(-135deg);
}

.om-done {
  color: #8c867c;
  text-decoration: line-through;
  text-decoration-thickness: 0.06em;
}

.om-add {
  display: flex;
  align-items: center;
  gap: 0.55em;
  color: var(--om-muted);
}

.om-add::before {
  width: 1.05em;
  font-size: 1.15em;
  line-height: 1;
  text-align: center;
  content: "+";
}

/* Desktop app window, without browser chrome (owner: no need for the URL bar). */
.om-window {
  display: flex;
  flex-direction: column;
  width: 45em;
  overflow: clip;
  border-radius: 0.75em;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(29, 28, 33, 0.16),
    0 0.2em 0.5em rgba(29, 24, 12, 0.06),
    0 1.6em 3.2em -1.2em rgba(29, 24, 12, 0.32);
}

/* The Focus bar heads the window. Its end, between the + and "more" buttons, stays
   empty: the arrow to the Matter pane drops through it. */
.om-focusbar {
  display: flex;
  align-items: center;
  gap: 0.85em;
  padding: 0.65em 0.85em;
  border-bottom: 1px solid var(--om-line);
  font-size: 0.8em;
}

.om-focus {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--om-gold);
  font-weight: 700;
}

.om-goal-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.42em 0.85em 0.42em 0.6em;
  border-radius: 0.55em;
  background: var(--om-ink);
  color: #fffaea;
  font-weight: 600;
}

.om-goal-tab .om-radio {
  width: 0.95em;
  height: 0.95em;
  border-color: #fffaea;
  background: radial-gradient(circle, #fffaea 0 0.2em, transparent 0.22em);
}

.om-bar-plus {
  color: var(--om-muted);
  font-size: 1.2em;
  line-height: 1;
}

.om-more {
  width: 1.25em;
  height: 1.25em;
  margin-left: auto;
  color: var(--om-muted);
}

.om-workspace {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
}

.om-plan {
  display: grid;
  align-content: start;
  gap: 0.42em;
  padding: 0.8em 0.85em 0.9em;
  font-size: 0.8em;
}

.om-plan-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0 0.15em 0.2em;
  font-weight: 600;
}

.om-plan-label span {
  color: var(--om-muted);
  font-weight: 500;
}

.om-task {
  display: flex;
  align-items: center;
  gap: 0.65em;
  padding: 0.62em 0.75em;
  border-radius: 0.6em;
  background: var(--om-row);
  font-weight: 500;
}

.om-task--selected {
  display: block;
  padding: 0.7em 0.75em 0.6em;
  background: var(--om-ink);
  color: #fffaea;
  box-shadow: 0 0.35em 0.9em -0.35em rgba(29, 24, 12, 0.5);
}

.om-task-head {
  display: flex;
  align-items: center;
  gap: 0.65em;
  font-weight: 600;
}

.om-actions {
  display: grid;
  gap: 0.2em;
  margin-top: 0.5em;
  padding-top: 0.45em;
  border-top: 1px solid #34333b;
  font-size: 0.92em;
}

.om-actions li {
  display: flex;
  gap: 0.6em;
  padding: 0.15em 0 0.15em 0.05em;
  color: #f2eee5;
  line-height: 1.38;
}

.om-actions .om-done {
  color: #a39e95;
  text-decoration-color: #8a857d;
}

.om-actions .om-add {
  color: #a39e95;
}

.om-plan > .om-add {
  padding: 0.25em 0.75em 0;
}

/* Matter: the selected task's own space, on the app's dark surface. */
.om-matter {
  display: flex;
  flex-direction: column;
  gap: 0.48em;
  padding: 0.75em 0.8em 0.8em;
  background: var(--om-dark);
  color: var(--om-dark-text);
}

.om-matter-title {
  padding: 0.55em 0.8em;
  border-radius: 0.55em;
  background: var(--om-dark-card);
  font-size: 0.78em;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--om-dark-line);
}

.om-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.65em;
  row-gap: 0.3em;
  padding: 0.7em 0.8em 0.75em 0.7em;
  border-radius: 0.6em;
  background: var(--om-dark-card);
  font-size: 0.74em;
  line-height: 1.45;
  box-shadow: inset 0 0 0 1px var(--om-dark-line);
}

/* The icon heads the first row; everything else lines up in the text column. */
.om-card > * {
  grid-column: 2;
}

.om-card > .om-icon {
  grid-row: 1;
  grid-column: 1;
  color: var(--om-gold-bright);
}

.om-card-label {
  color: var(--om-gold-bright);
  font-weight: 700;
}

.om-links {
  display: flex;
  gap: 1.3em;
}

.om-link {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  color: var(--om-link);
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}

.om-link .om-icon {
  width: 0.95em;
  height: 0.95em;
}

/* The note carries a picture of the finished dinner beside its text. */
.om-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.8em;
}

.om-note img {
  display: block;
  width: 7.5em;
  height: 3em;
  border-radius: 0.4em;
  object-fit: cover;
  box-shadow: 0 0 0 1px var(--om-dark-line);
}

.om-question {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--om-dark-line);
  color: #fff;
  font-size: 1.12em;
  font-weight: 700;
  line-height: 1.3;
}

.om-answer {
  color: var(--om-dark-text);
}

.om-composer-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.45em;
  margin-top: auto;
  font-size: 0.74em;
}

.om-chip {
  display: inline-flex;
  justify-self: start;
  align-items: center;
  gap: 0.4em;
  padding: 0.32em 0.75em 0.32em 0.55em;
  border-radius: 1em;
  background: var(--om-dark-card);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--om-dark-line);
}

.om-composer {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.42em 0.42em 0.42em 0.85em;
  border-radius: 0.65em;
  background: var(--om-dark-card);
  color: var(--om-dark-muted);
  box-shadow: inset 0 0 0 1px var(--om-dark-line);
}

.om-composer > span:first-child {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.om-plus {
  color: var(--om-dark-text);
  font-size: 1.25em;
  line-height: 1;
}

.om-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.38em 0.6em;
  border-radius: 0.45em;
  color: var(--om-dark-text);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--om-dark-line);
}

.om-btn .om-icon {
  width: 1.05em;
  height: 1.05em;
}

.om-btn--ai {
  background: #9c7210;
  color: #fff;
  box-shadow: inset 0 0 0 1px var(--om-gold-bright);
}

/* Phones: two slim modern devices, the Task screen and its Matter sheet. The gap
   is the Matter arrow's lane: it runs down between the phones and curves into the
   Matter phone, which a narrower gap squeezed into a straight line. */
.om-phones {
  display: grid;
  grid-template-columns: repeat(2, 17.75em);
  gap: 4em;
}

.om-phone {
  box-sizing: border-box;
  height: 37.5em;
  padding: 0.4em;
  border-radius: 2.6em;
  background: #1b1b20;
  box-shadow:
    inset 0 0 0 0.09em #4d4c55,
    0 0 0 1px rgba(29, 28, 33, 0.2),
    0 0.2em 0.5em rgba(29, 24, 12, 0.08),
    0 1.6em 2.8em -1.1em rgba(29, 24, 12, 0.4);
}

.om-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: clip;
  border-radius: 2.2em;
  background: #fff;
}

.om-island {
  position: absolute;
  top: 0.5em;
  left: 50%;
  width: 5.2em;
  height: 1.5em;
  border-radius: 1em;
  background: #0d0d10;
  transform: translateX(-50%);
}

.om-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5em;
  padding: 0 1.75em 0 2.1em;
  font-size: 0.7em;
  font-weight: 650;
}

.om-status-icons {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.16em;
}

.om-status-icons i {
  width: 0.26em;
  border-radius: 0.08em;
  background: currentColor;
}

.om-status-icons i:nth-child(1) { height: 0.38em; }
.om-status-icons i:nth-child(2) { height: 0.56em; }
.om-status-icons i:nth-child(3) { height: 0.74em; }
.om-status-icons i:nth-child(4) { height: 0.92em; }

.om-status-icons b {
  box-sizing: border-box;
  width: 1.75em;
  height: 0.9em;
  margin-left: 0.4em;
  padding: 0.1em;
  border: 0.09em solid currentColor;
  border-radius: 0.28em;
  background: linear-gradient(90deg, currentColor 72%, transparent 72%) content-box;
}

.om-phone-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.2em 0.95em 0.35em;
  font-size: 0.74em;
}

.om-back {
  color: var(--om-text);
  font-weight: 600;
}

.om-screen-type {
  color: var(--om-muted);
  font-size: 0.9em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.om-avatar {
  display: grid;
  justify-self: end;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  background: #2d6a6a;
  color: #fff;
  font-size: 0.85em;
  font-weight: 700;
}

.om-phone-head {
  display: grid;
  gap: 0.4em;
  padding: 0.3em 1em 0.75em;
  border-bottom: 1px solid var(--om-line);
}

.om-phone-title {
  display: flex;
  align-items: flex-start;
  gap: 0.55em;
  font-size: 1.05em;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.om-phone-title .om-radio {
  margin-top: 0.1em;
}

.om-goal-link {
  font-size: 0.72em;
  line-height: 1.4;
}

.om-goal-link span {
  color: #a8740a;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}

.om-phone-body {
  display: grid;
  align-content: start;
  gap: 0.45em;
  padding: 0.75em 0.9em 0;
  font-size: 0.76em;
}

.om-section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.1em 0.1em;
  font-weight: 600;
}

.om-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--om-muted);
  font-size: 0.92em;
  font-weight: 500;
}

.om-toggle::before {
  box-sizing: border-box;
  width: 1.9em;
  height: 1.1em;
  border-radius: 1em;
  background: radial-gradient(circle at 0.55em 50%, #fff 0 0.36em, transparent 0.4em) #cfc9be;
  content: "";
}

.om-phone-actions {
  display: grid;
  gap: 0.42em;
}

.om-phone-actions li {
  display: flex;
  gap: 0.6em;
  padding: 0.62em 0.4em 0.62em 0.7em;
  border-radius: 0.6em;
  background: #fff;
  line-height: 1.38;
  box-shadow: 0 0 0 1px var(--om-line), 0 0.1em 0.25em rgba(29, 24, 12, 0.04);
}

.om-phone-actions li > span:not(.om-check) {
  flex: 1;
}

.om-kebab {
  width: 1.1em;
  height: 1.1em;
  color: #6c665d;
}

.om-phone-body > .om-add {
  padding: 0.2em 0.1em;
}

.om-matter-bar {
  display: flex;
  align-items: center;
  margin: auto 0.75em 0;
  padding: 0.85em 1em;
  border-radius: 0.85em;
  background: var(--om-ink);
  color: #fffaea;
  font-size: 0.76em;
  font-weight: 500;
  box-shadow: 0 0.4em 1em -0.4em rgba(29, 24, 12, 0.5);
}

.om-home {
  align-self: center;
  flex: none;
  width: 7em;
  height: 0.28em;
  margin: 0.7em 0 0.45em;
  border-radius: 1em;
  background: var(--om-ink);
}

/* The Matter screen: the dark sheet raised over the task, as in the app. */
.om-phone-head--compact {
  padding-bottom: 0.5em;
  border-bottom: 0;
}

.om-sheet {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.38em;
  min-height: 0;
  padding: 0.4em 0.65em 0;
  border-radius: 1.2em 1.2em 0 0;
  background: var(--om-dark);
  color: var(--om-dark-text);
  box-shadow: 0 -0.3em 1em rgba(29, 24, 12, 0.18);
}

.om-sheet-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.2em 0.3em 0.05em;
  color: var(--om-dark-text);
}

.om-sheet-bar .om-icon {
  width: 1.05em;
  height: 1.05em;
}

.om-sheet::before {
  position: absolute;
  top: 0.4em;
  left: 50%;
  width: 2.6em;
  height: 0.25em;
  border-radius: 1em;
  background: #4b4a54;
  transform: translateX(-50%);
  content: "";
}

/* The Matter phone is full: its spacing is a little tighter than the desktop pane's
   so the composer and home bar always fit on the screen. */
.om-sheet .om-card {
  padding-top: 0.6em;
  padding-bottom: 0.65em;
  font-size: 0.7em;
}

.om-sheet .om-note img {
  width: 5.6em;
  height: 2.24em;
}

.om-sheet .om-composer-area {
  font-size: 0.7em;
}

/* Too narrow for one row: the phone composer puts its actions under the input. */
.om-sheet .om-composer {
  flex-wrap: wrap;
  row-gap: 0.55em;
  padding: 0.75em 0.5em 0.5em 0.85em;
}

.om-sheet .om-composer > span:first-child {
  flex-basis: 100%;
}

.om-sheet .om-plus {
  margin-left: auto;
}

.om-sheet .om-home {
  margin-top: 0.45em;
  background: #d9d5cc;
}

@media (min-width: 1200px) {
  /* Beside the copy the desktop window keeps the page's right content edge. */
  .ge-visuals[data-preview-mode="desktop"] .ov-mock-frame {
    margin-right: 0;
  }
}