/* Ramp Intensive attendee app: the frame around the design's own styles
   (intensive.design.css is generated from the design source; this file is the
   part the design canvas cannot know: real phones, safe areas, motion). */
.intensive-frame {
  min-height: 100dvh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: #1B1917;
}
.intensive-app {
  width: 390px;
  height: 844px;
  max-height: 100dvh;
  box-sizing: border-box;
  /* Added to the home screen the app runs under the status bar, so the top of
     the first screen has to clear it. The bar is translucent on purpose: the
     app's own colour runs to the top edge rather than sitting in a black band. */
  padding-top: env(safe-area-inset-top);
  background: var(--bg);
  color: var(--fg);
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(239, 234, 230, .1);
}
.intensive-nav {
  padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
}

/* On a phone the app is the page. */
@media (max-width: 520px) {
  .intensive-app {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
  }
}
@media (min-width: 521px) {
  .intensive-frame { padding: 28px; }
}

/* Moving between screens reads as navigation; a background refresh does not.
   The class goes on only when the view actually changed (intensive.overrides.js). */
.intensive-app .intensive-enter { animation: intensive-in .2s ease-out; }
@keyframes intensive-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intensive-app .intensive-enter { animation: none; }
}

/* The Ramp's display face. The design's headings are set in the heaviest
   Inter Tight; these are the sizes that carry a heading rather than a list row,
   and they are the only places the brand face is used. Inter Tight stays the
   fallback, so any glyph this file does not carry still renders: see the note
   in EXPERIMENT.md about the trial file's missing punctuation. */
