/* Companions: the one thing beside each big product screen that says what is happening on it.
   Construction: a chapter list, a sliding tab line and a 1 px time line. Mailroom: the phone recording at the
   desktop recording's lower right corner. Lori: a chapter strip under the recording.
   Only transform and opacity move. Everything here is finished without the script. */

.co-chapters, .co-screen, .co-strip {
  --co-ink: #0B0D0E;
  --co-mid: #535956;
  --co-line: rgb(199 203 195 / .9);
}
.ni-dark :is(.co-chapters, .co-screen, .co-strip) {
  --co-ink: #F5F2EC;
  --co-mid: #A9ADA8;
  --co-line: rgb(245 242 236 / .24);
}

/* ---------------------------------------------------------------- Construction: the home section */
@media (min-width: 1100px) {
  .lx-scene-inner.co-builders {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) minmax(0, 780px);
    column-gap: 64px;
    row-gap: 48px;
    align-items: start;
  }
  .lx-scene-inner.co-builders > .lx-builders-head { display: contents !important; }
  .lx-scene-inner.co-builders > .lx-builders-head > h2 { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  .lx-scene-inner.co-builders > .lx-builders-head > div { grid-column: 1; grid-row: 2; padding-top: 4px; }
  .lx-scene-inner.co-builders > figure.co-screen { grid-column: 2; grid-row: 2; width: auto !important; max-width: none !important; margin: 0 !important; }
}

/* ---------------------------------------------------------------- Construction: the chapter list */
.co-chapters { margin-top: 40px; }
.co-chapters-head {
  margin: 0 0 10px !important;
  font: 500 13px/1.4 Manrope, Arial, sans-serif !important;
  letter-spacing: 0;
  color: var(--co-mid) !important;
}
.co-chapters ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--co-line); }
.co-chapters li { margin: 0; padding: 0; border-bottom: 1px solid var(--co-line); }
.co-chapters button {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--co-mid);
  font: 600 18px/1.35 Manrope, Arial, sans-serif !important;
  letter-spacing: -.005em;
  text-align: left;
  cursor: pointer;
  transition: color .3s cubic-bezier(.16, 1, .3, 1);
}
.co-chapters button:disabled { cursor: default; color: var(--co-mid); }
.co-chapters button[aria-pressed="true"], .co-chapters button:not(:disabled):hover { color: var(--co-ink); }
.co-chapters button:focus-visible { outline: 2px solid #E16324; outline-offset: 3px; }
.co-chapters .co-no { flex: none; min-width: 22px; font-size: 13px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

@media (max-width: 700px) {
  .co-chapters { margin-top: 28px; }
  .co-chapters-head { display: none; }
  .co-chapters ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 8px; border-top: 0; border-bottom: 1px solid var(--co-line); }
  .co-chapters li { border: 0; min-width: 0; }
  .co-chapters button { display: grid; align-content: start; gap: 2px; min-height: 52px; padding: 4px 0 10px; font-size: 14px !important; line-height: 1.3 !important; }
  .co-chapters .co-no { font-size: 12px; }
  .co-chapters .co-the { display: none; }
  .co-chapters .co-name { text-transform: capitalize; overflow-wrap: anywhere; }
}

/* ---------------------------------------------------------------- Construction: the screen */
/* Every view stands in the same place, so the screen is as tall as its tallest view and never jumps. */
.co-screen .cd-content { display: grid; }
.co-screen .cd-content > .cd-panel { grid-area: 1 / 1; min-width: 0; opacity: 1; visibility: visible; transition: opacity .3s cubic-bezier(.16, 1, .3, 1); }
.co-screen .cd-content > .cd-panel[hidden] { display: block !important; opacity: 0; visibility: hidden; transition: opacity .3s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .3s; }
.co-screen .cd-workspace.cd-changing .cd-panel { animation: none !important; }

.co-screen .cd-select { position: relative; }
.co-screen.co-live .cd-select button[aria-pressed="true"] { box-shadow: none; }
.co-tabink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 2px;
  background: #11707c;
  transform-origin: 0 0;
  opacity: 0;
  pointer-events: none;
}
.co-screen.co-live .co-tabink { opacity: 1; }
.co-screen.co-glide .co-tabink { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }

