/* Opelli site, next edition — what Take 3 adds on top of site.css: the chat
   client, the video cards and player, the session grid, the module rail on
   the platform page. Same tokens as site.css; nothing here redefines one. */

/* --- Chat client (drawn generically: neither Claude's nor ChatGPT's own UI) */
.client { display: grid; grid-template-columns: 168px 1fr; background: var(--paper); border: 1px solid #e3e7ef; border-radius: var(--radius); overflow: hidden; box-shadow: 0 26px 60px -42px rgba(16, 22, 35, 0.5); min-height: 420px; text-align: left; }
.client.solo { grid-template-columns: 1fr; min-height: 0; }
.client-side { background: var(--paper-soft); border-right: 1px solid var(--line); padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; color: var(--ink-soft); }
.client-side b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink); font-weight: 650; margin-bottom: 4px; }
.client-side span { padding: 6px 8px; border-radius: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.client-side span.on { background: var(--paper); border: 1px solid var(--line); color: var(--ink); }
.client-main { display: flex; flex-direction: column; min-width: 0; }
.client-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-soft); }
.client-head b { color: var(--ink); font-weight: 600; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; font-weight: 600; white-space: nowrap; }
.conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; }
.client-log { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.5; }
.u { align-self: flex-end; max-width: 78%; background: #f1f3f8; border-radius: 16px 16px 4px 16px; padding: 9px 13px; color: var(--ink); }
.a { max-width: 92%; color: var(--ink); display: flex; flex-direction: column; gap: 8px; }
.a p { margin: 0; }
.tool { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; background: #fbfbfd; width: fit-content; max-width: 100%; }
.tool code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--accent); }
.tool i { width: 14px; height: 14px; border-radius: 50%; background: var(--accent-soft); flex: 0 0 14px; }
.tool.refused { border-color: #f2c4bd; background: #fdf1ef; color: #b42318; }
.tool.refused code { color: #b42318; }
.client-input { margin: auto 14px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; align-items: center; }
.client-input b { width: 26px; height: 26px; border-radius: 999px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }

/* --- Sessions: the client beside the real screen ------------------------- */
.session { display: grid; grid-template-columns: 6fr 6fr; gap: 32px; align-items: start; }
.session.flip .client { order: 2; }
.session-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.session-head h3 { font-size: 24px; letter-spacing: -0.015em; }
.session-head .watch { margin-left: auto; }
.num { font-size: 12.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.shot-crumb { margin-left: 8px; font-size: 11px; color: var(--muted); }

/* --- Video cards and the player ----------------------------------------- */
.vid { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid #e3e7ef; background: var(--paper); display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer; text-align: left; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.vid:hover { transform: translateY(-2px); box-shadow: 0 18px 44px -30px rgba(16, 22, 35, 0.35); }
.vid img { width: 100%; }
.vid .play { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; background: rgba(16, 22, 35, 0.82); color: #fff; border-radius: 999px; padding: 4px 10px 4px 6px; font-size: 12px; font-weight: 600; }
.vid .play i, .watch i { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vid .cap { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); }
.vid .cap b { font-size: 14px; font-weight: 600; color: var(--ink); }
.vid .cap span { font-size: 12.5px; color: var(--ink-soft); }
.vid-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
.vid-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.watch { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--paper); border: 1px solid #e3e7ef; border-radius: 999px; padding: 6px 12px 6px 6px; text-decoration: none; cursor: pointer; font-family: inherit; }
.watch i { width: 22px; height: 22px; }
.watch.lg { padding: 9px 16px 9px 8px; font-size: 15px; }
.watch.lg i { width: 26px; height: 26px; }
/* The walkthroughs are recorded at 1440×860 CSS px on a 2× display (2880×1720
   in the file), so 1440 px is the width at which a retina screen shows them
   pixel for pixel and anything wider only upscales. The dialog is capped
   there, shrinks with the viewport, and is centred explicitly because the
   site's global margin reset would otherwise pin it to the top-left corner. */
.player { border: 0; padding: 0; background: transparent; margin: auto; width: min(1440px, 92vw, calc((92vh - 64px) * 1.674)); max-width: none; }
.player::backdrop { background: rgba(16, 22, 35, 0.86); }
.player-box { background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8); }
.player video { width: 100%; display: block; aspect-ratio: 2880 / 1720; background: #000; }
.player-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--paper); font-size: 14px; }
.player-bar b { font-weight: 600; }
.player-bar span { color: var(--ink-soft); }
.player-bar button { font: inherit; font-size: 13.5px; border: 1px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 14px; cursor: pointer; color: var(--ink); }
.player-note { padding: 10px 16px; background: #fff4e0; color: #8a4b00; font-size: 13px; }
.player-note[hidden] { display: none; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filters button { font: inherit; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: #cdd8f8; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.vid[hidden] { display: none; }

/* --- Chips, swap board -------------------------------------------------- */
.chip { display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); border-radius: 999px; padding: 4px 12px; white-space: nowrap; text-decoration: none; }
.chip-mod { border-color: #cdd8f8; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.instead { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 40px; }
.instead .kicker { margin: 0 6px 0 0; }
.swap { display: flex; flex-direction: column; margin-top: 44px; border-top: 1px solid var(--line); }
.swap-row { display: grid; grid-template-columns: 180px 1fr 44px 1fr; gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); }
.swap-cat { font-size: 15px; font-weight: 600; color: var(--ink); }
.swap-from, .swap-to { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.swap-arrow { display: flex; justify-content: center; color: var(--muted); }
.swap-to span { font-size: 14px; color: var(--ink-soft); }

/* --- The platform page: rail + every module ------------------------------ */
.platform { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; max-width: 1600px; }
.platform-main { min-width: 0; }
/* The rail scrolls on its own when the viewport is short, but its scrollbar
   is a distraction beside the content: hidden until the pointer is over it. */
.rail { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 18px; font-size: 13.5px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: none; scrollbar-gutter: stable; padding-right: 6px; }
.rail::-webkit-scrollbar { width: 0; height: 0; }
.rail:hover { scrollbar-width: thin; scrollbar-color: #cfd5e1 transparent; }
.rail:hover::-webkit-scrollbar { width: 6px; }
.rail:hover::-webkit-scrollbar-thumb { background: #cfd5e1; border-radius: 999px; }
.rail:hover::-webkit-scrollbar-track { background: transparent; }
.rail b { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rail a { display: block; color: var(--ink-soft); padding: 4px 10px; border-left: 2px solid var(--line); text-decoration: none; }
.rail a.on { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
.platform-main .mod { padding: 72px 0; }
/* The lifted sections were laid out for a 1120 px column, where a collage's
   front window hangs from the stage's bottom edge and the feature grid follows
   a few pixels later. In the wider column that reads as crammed, so the grids
   step back from the pictures here. */
.platform-main .mini-grid { margin-top: 56px; }
.platform-main .wiki .mini-grid { margin-top: 72px; }
.platform-main .gov-caption + .shot, .platform-main .shot-secondary { margin-top: 24px; }
.platform-main .container { padding: 0; max-width: none; }
.platform-main .band { border-radius: var(--radius); padding-left: 32px; padding-right: 32px; }
.area-head { padding: 24px 0 8px; border-top: 1px solid var(--ink); margin-top: 40px; }
.area-head h2 { font-size: 30px; }
.area-head p { color: var(--ink-soft); margin-top: 8px; max-width: 720px; }
.mod-watch { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 40px; align-items: start; }
.mod-watch .client { min-height: 0; }
.mod-watch .client-log { font-size: 13.5px; }

/* --- Hero, connect, misc -------------------------------------------------- */
.hero-next { padding: 72px 0 0; text-align: center; }
.hero-next .hero-sub { margin-top: 0; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
.hero-duo { max-width: 1280px; margin: 48px auto 0; padding: 0 24px; display: grid; grid-template-columns: 7.5fr 4.5fr; gap: 20px; align-items: stretch; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.steps > div { border-top: 1px solid var(--ink); padding-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.steps b { font-weight: 600; }
.steps p { font-size: 14.5px; color: var(--ink-soft); }
.cards-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.cards-3 > div { background: var(--paper); border: 1px solid #e3e7ef; border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.cards-3 p { font-size: 15px; color: var(--ink-soft); }
.price-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.price-duo > div { background: var(--paper-soft); border: 1px solid #e3e7ef; border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.price-duo big { font-size: 34px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.price-duo small { font-size: 14px; color: var(--ink-soft); }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: #8a4b00; background: #fff4e0; border: 1px solid #f5d9a6; border-radius: 999px; padding: 3px 10px; }

@media (max-width: 960px) {
  .session, .mod-watch, .two, .hero-duo { grid-template-columns: 1fr; }
  .session.flip .client { order: 0; }
  .vid-grid, .vid-grid.cols-3, .steps, .cards-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .rail div { display: contents; }
  .rail b { display: none; }
  .rail a { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
  .swap-row { grid-template-columns: 1fr; gap: 8px; }
  .swap-arrow { display: none; }
}
@media (max-width: 640px) {
  .vid-grid, .vid-grid.cols-3, .steps, .cards-3, .price-duo { grid-template-columns: 1fr; }
  .client { grid-template-columns: 1fr; }
  .client-side { display: none; }
  .u { max-width: 92%; }
  .platform-main .band { padding-left: 18px; padding-right: 18px; }
}