@font-face {
  font-family: 'New Edge 666';
  src: url('assets/fonts/NewEdge666-RegularRounded.otf') format('opentype');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
.intensive-app [style*="font-size:64px"],
.intensive-app [style*="font-size:56px"],
.intensive-app [style*="font-size:40px"],
.intensive-app [style*="font-size:30px"],
.intensive-app [style*="font-size:28px"],
.intensive-app [style*="font-size:24px"],
.intensive-app [style*="font-size:22px"],
/* the card headings on Home sit at 18px bold: a heading, not a list row */
.intensive-app [style*="font-weight:700"][style*="font-size:18px"] {
  font-family: 'New Edge 666', 'Inter Tight', system-ui, sans-serif;
  letter-spacing: 0;
}

/* The entry flow's own tokens, from the handoff note in
   design/Login Directions.dc.html: secondary copy at 64 percent ink on light
   and 62 on dark and never lighter, and error text that passes 4.5:1 at 13.5px
   (#DE4F1E is for marks like the code cell borders, never for words). */
.intensive-app {
  --gate-mut: rgba(239, 234, 230, .62);
  --gate-rule: rgba(239, 234, 230, .30);
  --gate-err: #F5B5A0;
}
.intensive-app[data-light="true"] {
  --gate-mut: rgba(35, 33, 32, .64);
  --gate-rule: rgba(35, 33, 32, .30);
  --gate-err: #A8280B;
}
/* the cell holding the character being typed */
.intensive-app [data-code-cell].is-active { border-color: var(--acc) !important; }
.intensive-app [data-code-cell].is-wrong { border-color: #DE4F1E !important; }

/* The breakout you hold is lifted off the surface it sits on: upwards on
   charcoal, downwards on stone. One hard-coded dark tint cannot do both. */
.intensive-app { --mine: #3B3630; }
.intensive-app[data-light="true"] { --mine: #F5EDE7; }

/* The console's headline counts: an even grid of two on a phone, one row of
   six on a laptop. The rows in the markup dissolve so the tiles share one grid
   (!important beats the rows' inline display:flex). */
.intensive-admin .adm-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.intensive-admin .adm-tiles > div { display: contents !important; }

/* The admin console on a laptop. On a phone it is the same app as everyone
   else's; on a wide screen it takes the whole window, the tabs become a
   sidebar on the left, the content is centred, and lists of rooms and
   sign-ups sit side by side instead of in one long column. */
@media (min-width: 900px) {
  .intensive-admin-frame { padding: 0; }
  .intensive-admin {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border: 0;
    /* the nav comes after the content in the markup; this puts it on the left */
    flex-direction: row-reverse;
  }
  .intensive-admin > [data-scroll="admin"] > div {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
  }
  .intensive-admin > [data-scroll="admin"] > div:first-child { padding-top: 34px !important; }
  .intensive-admin .intensive-nav {
    flex-direction: column;
    justify-content: flex-start;
    gap: 24px;
    width: 92px;
    flex: none;
    border-top: 0 !important;
    border-right: 1px solid var(--hair);
    padding: 34px 0 !important;
  }
  .intensive-admin .intensive-nav > div { flex: 0 0 auto !important; }
  .intensive-admin .intensive-nav span { font-size: 8.5px !important; }
  .intensive-admin .adm-tiles { grid-template-columns: repeat(6, 1fr); }
  .intensive-admin .adm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    align-items: start;
  }
  .intensive-admin .adm-grid > .adm-gap { display: none; }
}

/* Busiest times chart in the admin console. One series, so one colour: a
   terracotta step validated against each theme's card surface (the paler
   accent reads grey on the dark card). Columns are capped at 24px with a 2px
   gap, rounded at the data end and square on the baseline; the tooltip opens
   on hover and on focus, so a tap on a phone shows it too. */
.intensive-app { --bar: #D4714A; }
.intensive-app[data-light="true"] { --bar: #A8431F; }
.adm-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 104px;
  margin-top: 18px;
  border-bottom: 1px solid var(--hair);
}
.adm-bar-slot {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  outline: none;
  cursor: default;
}
.adm-bar { width: 100%; max-width: 24px; background: var(--bar); border-radius: 4px 4px 0 0; }
.adm-bar-val { font: 400 10px 'JetBrains Mono', monospace; color: var(--fg); margin-bottom: 4px; }
.adm-bar-slot:hover .adm-bar, .adm-bar-slot:focus-visible .adm-bar, .adm-bar-slot:focus .adm-bar { filter: brightness(1.15); }
.adm-bar-slot:hover::after, .adm-bar-slot:focus::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--fg);
  color: var(--bg);
  font: 400 10px 'JetBrains Mono', monospace;
  padding: 5px 8px;
  border-radius: 6px;
  z-index: 2;
  pointer-events: none;
}
.adm-tip-left:hover::after, .adm-tip-left:focus::after { left: 0; transform: none; }
.adm-tip-right:hover::after, .adm-tip-right:focus::after { left: auto; right: 0; transform: none; }
.adm-bar-axis { display: flex; gap: 2px; margin-top: 6px; }
.adm-bar-axis span { flex: 1; font: 400 8.5px 'JetBrains Mono', monospace; color: var(--mut2); text-align: center; }

/* Larger text, switched on per phone from More → Text size. The design is
   drawn in fixed pixel sizes, so a phone's own text setting cannot reach it;
   this lifts every size under 28px, the smallest the most (9px labels to 12px,
   body text by 2-3px), and leaves the big headings alone. Attendee app only:
   the admin console keeps its own sizes. */
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:7.5px"] { font-size: 10.5px !important; }
/* the five tab-bar labels: bigger, but tightened so "Breakouts" and "Devotional" keep a gap */
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:8px"] { font-size: 10px !important; letter-spacing: .03em !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:8.5px"] { font-size: 11.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:9px"] { font-size: 12px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:9.5px"] { font-size: 12.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:10px"] { font-size: 13px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:10.5px"] { font-size: 13.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:11px"] { font-size: 14px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:11.5px"] { font-size: 14.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:12px"] { font-size: 15px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:12.5px"] { font-size: 15.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:13px"] { font-size: 16px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:13.5px"] { font-size: 16.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:14px"] { font-size: 17px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:14.5px"] { font-size: 17.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:15px"] { font-size: 18px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:15.5px"] { font-size: 18.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:16px"] { font-size: 19px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:16.5px"] { font-size: 19.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:17px"] { font-size: 20px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:18px"] { font-size: 21px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:22px"] { font-size: 24px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font-size:24px"] { font-size: 26px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:400 9px"] { font-size: 12px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:400 9.5px"] { font-size: 12.5px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:400 10px"] { font-size: 13px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:400 11px"] { font-size: 14px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:500 11px"] { font-size: 14px !important; }
html[data-text="large"] .intensive-app:not(.intensive-admin) [style*="font:400 15px"] { font-size: 18px !important; }

/* Larger text, the devotional player's footer. Standard fits Listen, Back and
   Tap to continue on one row; at the larger size they cannot, and each label
   broke onto two lines. So: labels never break, Listen keeps the first row, and
   Back and Continue share the row under it, Back left and Continue right (right
   even when there is no Back, on the first step). */
/* Only the footer's own labels (spans): the whole reading area is also a
   "tap to continue" target (a div), and it must keep wrapping its text. */
html[data-text="large"] .intensive-app:not(.intensive-admin) span[data-audio-label],
html[data-text="large"] .intensive-app:not(.intensive-admin) span[data-onclick="onDBack"],
html[data-text="large"] .intensive-app:not(.intensive-admin) span[data-onclick="onDAdvance"] { white-space: nowrap; }
html[data-text="large"] .intensive-app:not(.intensive-admin) div:has(> div > span[data-audio-label]) { flex-wrap: wrap; row-gap: 18px; }
html[data-text="large"] .intensive-app:not(.intensive-admin) div:has(> span[data-onclick="onDAdvance"]),
html[data-text="large"] .intensive-app:not(.intensive-admin) div:has(> span[data-onclick="onDBack"]) { flex: 1 1 100%; justify-content: space-between; }
html[data-text="large"] .intensive-app:not(.intensive-admin) span[data-onclick="onDAdvance"] { margin-left: auto; }