.co-screen .cd-workspace[data-cd-view="folders"] .cd-rail > p { color: #075b65; font-weight: 700; }

.co-folder-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 18px;
  margin: 0 !important;
  padding: 4px 14px !important;
  background: #fff;
  border: 1px solid #dce4e8;
  border-radius: 10px;
}
.co-folder-grid li {
  display: grid;
  grid-template-columns: 15px 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 8px 0;
  border-bottom: 1px solid #e4e9ef;
  font: 400 11px/1.3 Manrope, Arial, sans-serif !important;
  color: #1b2733;
}
.co-folder-grid li:nth-last-child(-n+2) { border-bottom: 0; }
.co-folder-grid svg { width: 15px; height: 15px; color: #11707c; }
.co-folder-grid .co-fno { color: #5d6b79; font-size: 11px !important; font-variant-numeric: tabular-nums; }
.co-folder-grid b { font-weight: 600 !important; font-size: 11px !important; min-width: 0; }
.co-folder-grid small { color: #5d6b79 !important; font-size: 11px !important; line-height: 1.3 !important; margin: 0 !important; white-space: nowrap; }
@container (max-width: 500px) {
  /* 14 Oct: the four tabs size to their words so "The documents" stays on one line on a phone. */
  .co-screen .cd-select { display: flex !important; }
  .co-screen .cd-select button { flex: 1 1 auto !important; padding-inline: 4px !important; white-space: nowrap !important; }
  .co-folder-grid { column-gap: 12px; padding: 2px 12px !important; }
  .co-folder-grid li { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 9px 0; }
  .co-folder-grid svg, .co-folder-grid small { display: none; }
}

/* The 1 px line under the screen: time within the current view. */
.co-progress { display: block; position: relative; height: 1px; margin-top: 14px; background: var(--co-line); overflow: hidden; }
.co-progress > span { position: absolute; inset: 0; background: var(--co-ink); transform-origin: 0 50%; transform: scaleX(0); transition: opacity .3s cubic-bezier(.16, 1, .3, 1); }
.co-screen[data-co-state="chosen"] .co-progress > span { opacity: 0; }

/* ---------------------------------------------------------------- Mailroom: the pair */
/* On the Mailroom page the pair needs more of the column than one recording did; the text beside it narrows. */
@media (min-width: 1180px) {
  .np-proof:has(> .co-pair) { grid-template-columns: minmax(0, 1fr) min(860px, 71%) !important; }
}
.co-phone { display: none; }
@media (min-width: 761px) {
  .co-pair.co-bp-760 { container-type: inline-size; display: grid !important; grid-template-columns: 78% 6% 16%; align-items: end; }
}
@media (min-width: 701px) {
  .co-pair.co-bp-700 { container-type: inline-size; display: grid !important; grid-template-columns: 78% 6% 16%; align-items: end; }
}
@media (min-width: 701px) {
  .co-pair.co-bp-700 > .co-desk { grid-column: 1 / 3; grid-row: 1; width: auto !important; margin-bottom: 5cqw !important; }
  .co-pair.co-bp-700 > .co-phone { display: block; grid-column: 2 / 4; grid-row: 1; }
  .co-pair.co-bp-700 > figcaption { grid-column: 1 / -1; grid-row: 2; }
}
@media (min-width: 761px) {
  .co-pair.co-bp-760 > .co-desk { grid-column: 1 / 3; grid-row: 1; width: auto !important; margin-bottom: 5cqw !important; }
  .co-pair.co-bp-760 > .co-phone { display: block; grid-column: 2 / 4; grid-row: 1; }
  .co-pair.co-bp-760 > figcaption { grid-column: 1 / -1; grid-row: 2; }
}
.co-phone {
  position: relative;
  z-index: 1;
  aspect-ratio: 390 / 844;
  padding: 5px;
  border-radius: 22px;
  background: #272e2b;
  box-shadow: 0 24px 48px -32px rgb(11 13 14 / .5);
}
/* Both pictures are placed inside the bezel, so the frame's size comes from its aspect ratio alone (Safari does not
   resolve a percentage height inside an aspect-ratio box). */
.co-phone img, .co-phone video {
  position: absolute;
  top: 5px;
  left: 5px;
  display: block;
  width: calc(100% - 10px) !important;
  height: calc(100% - 10px) !important;
  max-width: none !important;
  margin: 0 !important;
  border-radius: 17px;
  object-fit: cover;
}
.co-phone video {
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s linear;
}
.co-phone[data-co-ready] video { opacity: 1; }

/* ---------------------------------------------------------------- Lori: the chapter strip */
.co-strip { display: block !important; margin: 16px 0 0 !important; padding: 0 !important; }
.co-line { display: block; position: relative; height: 1px; background: var(--co-line); overflow: hidden; }
.co-fill { position: absolute; inset: 0; background: var(--co-ink); transform-origin: 0 50%; transform: scaleX(0); }
.co-marks { display: grid !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; }
.co-marks button {
  appearance: none;
  position: relative;
  display: block;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 11px 10px 8px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--co-mid);
  font: 600 13px/1.3 Manrope, Arial, sans-serif !important;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition: color .3s cubic-bezier(.16, 1, .3, 1);
}
.co-marks button:disabled { cursor: default; color: var(--co-mid); }
.co-marks button[aria-current], .co-marks button:not(:disabled):hover { color: var(--co-ink); }
.co-marks button:focus-visible { outline: 2px solid #E16324; outline-offset: 2px; }
.co-tick { position: absolute; left: 0; top: -5px; width: 1px; height: 9px; background: currentColor; }
.co-label { display: block; padding-left: 7px; }
.co-marks button:first-child .co-label { padding-left: 0; }
.co-marks button:first-child .co-tick { display: none; }
/* The home Lori frame casts its shadow below the window; its caption already sits on the ground colour over it. */
.lx-lori-screen > .co-strip { position: relative; background: rgb(245 242 236); box-shadow: 0 4px 0 rgb(245 242 236); }
@media (max-width: 700px) { .co-bp-700 .co-strip { display: none; } }
@media (max-width: 760px) { .co-bp-760 .co-strip { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .co-screen .cd-content > .cd-panel, .co-screen .cd-content > .cd-panel[hidden], .co-tabink, .co-progress > span, .co-chapters button, .co-marks button, .co-phone video { transition: none !important; }
}