/* =====================================================================
   Visual Schedule PWA Stylesheet
   -----------------------------------------------------------------
   This stylesheet defines the look and feel of the Progressive Web
   App version of the visual schedule builder. It embraces a clean,
   modern aesthetic with responsive layouts that adapt gracefully
   across phones, tablets and desktops. Colours and spacing are
   defined up front as CSS variables so they can be easily themed.

   Sections are clearly separated: global resets, layout containers,
   board and slot styling, controls and buttons, activity library and
   print-specific overrides. Feel free to tweak the variables or
   individual rules to better match your brand.
===================================================================== */

/* Colour palette & sizing tokens */
:root {
  --vs-brand: #36AB9C;
  --vs-accent: #F58A48;
  --vs-ink: #0F172A;
  --vs-muted: #64748B;
  --vs-line: #E5E7EB;
  --vs-bg: #FFFFFF;
  --vs-panel-bg: #F8FAFC;
  --vs-slot-bg: #F9FAFB;
  --vs-radius-lg: 16px;
  --vs-radius-md: 12px;
  --vs-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  --vs-brand-hover: #2e9283;
  --vs-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fontScale: 1;
  --vs-bottomnav-h: 62px;
  /* PR-HDR-POLISH-1: shared header gutters + max width */
  --vs-header-pad-x: 14px;   /* phone default */
  --vs-header-maxw: 1180px;  /* tablet/desktop header width */
  --vs-safe-top: env(safe-area-inset-top, 0px);
  --vs-safe-bottom: env(safe-area-inset-bottom, 0px);
  --vs-safe-left: env(safe-area-inset-left, 0px);
  --vs-safe-right: env(safe-area-inset-right, 0px);

  /* "Today" anchor ring on the week strip.
     IMPORTANT: must follow theme colours (e.g. discreet mode). */
  --vs-today-ring-idle: rgba(54,171,156,.55);
  --vs-today-ring-active: rgba(54,171,156,.32);
}

/* =====================================================================
   PR-HDR-FINAL-2: Global icon button (used across header rows)
   -----------------------------------------------------------------
   NOTE: Existing scoped icon-button rules (e.g. .schedule-actions .btn-icon)
   remain in place to avoid changing older header areas. Row 3 actions
   (Undo + …) rely on this global base styling.
===================================================================== */

.btn-icon{
  background: transparent;
  border: 1px solid rgba(100,116,139,.22);
  color: var(--vs-muted);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:hover{ background:#F1F5F9; }
.btn-icon:disabled{ opacity:.45; cursor:default; }

/* Material Symbols font face is injected on demand by app.js (PR-LAZY-3). */

/* =====================================================================
   Custom additions for new PRs
   -----------------------------------------------------------------
   These styles support new features like the add-target banner, onboarding
   modal, discreet mode week strip colouring, done state styling and
   TTS button hiding.  The selectors are scoped to avoid interfering
   with existing rules.
===================================================================== */

/* PR-A: Schedule empty-state card (Diet-style) */
.vs-empty-card{
  margin: 14px 0 8px;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,0.92);
  border-radius: var(--vs-radius-lg);
  box-shadow: var(--vs-shadow);
  padding: 14px 14px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.vs-empty-card[hidden]{ display:none !important; }
.vs-empty-card__ic{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(54,171,156,0.12);
  color: var(--vs-brand);
  font-size: 18px;
  flex: 0 0 auto;
}
.vs-empty-card__title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--vs-ink);
}
.vs-empty-card__sub{
  margin: 6px 0 0;
  color: var(--vs-muted);
  font-size: 0.92rem;
  line-height: 1.35;
}
.vs-empty-card__tip{
  margin: 8px 0 0;
  color: var(--vs-muted);
  font-size: 0.85rem;
}
.vs-empty-card__actions{
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 720px){
  .vs-empty-card{ padding: 16px 16px; }
  .vs-empty-card__actions{ flex-direction: row; align-items: center; }
}
@media print{
  .vs-empty-card{ display:none !important; }
}
.vs-empty-card__tour{
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--vs-brand);
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.vs-tour-overlay{
  position: fixed;
  inset: 0;
  z-index: 12000;
  pointer-events: none;
}
.vs-tour-overlay[hidden]{ display:none !important; }
.vs-tour-scrim{
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
}
.vs-tour-target-host{
  position: relative;
  z-index: 12001 !important;
}
.vs-tour-target{
  position: relative;
  z-index: 12002 !important;
  box-shadow: 0 0 0 4px rgba(54,171,156,0.28), 0 10px 28px rgba(15,23,42,0.18);
  border-radius: 16px;
}
.vs-tour-card{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 12003;
  width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(15,23,42,0.22);
  padding: 16px;
  pointer-events: auto;
}
.vs-tour-kicker{
  margin: 0 0 6px;
  font-size: .8rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--vs-muted);
}
.vs-tour-title{
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--vs-ink);
}
.vs-tour-body{
  margin: 8px 0 0;
  color: var(--vs-muted);
  font-size: .95rem;
  line-height: 1.45;
}
.vs-tour-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}
.vs-tour-actions-main{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  justify-content: flex-end;
}
.vs-tour-link{
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--vs-muted);
  font-weight: 700;
}
.vs-tour-progress{
  margin-top: 8px;
  color: var(--vs-muted);
  font-size: .82rem;
}
@media (max-width: 480px){
  .vs-tour-card{
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    padding: 14px;
    border-radius: 16px;
  }
  .vs-tour-actions-main{
    width: 100%;
    margin-left: 0;
  }
  .vs-tour-actions-main > .btn{
    flex: 1 1 0;
  }
}
@media (min-width: 720px){
  .vs-tour-card{
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
@media (min-width: 1100px){
  .vs-tour-card{
    left: auto;
    right: 24px;
    bottom: 24px;
    transform: none;
    width: min(440px, calc(100vw - 48px));
  }
}
/* PR-07B: discreet mode active week chip text colours */
:root[data-vs-style="discreet"] .vs-weekstrip .chip[data-active="true"] .wk-dow,
:root[data-vs-style="discreet"] .vs-weekstrip .chip[data-active="true"] .wk-date {
  color: #FFFFFF;
}

/* PR-08B: done state styling */
.slot.done .slot-label-text {
  text-decoration: line-through;
  opacity: 0.6;
}
.slot.done .slot-icon {
  opacity: 0.6;
}
/* PR-5C (P1): Export-only done visibility
   Default exports hide "done" visuals unless user opts in via export-root class.
   Inventory (current UI done visuals):
   - .slot.done .slot-label-text => line-through + reduced opacity
   - .slot.done .slot-icon      => reduced opacity
   - .done-btn text toggles     => ✔︎ (done) / ○ (not done)
*/
.export-root--hide-done .slot.done .slot-label-text{
  text-decoration: none !important;
  opacity: 1 !important;
}
.export-root--hide-done .slot.done .slot-icon{
  opacity: 1 !important;
}

/* Make completed marks appear "not done" in exports when toggle is OFF.
   We keep the button layout, but visually swap ✔︎ for ○ without changing data. */
.export-root--hide-done .slot.done .done-btn{
  color: transparent !important;
  text-shadow: none !important;
  position: relative;
}
.export-root--hide-done .slot.done .done-btn::before{
  content: '○';
  color: var(--vs-muted);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  line-height: 1;
}

/* PR-5D (P1): Classroom board safety pass (pagination-sensitive)
   When exports default to hiding completed marks, ensure any done-only badges/overlays
   are fully removed (no height, no wrapping risk). */
.export-root--hide-done .vs-export-row.done::before,
.export-root--hide-done .vs-export-row.done::after,
.export-root--hide-done .vs-export-row.vs-cb-row.done::before,
.export-root--hide-done .vs-export-row.vs-cb-row.done::after{
  content: none !important;
  display: none !important;
}

/* If any future/alternate done indicators are rendered as DOM nodes, remove them too. */
.export-root--hide-done .vs-cb-row .done-badge,
.export-root--hide-done .vs-cb-row .vs-done-badge,
.export-root--hide-done .vs-cb-row .checkmark,
.export-root--hide-done .vs-cb-row .vs-checkmark,
.export-root--hide-done .vs-cb-row [data-done-badge="true"],
.export-root--hide-done .vs-cb-row [data-completed="true"]{
  display: none !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Export view rows (buildScheduleExportView): allow done visuals ONLY when include-done is ON */
.export-root--include-done .vs-export-row.done{
  position: relative;
}
.export-root--include-done .vs-export-row.done .vs-activityLabel{
  text-decoration: line-through;
  opacity: 0.6;
}

/* --- Custom styling for new profile features --- */
/* Small coloured dot displayed in the active profile chip */
.vs-profile-color-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
  flex:0 0 auto;
}

/* Radio group styling for profile initialisation sheet */
.vs-radio-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vs-radio-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.95rem;
  color:var(--vs-ink);
}
.vs-radio-option input[type="radio"]{
  width:16px;
  height:16px;
  margin:0;
}
.export-root--include-done .vs-export-row.done .vs-export-icon{
  opacity: 0.6;
}
/* Check indicator (non-interactive) */
.export-root--include-done .vs-export-row.done::after{
  content: '✔︎';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 900;
  color: var(--vs-muted);
  opacity: 0.85;
}
/* Classroom board: keep the check from fighting the big icon layout */
.export-root--include-done .vs-export-row.vs-cb-row.done::after{
  top: 10px;
  right: 10px;
  transform: none;
  font-size: 28px;
  opacity: 0.9;
}

/* When include-done is ON, we rely on the normal UI done styling. No overrides needed. */

/* PR-08B: Done toggle button styling */
.done-btn {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.9rem;
  margin-left: 0.25rem;
}
.done-btn:hover {
  background: #F1F5F9;
}

/* PR-09A: Text-to-Speech button styling */
.ttsBtn {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.25rem;
}

/* PR-5: Section header speak button (44px+ tap target) */
.ttsSectionBtn {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  flex: 0 0 44px;
}
.ttsSectionBtn:hover {
  background: #F1F5F9;
}
.ttsSectionBtn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* =====================================================================
   PR-12 & PR-13: Schedule header actions & day menu
   -----------------------------------------------------------------
   These rules style the new action buttons that live beside the
   schedule title as well as the dropdown menu for per-day actions.
===================================================================== */

/* Title row container arranges the schedule title and actions
   horizontally, wrapping on small screens. */
.vs-schedule-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Grouping for schedule actions (Speak, Undo, Templates, Menu) */
.schedule-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  position: relative;
}

/* Icon-only buttons used in the schedule header */
.schedule-actions .btn-icon {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.schedule-actions .btn-icon:hover {
  background: #F1F5F9;
}

.schedule-actions .btn-icon:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Labeled Read Day / Stop button in schedule header */
.schedule-actions .btn-speak{
  padding: 0.35rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1;
  gap: 0.35rem;
  white-space: nowrap;
}
.schedule-actions #header-speak-btn.is-speaking{
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}
.schedule-actions #header-speak-btn.is-speaking:hover{
  background: #FEE2E2;
}

/* Dropdown menu for day actions */
.day-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  box-shadow: var(--vs-shadow);
  padding: 0.25rem 0;
  min-width: 160px;
  z-index: 1000;
}

/* Individual menu items inside the day menu */
.day-menu .day-menu-item {
  width: 100%;
  background: transparent;
  border: none;
  padding: 0.5rem 1rem;
  text-align: left;
  font-size: 0.9rem;
  color: var(--vs-ink);
  cursor: pointer;
}

.day-menu .day-menu-item:hover {
  background: #F1F5F9;
}
.ttsBtn:hover {
  background: #F1F5F9;
}

/* Hide TTS buttons when printing (PR-09A) */
@media print {
  .ttsBtn, .ttsSectionBtn { display: none !important; }
}

/* Discreet mode overrides
   When the root has data-vs-style="discreet", override key colour variables
   to create a more neutral, adult-friendly aesthetic.  Colours lean toward
   muted blues and greys, with softer shadows and higher contrast text. */
:root[data-vs-style="discreet"] {
  --vs-brand: #415A77;        /* a subdued blue-grey for primary actions */
  --vs-accent: #64748B;       /* muted accent used sparingly */
  --vs-ink: #1F2937;          /* dark slate text colour */
  --vs-muted: #4B5563;        /* medium grey for secondary text */
  --vs-line: #CBD5E1;         /* light grey for dividers */
  --vs-bg: #FFFFFF;
  --vs-panel-bg: #F8FAFC;
  --vs-slot-bg: #F7FAFC;
  --vs-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  --vs-brand-hover: #334A63;
  --vs-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Keep the week-strip "Today" ring consistent with discreet theme */
  --vs-today-ring-idle: rgba(65,90,119,.55);
  --vs-today-ring-active: rgba(65,90,119,.32);
}

/* Slot and activity icons in discreet mode use a lighter background and darker text */
:root[data-vs-style="discreet"] .slot-icon,
:root[data-vs-style="discreet"] .activity-icon {
  background: #E2E8F0;
  color: #334155;
}

/* Chips in discreet mode: use a lower contrast fill and border */
:root[data-vs-style="discreet"] .chip {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #1F2937;
}

/* Active chip styling in discreet mode */
:root[data-vs-style="discreet"] .chip[data-active="true"] {
  background: var(--vs-brand);
  color: #FFFFFF;
}

/* When icon style is textOnly, remove icon backgrounds to blend into the card */
:root[data-vs-icon-style="textOnly"] .slot-icon,
:root[data-vs-icon-style="textOnly"] .activity-icon {
  /* Remove background and borders for icons in text-only mode */
  background: transparent;
  border: none;
  /* Hide any glyph text that might be injected by JS by making it fully transparent */
  color: transparent;
}

/* Pictogram (Material Symbols) icon mode: use outlined symbols with no background */
:root[data-vs-icon-style="pictogram"] .slot-icon,
:root[data-vs-icon-style="pictogram"] .activity-icon {
  background: transparent;
  border: none;
  font-family: "Material Symbols Outlined";
  /* Use outline style (fill=0) and medium weight for consistency */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-weight: normal;
  color: var(--vs-ink);
}

/*
 * Ensure the Material Symbols icons render correctly when the
 * `material-symbols-outlined` class is applied by the JS export
 * routines.  Without an explicit font-family declaration, the icons
 * may fail to display in the exported PNG.  We mirror the Google
 * Fonts CSS here and avoid setting font-size to allow the size to
 * be controlled via CSS variables in the export view.
 */
.material-symbols-outlined{
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  /* Default font-variation settings for outlined icons */
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Basic resets */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
html{height:100%; overscroll-behavior-y:none;}
body{min-height:100%; -webkit-overflow-scrolling:touch;}

/* Visually hidden (for accessible labels) */
.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

html{font-size:calc(16px * var(--fontScale));}

body {
  font-family: var(--vs-font);
  color: var(--vs-ink);
  background: var(--vs-panel-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--vs-brand);
  text-decoration: none;
}

/* Header */
.app-header {
  text-align: center;
  padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) 1rem 0.75rem;
}
.app-header h1 {
  font-size: clamp(1.5rem, 6vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.app-header .tagline {
  color: var(--vs-muted);
  font-size: 0.875rem;
}

/* Main container */
.app-main {
  flex: 1;
  padding: 0 1rem calc(2rem + var(--vs-bottomnav-h) + env(safe-area-inset-bottom));
  }

/* Board container & print area */
.board-container {
  max-width: 900px;
  margin: 0 auto 2rem;
}
.print-area {
  background: var(--vs-panel-bg);
  border: 1px dashed var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 1rem;
  overflow: hidden;
}

/* Keep the framed builder canvas in Build, but remove the outer dotted shell
   in List and Focus so those views feel cleaner and less boxed in. */
html.vs-view-list .print-area,
html.vs-view-focus .print-area{
  border-color: transparent;
}

.board-header {
  text-align: center;
  margin-bottom: 0.75rem;
}
.board-header h2 {
  font-size: clamp(1.25rem, 5vw, 1.75rem);
  font-weight: 600;
}

/* PR-3: The app bar already communicates the current day.
   Hide the redundant schedule title text to keep the content dominant. */
#vs-schedule-title{display:none!important;}
.schedule-title-group{display:none!important;}

/* PR-HDR-1: header scaffold containers (no behavior/appearance change yet) */
.vs-header-stack{width:100%;}
.vs-header-row{
  width:100%;
  /* PR-HDR-POLISH-1: single source of truth for header gutters */
  padding-left: var(--vs-header-pad-x);
  padding-right: var(--vs-header-pad-x);
}

@media (min-width: 900px){
  :root{ --vs-header-pad-x: 18px; }
  .vs-header-row{
    max-width: var(--vs-header-maxw);
    margin-left: auto;
    margin-right: auto;
  }
}

/* PR-HDR-2: Row 2 day strip — horizontal scroll + snap + edge fade (CSS-only)
   NOTE: In PR-HDR-1, the day strip mount is: #vs-weekstrip.chips.vs-daystrip
   Keep all styling tightly scoped so other .chips controls aren't affected. */
.vs-header-row--days{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: nowrap; /* keep arrows + scroller + 📅 on one line */
  position:relative; /* for edge fade overlays */
}

/* PR-HDR-POLISH-1: Row 2 vertical rhythm */
#vs-days-row{
  padding-top: 6px;
  padding-bottom: 6px;
  transform-origin: top center;
}

html[data-date-row-state="expanded"] #vs-days-row{
  opacity: 1;
  max-height: 160px;
  overflow: visible;
}

html[data-date-row-state="compact"] #vs-days-row{
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  border: 0;
  pointer-events: none;
}

#vs-days-row{
  transition: max-height 180ms ease, opacity 140ms ease, padding 140ms ease, margin 140ms ease;
}

@media (prefers-reduced-motion: reduce){
  #vs-days-row{ transition: none; }
}

/* Make #vs-weekstrip a true one-line horizontal strip */
#vs-weekstrip.vs-daystrip{
  flex:1 1 auto;
  min-width: 0; /* allow scroller to shrink so trailing controls don't wrap */
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
  padding: 8px 10px;
  align-items:center;
  flex-wrap:nowrap;
  scrollbar-width:thin;
}

#vs-weekstrip.vs-daystrip > .chip{
  scroll-snap-align:center;
  flex:0 0 auto;
  white-space:nowrap;
}

/* Pill visual rules in the strip (selected = filled; non-selected = outline) */
#vs-weekstrip.vs-daystrip .chip{
  border:1px solid rgba(100,116,139,.28);
  background:#fff;
}
#vs-weekstrip.vs-daystrip .chip[data-active="true"]{
  background: rgba(54,171,156,.14);
  border-color: rgba(54,171,156,.50);
}

/* Discreet mode: day strip chips must follow discreet palette.
   NOTE: #vs-weekstrip has its own base rules above (background:#fff + teal active fill),
   so we override them here to keep the current-day highlight consistent with the theme. */
:root[data-vs-style="discreet"] #vs-weekstrip.vs-daystrip .chip{
  background: #F1F5F9;
  border-color: #CBD5E1;
}
:root[data-vs-style="discreet"] #vs-weekstrip.vs-daystrip .chip[data-active="true"]{
  background: var(--vs-brand);
  border-color: rgba(65,90,119,.65);
  color: #FFFFFF;
}

/* Today marker: dot removed (PR-HDR-DOT-REMOVE) */

/* Calendar button stays fixed-size */
.vs-jumpdate-btn{ flex:0 0 auto; }

/* Large-screen arrows are optional; keep them hidden by default so tablets
   don't look "old nav-y". We'll re-enable on wide desktop in PR-HDR-7. */
#vs-days-row .vs-weeknav-btn{ display:none; }

/* Hide arrows on small screens (spec) */
@media (max-width: 900px){
  .vs-weeknav-btn{ display:none; }
}

/* Edge fade (mobile discoverability). Overlay on row container so it doesn't block taps. */
@media (max-width: 720px){
  .vs-header-row--days::before,
  .vs-header-row--days::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:22px;
    pointer-events:none;
    z-index:2;
  }
  .vs-header-row--days::before{
    left:0;
    background: linear-gradient(to right, var(--vs-panel-bg), rgba(248,250,252,0));
  }
  .vs-header-row--days::after{
    right:0;
    background: linear-gradient(to left, var(--vs-panel-bg), rgba(248,250,252,0));
  }
}

/* PR-HDR-4: Row 3 view switcher — segmented control + responsive placement */
#vs-views-row{
  display:flex;
  align-items:center;
  gap:10px;
  /* PR-HDR-POLISH-1: intentional vertical rhythm */
  padding-top: 6px;
  padding-bottom: 10px;
}
#vs-view-switcher-slot{ flex:1 1 auto; }

/* PR-HDR-5: Row 3 actions (Undo + …) live on the right */
#vs-view-actions{
  margin-left:auto; /* guarantee right edge on tablet/desktop */
  flex:0 0 auto;
  display:flex;
  gap:6px;
  align-items:center;
  position:relative; /* anchors the absolute-positioned .day-menu */
}
@media (max-width: 720px){
  /* keep icons compact on phone */
  #vs-view-actions .btn-icon{ width:36px; height:36px; }
}

.vs-view-switcher--segmented{
  /*
    Mobile polish: iOS can render sub‑pixel seams in true “segmented”
    controls (outer border + inner dividers) where the active fill
    appears to not perfectly match the chip shape.

    Instead of relying on inner dividers, we render the switcher as
    three equal-width pill tabs. This keeps the highlight perfectly
    aligned with each tab across devices (phone/tablet/desktop).
  */
  display:inline-flex;
  gap:8px;
  align-items:stretch;
  background: transparent;
  border: 0;
  border-radius: 999px;
  overflow: visible;
  padding: 0;
  width: min(520px, 100%);
}
.vs-view-switcher--segmented .vs-view-chip{
  /* Equal tabs (Build/List/Focus) at all sizes */
  flex: 1 1 0;
  min-width: 0;
  text-align: center;

  /* Make each tab its own pill so the active fill matches exactly */
  margin:0;
  border: 1px solid rgba(100,116,139,.28);
  border-radius: 999px;
  background: #fff;
  padding:10px 12px;
  line-height: 1.1;
}
.vs-view-switcher--segmented .vs-view-chip[data-active="true"]{
  /* Default active state (non‑discreet). Discreet mode overrides via
     :root[data-vs-style="discreet"] .chip[data-active="true"]. */
  background: rgba(54,171,156,.14);
  border-color: rgba(54,171,156,.50);
  color: var(--vs-ink);
}

/* Discreet mode: keep active border matched to the discreet brand */
:root[data-vs-style="discreet"] .vs-view-switcher--segmented .vs-view-chip[data-active="true"]{
  border-color: rgba(65,90,119,.65);
}

/* Row spacing + alignment across breakpoints */
@media (max-width: 720px){
  #vs-views-row{ padding: 0 10px 6px; }
}

@media (min-width: 721px){
  #vs-views-row{ padding: 0 10px 6px; justify-content:flex-start; }
}

/* PR-HDR-FINAL-4: Phone landscape — prevent oversized segmented control */
@media (max-width: 900px) and (orientation: landscape){
  #vs-view-switcher-slot{
    display:flex;
    justify-content:center;
  }
  #vs-view-switcher-slot .vs-view-switcher{
    width: min(520px, 100%);
  }
}

/* PR-HDR-7: Large screen "settle" polish (CSS-only, optional)
   Goal: On desktop, the day strip should feel designed (centered + bounded)
   and arrows may appear as an affordance. */
@media (min-width: 1200px){
  .vs-header-row--days{
    justify-content:center;
  }

  /* Bound the scroller so it doesn't look like leftover mobile UI */
  #vs-weekstrip.vs-daystrip{
    flex: 1 1 auto;
    max-width: 880px;
  }

  /* Optional: show week arrows only on wide screens */
  #vs-days-row .vs-weeknav-btn{ display:flex; }
}

/* Week strip (PR-3)
   Compact: one tight week row + small day pills. */
.vs-weekstrip-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin:0 0 0.45rem}
.vs-weekstrip{justify-content:flex-start;max-width:100%;padding-bottom:0;scroll-snap-type:x mandatory}
.vs-weekstrip .chip{padding:7px 9px;line-height:1.05;display:flex;flex-direction:column;align-items:center;min-width:68px;scroll-snap-align:start}
.vs-weekstrip .wk-dow{font-size:0.78rem;font-weight:700;color:var(--vs-ink)}
.vs-weekstrip .wk-date{font-size:0.72rem;color:var(--vs-muted);margin-top:2px}

/* PR-NAV4: Subtle "Today" anchor (modern, clean)
   - Use a thin inset ring so it works across styles.
   - Keep the active chip styling dominant. */
.vs-weekstrip .chip[data-today="true"][data-active="false"]{
  box-shadow: inset 0 0 0 1px var(--vs-today-ring-idle);
}
.vs-weekstrip .chip[data-today="true"][data-active="true"]{
  box-shadow: inset 0 0 0 1px var(--vs-today-ring-active);
}
@media (min-width: 720px){
  .vs-weekstrip-wrap{margin-bottom:0.75rem}
  .vs-weekstrip{justify-content:center}
}

/* FINAL: ensure Row 2 never gets legacy column layout */
#vs-days-row.vs-header-row--days{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  flex-wrap: nowrap;
  margin:0;              /* remove legacy bottom margin */
  width:100%;
}

/* Week switcher (stacked above day pills) */
.vs-weeknav{
  width:100%;
  max-width: 680px;
  display:grid;
  grid-template-columns: 38px 1fr 38px;
  align-items:center;
  gap:8px;
  padding: 0 4px;
}

.vs-weekrange{
  text-align:center;
  font-weight:700;
  font-size:0.9rem;
  color:var(--vs-ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.vs-weeknav-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,0.92);
  color: var(--vs-brand);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}

.vs-weeknav-btn span{font-size:1.15rem;line-height:1;}

.vs-weeknav-btn:hover,
.vs-weeknav-btn:focus{
  background: rgba(54,171,156,0.10);
  outline: none;
}

.board-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 600px) {
  .board-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Column card */
.column {
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
}

.column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.column-header h3 {
  flex: 1;
  text-align: center;
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--vs-brand);
}

/* Slot list */
.slots {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

/* Slot card */
.slot {
  display: flex;
  align-items: center;
  padding: 0.5rem;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  background: var(--vs-slot-bg);
  min-height: 4.25rem;
}

/* PR-REORDER-HANDLE-1 (Part 1): micro drag handle */
.slot .drag-handle{
  flex: 0 0 14px;
  width: 14px;
  align-self: stretch;
  padding: 0;
  margin: 0 6px 0 0;
  border: 0;
  background: transparent;
  cursor: grab;
  opacity: .55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* PR-REORDER-HANDLE-1 (Part 3): true drag surface on touch */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.slot .drag-handle::before{
  content: '⋮⋮';
  font-size: 12px;
  line-height: 1;
  letter-spacing: -1px;
}
.slot.vs-dragging .drag-handle{ cursor: grabbing; opacity: .85; }

/* PR#3: Active timed slot targeting */
.slot.vs-active-slot{
  border-color: var(--vs-brand);
  background: #F0FBF8;
  box-shadow: 0 0 0 3px rgba(54, 171, 156, 0.18);
}

.slot-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--vs-radius-md);
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--vs-ink);
  flex-shrink: 0;
  margin-right: 0.5rem;
  overflow: hidden;
}
.slot-label {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--vs-ink);
  word-break: break-word;
}

.slot-label-text{
  min-width: 0;
}

.slot-time{
  align-self: flex-start;
  display: inline-flex;
  position: relative;
  overflow: hidden;
  padding: 4px 10px;
  border-radius: 999px;
  background: #E2E8F0;
  color: var(--vs-ink);
  font-weight: 800;
  font-size: 0.75rem;
  line-height: 1;
  border: none;
  cursor: pointer;
}

/* Timed-mode time pill: we layer a real <input type="time"> over the pill so iOS opens reliably */
.slot-time .slot-time-text{
  pointer-events: none;
}
.slot-time .slot-time-input{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
}

.slot-time.is-unset{
  background: rgba(226,232,240,.55);
  border: 1px dashed rgba(100,116,139,.6);
}

.slot-time:focus-visible{
  outline: 2px solid rgba(54,171,156,.45);
  outline-offset: 2px;
}

.slot.empty .slot-time{
  opacity: 0.7;
}
.slot.empty .slot-label {
  color: var(--vs-muted);
  font-style: italic;
}
.clear-btn {
  background: transparent;
  border: none;
  color: var(--vs-muted);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.25rem;
}
.clear-btn:hover {
  background: #F1F5F9;
}

/* ===== Drag & drop reorder (schedule slots) ===== */
.slot.vs-draggable{
  cursor: grab;
  /* PR-REORDER-HANDLE-1 (Part 3): keep rows scroll-friendly by default */
  touch-action: pan-y;
}
.slot.vs-draggable:active{
  cursor: grabbing;
}
.slot.vs-dragging{
  opacity: 0.25;
}
.slot.vs-drop-target{
  outline: 2px solid var(--vs-brand);
  outline-offset: 2px;
}
body.vs-reordering{
  -webkit-user-select: none;
  user-select: none;
}
/* PR-REORDER-HANDLE-1 (Part 3): strengthen no-selection while dragging (iOS) */
body.vs-reordering *{
  -webkit-user-select: none;
  user-select: none;
}
.vs-drag-ghost{
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483646;
  pointer-events: none;
  will-change: transform;
  width: min(360px, calc(100vw - 28px));
  transform: translate3d(-9999px,-9999px,0);
  box-shadow: var(--vs-shadow);
  border-radius: var(--vs-radius-md);
}
@media (prefers-reduced-motion: reduce){
  .vs-drag-ghost{ transition: none !important; }
}
@media print{
  /* PR9.6a: Page size/margins are set dynamically via JS in <style id="vs-print-page-style">.
     Avoid a single global @page rule here because it can make iOS Safari disagree
     about the printable box and add a blank page. */
  .vs-drag-ghost{ display:none !important; }
  /* PR9.6i — Sentinel lives at the end of export; must be layout-neutral in print */
  .vs-print-sentinel{ height:0 !important; margin:0 !important; padding:0 !important; }
}

/* Controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
}
.controls p {
  font-size: 0.875rem;
  color: var(--vs-muted);
}
.controls span {
  color: var(--vs-brand);
  font-weight: 600;
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}
.btn {
  max-width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  white-space: normal;
  line-height: 1.25;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn.primary {
  background: var(--vs-brand);
  color: #FFFFFF;
  border-color: var(--vs-brand);
}
.btn.primary:hover {
  background: var(--vs-brand-hover, #2e9283);
}

.btn.primary:active {
  background: var(--vs-brand-hover, #2e9283);
  border-color: var(--vs-brand-hover, #2e9283);
}

.btn.primary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--vs-brand) 28%, white);
  outline-offset: 2px;
}
.btn.ghost {
  background: #FFFFFF;
  color: var(--vs-muted);
  border-color: var(--vs-line);
}
.btn.ghost:hover {
  background: #F1F5F9;
}
.btn.danger {
  background: #FEF2F2;
  color: #B91C1C;
  border-color: #FECACA;
}
.btn.danger:hover {
  background: #FEE2E2;
}

.btn.link{
  background: transparent;
  border-color: transparent;
  color: var(--vs-brand);
  padding: 0.35rem 0.25rem;
  font-weight: 800;
  font-size: 0.8125rem;
}
.btn.link:hover{ text-decoration: underline; }

.vs-restore-alt{ margin-top: 10px; text-align: center; }

/* Activity library */
.activity-library {
  max-width: 1040px;
  margin: 0 auto;
}
.activity-library h2 {
  font-size: 1.25rem;
  font-weight: 600;
  /* Give the page tabs a little breathing room above the Library title */
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.activity-group {
  margin-bottom: 1.5rem;
}
.activity-group-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--vs-brand);
}
.activity-row {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
}
.activity {
  min-width: 110px;
  max-width: 150px;
  background: #FFFFFF;
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-md);
  padding: 0.5rem;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.activity:hover {
  background: #F8FAFC;
  transform: translateY(-2px);
}
.activity-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.activity-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.activity-label {
  font-weight: 600;
  color: var(--vs-ink);
}
.activity-tag {
  font-size: 0.625rem;
  color: var(--vs-muted);
}

/* Custom tiles (My Tiles) */
.custom-tile-create{
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px dashed var(--vs-line);
  border-radius: 14px;
  background: linear-gradient(0deg, rgba(240,251,248,.85), rgba(255,255,255,.95));
}

/* Collapsible custom tile creator */
.custom-tile-details{
  margin: 0;
}
.custom-tile-summary{
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.custom-tile-summary::-webkit-details-marker{
  display: none;
}
.custom-tile-summary-text{
  display: grid;
  gap: 2px;
  min-width: 0;
}
.custom-tile-summary-title{
  font-weight: 800;
  color: var(--vs-ink);
  font-size: 0.95rem;
  line-height: 1.2;
}
.custom-tile-summary-sub{
  color: var(--vs-muted);
  font-size: 0.83rem;
  line-height: 1.35;
}
.custom-tile-summary-chev{
  color: var(--vs-muted);
  font-size: 0.95rem;
  line-height: 1;
  transform-origin: center;
  transition: transform .18s ease;
  padding-top: 2px;
  flex: 0 0 auto;
}
.custom-tile-details[open] .custom-tile-summary-chev{
  transform: rotate(180deg);
}
.custom-tile-body{
  padding-top: 10px;
}
.custom-tile-head h3{
  margin: 0 0 4px;
  font-size: 0.95rem;
}
.custom-tile-head p{
  margin: 0 0 10px;
  font-size: 0.85rem;
  color: var(--vs-muted);
  line-height: 1.4;
}
.custom-tile-form{
  display: grid;
  grid-template-columns: 1.2fr 0.65fr auto;
  gap: 10px;
  align-items: end;
}
.custom-tile-form label{
  display: grid;
  gap: 6px;
}
.custom-tile-form label span{
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vs-muted);
  font-weight: 700;
}
.custom-tile-form input{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--vs-line);
  border-radius: 12px;
  font-size: 0.95rem;
  background: #fff;
}
.custom-tile-add{
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid #0f766e;
  background: #0f766e;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.custom-tile-add:focus{
  outline: 3px solid rgba(15,118,110,.25);
  outline-offset: 2px;
}
.custom-tile-note{
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--vs-muted);
}

/* Delete chip for My Tiles */
.activity-item{ position: relative; }
.activity-del{
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,.95);
  color: var(--vs-muted);
  font-size: 0.875rem;
  line-height: 1;
  opacity: .85;
}
.activity-item:hover .activity-del{ opacity: 1; }

@media (max-width: 720px){
  .custom-tile-form{ grid-template-columns: 1fr 0.7fr; }
  .custom-tile-add{ grid-column: 1 / -1; justify-self: start; }
}

/* Print-specific tweaks */
@media print {
  /* Remove spacing on body for print */
  body {
    background: #FFFFFF;
    padding: 0;
  }
  .app-header,
  .controls,
  .activity-library,
  .sg-vs-gate {
    display: none !important;
  }
  .vs-weekstrip-wrap{ display:none !important; }
  .board-container {
    max-width: none;
    margin: 0;
  }
  .print-area {
    border: none;
    padding: 0;
  }
  .board-header h2 {
    font-size: 1.25rem;
  }
  /* Make columns equal width and fit horizontally */
  .board-columns {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }
  .column {
    border: 1px solid var(--vs-line);
    padding: 0.5rem;
  }
  .column-header {
    margin-bottom: 0.25rem;
  }
  .column-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
  }
  .slots {
    gap: 0.25rem;
  }
  .slot {
    min-height: 3.75rem;
    padding: 0.25rem 0.5rem;
  }
  .slot-icon {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    margin-right: 0.25rem;
  }
  .slot-label {
    font-size: 0.75rem;
    gap: 4px;
  }
  .clear-btn{ display:none !important; }
  .slot-time{ font-size: 0.65rem; padding: 3px 8px; }
  .slot-label-text{ word-break: normal; overflow-wrap: anywhere; }
}
/* ===== Install strip (in-app) ===== */
.vs-install-strip{
  /*
   * Kept inside .app-main so it naturally sits below the fixed app bar
   * (no extra offset math, which can look jumpy on iOS Safari as the
   * browser chrome collapses/expands).
   */
  margin: 10px auto 14px;
  max-width: 980px;
  border-radius: 14px;
  border: 1px dashed rgba(54,171,156,.45);
  background: linear-gradient(0deg, rgba(240,251,248,.85), rgba(255,255,255,.92));
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* If a script scrolls directly to the <details>, keep it below the fixed header too. */
.vs-install-details{
  scroll-margin-top: calc(var(--vs-appbar-height) + var(--vs-safe-top) + 14px);
}
.vs-install-left{
  min-width: 220px;
  flex: 1 1 360px;
  font-size: 0.75rem;
  color: #64748B;
  line-height: 1.45;
}
.vs-install-title{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  text-align:left;
  font:800 0.78rem/1.2 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0F172A;
}
.vs-install-caret{ display:inline-block; transform-origin:50% 50%; transition:transform .16s ease; }
.vs-install-sub{ display:block; margin-top:2px; }
.vs-install-title:focus-visible{ outline:2px solid rgba(54,171,156,.45); outline-offset:3px; border-radius:10px; }
.vs-install-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
}
.vs-install-btn{
  border-radius: 999px;
  border: 1px solid var(--vs-brand);
  background: var(--vs-brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.vs-install-btn[disabled]{ opacity:.55; cursor:not-allowed; }
.vs-install-link{
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #0F172A;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.vs-install-x{
  border-radius: 999px;
  border: 1px solid #E5E7EB;
  background: #fff;
  color: #0F172A;
  font-size: 0.75rem;
  font-weight: 900;
  padding: 7px 10px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}
.vs-install-details{ width:100%; margin-top:4px; }
.vs-install-details > summary{
  cursor:pointer;
  font-size:0.75rem;
  font-weight:700;
  color:#0F172A;
  list-style:none;
}
.vs-install-details > summary::-webkit-details-marker{ display:none; }
.vs-install-steps{
  margin-top:8px;
  border-top:1px solid rgba(54,171,156,.28);
  padding-top:8px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:10px;
  font-size:0.75rem;
  color:#64748B;
}
.vs-install-steps h3{
  margin:0 0 4px;
  font-size:0.6875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#0F172A;
}
.vs-install-steps ol{ margin:0; padding-left:18px; }
.vs-hidden{ display:none !important; }
.vs-installed-note{ display:block; margin-top:4px; }



/* ===== Install steps sheet (More professional than inline steps) ===== */
.vs-install-sheet{display:block}
.vs-install-sheet-grid{display:grid;gap:12px;margin-top:10px}
@media (min-width: 720px){
  .vs-install-sheet-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width: 980px){
  .vs-install-sheet-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
.vs-install-card{
  border:1px solid var(--vs-line);
  border-radius:14px;
  background: rgba(255,255,255,.9);
  padding: 12px 12px 10px;
}
.vs-install-ol{margin:0;padding-left:18px;color:var(--vs-muted);font-size:0.9rem;line-height:1.55}
.vs-install-sheet-foot{margin-top:12px}
.vs-install-sheet-foot .vs-sheet-item{width:100%}
/* Install strip UX: collapse + dismiss */
html.vs-install-dismissed .vs-install-strip{ display:none !important; }
/* Default: keep the install strip hidden unless explicitly opened (More → Install app). */
html.vs-install-hidden .vs-install-strip{ display:none !important; }
html.vs-install-collapsed .vs-install-caret{ transform:rotate(-90deg); }
html.vs-install-collapsed .vs-install-sub,
html.vs-install-collapsed .vs-install-details,
html.vs-install-collapsed .vs-installed-note{
  display:none !important;
}
html.vs-install-collapsed .vs-install-strip{ padding: 8px 10px; margin-bottom: 10px; }

/* ============================================================
   SG PATCH: Hide Install strip when installed PWA + print
   - .vs-install-strip appears only on web onboarding
   - In standalone/fullscreen/minimal-ui OR html.vs-standalone: hide
   - In print OR html.vs-print: hide (iOS print preview helper)
============================================================ */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui){
  .vs-install-strip{ display:none !important; }
}
html.vs-standalone .vs-install-strip{ display:none !important; }
html.vs-standalone .vs-only-browser{ display:none !important; }


@media print{
  .vs-install-strip{ display:none !important; visibility:hidden !important; }
}
html.vs-print .vs-install-strip{ display:none !important; visibility:hidden !important; }

/* ============================================================
   Library Quick Add + Filters (v1.3)
============================================================ */
.lib-top{display:grid;gap:14px;margin:10px 0 16px}
@media (min-width:900px){
  .lib-top{grid-template-columns:1fr 1.2fr;align-items:start}
}
@media (min-width:900px){
  /* If legacy Quick Add is hidden, let filters/search span full width (prevents empty right column). */
  #activity-library .quick-add[hidden] + .lib-controls{grid-column:1 / -1}
}

.quick-add{display:grid;gap:12px}
.qa-row{background:#fff;border:1px solid var(--vs-line);border-radius:var(--vs-radius-lg);padding:10px 10px 12px;box-shadow:0 6px 18px rgba(17,17,17,.06)}
.qa-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.qa-title{font-weight:700;color:var(--vs-ink);font-size:0.9rem}
.qa-clear{border:1px solid var(--vs-line);background:#fff;border-radius:999px;padding:6px 10px;font-size:0.78rem;font-weight:700;color:var(--vs-muted);cursor:pointer}
.qa-clear:hover{border-color:#cbd5e1}
.qa-items{display:flex;gap:8px;overflow:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.qa-items:empty::after{content:"Nothing yet";color:var(--vs-muted);font-size:0.85rem;padding:6px 2px}
.qa-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--vs-line);background:#fff;
  border-radius:12px;padding:8px 10px;cursor:pointer;min-width:160px;max-width:220px}
.qa-btn:hover{background:#F8FAFC}
.qa-ico{width:24px;height:24px;border-radius:999px;background:#E5E7EB;display:flex;align-items:center;justify-content:center;font-size:1rem}
.qa-lbl{font-size:0.85rem;font-weight:700;color:var(--vs-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lib-controls{background:#fff;border:1px solid var(--vs-line);border-radius:var(--vs-radius-lg);padding:12px;box-shadow:0 6px 18px rgba(17,17,17,.06)}
.lib-search input{width:100%;border:1px solid var(--vs-line);border-radius:999px;padding:10px 12px;font-size:0.95rem;outline:none}
.lib-search input:focus{border-color:rgba(54,171,156,.7);box-shadow:0 0 0 3px rgba(54,171,156,.12)}

/* ============================================================
   PR-LIB-5 — Sticky compact header behavior (mobile polish)
   Keeps Search / Add-to / Filters visible while scrolling results.
============================================================ */
@media (max-width: 899px){
  #activity-library .lib-controls{
    position: sticky;
    top: calc(var(--vs-appbar-height) + var(--vs-safe-top));
    z-index: 50; /* below appbar (100), above results */
    /* When stuck, avoid transparent overlap and keep it readable */
    background: #fff;
    /* Match iOS notch + prevent “cut off” feeling */
    padding-top: 12px;
  }
  /* Give results a touch of breathing room under the sticky header */
  #activity-library #activity-groups{ padding-top: 8px; }
}
.filter-stack{display:grid;gap:8px;margin-top:8px}

/* =============================
   PR-LIB-0: Results-first Library actions
   ============================= */
.lib-actions{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.lib-actions .btn{padding:8px 10px}
.lib-actions .btn.ghost{background:transparent}

.lib-active-filters{display:flex;gap:8px;align-items:center;overflow:auto;padding:6px 2px;margin-top:6px}
.lib-active-filters[hidden]{display:none !important}
.lib-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--vs-line);border-radius:999px;padding:6px 10px;font-weight:700;background:#fff;white-space:nowrap}
.lib-pill button{appearance:none;border:0;background:transparent;font:inherit;line-height:1;cursor:pointer;padding:2px 4px;border-radius:999px}
.lib-pill button:focus{outline:2px solid rgba(54,171,156,.35);outline-offset:2px}

/* Library sheet sections */
.lib-sheet{display:grid;gap:14px}
.lib-sheet-section{display:grid;gap:8px}
.lib-sheet-label{font-weight:800;color:var(--vs-ink);font-size:13px}
.lib-sheet-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:4px}
.lib-sheet-actions .btn{min-width:110px}
.filter-row{display:grid;gap:6px;min-width:0}
.filter-row > *{min-width:0}
.filter-label{font-size:0.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--vs-muted);font-weight:800}
.chips{display:flex;gap:8px;overflow:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chip{flex:0 0 auto;border:1px solid var(--vs-line);background:#fff;border-radius:999px;padding:7px 11px;
  font-size:0.82rem;font-weight:700;color:var(--vs-ink);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.chip[data-active="true"]{background:rgba(54,171,156,.12);border-color:rgba(54,171,156,.5);color:var(--vs-ink)}
.chip:hover{border-color:#cbd5e1}

/* ============================================================
   PR-LIB-6 — Desktop enhancement: optional sidebar
   On desktop (≥900px), show filters as a left sidebar instead of a sheet.
============================================================ */
.lib-layout{display:block}
.lib-sidebar{display:none}
.lib-results{min-width:0}

@media (min-width:900px){
  .lib-layout{display:grid;grid-template-columns:280px 1fr;gap:14px;align-items:start}
  .lib-sidebar{display:block}

  /* Sidebar card styling (match library header cards) */
  .lib-sidebar-card{background:#fff;border:1px solid var(--vs-line);border-radius:var(--vs-radius-lg);padding:12px;box-shadow:0 6px 18px rgba(17,17,17,.06)}
  .lib-sidebar-title{font-weight:900;color:var(--vs-ink);font-size:0.95rem}

  /* Make chip rows wrap on desktop so filters are scannable */
  .lib-sidebar .chips{flex-wrap:wrap;overflow:visible;padding-bottom:0}

  /* Keep the sidebar visible while scrolling results */
  .lib-sidebar{position:sticky;top:calc(var(--vs-appbar-height) + var(--vs-safe-top) + 10px);z-index:20}
  .lib-results{min-height:1px}

  /* Prefer sidebar over sheet trigger on desktop */
  #activity-library #lib-filters-btn{display:none}
}

/*
 * Active Profile Chip and Title Group
 *
 * The schedule title row now includes a persistent profile indicator.  The
 * `.schedule-title-group` wraps the title and chip so they align neatly
 * together.  The `.vs-profile-chip` reuses the base chip styling but
 * tweaks the layout for an icon, name and caret.  When there is only one
 * profile the chip is disabled via `aria-disabled` and rendered with
 * reduced opacity.
 */

.schedule-title-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vs-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  min-width: 0;
  max-width: min(42vw, 180px);
  margin-left: auto;
}

.vs-profile-chip[aria-disabled="true"] {
  opacity: 0.55;
  pointer-events: none;
}

.vs-profile-chip .vs-profile-name {
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
 * Unified navigation styling
 *
 * These overrides make the Visual Schedule page tabs mirror the look and behaviour
 * of the Sensory Diet app navigation. Tabs are distributed evenly across the
 * available width, include a subtle border around each button, and use the
 * brand colour to denote the active tab. The selectors are scoped to
 * .vs-page-tabs so that other chip controls (such as filter chips) retain
 * their existing styling.
 */

/* Size each navigation tab evenly and center content */
.vs-page-tabs .vs-page-tab {
  flex: 1 1 0;
  justify-content: center;
  border: 1px solid var(--vs-line);
  background: var(--vs-slot-bg);
  border-radius: var(--vs-radius-md);
  padding: 6px 10px;
}

/* Highlight the active tab with a solid brand colour and white text */
.vs-page-tabs .vs-page-tab[data-active="true"],
.vs-page-tabs .vs-page-tab[aria-selected="true"] {
  background: var(--vs-brand);
  color: #FFFFFF;
  border-color: var(--vs-brand);
}

/* Ensure inactive tabs respond to hover with a faint brand tint */
.vs-page-tabs .vs-page-tab:not([data-active="true"]):hover,
.vs-page-tabs .vs-page-tab:not([aria-selected="true"]):hover {
  background: rgba(54, 171, 156, 0.12);
}


/* ===== PR-5: Bottom Navigation (Mobile primary nav) ===== */
.vs-bottom-nav{
  position:fixed;
  left:0; right:0; bottom:0;
  height: calc(var(--vs-bottomnav-h) + var(--vs-safe-bottom));
  padding-bottom: var(--vs-safe-bottom);
  padding-left: var(--vs-safe-left);
  padding-right: var(--vs-safe-right);
  background:rgba(255,255,255,.98);
  backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--vs-line);
  display:flex;
  align-items:stretch;
  z-index:1000;
}
.vs-bottom-nav-btn{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  /* Make tabs a touch more obvious on all screens (without getting huge).
     Uses responsive clamps so small phones don't feel cramped, while
     larger phones/tablets get slightly bigger labels + icons. */
  gap:clamp(4px, 1.1vw, 6px);
  padding:clamp(8px, 1.6vw, 10px) 6px;
  background:transparent;
  border:0;
  color:var(--vs-muted);
  font:600 clamp(12px, 2.8vw, 13px)/1.1 var(--vs-font);
  -webkit-tap-highlight-color: transparent;
}
.vs-bottom-nav-btn .vs-tab-ic{
  font-size:clamp(20px, 5.0vw, 22px);
  line-height:1;
}
.vs-bottom-nav-btn[aria-selected="true"],
.vs-bottom-nav-btn[data-active="true"]{
  color:var(--vs-brand);
}
.vs-bottom-nav-btn[aria-selected="true"]::before,
.vs-bottom-nav-btn[data-active="true"]::before{
  content:"";
  position:absolute;
  top:0;
  width:36px;
  height:3px;
  border-radius:999px;
  background:var(--vs-brand);
}
.vs-bottom-nav-btn{
  position:relative;
}

/* Never show bottom nav on print */
@media print{
  .vs-bottom-nav{display:none!important}
}

/* ===== PR-6: Desktop Adaptive Navigation (≥1100px) ===== */
.vs-sidenav{display:none}
.vs-sidenav-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:transparent;
  border:0;
  border-radius:12px;
  color:var(--vs-ink);
  font:700 14px/1.1 var(--vs-font);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.vs-sidenav-ic{font-size:18px;line-height:1}
.vs-sidenav-btn:hover{background:rgba(54,171,156,.10)}

/* Active state follows the existing body[data-vs-page] set by app.js */
body[data-vs-page="schedule"] .vs-sidenav-btn[data-vs-sidenav="schedule"],
body[data-vs-page="library"] .vs-sidenav-btn[data-vs-sidenav="library"],
body[data-vs-page="more"] .vs-sidenav-btn[data-vs-sidenav="more"]{
  background:rgba(54,171,156,.14);
  color:var(--vs-brand);
}

@media (min-width:1100px){
  /* Sidebar replaces bottom nav */
  .vs-bottom-nav{display:none!important}

  .vs-sidenav{
    display:flex;
    flex-direction:column;
    gap:6px;
    position:fixed;
    top:calc(var(--vs-appbar-height) + env(safe-area-inset-top));
    left:0;
    bottom:0;
    width:var(--vs-sidebar-width);
    padding:12px 10px;
    background:var(--vs-panel-bg);
    border-right:1px solid var(--vs-line);
    z-index:90;
    box-sizing:border-box;
  }

  /* Keep the top bar aligned with the content area (not under the sidebar) */
  .vs-appbar{left:var(--vs-sidebar-width)}

  /* Align fixed install strip with content on desktop (when shown) */
  .vs-install-strip{margin-left:var(--vs-sidebar-width)}

  /* Content column: keep readable widths and avoid ultra-wide stretch */
  .app-main{
    padding-left:calc(var(--vs-sidebar-width) + 18px);
    padding-right:18px;
    padding-bottom:2rem;
  }
  .board-container{max-width:1160px}
  .activity-library{max-width:1160px}
  #more-panel{max-width:1160px;margin:0 auto}
}

/* If any legacy page bar exists (older cached HTML), hide it */
.vs-pagebar{display:none!important}

/* ===== Sheets: Export preset segmented control ===== */
.chips.chips-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px;overflow:visible;padding-bottom:0}
.chips.chips-seg .chip{width:100%;padding:10px 12px;font-size:0.9rem;font-weight:850}
.vs-sheet-controls{display:block;margin:10px 0 12px}
.vs-sheet-controls .vs-sheet-h4{margin:0 0 8px}
.vs-sheet-controls 
.vs-timer-custom{
  margin-top: 0.25rem;
}
.vs-timer-custom .vs-select{
  width: 100%;
}

.vs-sheet-note{margin:8px 0 0}

/* First–Then builder preview */
.vs-ft-preview-canvas{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--vs-line);
}

/* ===== Activity Library v1.4 — Chip-tabs + Grid (default) ===== */
.chips.chips-tabs{position:relative}
@media (min-width:760px){
  .chips.chips-tabs{flex-wrap:wrap;overflow:visible;padding-bottom:0}
}
@media (min-width:980px){
  .chips.chips-tabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));overflow:visible}
  .chips.chips-tabs .chip{width:100%}
}


/* ===== PR-A: Library view pills (All / Recents / Favorites / My Tiles) ===== */
#lib-view-pills-row{margin-top:2px}
.chips.chips-libview{position:relative}
.chips.chips-libview .chip{padding:6px 10px;font-size:0.82rem}
.lib-view-pill-note{margin-top:-2px;font-weight:600;font-size:12px;color:var(--vs-muted)}
@media (min-width:760px){
  .chips.chips-libview{flex-wrap:wrap;overflow:visible;padding-bottom:0}
}
@media (min-width:980px){
  .chips.chips-libview{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));overflow:visible}
  .chips.chips-libview .chip{width:100%}
}

/*
  PR-8 — Library Layout Scaling
  Mobile: 2 columns
  Tablet: 3 columns
  Desktop: 4–5 columns
  (List mode supported via .activity-grid.is-list)
*/
.activity-grid{
  display:grid;
  gap:10px;
  margin:10px 0 18px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 680px){
  .activity-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 980px){
  .activity-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px){
  .activity-grid{ grid-template-columns: repeat(5, 1fr); }
}

/* Activity cards in grid */
.activity{
  position:relative;
  width:100%;
  max-width:none;
  min-width:0;
  padding:10px 46px 10px 10px;
  align-items:flex-start;
}
.activity-icon{
  width:34px;
  height:34px;
  font-size:1.15rem;
  flex:0 0 auto;
  margin-top:1px;
}
.activity-main{min-width:0}
.activity-label{white-space:normal}
.activity-fav{position:absolute;top:8px;right:8px;margin-left:0}
.activity-del{position:absolute;top:8px;right:44px}
.activity:hover .activity-del{opacity:1}

/* Grouped (accordion) view under All */
.lib-acc{
  border:1px solid var(--vs-line);
  border-radius:16px;
  background:#fff;
  box-shadow:0 6px 18px rgba(17,17,17,.06);
  overflow:hidden;
  margin:12px 0;
}
.lib-acc summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  font-weight:800;
  color:var(--vs-ink);
}
.lib-acc summary::-webkit-details-marker{display:none}
.lib-acc[open] summary{
  border-bottom:1px solid var(--vs-line);
  background:linear-gradient(0deg, rgba(54,171,156,.10), rgba(255,255,255,1));
}
.lib-acc .acc-meta{
  flex:0 0 auto;
  font-size:0.78rem;
  color:var(--vs-muted);
  font-weight:900;
  border:1px solid var(--vs-line);
  border-radius:999px;
  padding:4px 8px;
  background:#fff;
}
.lib-acc .activity-grid{margin:0;padding:12px}

.lib-empty{
  border:1px dashed var(--vs-line);
  border-radius:16px;
  padding:14px;
  background:linear-gradient(0deg, rgba(54,171,156,.08), rgba(255,255,255,1));
  color:var(--vs-muted);
  text-align:center;
}

.filter-actions{display:flex;justify-content:flex-end;margin-top:2px}
.btn.small{padding:0.35rem 0.7rem;font-size:0.82rem}

/* ===========================================================
   PR-6.1B — Library “More filters” <details> styling (CSS only)
   - Summary row matches chip UI (pill button row + chevron + badge)
   - Body panel spacing consistent with .filter-row
   - iOS-safe: no fixed heights; prevent horizontal overflow
   =========================================================== */

/* Badge uses .chip base styles; tighten to match count pill */

/* Chevron */

/* Panel */

/* ===========================================================
   PR-6.1B — Add-target hint (compact inline callout)
   =========================================================== */

.lib-target-hint{
  display:inline-block;
  max-width:100%;
  margin:8px 0 2px;
  padding:6px 10px;
  border:1px solid rgba(54,171,156,.35);
  background:rgba(54,171,156,.08);
  border-radius:14px;
  color:var(--vs-ink);
  font-size:0.82rem;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}

/* Activity card affordances */
.activity-fav{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;border:1px solid var(--vs-line);background:#fff;color:#0F172A;font-size:0.95rem;line-height:1;cursor:pointer}
.activity-fav[data-on="true"]{background:rgba(245,138,72,.12);border-color:rgba(245,138,72,.55)}
.activity-fav:hover{border-color:#cbd5e1}

/* ===========================
   Quick Add (Recents/Favorites) — tidy, no page-stretch
   v1.4.2 patch
   Why: CSS grid items default to min-width:auto which can overflow when chip rows grow.
=========================== */
#activity-library .lib-top > *{min-width:0}
#activity-library .quick-add,
#activity-library .qa-row,
#activity-library .qa-items{min-width:0;max-width:100%}
#activity-library .lib-controls,
#activity-library .filter-row,
#activity-library .chips{min-width:0;max-width:100%}

/* PR-2: Library-only insertion target control */
.lib-insert{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.lib-insert-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lib-insert-k{font-size:0.9rem;color:var(--vs-muted);font-weight:700}
.lib-insert-chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;font-size:0.9rem}
.lib-insert-chev{opacity:.7}
.lib-insert-note{font-size:0.82rem;color:var(--vs-muted)}

/* Keep chip strips contained on small screens */
#activity-library .qa-items{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}

/* Chips should size to content (labels already ellipsis) */
#activity-library .qa-btn{min-width:0 !important;width:auto;max-width:260px}
#activity-library .qa-lbl{max-width:18ch}

/* Tablet/desktop: wrap instead of long single-row scroll */
@media (min-width: 900px){
  #activity-library .qa-items{flex-wrap:wrap;overflow-x:visible}
  #activity-library .qa-lbl{max-width:26ch}
}

/* ===== Page Tabs (Schedule / Library) ===== */
.vs-pagebar{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(240,251,248,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vs-line);
}
.vs-pagebar-inner{
  max-width: 1040px;
  margin: 0 auto;
  padding: 10px 12px;
  display: grid;
  gap: 10px;
}
@media (min-width: 860px){
  .vs-pagebar-inner{
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
.vs-page-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.vs-page-tabs::-webkit-scrollbar{display:none}
.vs-page-tab{
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vs-tab-ic{font-size: 1.05rem; line-height: 1}
.vs-addto{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.vs-addto-label{
  font-size: .9rem;
  color: var(--vs-muted);
  font-weight: 600;
}
.vs-addto-pills{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.vs-addto-pills::-webkit-scrollbar{display:none}
.vs-addto-pills .chip{flex: 0 0 auto}

/* Hide Add-to pills on the More page */
body[data-vs-page="more"] .vs-addto{display:none}

/* Ensure hidden panels disappear */
[hidden]{display:none !important}

/* Hide pagebar in print */
@media print{
  .vs-pagebar{display:none !important}
}

/* PR-NAV2: When More is active, hide bottom navigation for a full-screen utility surface */
body[data-vs-page="more"] .vs-bottom-nav{display:none !important;}
/* Optional: keep desktop sidebar from stealing focus while More is open */
@media (min-width:1100px){
  body[data-vs-page="more"] .vs-sidenav{opacity:0.25; pointer-events:none;}
}

/* ===== More page ===== */
.vs-more{
  max-width: 900px;
  margin: 0 auto 2rem;
}


/* PR-NAV2: Full-screen More layout (fills viewport and scrolls internally) */
body[data-vs-page="more"] .vs-more{
  max-width: none;
  margin: 0;
  min-height: calc(100dvh - var(--vs-appbar-height) - env(safe-area-inset-top));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom);
}

.vs-more h2{
  font-size: 1.25rem;
  /* PR-NAV3: Give the title breathing room under the app bar */
  margin: 8px 0 .75rem;
}
.vs-more-card{
  background: var(--vs-bg);
  border: 1px solid var(--vs-line);
  border-radius: var(--vs-radius-lg);
  box-shadow: var(--vs-shadow);
  overflow: hidden;
}
.vs-more-item{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.vs-more-item + .vs-more-item{
  border-top: 1px solid var(--vs-line);
}
.vs-more-item:active{transform: translateY(1px)}
.vs-more-item:focus{outline: 2px solid rgba(54,171,156,.35); outline-offset: 2px}
.mi-ic{
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: rgba(54,171,156,.10);
  flex: 0 0 auto;
}
.mi-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.mi-title{font-weight:800;color:var(--vs-ink)}
.mi-sub{font-size:.9rem;color:var(--vs-muted);
  /* a11y: allow wrapping with a safe clamp */
  white-space:normal;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.mi-go{margin-left:auto;color:var(--vs-muted);font-size:1.4rem;line-height:1}
.vs-more-note{
  margin-top: 10px;
  color: var(--vs-muted);
  font-size: .95rem;
}

/* ============================================================
   Bottom Sheet (More actions) — PR#2
============================================================ */
.vs-sheet{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px 12px calc(18px + env(safe-area-inset-bottom));
}
.vs-sheet-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
}
.vs-sheet-panel{
  position: relative;
  width: min(760px, 100%);
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 18px 18px 14px 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  max-height: calc(100vh - 36px - env(safe-area-inset-top));
  max-height: calc(var(--vs-vh, 1vh) * 100 - 36px - env(safe-area-inset-top));
  max-height: calc(100dvh - 36px - env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vs-sheet-head{
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--vs-line);
}
.vs-sheet-title{
  margin: 0;
  font-size: 1rem;
  color: var(--vs-ink);
}
.vs-sheet-close{
  border: 1px solid var(--vs-line);
  background: #fff;
  color: var(--vs-ink);
  border-radius: 999px;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.vs-sheet-body{ flex:1; min-height:0; padding: 8px 0 calc(14px + env(safe-area-inset-bottom)); overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/*
  iOS Safari browser chrome (top/bottom bars) can cover fixed-position sheets.
  In *browser* mode (not installed PWA), give the sheet extra bottom breathing
  room so content can scroll fully into view.
*/
html:not(.vs-standalone) .vs-sheet{
  /* VisualViewport vars account for Safari top/bottom chrome in browser mode */
  padding-top: calc(18px + env(safe-area-inset-top) + var(--vs-vv-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom) + var(--vs-vv-bot, 0px) + 12px);
}
html:not(.vs-standalone) .vs-sheet-body{
  padding-top: 8px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom) + var(--vs-vv-bot, 0px) + 12px);
}

/* Prefer the *visible* viewport height for the panel in Safari browser mode */
html:not(.vs-standalone) .vs-sheet-panel{
  max-height: calc(var(--vs-vv-h, 100vh) - 36px);
}

@media (max-width: 899px){
  .vs-sheet.vs-sheet--keyboard{
    align-items:flex-start;
    padding-top: calc(10px + env(safe-area-inset-top) + var(--vs-vv-top, 0px));
    padding-bottom: calc(10px + env(safe-area-inset-bottom) + var(--vs-vv-bot, 0px));
  }
  .vs-sheet.vs-sheet--keyboard .vs-sheet-panel{
    max-height: calc(var(--vs-vv-h, 100dvh) - 20px);
  }
  .vs-sheet.vs-sheet--keyboard .vs-sheet-body{
    padding-bottom: calc(22px + env(safe-area-inset-bottom) + var(--vs-vv-bot, 0px));
  }
}
.vs-sheet-list{ display: block; }

.vs-sheet-item{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
}
.vs-sheet-item + .vs-sheet-item{
  border-top: 1px solid var(--vs-line);
}
.vs-sheet-item:active{ transform: translateY(1px); }

.si-ic{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--vs-panel-bg);
  border: 1px solid var(--vs-line);
}
.si-title{ display: block; font-weight: 800; color: var(--vs-ink); }
.si-sub{ display: block; font-size: 0.85rem; color: var(--vs-muted); }

.vs-sheet-note{
  padding: 0 16px;
  margin: 12px 0 0;
  font-size: 0.85rem;
  color: var(--vs-muted);
}

/* ============================================================
   Paywall sheet (conversion-focused)
============================================================ */
.vs-paywall{ padding: 10px 0 4px; }

.vs-paywall-hero{
  margin: 0 16px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  border: 1px solid var(--vs-line);
  background: linear-gradient(135deg, rgba(54,171,156,.18), rgba(245,138,72,.12) 65%, rgba(255,255,255,1));
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.vs-paywall-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .12em;
  font-weight: 900;
  text-transform: uppercase;
  color: #fff;
  background: var(--vs-brand);
}
.vs-paywall-title{ margin: 8px 0 4px; font-size: 1.08rem; color: var(--vs-ink); }
.vs-paywall-sub{ margin: 0; font-size: .92rem; line-height: 1.35; color: var(--vs-muted); }

/* --- Paywall banner + quick proof chips (subscription conversion) --- */
.vs-paywall-banner{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 10px;
  border-radius: 14px;
  border: 1px dashed rgba(54,171,156,.45);
  background: rgba(255,255,255,.78);
}
.pwb-ic{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(54,171,156,.12);
  border: 1px solid rgba(54,171,156,.20);
  flex: 0 0 auto;
}
.pwb-title{ font-weight: 950; color: var(--vs-ink); }
.pwb-sub{ font-size: .85rem; color: var(--vs-muted); margin-top: 1px; }

.vs-paywall-proof{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.pwp-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,.92);
  font-size: .78rem;
  font-weight: 900;
  color: var(--vs-ink);
}

.vs-paywall-benefits{
  margin: 10px 16px 0;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

/* --- Free vs Pro comparison --- */
.vs-paywall-compare{
  margin: 10px 16px 0;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.pwc-head, .pwc-row{
  display:grid;
  grid-template-columns: 1.35fr .7fr .7fr;
  gap: 10px;
  align-items:center;
  padding: 10px 12px;
}
.pwc-head{
  background: var(--vs-panel-bg);
  font-size: .78rem;
  font-weight: 950;
  color: var(--vs-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.pwc-row{ font-size: .86rem; color: var(--vs-ink); }
.pwc-row + .pwc-row{ border-top: 1px solid var(--vs-line); }
.pwc-c2, .pwc-c3{ text-align: center; font-weight: 900; }
.pwc-c2{ color: var(--vs-muted); }
.pwc-c3{ color: var(--vs-brand); }
.vs-paywall-row{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 12px;
}
.vs-paywall-row + .vs-paywall-row{ border-top: 1px solid var(--vs-line); }
.pw-ic{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--vs-panel-bg);
  border: 1px solid var(--vs-line);
  flex: 0 0 auto;
}
.pw-title{ display:block; font-weight: 900; color: var(--vs-ink); }
.pw-sub{ display:block; font-size: .85rem; color: var(--vs-muted); }

.vs-paywall-plans{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 16px;
}
.vs-paywall-plan{
  width: 100%;
  text-align: left;
  border: 1px solid var(--vs-line);
  background: #fff;
  border-radius: 14px;
  padding: 12px 12px;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
}
.vs-paywall-plan:active{ transform: translateY(1px); }
.vs-paywall-plan.best{
  border-color: rgba(54,171,156,.55);
  box-shadow: 0 10px 26px rgba(54,171,156,.12);
}
.plan-top{ display:flex; align-items:center; gap: 10px; justify-content: space-between; }
.plan-name{ font-weight: 900; color: var(--vs-ink); }
.plan-pill{
  display:inline-flex;
  align-items:center;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,.9);
  color: var(--vs-muted);
  font-size: .78rem;
  font-weight: 800;
}
.plan-pill.best{
  border-color: rgba(54,171,156,.4);
  background: rgba(54,171,156,.10);
  color: var(--vs-brand);
}
.plan-price{ display:block; margin-top: 6px; font-size: 1.18rem; font-weight: 950; color: var(--vs-ink); }
.plan-unit{ font-size: .92rem; font-weight: 800; color: var(--vs-muted); }
.plan-save{ display:block; margin-top: 2px; font-size: .82rem; color: var(--vs-brand); font-weight: 900; }

.vs-paywall-foot{
  padding: 0 16px;
  margin: 10px 0 0;
  font-size: .85rem;
  color: var(--vs-muted);
}

.vs-paywall-trust{
  margin: 10px 16px 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--vs-line);
  background: rgba(255,255,255,.9);
}
.pwt-row{ display:flex; gap: 10px; align-items:flex-start; }
.pwt-row + .pwt-row{ margin-top: 8px; }
.pwt-ic{ width: 22px; height: 22px; display:grid; place-items:center; }
.pwt-txt{ font-size: .85rem; color: var(--vs-muted); }
.vs-paywall-muted{ color: var(--vs-muted); }

.vs-paywall-actions{ padding: 0 16px; margin-top: 10px; }

@media (min-width: 560px){
  .vs-paywall-plans{ grid-template-columns: 1fr 1fr 1fr; }
  .vs-paywall-plan{ height: 100%; }
}

/* =====================================================================
   PR-2: Premium packs styling
   Adds support for grouping templates into packs and displaying Pro locks.
===================================================================== */
.vs-premium-pack-header{
  padding: 8px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vs-premium-pack-header .vs-pack-title{
  font-weight: 800;
  font-size: .95rem;
  color: var(--vs-ink);
}
.vs-premium-pack-header .vs-pack-desc{
  font-size: .76rem;
  color: var(--vs-muted);
}
.vs-pro-lock{
  margin-left: auto;
  font-size: 1rem;
  color: var(--vs-brand);
}
.vs-pro-pill{
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 18px;
  border-radius: 999px;
  background: rgba(54,171,156,.10);
  color: var(--vs-brand);
  font-size: .75rem;
  font-weight: 800;
  margin-left: 4px;
}

/* --- Copy Day sheet (PR#5) --- */
.vs-copyday{ padding: 0 0 6px; }
.vs-copyday-list{ display:block; margin-top: 6px; }

.vs-copy-opt{
  width:100%;
  background: transparent;
  border:0;
  padding: 12px 16px;
  display:flex;
  gap: 12px;
  align-items: center;
  text-align:left;
  cursor:pointer;
}
.vs-copy-opt + .vs-copy-opt{ border-top: 1px solid var(--vs-line); }
.vs-copy-opt:active{ transform: translateY(1px); }

.ci-box{
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display:grid;
  place-items:center;
  background: #fff;
  border: 1px solid var(--vs-line);
  flex: 0 0 auto;
}
.ci-check{ opacity: 0; font-weight: 900; color: var(--vs-brand); }
.vs-copy-opt[data-active="true"] .ci-check{ opacity: 1; }
.vs-copy-opt[data-active="true"] .ci-box{ background: rgba(54, 171, 156, 0.12); border-color: rgba(54, 171, 156, 0.45); }

.ci-title{ display:block; font-weight: 800; color: var(--vs-ink); }
.ci-sub{ display:block; font-size: 0.85rem; color: var(--vs-muted); }

.vs-copyday-actions{ padding: 10px 16px 0; }
.vs-copyday-actions .btn{ width:100%; }
.vs-copy-opt:focus-visible{ outline: 3px solid rgba(54, 171, 156, 0.22); outline-offset: 2px; border-radius: 14px; }

.vs-support-row{ display:flex; align-items:center; gap:10px; padding: 0 16px; flex-wrap: wrap; }
.vs-support-row .vs-sheet-note{ padding:0; margin:12px 0 0; }
.vs-support-email{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.85rem; color: var(--vs-ink); background: #f8fafc; border:1px solid var(--vs-line); border-radius: 10px; padding: 6px 10px; }
.vs-support-copy{ border:1px solid var(--vs-line); background:#fff; color: var(--vs-ink); border-radius: 999px; padding: 8px 12px;
  font: 800 0.85rem/1 var(--vs-font); cursor:pointer; }
.vs-support-copy:focus-visible{ outline: 3px solid rgba(54, 171, 156, 0.22); outline-offset: 2px; border-color: var(--vs-brand); }
.vs-support-copy:active{ transform: translateY(1px); }

.vs-support-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-left:auto;
}
.vs-support-actions .vs-support-copy{
  white-space:nowrap;
}
.vs-support-copy--sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:8px 16px 0;
  font-size:0.8rem;
  padding:6px 10px;
  opacity:0.85;
}
/* --- Help sheet (PR#7.1 + PR#7.2 FAQ) --- */
.vs-help{ padding: 0 0 6px; }
.vs-help-list{ margin: 10px 16px 0; padding-left: 18px; }
.vs-help-list li{ margin: 8px 0; line-height: 1.35; color: var(--vs-ink); }

.vs-faq-searchwrap{ padding: 8px 16px 0; }
.vs-faq-search{
  width: 100%;
  border: 1px solid var(--vs-line);
  border-radius: 12px;
  background: #fff;
  color: var(--vs-ink);
  padding: 12px 12px;
  font: 650 0.95rem/1.2 var(--vs-font);
}
.vs-faq-search:focus{
  outline: 3px solid rgba(54, 171, 156, 0.22);
  border-color: var(--vs-brand);
}
.vs-faq-hint{ margin: 8px 2px 0; font-size: 0.82rem; color: var(--vs-muted); }

.vs-faq-count{ margin: 8px 2px 0; font-size: 0.82rem; color: var(--vs-muted); }

.vs-faq-empty{
  margin: 12px 16px 0;
  padding: 12px 12px;
  border: 1px dashed var(--vs-line);
  border-radius: 12px;
  color: var(--vs-muted);
  background: #fff;
  font-size: 0.92rem;
}

.vs-faq-list{ padding: 6px 0 0; }

.vs-faq-item{
  margin: 10px 16px;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.vs-faq-item summary{
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-weight: 800;
  color: var(--vs-ink);
}
.vs-faq-item summary::-webkit-details-marker{ display:none; }
.vs-faq-item summary:focus-visible{
  outline: 3px solid rgba(54, 171, 156, 0.22);
  outline-offset: -2px;
}
.vs-faq-item summary::after{
  content: '▾';
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--vs-muted);
  font-weight: 900;
  transition: transform 140ms ease;
}
.vs-faq-item[open] summary::after{ transform: rotate(180deg); }

.vs-faq-a{ border-top: 1px solid var(--vs-line); padding: 10px 14px 12px; }
.vs-faq-a p{ margin: 0; color: var(--vs-muted); line-height: 1.45; font-size: 0.95rem; }
.vs-faq-a strong{ color: var(--vs-ink); }

/* --- Templates sheet (PR#4) --- */
.vs-sheet-divider{height:1px;background:var(--vs-line);margin:10px 16px}
.vs-sheet-h4{margin:6px 16px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vs-ink)}
.vs-sheet-empty{padding:12px 16px;font-size:.9rem;color:var(--vs-muted)}

/* --- Toast (Undo etc.) --- */
.vs-toast{position:fixed;left:0;right:0;bottom:max(12px,env(safe-area-inset-bottom));display:flex;justify-content:center;z-index:2147483000;padding:0 12px}
.vs-toast[hidden]{display:none}
.vs-toast-card{width:100%;max-width:560px;display:flex;align-items:center;gap:12px;padding:14px 14px;border-radius:20px;background:#0F172A;color:#fff;border:1px solid rgba(255,255,255,.08);box-shadow:0 12px 30px rgba(15,23,42,.22)}
.vs-toast-msg{flex:1;font:600 1rem/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:-.01em}
.vs-toast-action{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:11px 18px;min-height:44px;font:700 1rem/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
.vs-toast-action:active{transform:translateY(1px)}
.vs-toast-close{border:1px solid rgba(255,255,255,.18);background:transparent;color:#fff;border-radius:999px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.92}
.vs-toast-close:active{transform:translateY(1px)}

@media print{.vs-toast{display:none!important}}

/* -----------------------------------------------------------------
 * Offline export fallback
 *
 * When the Material Symbols icon font is unavailable (for example, when
 * offline and the font has not been cached), the export view adds the
 * `vs-no-icon-font` class.  Hide icon placeholders in that case so
 * that exports degrade gracefully to text‑only labels or emoji.
 */
.vs-no-icon-font .vs-export-icon{
  display:none!important;
}

@media (min-width: 720px){
  .vs-sheet{ align-items: center; }
  .vs-sheet-panel{ border-radius: 18px; }
}

@media print{
  .vs-sheet{ display:none !important; }
}

/* ============================================================
   Accessibility settings
============================================================ */
html.vs-reduce-motion{ scroll-behavior:auto !important; }
html.vs-reduce-motion *,
html.vs-reduce-motion *::before,
html.vs-reduce-motion *::after{
  animation: none !important;
  transition: none !important;
}

/* ============================================================
   Settings sheet (More → Settings)
============================================================ */
.vs-settings{ padding: 0 16px 6px; }
.vs-settings-section{ padding: 6px 0; }

.vs-toggle{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:10px 0;
  cursor:pointer;
  user-select:none;
}
.vs-toggle input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.vs-toggle-ui{
  width:42px;
  height:24px;
  border-radius:999px;
  background:#e2e8f0;
  border:1px solid var(--vs-line);
  position:relative;
  flex:0 0 auto;
  margin-top:2px;
  transition: background .15s, border-color .15s;
}
.vs-toggle-ui::after{
  content:'';
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:999px;
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.12);
  transition: transform .15s;
}
.vs-toggle input:checked + .vs-toggle-ui{
  background: rgba(54,171,156,.35);
  border-color: rgba(54,171,156,.55);
}
.vs-toggle input:checked + .vs-toggle-ui::after{
  transform: translateX(18px);
}
.vs-toggle-main{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.vs-toggle-title{ font-weight:800; color:var(--vs-ink); }
.vs-toggle-sub{ font-size:.88rem; color:var(--vs-muted); line-height:1.35; }

.vs-test-btn{ margin-top: 6px; }
.vs-test-btn[disabled]{ opacity:.6; cursor:not-allowed; }

.vs-scale{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 2px; }

/* Time mode (PR#1) */
.vs-advanced{ margin-top:10px; padding:10px 12px; border:1px dashed var(--vs-line); border-radius:14px; background:#fff; }
.vs-advanced[hidden]{ display:none !important; }
.vs-input,
.vs-select{ width:100%; min-width:0; border:1px solid var(--vs-line); border-radius:12px; background:#fff; color:var(--vs-ink); padding:10px 12px; font:700 16px/1.2 var(--vs-font); -webkit-appearance:none; appearance:none; }
.vs-input{ min-height:44px; }
.vs-input:focus,
.vs-select:focus{ outline:3px solid rgba(54,171,156,.22); border-color: var(--vs-brand); }
.vs-input[type="color"]{ width:96px; max-width:100%; min-height:46px; height:46px; padding:4px; align-self:start; cursor:pointer; }
.vs-input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; }
.vs-input[type="color"]::-webkit-color-swatch{ border:none; border-radius:12px; }
.vs-input[type="color"]::-moz-color-swatch{ border:none; border-radius:12px; }
.vs-sheet-body :is(.vs-input,.vs-select,textarea,select,input){ scroll-margin-top: 84px; scroll-margin-bottom: 160px; }
.vs-time-coverage{ margin-top:8px; font-size:0.92rem; font-weight:900; color:var(--vs-ink); }

.vs-sample{
  margin-top:10px;
  border:1px solid var(--vs-line);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.vs-sample-title{
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vs-muted);
  margin-bottom:6px;
  font-weight:700;
}
.vs-sample-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.vs-sample-pill{
  display:inline-flex;
  padding:6px 10px;
  border:1px solid var(--vs-line);
  border-radius:999px;
  background: var(--vs-panel-bg);
  font-weight:700;
}
.vs-sample-txt{ color: var(--vs-muted); }

/* Export-only view: make sizing predictable */
.vs-export, .vs-export *, .vs-export *::before, .vs-export *::after{
  box-sizing: border-box;
}

/* PR9.4 — Classroom board layout (export-only)
   Huge icons, minimal text, thick high-contrast grid.
   Note: variables use !important so they override inline export vars. */
.vs-export[data-layout="classroom"]{
  --vs-pad: 14px !important;
  --vs-col-gap: 12px !important;
  --vs-border-w: 4px !important;
  --vs-title-size: 22px !important;
  /* Default label font for classroom exports. Remove !important so inline values can override */
  --vs-label-font: 20px;
  --vs-icon-font: 78px !important;
  --vs-lane-min-w: 280px !important;

  /* Make it feel like a wall board */
  --vs-col-pad: 12px !important;
  --vs-list-gap: 12px !important;
  --vs-row-min-h: 104px !important;
  --vs-row-pad-y: 12px !important;
  --vs-row-pad-x: 12px !important;
  --vs-section-title: 22px !important;

  /* High contrast */
  --vs-line: #0F172A !important;
  --vs-col-bg: #FFFFFF !important;
  --vs-row-bg: #FFFFFF !important;
  --vs-muted: #334155 !important;
}
.vs-export[data-layout="classroom"][data-cb-show-labels="false"] .vs-activityLabel{
  /* When classroom labels are disabled, hide the activity label */
  display: none !important;
}
.vs-export[data-layout="classroom"][data-cb-show-labels="true"] .vs-activityLabel{
  /* When classroom labels are enabled, ensure the label is visible */
  display: block !important;
}

/* ============================
   Image share/save sheet
============================ */
#vs-export-mount{
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1200px;
  max-width: 1200px;
  pointer-events: none;
  z-index: 0;
}

/* Print/PDF: use export-only view (keeps columns, hides empty slots) */
@media print{
  html, body{ background:#FFFFFF !important; }
  .app-header,
  .vs-install-strip,
  .app-main{ display:none !important; }

  #vs-export-mount{
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    display: block !important;
  }

  #vs-export-mount .vs-export{
    width: auto !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
  }
}

html.vs-print-export .vs-print-sentinel{ height:0 !important; margin:0 !important; padding:0 !important; }

/* iOS/Safari print preview helper: class-driven (see app.js triggerPrint) */
html.vs-print-export body{ background:#FFFFFF !important; }
html.vs-print-export .app-header,
html.vs-print-export .vs-install-strip,
html.vs-print-export .app-main{ display:none !important; }
html.vs-print-export, html.vs-print-export body{ margin:0 !important; padding:0 !important; }
html.vs-print-export body > *:not(#vs-export-mount){ display:none !important; }
html.vs-print-export #vs-export-mount{
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  display: block !important;
}
html.vs-print-export #vs-export-mount .vs-export{
  width: auto !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

.vs-share{display:flex;flex-direction:column;gap:12px}
.vs-share-preview{
  width: 100%;
  min-height: 220px;
  border: 1px dashed var(--vs-line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(240,251,248,.65), rgba(255,255,255,.95));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.vs-share-img{width:100%;height:auto;display:block}
.vs-share-placeholder{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 18px;
  text-align:center;
  color: var(--vs-muted);
}
.vs-share-placeholder .ph-ic{font-size: 28px}
.vs-share-placeholder .ph-t{font-size: 13px}
.vs-share-actions{
  display:flex;
  gap:10px;
}
.vs-share-actions .btn{flex:1}

/* =========================
   In-app confirm modal + timed slot picker (PR3 UX++)
========================= */
.vs-modal[hidden]{display:none !important}
.vs-modal{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:18px}
.vs-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45);backdrop-filter:saturate(120%) blur(2px)}
.vs-modal-panel{position:relative;width:min(520px,100%);background:var(--vs-card,#fff);border:1px solid var(--vs-line,#E5E7EB);border-radius:16px;box-shadow:0 18px 50px rgba(15,23,42,.18);padding:14px 14px 12px}
.vs-modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.vs-modal-title{margin:0;font:700 18px/1.25 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--vs-ink,#0F172A)}
.vs-modal-x{appearance:none;border:0;background:transparent;border-radius:10px;padding:8px;margin:-4px;color:var(--vs-muted,#64748B);cursor:pointer}
.vs-modal-x:hover{background:rgba(148,163,184,.18);color:var(--vs-ink,#0F172A)}
.vs-modal-msg{margin:0 0 12px;color:var(--vs-muted,#64748B);line-height:1.6}
.vs-modal-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}

/* Slot picker inside bottom sheet */
.vs-slotpick{display:grid;gap:12px}
.vs-slotpick-note{margin:0;color:var(--vs-muted,#64748B);font-size:13px;line-height:1.5}
.vs-slotpick-tabs{display:flex;gap:8px;flex-wrap:wrap}
.vs-slotpick-tab{appearance:none;border:1px solid var(--vs-line,#E5E7EB);background:#fff;color:var(--vs-ink,#0F172A);border-radius:999px;padding:8px 12px;font:600 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;cursor:pointer}
.vs-slotpick-tab[aria-pressed="true"]{border-color:var(--vs-brand,#36AB9C);box-shadow:0 0 0 3px rgba(54,171,156,.14)}
.vs-slotpick-list{display:grid;gap:8px}
.vs-slotpick-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;appearance:none;border:1px solid var(--vs-line,#E5E7EB);background:#fff;border-radius:14px;padding:9px 12px;cursor:pointer}
.vs-slotpick-row:hover{border-color:rgba(54,171,156,.55);box-shadow:0 10px 24px rgba(15,23,42,.06)}
.vs-slotpick-left{display:flex;align-items:center;gap:8px;min-width:0;flex:1 1 auto}
.vs-slotpick-time{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:30px;padding:5px 9px;border-radius:999px;border:1px solid rgba(54,171,156,.24);background:rgba(54,171,156,.10);color:var(--vs-ink,#0F172A);font:700 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;vertical-align:middle}
.vs-slotpick-timeIcon{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;transform:translateY(-.25px)}
.vs-slotpick-timeText{display:block;white-space:nowrap}
.vs-clock-svg{display:block;width:14px;height:14px;overflow:visible}.vs-clock-svg .vs-clock-face{fill:none;stroke:rgba(54,171,156,.58);stroke-width:1.7}.vs-clock-svg .vs-clock-hand{fill:none;stroke:rgba(54,171,156,.9);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.vs-slotpick-label{min-width:0;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--vs-ink,#0F172A);font:600 14px/1.25 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
.vs-slotpick-meta{flex:0 0 auto;color:var(--vs-muted,#64748B);font:600 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;white-space:nowrap;padding-left:8px}
.vs-slotpick-empty .vs-slotpick-meta{color:var(--vs-muted,#94A3B8)}
@media (max-width:420px){.vs-slotpick-time{padding:5px 8px;gap:5px}}
/* PR9.x3a — Classroom Print Parity (Step 1)
   Goal: Make Classroom PRINT look like the Classroom SHARE board.
   (We do NOT auto-shrink rows/icons in this step; that's Step 2.)
   Also hide the export footer/tip in print to reduce accidental page-2 blanks. */

@media print{
  #vs-export-mount .vs-export-foot{ display:none !important; }
}

/* iOS/Safari print preview helper (class-driven in app.js) */
html.vs-print-export #vs-export-mount .vs-export-foot{ display:none !important; }

/* PR9.x3h — Explicit paged classroom print (prevents iOS Safari from bisecting tiles) */
@media print{

  /* PR9.6a: Page breaks for multi-page exports are set inline by JS when pagination runs.
     Avoid forcing break-after via CSS; on iOS Safari this can create a blank trailing page. */
  #vs-export-mount .vs-export.vs-print-page{ break-inside: auto; page-break-inside: auto; }

  /* IMPORTANT: do NOT make the whole column/list unbreakable (Safari will push it to the next page) */
  #vs-export-mount .vs-export.vs-print-page .vs-export-cols,
  #vs-export-mount .vs-export.vs-print-page .vs-export-col,
  #vs-export-mount .vs-export.vs-print-page .vs-export-list{
    break-inside: auto;
    page-break-inside: auto;
    -webkit-column-break-inside: auto;
  }

  /* Keep each activity tile atomic */
  #vs-export-mount .vs-export.vs-print-page .vs-export-row{
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
}

/* ===========================================================
   PR9.x4a (Step 1) — Classroom/Teacher print compaction + "paper" frame
   Goal: reclaim vertical space (no JS sizing yet)
=========================================================== */
@media print{
  /* tighter margins (let user choose portrait/landscape in dialog) */
  /* PR9.6a: margins set dynamically via #vs-print-page-style */

  /* Paper-like frame: constrain export width so Safari scaling is consistent */
  html.vs-print-export #vs-export-mount{
    margin: 0 !important;
    padding: 0 !important;
  }
  html.vs-print-export #vs-export-mount .vs-export{
    width: 100% !important;
    max-width: none !important; /* allow full landscape width */
    margin: 0 auto !important;
  }
  html.vs-print-export #vs-export-mount .vs-export[data-layout="portrait"]{
    max-width: 8.5in !important;
  }
  html.vs-print-export #vs-export-mount .vs-export[data-layout="landscape"],
  html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"]{
    max-width: 11in !important;
  }

  /* Classroom + Teacher preset: shrink chrome, keep "board" feel */
  html.vs-print-export .vs-export[data-layout="classroom"][data-preset="teacher"]{
    --vs-pad: 10px !important;
    --vs-col-gap: 10px !important;
    --vs-border-w: 3px !important;

    --vs-title-size: 18px !important;
    --vs-date-size: 12px !important;
    --vs-site-size: 11px !important;
    --vs-head-bottom-pad: 6px !important;

    --vs-col-pad: 10px !important;
    --vs-list-gap: 8px !important;

    /* Keep icons big for now; Step 2 will compute the max size cleanly */
    /* --vs-icon-font stays as-is */
    --vs-row-min-h: 96px !important;
    --vs-row-pad-y: 10px !important;
    --vs-row-pad-x: 10px !important;

    --vs-section-title: 18px !important;
  }

  /* Compact header spacing */
  html.vs-print-export .vs-export[data-layout="classroom"][data-preset="teacher"] .vs-export-head{
    margin: 0 0 8px !important;
    gap: 10px !important;
    align-items: center !important;
  }
  /* Left stack: reduce extra margins between title/date */
  html.vs-print-export .vs-export[data-layout="classroom"][data-preset="teacher"] .vs-export-head > div:first-child > div:first-child{
    margin: 0 0 2px !important;
  }
  /* Right stack: tighten vertical spacing */
  html.vs-print-export .vs-export[data-layout="classroom"][data-preset="teacher"] .vs-export-head > div:last-child{
    gap: 3px !important;
  }
  /* Badge padding tighter */
  html.vs-print-export .vs-export[data-layout="classroom"][data-preset="teacher"] .vs-export-head > div:last-child > div:last-child{
    padding: 2px 6px !important;
  }
}

/* ===========================================================
   PR9.x4a (Step 2) — Classroom Print Row Solver hooks (CSS vars)
   JS sets:
     --cbRows, --cbRowH, --cbIcon, --cbGap
   We map those to the existing export vars so the same DOM/inline styles respond.
=========================================================== */
@media print{
  html.vs-print-export .vs-export[data-layout="classroom"]{
    --vs-row-min-h: var(--cbRowH, var(--vs-row-min-h)) !important;
    --vs-icon-font: var(--cbIcon, var(--vs-icon-font)) !important;
    --vs-list-gap: var(--cbGap, var(--vs-list-gap)) !important;
  }
  html.vs-print-export .vs-export[data-layout="classroom"] .vs-cb-row{
    min-height: var(--cbRowH, var(--vs-row-min-h)) !important;
  }
  html.vs-print-export .vs-export[data-layout="classroom"] .vs-cb-icon{
    font-size: var(--cbIcon, var(--vs-icon-font)) !important;
  }
}

/* ===========================================================
   PR9.x4d — Timed Classroom print: horizontal tiles (time strip + icon)
   Goal: timed labels use WIDTH instead of adding vertical stack height,
         keeping classroom board on 1 page in iOS print.
   Applies ONLY when: layout=classroom AND timeMode=timed.
=========================================================== */

@media print{
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-row{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: left !important;
  }
  /* Swap order: time left, icon right (DOM is icon then text) */
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-text{ order: 1 !important; }
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-icon{ order: 2 !important; }

  /* Make the text container a compact horizontal strip */
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-text{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 84px !important; /* fits “11:30 AM” without wrapping */
    flex: 0 0 auto !important;
  }

  /* Keep the pill single-line + slightly tighter padding for print */
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-export-time{
    white-space: nowrap !important;
    padding: 2px 6px !important;
  }

  /* -----------------------------------------------------------
     Timed Classroom + Labels ON (print only)
     Problem: when labels are enabled, the time pill and label can
     land on the same line and overflow. Keep the timed classroom
     row as a horizontal tile (time/text on the left, icon on the
     right), but stack time ABOVE the label inside the text block.
     Scope: PRINT PDF classroom board only.
  ----------------------------------------------------------- */
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-cb-text{
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 1 auto !important;
  }
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-export-time{
    align-self: flex-start !important;
  }
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-activityLabel{
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    text-align: center !important;
    line-height: 1.08 !important;
    max-width: 100% !important;
  }
}



/* ===========================================================
   PR9.x4e — Classroom Print: Icon-forward tiles (PRINT ONLY)
   Goal: Classroom boards should feel visual-first: icon is the primary cue.
   Scope: Print/PDF classroom board only (does not affect PNG exports or UI).
=========================================================== */
@media print{
  #vs-export-mount .vs-export[data-layout="classroom"] .vs-cb-icon{
    /* Boost icon prominence relative to label */
    font-size: calc(var(--cbIcon, var(--vs-icon-font)) * 1.32) !important;
  }
  #vs-export-mount .vs-export[data-layout="classroom"] .vs-activityLabel{
    /* De-emphasize label slightly so icon remains the focal point */
    font-size: 0.86em !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
  }
  /* In timed mode, keep the time pill readable but compact */
  #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-export-time{
    font-size: 0.88em !important;
  }
}
/* iOS/Safari print preview helper mode (class-driven) */
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-row{
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: left !important;
}
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-text{ order: 1 !important; }
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-icon{ order: 2 !important; }
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-cb-text{
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  width: auto !important;
  min-width: 84px !important;
  flex: 0 0 auto !important;
}
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"] .vs-export-time{
  white-space: nowrap !important;
  padding: 2px 6px !important;
}

/* Timed Classroom + Labels ON (iOS preview helper) */
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-cb-text{
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  min-width: 0 !important;
  width: 100% !important;
  flex: 1 1 auto !important;
}
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-export-time{
  align-self: flex-start !important;
}
html.vs-print-export #vs-export-mount .vs-export[data-layout="classroom"][data-time-mode="timed"][data-cb-show-labels="true"] .vs-activityLabel{
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  text-align: center !important;
  line-height: 1.08 !important;
  max-width: 100% !important;
}

/* ===========================================================
   PRINT: Timed mode — stack time under the activity title (non-classroom)
   Why: In 3-column prints, side-by-side time pills force ellipsis/truncation.
        Stacking keeps titles readable and layout stable.
   (Classroom board keeps its own timed rules.)
=========================================================== */
@media print{
  /* Let the label wrap in print (JS sets nowrap/ellipsis inline; override here) */
  #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-activityLabel{
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.15 !important;
  }

  /* Remove the absolute-position pill trick; use true vertical stacking */
  #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-text{
    position: static !important;
    padding-right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
  }
  #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-time{
    position: static !important;
    margin: 0 !important;
    align-self: flex-start !important;
    white-space: nowrap !important;
  }

  /* Ensure title shows first even though DOM inserts time before label */
  #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-activityLabel{ order: 1 !important; }
  #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-time{ order: 2 !important; }
}

/* iOS/Safari print preview helper (class-driven) */
html.vs-print-export #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-activityLabel{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  line-height: 1.15 !important;
}
html.vs-print-export #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-text{
  position: static !important;
  padding-right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html.vs-print-export #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-time{
  position: static !important;
  margin: 0 !important;
  align-self: flex-start !important;
  white-space: nowrap !important;
}
html.vs-print-export #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-activityLabel{ order: 1 !important; }
html.vs-print-export #vs-export-mount .vs-export:not([data-layout="classroom"]) .vs-export-time{ order: 2 !important; }

/* ============================================================
   PR9.6k — Classroom Board: reclaim header space for BIG icons
   - Remove extra header height (teacher/parent badge is hidden in JS for classroom)
   - Keep layout stable across iOS/Android/Desktop
============================================================ */
html.vs-print-export .vs-export[data-layout="classroom"]{
  --vs-pad: 10px !important;
  --vs-col-gap: 10px !important;
  --vs-border-w: 3px !important;

  /* Header is now single-line ("My Visual Schedule • Fri, Dec 5") */
  --vs-title-size: 17px !important;
  --vs-site-size: 11px !important;

  --vs-col-pad: 10px !important;
  --vs-list-gap: 8px !important;
}
html.vs-print-export .vs-export[data-layout="classroom"] .vs-export-head{
  margin: 0 0 6px !important;
  gap: 10px !important;
  align-items: center !important;
}
/* Kill any leftover title bottom margin from inline styles */
html.vs-print-export .vs-export[data-layout="classroom"] .vs-export-head > div:first-child > div:first-child{
  margin: 0 !important;
}
/* Right stack is just the site; remove vertical gap if any */
html.vs-print-export .vs-export[data-layout="classroom"] .vs-export-head > div:last-child{
  gap: 0 !important;
}

/*
 * Starter template preview styles (PR-06F)
 * These styles define the layout for the preview modal used when
 * inspecting starter templates or quick actions.  The preview
 * consists of a header, a mini schedule and controls for choosing
 * how to apply the template and whether to switch UI/time modes.
 */
.template-preview{padding:0 16px 16px;display:flex;flex-direction:column;gap:12px;}
.template-preview .preview-head{display:flex;flex-direction:column;gap:4px;}
.template-preview .preview-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.template-preview .preview-badge{background:var(--vs-panel-bg);border:1px solid var(--vs-line);border-radius:8px;padding:2px 6px;font-size:0.7rem;color:var(--vs-muted);}
.template-preview .preview-schedule{max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;gap:12px;padding:6px 0;}
.template-preview .preview-column{flex:1;min-width:0;}
.template-preview .preview-column h4{margin:0 0 4px;font-size:0.85rem;color:var(--vs-muted);}
.template-preview .preview-column ul{list-style:none;padding:0;margin:0;}
.template-preview .preview-column li{display:flex;align-items:center;gap:6px;padding:2px 0;font-size:0.8rem;color:var(--vs-ink);}
.template-preview .preview-options{display:flex;flex-direction:column;gap:8px;}
.template-preview .preview-switches{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.template-preview .preview-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px;}
.template-preview .preview-switch{display:flex;align-items:center;gap:8px;font-size:0.8rem;}
.template-preview .preview-switch input{margin:0;width:16px;height:16px;}


/* ===== PR-E: Tiny Grid / Grouped icon segmented toggle (non-sticky) ===== */
.lib-results-header{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin: 10px 0 8px;
}
.lib-results-left{ flex:1; min-height:1px; }

.vs-seg{
  display:inline-flex;
  border:1px solid var(--vs-line);
  background:#fff;
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 6px 18px rgba(17,17,17,.06);
}
.vs-seg--tiny{
  height: 40px; /* touch target */
}
.vs-seg-btn{
  appearance:none;
  border:0;
  background:transparent;
  min-width:44px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1;
  color: var(--vs-muted);
  cursor:pointer;
}
.vs-seg-btn + .vs-seg-btn{
  border-left:1px solid var(--vs-line);
}
.vs-seg-btn.is-active{
  background: rgba(54,171,156,.12);
  color: var(--vs-brand);
}
.vs-seg-btn:focus-visible{
  outline: 2px solid rgba(54,171,156,.45);
  outline-offset: 2px;
}

/* Grouped mode = list layout for non-accordion cases */
.activity-grid.is-list{
  grid-template-columns: 1fr !important;
}

/*
 * Restore purchase sheet
 * Defines basic layout and styling for the restore purchase bottom sheet.
 */
.vs-restore{
  padding: 10px 16px 6px;
}
.vs-restore-form{
  display: grid;
  gap: 10px;
  margin-top: 10px;
}
.vs-restore-notice{
  margin: 10px 0 2px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--vs-line);
  background: #F8FAFC;
  color: var(--vs-ink);
  font-size: 14px;
  line-height: 1.45;
}
.vs-restore-notice[data-tone="warning"]{
  background: #FFF7ED;
  border-color: rgba(245,138,72,.35);
}
.vs-restore-notice[data-tone="info"]{
  background: #F0FDFA;
  border-color: rgba(54,171,156,.35);
}


/* ============================================================
   PR-BE1: First–Then Builder Sheet — shell + responsive layout (structure only)
============================================================ */
.ft-sheet{ display:flex; flex-direction:column; gap:12px; min-height:100%; }
.ft-body{ padding:12px 14px 0; }
.ft-footer{ position:sticky; bottom:0; background: #fff; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--vs-line,#E5E7EB); }

/* Mobile: avoid a "floating" action bar that covers content inside the sheet.
   Let the footer live in normal flow so the user can scroll naturally.
   (Desktop keeps sticky for convenience.) */
@media (max-width: 899px){
  .ft-footer{ position: static; }
}

.ft-tabbar{ display:flex; gap:8px; padding: 2px; border:1px solid var(--vs-line,#E5E7EB); border-radius:999px; background: rgba(255,255,255,.9); }
.ft-tab{ flex:1; border:0; background: transparent; border-radius:999px; padding:10px 12px; font-weight:700; color: var(--vs-muted,#64748B); cursor:pointer; }
.ft-tab.is-active{ background: rgba(54,171,156,.14); color: var(--vs-ink,#0F172A); }

/* PR-BE6: A11Y + finishing — visible focus rings inside the First–Then sheet */
.ft-sheet :is(.ft-tab, .chip, .vs-chip, .btn, .vs-sheet-item):focus-visible{
  outline: 3px solid rgba(54,171,156,.55);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .ft-sheet :is(.ft-tab, .chip, .vs-chip, .btn, .vs-sheet-item){
    transition: none !important;
  }
}

.ft-grid{ display:block; }
.ft-panel{ display:none; }
.ft-panel.is-active{ display:block; }

.ft-block{ margin-top:10px; }
.ft-swap{ display:flex; justify-content:center; margin:10px 0; }
.ft-swapRow{ display:flex; justify-content:center; margin:12px 0; }
.ft-layout{ margin-top:12px; }
.ft-preview{ margin-top:12px; }

/* PR-BE5: Layout control polish (Stacked / Wide) */
.ft-sectionLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.03em;
  color: var(--vs-ink,#0F172A);
  margin: 0 0 8px;
}
.ft-layout .chips.chips-seg{ margin-top: 0; }
.ft-layout .vs-sheet-note{ margin-top: 8px; }

/* Support both selection mechanisms (data-active or class) */
.chip.is-selected{ background:rgba(54,171,156,.12); border-color:rgba(54,171,156,.5); color:var(--vs-ink); }

/* =========================================================
   PR-BE3: Preview as the star (big, centered, predictable)
========================================================= */
.ft-previewFrame{
  border:1px solid var(--vs-line,#E5E7EB);
  border-radius:14px;
  padding:12px;
  background:#fff;
  box-shadow: 0 6px 18px rgba(17,17,17,.06);
}
.ft-previewCanvasWrap{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  width:100%;
  overflow:visible;
}
.ft-previewCanvasWrap > *{ max-width:100%; }
.ft-previewCanvasWrap canvas,
.ft-previewCanvasWrap img{ max-width:100%; height:auto; }

/* Keep the same scale behavior used in the Focus First–Then export modal */
.ft-previewCanvasWrap .vs-first-then-board{
  transform: scale(.90);
  transform-origin: top center;
}
@media (max-width: 420px){
  .ft-previewCanvasWrap .vs-first-then-board{ transform: scale(.84); }
}

/* PR-FT-PREVIEW-MOBILE-2: mobile preview-only "no squish" fix
   Keep the preview true to print (landscape stays side-by-side).
   On small screens, allow horizontal scrolling instead of compressing panels. */
@media (max-width: 640px){
  .ft-previewFrame{
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
  }
  .ft-previewCanvasWrap{
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
    padding-bottom: 4px;
  }
  .ft-previewCanvasWrap > *{
    max-width: none;
    flex: 0 0 auto;
  }

  /* Let the board keep its natural (print-like) width in preview */
  .ft-previewCanvasWrap .vs-first-then-board{
    width: max-content;
    min-width: max-content;
    max-width: none;
  }

  /* Standard (non-tile) landscape: keep two panels readable */
  .ft-previewCanvasWrap .vs-first-then-board.is-landscape:not(.is-tiles) .vs-first-then-panel{
    flex: 0 0 280px;
  }

  /* Tile layout landscape: keep two columns with a real min width */
  .ft-previewCanvasWrap .vs-first-then-board.is-tiles.is-landscape{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

.ft-footerNote{
  font-size:12px;
  color: var(--vs-muted,#64748B);
  margin: 0 0 8px;
  min-height: 16px; /* keeps footer height stable when note appears */
}

/* Sharing-first footer actions: mobile stacked, desktop aligned right */
.ft-actions{ margin:0; display:flex; flex-direction:column; gap:10px; }
.ft-actions .vs-btn{ width:100%; flex:0 0 auto; }

@media (min-width: 900px){
  .ft-footer{ display:flex; align-items:center; gap:12px; }
  .ft-footerNote{ margin:0; flex:1 1 auto; }
  .ft-actions{ flex-direction:row; justify-content:flex-end; flex:0 0 auto; }
  .ft-actions .vs-btn{ width:auto; min-width: 140px; }
}

/* =========================================================
   PR-BE2: Modernize First/Then pickers (clean + compact)
========================================================= */
.ft-pickCard{
  display:grid;
  gap:10px;
  padding:10px;
  border:1px solid var(--vs-line,#E5E7EB);
  border-radius:14px;
  background:#fff;
}
.ft-pickHead{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center; }
.ft-pickTitle{ font-weight:900; letter-spacing:.03em; font-size:12px; color: var(--vs-ink,#0F172A); }
.ft-pickHint{ margin-top:2px; font-size:12px; color: var(--vs-muted,#64748B); }
/* Clear button: compact chip-like */
.ft-clear{
  padding:6px 10px;
  font-size:12px;
}
.ft-swapRow .vs-chip{ padding:8px 12px; }

@media (min-width: 900px){
  .ft-tabbar{ display:none; }
  .ft-grid{ display:grid; grid-template-columns: 360px 1fr; gap:16px; align-items:start; }
  .ft-panel{ display:block; }
  .ft-previewPane{ min-height: 420px; }
}
/* ===== PR-FT-5: First–Then Export modal preview + layout toggle ===== */
.vs-ft-previewbox{
  margin: 10px 0 12px;
  padding: 10px;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(17,17,17,.06);
  /*
    iOS Safari (browser mode) can clip the scaled preview at the very top/bottom
    when the sheet is the scroll container. Let the preview breathe.
  */
  overflow: visible;
}
.vs-ft-preview{
  display: flex;
  justify-content: center;
  align-items: center;
}
.vs-ft-preview .vs-first-then-board{
  transform: scale(.90); /* PR-FT-LAYOUT-4: tiles are already constrained */
  transform-origin: top center;
}

@media (max-width: 420px){
  .vs-ft-preview .vs-first-then-board{
    transform: scale(.84);
  }
}

/* PR-FT-PREVIEW-MOBILE-FOCUS-1: match the main export preview behavior
   for Focus → First–Then export so wide boards stay print-true on mobile
   instead of getting visually squished. */
@media (max-width: 640px){
  .vs-ft-previewbox{
    padding: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
  }
  .vs-ft-preview{
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
    padding-bottom: 4px;
  }
  .vs-ft-preview > *{
    max-width: none;
    flex: 0 0 auto;
  }
  .vs-ft-preview .vs-first-then-board{
    width: max-content;
    min-width: max-content;
    max-width: none;
  }
  .vs-ft-preview .vs-first-then-board.is-landscape:not(.is-tiles) .vs-first-then-panel{
    flex: 0 0 280px;
  }
  .vs-ft-preview .vs-first-then-board.is-tiles.is-landscape{
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
.vs-ft-layout-group{
  margin: 10px 0 12px;
}
.vs-ft-layout-title{
  font-weight: 600;
  margin-bottom: 8px;
}
.vs-ft-layout-seg .vs-seg-btn{
  font-size: 14px;
}
.vs-restore-form label{
  display: grid;
  gap: 6px;
}
.vs-restore-form label span{
  font-size: 0.72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--vs-muted);
  font-weight: 700;
}
.vs-restore-form input{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--vs-line);
  border-radius: 12px;
  font-size: 0.95rem;
  background: #fff;
}
.vs-restore-form input:focus{
  border-color: rgba(54,171,156,.7);
  box-shadow: 0 0 0 3px rgba(54,171,156,.12);
  outline: none;
}
.vs-restore-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/*
  =====================================================================
    Dev panel styles (PR‑0)
    -----------------------------------------------------------------
    The dev panel is a hidden overlay used during development to
    export/import state and run health checks.  It becomes visible
    when the build stamp is tapped multiple times.  These styles
    ensure the panel remains unobtrusive when hidden and easy to
    interact with when shown.
  ===================================================================== */
#vs-dev-panel{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 2px solid #36AB9C;
  padding: 12px;
  z-index: 100000;
  font-size: 14px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  max-height: 50vh;
  overflow-y: auto;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.08);
  display: none;
}
#vs-dev-panel.show{
  display: block;
}
#vs-dev-panel h2{
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 600;
}
#vs-dev-panel textarea{
  width: 100%;
  min-height: 80px;
  resize: vertical;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: monospace;
  margin-top: 6px;
}
#vs-dev-panel button{
  margin-top: 8px;
  margin-right: 8px;
  padding: 6px 12px;
  font-size: 0.85rem;
  border: 1px solid #36AB9C;
  background: #36AB9C;
  color: #ffffff;
  border-radius: 4px;
  cursor: pointer;
}
#vs-dev-panel button:hover{
  background: #2c8a7a;
  border-color: #2c8a7a;
}

/*
 * PR‑1: View switcher styling
 *
 * The view switcher uses the existing chip styles to present a
 * compact set of buttons for switching between schedule views.  A
 * flex layout spaces the chips evenly.  The active chip uses the
 * brand colour to indicate selection.  Accessible state is
 * represented via aria‑pressed attributes.
 */
.vs-view-switcher {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* PR‑4: Modern, lighter "tabs" for Build/List/Focus */
.vs-view-switcher--tabs{
  margin: 8px auto 6px;
  padding: 0 4px;
  width: 100%;
  max-width: 680px;
  justify-content: flex-start;
}
.vs-view-chip{
  cursor: pointer;
  padding: 6px 10px;
  font-size: .84rem;
  line-height: 1.1;
  border-color: rgba(100,116,139,.28);
}
/* Keep active state subtle (no solid brand block) */
.vs-view-chip[data-active="true"]{
  background: rgba(54,171,156,.14);
  border-color: rgba(54,171,156,.50);
  color: var(--vs-ink);
}

/*
 * PR‑2: List view styles
 *
 * These rules style the list projection for viewing a day’s activities.
 * Controls are aligned using flexbox and reuse the chip styling for
 * toggles.  Rows are simple flex lines that contain the activity
 * icon, label, optional time chip and action buttons.  Section
 * headings utilise a muted uppercase label.
 */
#vs-list-view { padding: 6px 12px 16px; }
#vs-list-view .vs-list-shell { width: min(100%, 680px); margin: 0 auto; }
#vs-list-view .vs-list-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 10px;
  padding-bottom: 0;
  overflow: visible;
  align-items: center;
  justify-content: flex-start;
}
#vs-list-view .vs-list-controls .chip {
  cursor: pointer;
  min-height: 34px;
  max-width: 100%;
  padding: 6px 10px;
  border-color: rgba(148, 163, 184, 0.45);
  background: rgba(255, 255, 255, 0.92);
  color: var(--vs-muted);
  font-size: 0.77rem;
  font-weight: 700;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}
#vs-list-view .vs-list-controls .chip:hover {
  border-color: rgba(100, 116, 139, 0.55);
  color: var(--vs-ink);
}
#vs-list-view .vs-list-controls .chip[data-active="true"] {
  background: rgba(54, 171, 156, 0.08);
  border-color: rgba(54, 171, 156, 0.3);
  color: var(--vs-ink);
}
#vs-list-view .vs-list-controls .chip:focus-visible {
  outline: 2px solid rgba(54, 171, 156, 0.22);
  outline-offset: 2px;
}
/* List sort select removed */
.vs-list-container { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 480px) {
  #vs-list-view .vs-list-controls .chip {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
  }
}
@media (min-width: 700px) {
  #vs-list-view { padding: 8px 18px 20px; }
  #vs-list-view .vs-list-shell { width: min(100%, 760px); }
  #vs-list-view .vs-list-controls { margin-bottom: 11px; }
  #vs-list-view .vs-list-controls .chip {
    min-height: 35px;
    padding-inline: 11px;
  }
}
@media (min-width: 1100px) {
  #vs-list-view { padding-top: 10px; }
  #vs-list-view .vs-list-shell { width: min(100%, 840px); }
  #vs-list-view .vs-list-controls {
    gap: 6px;
    margin-bottom: 10px;
  }
  #vs-list-view .vs-list-controls .chip {
    min-height: 33px;
    font-size: 0.76rem;
  }
}
.vs-list-section {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vs-muted);
  margin-top: 18px;
  margin-bottom: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(148, 163, 184, 0.16);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.vs-list-container > .vs-list-section:first-child {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0;
}
.vs-list-section-label {
  min-width: 0;
}
.vs-list-section .ttsSectionBtn {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  color: var(--vs-muted);
  opacity: 0.88;
}
.vs-list-row {
  display: grid;
  grid-template-columns: 30px 20px minmax(0, 1fr) auto 24px;
  align-items: start;
  column-gap: 10px;
  row-gap: 5px;
  padding: 12px 2px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.2);
  cursor: pointer;
  user-select: none;
  position: relative;
}
.vs-list-row > * { min-width: 0; }
.vs-list-row:hover { background: rgba(15, 23, 42, 0.018); }
.vs-list-row .vs-list-check {
  grid-column: 1;
  align-self: center;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid rgba(148, 163, 184, 0.42);
  border-radius: 9px;
  background: #fff;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 0;
  line-height: 1;
}
.vs-list-row .vs-list-check:focus { outline: 2px solid rgba(54,171,156,0.35); outline-offset: 2px; }
.vs-list-row.is-completed .vs-list-check { background: var(--vs-brand); border-color: var(--vs-brand); }

.vs-list-row.vs-removing { opacity: 0.55; transform: translateY(-2px); transition: opacity 140ms ease, transform 140ms ease; }
.vs-list-row .item-icon {
  grid-column: 2;
  align-self: start;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  margin-top: 3px;
  position: relative;
  z-index: 0;
}
.vs-list-row .item-icon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 10px;
  background: rgba(148, 163, 184, 0.13);
  z-index: -1;
}
.vs-list-row .item-label {
  grid-column: 3;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.4;
  font-weight: 600;
}
.vs-list-row.is-completed .item-label {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(100, 116, 139, 0.55);
  opacity: 0.74;
}
.vs-list-row.is-completed .item-icon { opacity: 0.66; }
.vs-list-row.is-completed .item-icon::before { background: rgba(148, 163, 184, 0.1); }
.vs-list-row.is-completed .item-time { opacity: 0.7; }
.vs-list-row .item-time {
  grid-column: 4;
  align-self: center;
  justify-self: end;
  font-size: 0.82rem;
  color: var(--vs-muted);
  white-space: nowrap;
  padding-left: 4px;
}
.vs-list-row .ttsBtn {
  grid-column: 5;
  align-self: center;
  justify-self: end;
  width: 24px;
  height: 24px;
  margin-left: 0;
  opacity: 0.88;
}
@media (min-width: 700px) and (max-width: 1099px) {
  .vs-list-section {
    margin-top: 19px;
    margin-bottom: 7px;
  }
  .vs-list-row {
    grid-template-columns: 30px 22px minmax(0, 1fr) auto 24px;
    column-gap: 12px;
    row-gap: 6px;
    padding: 13px 2px;
  }
  .vs-list-row .item-icon { width: 22px; height: 22px; font-size: 18px; margin-top: 2px; }
  .vs-list-row .item-icon::before { inset: -6px; border-radius: 11px; }
  .vs-list-row .item-label { font-size: 1rem; line-height: 1.42; }
}
@media (min-width: 1100px) {
  .vs-list-section {
    margin-top: 16px;
    margin-bottom: 6px;
    padding-top: 9px;
  }
  .vs-list-row {
    grid-template-columns: 28px 24px minmax(0, 1fr) auto 22px;
    column-gap: 11px;
    row-gap: 4px;
    padding: 11px 2px;
  }
  .vs-list-row .vs-list-check { width: 28px; height: 28px; border-radius: 8px; }
  .vs-list-row .item-icon { width: 24px; height: 24px; font-size: 19px; margin-top: 1px; }
  .vs-list-row .item-icon::before { inset: -6px; border-radius: 11px; }
  .vs-list-row .item-label { font-size: 0.98rem; line-height: 1.36; }
  .vs-list-row .ttsBtn { width: 22px; height: 22px; }
}
.vs-list-empty { text-align: center; padding: 30px 10px; color: var(--vs-muted); }
.vs-list-empty p { margin-bottom: 8px; font-size: 0.95rem; }
.vs-list-empty button { margin: 6px; }
.item-menu { z-index: 2147483647; }

/*
 * PR‑3: Focus view styles
 *
 * The focus view uses card‑like containers to emphasise the current
 * and next activities.  Additional spacing and border highlights
 * guide the eye.  The remaining count and actions row sit below
 * the cards.  When no activities remain an All Done state is
 * centred with a simple call to action.
 */
/* PR-7: Focus View weight reduction (visual-only)
   Goal: slightly tighter rhythm + less "header" feel while keeping behavior intact. */
#vs-focus-view { padding: 0; }

/* PR-FOCUS-LAYOUT-1: Premium large-screen Focus column (Focus-only).
   - Mobile remains full-width.
   - iPad landscape/desktop gets a centered column so cards don't stretch edge-to-edge. */
#vs-focus-view .vs-focus-wrap{
  width: 100%;
  margin: 0 auto;
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  /* PR-FM-2: tighter overall Focus rhythm */
  gap: 10px;
}
@media (min-width: 900px){
  #vs-focus-view .vs-focus-wrap{
    max-width: 760px;
    padding-left: 22px;
    padding-right: 22px;
  }
}
@media (min-width: 1200px){
  #vs-focus-view .vs-focus-wrap{ max-width: 780px; }
}
.vs-focus-card { border: 1px solid var(--vs-line); border-radius: 12px; background: #fff; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.vs-focus-now { border-color: var(--vs-brand); }

/* PR-FOCUS-LAYOUT-3: Subtle “premium” polish for large screens (Focus-only)
   - Wrapper already constrains width; this just refines card proportions.
   - Keep changes minimal to avoid shifting mobile feel. */
@media (min-width: 900px){
  #vs-focus-view .vs-focus-card{
    padding: 12px 14px;
    gap: 7px;
  }
  /* NEXT card: slightly roomier row so label/time don't feel cramped */
  #vs-focus-view .vs-focus-next-preview .card-body{ gap: 12px; }

  /* Prevent “giant Done bar” feel on wide screens (button stays full-width in card) */
  #vs-focus-view .vs-focus-now .card-actions .btn{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
}

/* PR‑FOCUS‑IMM2: Subtle NOW “lift” when immersive is active */
html.vs-focus-immersive .vs-focus-now{
  /* stronger depth without changing layout (no transform = no conflict) */
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.06);
  /* gentle brand halo (non-intrusive) */
  outline: 1px solid rgba(54, 171, 156, 0.18);
  outline-offset: 0;
}

/* Optional: slightly de-emphasize NEXT card in immersive (keep subtle) */
html.vs-focus-immersive .vs-focus-next-preview{
  opacity: 0.88;
}

.vs-focus-card .card-body { display: flex; align-items: center; gap: 12px; }
.vs-focus-card .item-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 23px; }
.vs-focus-card .item-label {
  flex: 1;
  font-weight: 680;
  font-size: clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  line-height: 1.18;
}
.vs-focus-card .item-time { font-size: 0.84rem; color: var(--vs-muted); white-space: nowrap; }

/* PR‑FC2: NOW dominant + NEXT preview */
.vs-focus-card .item-main{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.vs-focus-card .item-kicker{
  font-size: clamp(0.72rem, 0.69rem + 0.1vw, 0.8rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--vs-muted);
  font-weight:780;
}
/* PR‑FC3: progress row + subtle ring around NOW icon */
.vs-focus-card .item-kicker-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vs-focus-card .item-progress{
  font-size: clamp(0.78rem, 0.75rem + 0.08vw, 0.84rem);
  color: var(--vs-muted);
  font-weight:680;
  white-space:nowrap;
}
.vs-focus-card .item-icon-wrap{ position:relative; width:34px; height:34px; display:flex; align-items:center; justify-content:center; flex:0 0 34px; }
.vs-focus-card .item-icon-wrap .item-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:23px; width:34px; height:34px; }
.vs-focus-progress-ring{ position:absolute; inset:0; width:34px; height:34px; transform: rotate(-90deg); }
.vs-focus-progress-ring circle{ fill:none; stroke-width:2.5; }
.vs-focus-ring-bg{ stroke: rgba(148,163,184,.30); }
.vs-focus-ring-fg{ stroke: var(--vs-brand); stroke-linecap: butt; stroke-dasharray: 0 360; stroke-dashoffset: 0; }

/* Focus NOW emphasis (visual schedule): make the active icon + ring more prominent */
.vs-focus-now .item-icon-wrap{ width:44px; height:44px; flex:0 0 44px; }
.vs-focus-now .item-icon-wrap .item-icon{ width:44px; height:44px; font-size:28px; }
.vs-focus-now .vs-focus-progress-ring{ width:44px; height:44px; }
.vs-focus-now .vs-focus-progress-ring circle{ stroke-width:3.5; }
.vs-focus-now .vs-focus-ring-bg{ stroke: rgba(148,163,184,.28); }

/* PR-FOCUS-RING1: HERO LAYOUT (markup + CSS only; no timer behavior changes) */
.vs-focus-now .card-body{ flex-direction: column; align-items: center; gap: 8px; }
.vs-focus-now .item-main{
  width: 100%;
  max-width: min(100%, 34rem);
  margin-inline: auto;
  gap: 6px;
}
.vs-focus-now .item-kicker-row{
  width: 100%;
  align-items: center;
  gap: 8px;
}
.vs-focus-now .item-label{
  font-size: clamp(1.08rem, 0.98rem + 0.55vw, 1.38rem);
  font-weight: 730;
  text-align: center;
  text-wrap: balance;
}
.vs-focus-now .item-time{
  align-self: center;
  font-size: clamp(0.84rem, 0.8rem + 0.14vw, 0.92rem);
}

/* Bigger hero ring (responsive) while keeping existing SVG geometry */
.vs-focus-now .item-icon-wrap{
  /* PR-FM-1: Bigger hero ring across all screens */
  width: clamp(112px, 44vw, 170px);
  height: clamp(112px, 44vw, 170px);
  flex: 0 0 auto;
}
.vs-focus-now .item-icon-wrap .item-icon{
  width: 100%;
  height: 100%;
  font-size: clamp(54px, 15vw, 78px);
}
.vs-focus-now .vs-focus-progress-ring{ width: 100%; height: 100%; }
.vs-focus-now .vs-focus-progress-ring circle{ stroke-width: 4; }

/* PR-FC-LAYOUT: Responsive NOW card on wider screens
   Problem: the NOW card can get very wide while the hero ring stays small,
   making the UI feel stretched. On wider screens we:
   - cap the Focus column a bit more
   - switch NOW card body to a 2-col grid (ring + content)
   - scale ring/icon up so it becomes the visual “star”
   Mobile behavior stays unchanged. */
@media (min-width: 720px){
  /* Don’t let Focus become a giant banner */
  #vs-focus-view .vs-focus-wrap{ max-width: 700px; }

  /* Keep the stacked (ring-on-top) layout, but let the card breathe */
  #vs-focus-view .vs-focus-now .card-body{ gap: 12px; }

  /* Let the ring be the hero */
  #vs-focus-view .vs-focus-now .item-icon-wrap{
    width: clamp(190px, 22vw, 300px);
    height: clamp(190px, 22vw, 300px);
    justify-self: center;
  }
  #vs-focus-view .vs-focus-now .item-icon-wrap .item-icon{
    font-size: clamp(70px, 7.2vw, 112px);
  }

}

/* Immersive-only uplift (still safe; no layout rewrites) */
html.vs-focus-immersive .vs-focus-now .item-icon-wrap{
  width: clamp(122px, 48vw, 188px);
  height: clamp(122px, 48vw, 188px);
}
@media (min-width: 720px){
  html.vs-focus-immersive #vs-focus-view .vs-focus-now .item-icon-wrap{
    width: clamp(210px, 23vw, 320px);
    height: clamp(210px, 23vw, 320px);
  }
}

/* PR-FM-2: stronger grouping in Focus overall, with extra tightening in immersive */
.vs-focus-now .card-actions{
  width: 100%;
  max-width: min(100%, 30rem);
  margin: 2px auto 0;
}
.vs-focus-now .card-actions .btn{
  min-height: 46px;
  font-size: clamp(1rem, 0.96rem + 0.12vw, 1.06rem);
}
.vs-focus-now .item-timer{
  margin-top: 0.15rem;
  font-size: clamp(0.9rem, 0.86rem + 0.1vw, 0.96rem);
  text-align: center;
}
.vs-focus-timer-start-row{
  margin-top: 0.1rem;
  justify-content: center;
}
.vs-focus-timer-start-row .btn.small,
.vs-focus-now .vs-timer-actions .btn.small{
  font-size: clamp(0.88rem, 0.85rem + 0.1vw, 0.94rem);
}
.vs-focus-now .vs-timer-row{
  justify-content: center;
}
.vs-focus-next-preview .item-main{ gap: 3px; }
.vs-focus-next-preview .item-label{
  font-size: clamp(0.98rem, 0.95rem + 0.14vw, 1.04rem);
  line-height: 1.16;
}
.vs-focus-next-preview .item-kicker{
  font-size: clamp(0.7rem, 0.67rem + 0.08vw, 0.76rem);
}
.vs-focus-next-preview .item-progress,
.vs-focus-next-preview .item-time{
  font-size: clamp(0.74rem, 0.71rem + 0.08vw, 0.8rem);
}
html.vs-focus-immersive #vs-focus-view .vs-focus-wrap{ gap: 10px; }
html.vs-focus-immersive .vs-focus-now .card-body{ gap: 7px; }
html.vs-focus-immersive .vs-focus-now .item-main{ max-width: min(100%, 31rem); }
html.vs-focus-immersive .vs-focus-now .card-actions{ margin-top: 0; }

/* Overlay elements (hidden by default; wired in later PRs) */
.vs-focus-ring-time{
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  /* PR-FM-6h: make the in-ring timer text more legible (responsive). */
  font-size: clamp(20px, 7vw, 36px);
  color: var(--vs-ink);
  text-shadow: 0 1px 2px rgba(0,0,0,.08);
  pointer-events: none;
  opacity: 0;
  text-align: center;
  padding: 6px;
}

/* Timer-done state: success checkmark overlay (keeps ring visible underneath) */
.vs-focus-ring-time.vs-focus-ring-time--done{
  /* Stay centered; do not change layout sizing */
  flex-direction: row;
  gap: 0;
  line-height: 1;
}

.vs-focus-ring-time.vs-focus-ring-time--done .vs-ring-done{
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(56px, 22vw, 128px);
  height: clamp(56px, 22vw, 128px);
  border-radius: 999px;
}

.vs-focus-ring-time.vs-focus-ring-time--done .vs-ring-done-scrim{
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.66);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.vs-focus-ring-time.vs-focus-ring-time--done .vs-ring-done-check{
  position: relative;
  z-index: 1;
  font-weight: 900;
  font-size: clamp(34px, 12vw, 72px);
  color: var(--vs-brand);
  text-shadow: 0 1px 2px rgba(0,0,0,.10);
}
.vs-focus-icon-scrim{
  position: absolute;
  /* PR-FM-6d: keep the wedge on the same center/start-angle geometry as the
     timer ring. The scrim now fills the full hero circle and sits *under* the
     ring but *over* the icon, so the ring arc stays crisp while the reveal
     wedge lines up with the timer sweep on mobile Safari too. */
  inset: 0;
  z-index: 2;
  border-radius: 999px;
  background:
    conic-gradient(
      from 0deg,
      transparent 0deg var(--vs-reveal-angle, 360deg),
      rgba(255,255,255,.78) var(--vs-reveal-angle, 360deg) 360deg
    );
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms linear;
}

.vs-focus-now .item-icon-wrap{ isolation: isolate; }
.vs-focus-now .vs-focus-progress-ring{ position: absolute; inset: 0; z-index: 3; }
.vs-focus-now .item-icon-wrap .item-icon{ position: absolute; inset: 0; z-index: 1; }

/* PR‑TDONE‑3: soft one-shot pulse on ring completion */
@keyframes vsDonePulse{
  0%{ transform: scale(1); }
  45%{ transform: scale(1.04); }
  100%{ transform: scale(1); }
}
.vs-timer-done-pulse{ animation: vsDonePulse 520ms ease-out 1; }
@media (prefers-reduced-motion: reduce){
  .vs-focus-icon-scrim{ transition: none; }
  .vs-timer-done-pulse{ animation: none; }
}

/* PR-FM-5: keep the icon stable; the timer scrim now handles the wedge reveal. */
.vs-focus-now .item-icon-wrap .item-icon{
  transition: none;
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: reduce){
  .vs-focus-now .item-icon-wrap .item-icon{ transition: none; }
}


.vs-focus-next-preview{ opacity:0.92; }
.vs-focus-next-preview .item-icon{ width:22px; height:22px; font-size:20px; opacity:0.85; }
.vs-focus-next-preview .item-label{ font-weight:620; font-size:0.94rem; }
.vs-focus-next-preview.is-empty{ border-style:dashed; cursor:pointer; }
.vs-focus-next-preview.is-empty:hover{ background:rgba(148,163,184,.10); }

/* PR‑FC4: Calm completion transition (Focus) */
.vs-focus-now.is-completing{
  opacity: 0.96;
}
.vs-focus-now.is-completing .item-label{
  opacity: 0.85;
}
.vs-focus-card .btn.is-complete{
  cursor: default;
}

/* Gentle promote animation after Done (kept subtle, no big motion) */
.vs-focus-now.vs-advance-in{
  animation: vsFocusAdvanceIn 240ms ease-out both;
}
.vs-focus-next-preview.vs-advance-in{
  animation: vsFocusNextPreviewIn 240ms ease-out both;
}
@keyframes vsFocusAdvanceIn{
  from{ transform: translateY(6px); opacity: 0.92; }
  to{ transform: translateY(0); opacity: 1; }
}
@keyframes vsFocusNextPreviewIn{
  from{ transform: translateY(2px); opacity: 0.90; }
  to{ transform: translateY(0); opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce){
  .vs-focus-now.vs-advance-in,
  .vs-focus-next-preview.vs-advance-in{
    animation: none !important;
  }
}

/* Focus overflow menu */
.vs-focus-menu-items{ display:flex; flex-direction:column; gap:6px; margin: 2px 0 10px; }
.vs-focus-menu-item{ width:100%; justify-content:flex-start; text-align:left; }
.vs-focus-menu-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vs-focus-menu-value{ color: var(--vs-muted, #64748b); font-size: 0.86em; }

/* Timer controls (compact row) */
.vs-focus-menu-timer-actions{
  display:flex;
  align-items:stretch;
  gap:10px;
}
.vs-focus-menu-timer-btn{
  flex:1 1 0;
  justify-content:center;
  text-align:center;
  min-height:44px;              /* mobile tap target */
  padding: 10px 12px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}
.vs-focus-menu-timer-btn::before{
  display:inline-block;
  width: 1.1em;
  text-align:center;
  opacity: 0.9;
  transform: translateY(-0.5px);
}
button.vs-focus-menu-timer-btn[data-action="timer_primary"][data-timer-mode="start"]::before{ content:"▶"; }
button.vs-focus-menu-timer-btn[data-action="timer_primary"][data-timer-mode="pause"]::before{ content:"⏸"; }
button.vs-focus-menu-timer-btn[data-action="timer_primary"][data-timer-mode="resume"]::before{ content:"▶"; }
button.vs-focus-menu-timer-btn[data-action="timer_stop"]::before{ content:"⏹"; }

@media (max-width: 420px){
  .vs-focus-menu-timer-btn{ padding: 10px 10px; font-size: 0.98em; }
}

.vs-focus-menu-divider{ height:1px; background: var(--line, #e5e7eb); opacity:.7; margin: 2px 0; }
.vs-focus-card .card-actions { display: flex; gap: 8px; }
.vs-focus-card .card-actions .btn { flex: 1; }
.vs-focus-now .card-actions{ display:block; }
.vs-focus-now .card-actions .btn{ width:100%; }
.vs-focus-remaining { text-align: center; font-size: 0.72rem; color: var(--vs-muted); opacity: 0.9; margin-top: 2px; }
.vs-focus-remaining.vs-focus-remaining--one{ opacity: 0.75; }
.vs-focus-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; }
.vs-focus-add-next { text-align: center; }
.vs-focus-add-next button { margin-top: 4px; }
.vs-focus-all-done { text-align: center; font-size: 1rem; color: var(--vs-muted); }
.vs-focus-all-done p { margin-bottom: 8px; }
.vs-focus-all-done button { margin-top: 4px; }

/* PR‑FC1.1: Focus shell mode — hide global chrome ONLY when immersive Focus is active */
html.vs-focus-immersive .vs-appbar{ display:none !important; }
html.vs-focus-immersive .vs-bottom-nav{ display:none !important; }
html.vs-focus-immersive .vs-install-strip{ display:none !important; }
html.vs-focus-immersive #schedule-builder .board-header{ display:none !important; }
html.vs-focus-immersive #schedule-builder .controls{ display:none !important; }

/* Remove the extra bottom-nav padding while in Focus so content sits naturally */
html.vs-focus-immersive .app-main{
  padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

/* PR‑FOCUS‑IMM1: Immersive Focus scrim (dim background outside cards) */
html.vs-focus-immersive .app-main{
  position: relative; /* anchor stacking */
  z-index: 0;
}
html.vs-focus-immersive .app-main::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none; /* CRITICAL: do not block taps */
  /* soft “tunnel focus” vignette (center stays a bit brighter) */
  background: radial-gradient(ellipse at 50% 30%,
    rgba(15, 23, 42, 0.06) 0%,
    rgba(15, 23, 42, 0.14) 55%,
    rgba(15, 23, 42, 0.18) 100%);
  z-index: 1;
}

/* Keep Focus content above the scrim */
html.vs-focus-immersive #vs-focus-view{
  position: relative;
  z-index: 2;
}

/* Focus top bar (inside Focus view) */
#vs-focus-view .vs-focus-topbar{
  position: sticky;
  /* iOS safe-area: keep the sticky controls below the notch/status bar */
  top: var(--vs-safe-top, 0px);
  z-index: 5;
  /* PR-FC9: layout-only container (no full-width background strip) */
  padding: 6px 2px 10px;
  background: transparent;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* PR-FC9: smaller inner wrapper behind just the controls (floating pill) */
#vs-focus-view .vs-focus-topbar-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(247,247,247,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: var(--shadow);
  max-width: clamp(280px, 92vw, 680px);
  margin-inline: auto;
}

/* PR-FOCUS-LAYOUT-2: explicit left/right containers keep alignment stable
   across wide screens and future additions. */
#vs-focus-view .vs-focus-topbar-left,
#vs-focus-view .vs-focus-topbar-right{
  display:flex;
  align-items:center;
  gap: 10px;
}

/* PR-FC11: iOS Safari can sometimes render “ghost” clipped shapes when
   sticky + rounded + backdrop-filter elements sit beside pill buttons.
   Keep overflow visible so the button isn't clipped into a phantom edge. */
#vs-focus-view .vs-focus-topbar-right{ overflow: visible; }
#vs-focus-view .vs-focus-topbar .vs-focus-more{
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

/* PR-FC12: Non-immersive Focus should show an explicit "Focus options" label.
   Keep the compact ellipsis affordance in immersive mode. */
#vs-focus-view .vs-focus-topbar .vs-focus-more.is-labeled{
  width: auto;
  min-width: 0;
  height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

#vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle{
  white-space: nowrap;
  line-height: 1;
  padding: 10px 12px;
  border-radius: 999px;

  /* PR-FC11: compositor hardening to prevent iOS “ghost button” artifacts */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  position: relative;
  isolation: isolate;
}

#vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle.is-back-arrow{
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
}
#vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle .vs-focus-back-arrow{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  transform: translateX(-0.5px);
}
#vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle.is-back-arrow[data-lock-indicator="true"]::after{
  content: '🔒';
  position: absolute;
  right: -2px;
  bottom: -2px;
  font-size: 11px;
  line-height: 1;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.96);
  box-shadow: 0 1px 2px rgba(15,23,42,.10);
}
@media (max-width: 420px){
  #vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle{
    padding: 10px 10px;
    font-size: 12px;
  }
}

/* PR-FC11: If iOS Safari still shows a “ghost” beside Exit Focus Mode,
   remove backdrop-filter in immersive while keeping the premium look. */
@supports (-webkit-touch-callout: none) {
  html.vs-focus-immersive #vs-focus-view .vs-focus-topbar-inner{
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(247,247,247,0.96);
  }
}


/* PR-FOCUS-IMM-UI-1: make Focus Mode feel lighter so the NOW card owns the screen.
   - Remove the dashed print-area frame only while immersive Focus is active.
   - Strip the floating top-bar shell back to bare controls in immersive mode.
   - Keep button hit targets intact; visual-only change, no logic changes. */
html.vs-focus-immersive .print-area{
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

html.vs-focus-immersive #vs-focus-view .vs-focus-wrap{
  padding-left: 0;
  padding-right: 0;
  gap: 10px;
}

html.vs-focus-immersive #vs-focus-view .vs-focus-topbar{
  padding: 2px 0 4px;
}

html.vs-focus-immersive #vs-focus-view .vs-focus-topbar-inner{
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  max-width: 100%;
}

html.vs-focus-immersive #vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle,
html.vs-focus-immersive #vs-focus-view .vs-focus-topbar .vs-focus-more{
  background: rgba(255,255,255,0.78);
  border-color: rgba(100,116,139,.18);
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}

html.vs-focus-immersive #vs-focus-view .vs-focus-topbar .vs-focus-immersive-toggle:hover,
html.vs-focus-immersive #vs-focus-view .vs-focus-topbar .vs-focus-more:hover{
  background: rgba(255,255,255,0.92);
}







/* PR-FT1: First–Then export controls in Focus (Now/Next) view */
.vs-focus-export-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top: 2px;
}
.vs-focus-ftmenu-wrap{
  position: relative;
}
.vs-focus-ftmenu{
  position:absolute;
  right:0;
  top: calc(100% + 6px);
  background:#fff;
  border:1px solid var(--vs-line);
  border-radius: 12px;
  box-shadow: var(--vs-shadow);
  padding: 6px;
  min-width: 240px;
  z-index: 60;
}
.vs-focus-ftmenu-item{
  width:100%;
  text-align:left;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  font: inherit;
  cursor: pointer;
}
.vs-focus-ftmenu-item:hover{
  background: rgba(54,171,156,.08);
}
.vs-focus-ftmenu-item:disabled{
  cursor: not-allowed;
  opacity: .55;
}

/* PR-FT2: First–Then export board (print + PNG) */
.vs-ft-paper{
  /* off-screen paper mount used for deterministic exports */
  position: fixed;
  left: -100000px;
  top: 0;
  overflow: hidden;
  padding: 48px; /* ~0.5" margin at 96 CSS px/in */
  box-sizing: border-box;
  background: #fff;
}

.vs-first-then-board{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  gap: 18px;
  padding: 0;
  box-sizing: border-box;
}

/* Orientation */
.vs-first-then-board.is-portrait{
  flex-direction: column;
}
.vs-first-then-board.is-landscape{
  flex-direction: row;
}

/* Panels */
.vs-first-then-panel{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 22px 18px;
  box-sizing: border-box;
}

/* Headings */
.vs-first-then-head{
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 22px;
  color: var(--vs-ink);
}

/* Icon sizing: ~1.8x the typical schedule export icon, with responsive clamps */
.vs-first-then-icon{
  width: clamp(150px, 26vw, 240px);
  height: clamp(150px, 26vw, 240px);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(132px, 24vw, 215px);
  line-height: 1;
}

/* Label (optional) */
.vs-first-then-label{
  font-weight: 750;
  font-size: 22px;
  text-align: center;
  color: var(--vs-ink);
  max-width: 28ch;
}
.vs-first-then-board.hide-label .vs-first-then-label{
  display:none;
}

/* Playful mode: soft background + gentle panel tint + rounded corners */
.vs-first-then-board.is-playful{
  background: transparent;
  border: 0;
  border-radius: 0;
}
.vs-first-then-board.is-playful .vs-first-then-panel{
  background: rgba(54,171,156,.06);
  border: 1px solid rgba(54,171,156,.20);
  border-radius: 18px;
}

/* Discreet mode: clean white + thin divider + minimal styling */
.vs-first-then-board.is-discreet{
  background: #fff;
  border: 1px solid var(--vs-line);
  border-radius: 14px;
  padding: 0;
  gap: 0;
  overflow: hidden;
}
.vs-first-then-board.is-discreet .vs-first-then-panel{
  border: 0;
  border-radius: 0;
  background: #fff;
  padding: 22px 16px;
}
.vs-first-then-board.is-discreet.is-portrait .vs-first-then-panel + .vs-first-then-panel{
  border-top: 1px solid var(--vs-line);
}
.vs-first-then-board.is-discreet.is-landscape .vs-first-then-panel + .vs-first-then-panel{
  border-left: 1px solid var(--vs-line);
}

/* PR-FT-LAYOUT-1: Tile layout variant (opt-in) */
.vs-first-then-board.is-tiles{
  /* constrain the overall board so it doesn't look like two wide rows */
  width: 100%;
  max-width: 1100px; /* board wrapper only */
  margin: 0 auto;
  padding: 18px;
  box-sizing: border-box;

  display: grid;
  gap: 16px;
  justify-items: center; /* center tiles */
  align-content: start;
}

/* Orientation as grid */
.vs-first-then-board.is-tiles.is-portrait{
  grid-template-columns: 1fr;
}
.vs-first-then-board.is-tiles.is-landscape{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Panels become square-ish tiles */
.vs-first-then-board.is-tiles .vs-first-then-panel{
  width: min(100%, 520px);         /* prevents “accidental wide” */
  aspect-ratio: 1 / 1;             /* makes it feel intentional */
  padding: 18px 18px 14px;
  gap: 10px;

  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: rgba(54,171,156,.06);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);

  display: grid;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-items: center;
  text-align: center;
}

/* Head (FIRST/THEN) tighter and slightly smaller */
.vs-first-then-board.is-tiles .vs-first-then-head{
  font-size: 16px;
  letter-spacing: .14em;
  opacity: .85;
}

/* Icon + label bigger */
.vs-first-then-board.is-tiles .vs-first-then-icon{
  width: clamp(140px, 22vw, 220px);
  height: clamp(140px, 22vw, 220px);
  font-size: clamp(124px, 20vw, 200px);
  margin: 6px 0 2px;
}
.vs-first-then-board.is-tiles .vs-first-then-label{
  font-size: 26px;
  font-weight: 850;
  line-height: 1.15;
  max-width: 22ch;
  padding: 0 10px 6px;
}

/* PR-FT-VISUAL-AID-1: Make tile contents BIG + OBVIOUS for print/export captures */
body.vs-ft-exporting .vs-first-then-board.is-tiles .vs-first-then-head{
  font-size: 24px;           /* bigger FIRST/THEN (scaled for stacked print) */
  letter-spacing: .12em;
  opacity: 1;
}

body.vs-ft-exporting .vs-first-then-board.is-tiles .vs-first-then-icon{
  /* Deterministic export sizing (no vw clamps) so output is consistent
     across iOS/Android/Desktop when rendered into a fixed paper mount. */
  /* NOTE: After PR-FT poster/high-res changes, stacked (portrait) tiles became too large.
     These deterministic sizes target ~75% page fill on US Letter while staying readable. */
  width: 300px;
  height: 300px;
  font-size: 285px;
  margin: 0;
}

body.vs-ft-exporting .vs-first-then-board.is-tiles .vs-first-then-label{
  font-size: 32px;           /* bigger activity text (scaled down for stacked print) */
  font-weight: 900;          /* bold */
  line-height: 1.12;
  max-width: 18ch;           /* prevents “paragraph” feel */
  padding: 0 12px 2px;
}

/* PR-FT-VISUAL-AID-1: tighter tile spacing during export */
body.vs-ft-exporting .vs-first-then-board.is-tiles .vs-first-then-panel{
  /* tighter interior spacing so larger icons still fit within the same tile */
  padding: 12px 12px 8px;
  gap: 6px;
}

/* PR-FT-VISUAL-AID-2: give export renderer more "canvas room" (prevents clipping) */
body.vs-ft-exporting .vs-first-then-board.is-tiles .vs-first-then-panel{
  width: min(100%, 420px);
}

/* Playful vs discreet compatibility */
.vs-first-then-board.is-tiles.is-playful .vs-first-then-panel{
  background: rgba(54,171,156,.06);
  border-color: rgba(54,171,156,.22);
}

.vs-first-then-board.is-tiles.is-discreet{
  background: transparent;
  border: 0;
  padding: 18px;
  gap: 16px;
}
.vs-first-then-board.is-tiles.is-discreet .vs-first-then-panel{
  background: #fff;
  border: 2px solid rgba(15, 23, 42, 0.16);
  box-shadow: none;
}

/* Small-screen safety */
@media (max-width: 420px){
  /*
    Small-screen safety for *in-app* preview only.
    When exporting/printing we intentionally want a larger board even on phones,
    because the output is being captured to an image/page-sized print.
  */
  body:not(.vs-ft-exporting) .vs-first-then-board.is-tiles{ padding: 12px; }
  body:not(.vs-ft-exporting) .vs-first-then-board.is-tiles .vs-first-then-panel{ width: min(100%, 380px); }
  body:not(.vs-ft-exporting) .vs-first-then-board.is-tiles .vs-first-then-label{ font-size: 24px; }
}


/* Focus menu checkbox row */
.vs-focus-ftmenu-check{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  cursor: pointer;
  user-select: none;
  border-radius: 10px;
  color: var(--vs-ink);
}
.vs-focus-ftmenu-check input{
  width: 16px;
  height: 16px;
  margin: 0;
}
.vs-focus-ftmenu-check:hover{
  background: rgba(54,171,156,.08);
}

/* Print isolation: only print the First–Then board when requested */
#vs-first-then-print{
  display:none;
}

/* Off-screen mount for First–Then PNG export (must remain renderable for html2canvas) */
#vs-first-then-export-mount{
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1400px;
  max-width: none;
  pointer-events: none;
}
@media print{
  @page{ margin: 10mm; }

  /* Remove the entire app UI from the print layout so we don't get extra blank pages */
  body.vs-print-first-then > *:not(#vs-first-then-print){
    display: none !important;
  }

  body.vs-print-first-then #vs-first-then-print{
    /* In print engines, `vh` units can trigger a phantom extra page.
       Keep sizing content-driven and avoid flex centering quirks. */
    display: block !important;
    padding: 0;
    background: #fff;
    min-height: auto;
    height: auto;
  }

  /* When First–Then print uses an <img> mount (data URL), force full-width
     scaling across iOS/Android/Desktop print engines. */
  body.vs-print-first-then #vs-first-then-print img{
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    display: block !important;
    margin: 0 !important;
  }

  body.vs-print-first-then .vs-first-then-board{
    max-width: none;
    width: 100%;
    padding: 0;
    align-content: center; /* helps center when tiles */
  }

  /* Print-friendly tile styling */
  body.vs-print-first-then .vs-first-then-board.is-tiles .vs-first-then-panel{
    box-shadow: none;
    border: 2px solid rgba(15, 23, 42, 0.18);
    background: #f3fbf8;
  }

  /* Let aspect-ratio drive sizing; avoid forcing extra height */
  body.vs-print-first-then .vs-first-then-panel{
    min-height: auto;
  }
}


/* =========================
   First–Then Export Modal (PR-FT3)
========================= */
/* iOS: ensure the Focus First–Then export modal can scroll instead of clipping */
/*
  First–Then export modal: iOS Safari browser chrome can cover fixed centered modals.
  Use the *visible* viewport (VisualViewport) when available, and add breathing room
  so the top/bottom of the modal can be reached.
*/
#vs-ft-export-modal .vs-modal-panel{
  max-height: calc(100vh - 48px);
  max-height: calc(var(--vs-vh, 1vh) * 100 - 48px);
  max-height: calc(100dvh - 48px);
  max-height: calc(var(--vs-vv-h, 100dvh) - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html:not(.vs-standalone) #vs-ft-export-modal.vs-modal{
  /* account for Safari top/bottom bars in browser mode */
  padding-top: calc(18px + env(safe-area-inset-top) + var(--vs-vv-top, 0px));
  padding-bottom: calc(18px + env(safe-area-inset-bottom) + var(--vs-vv-bot, 0px));
}

.vs-ft-options-wrap{display:grid;gap:12px;margin:10px 0 6px}
.vs-ft-opt-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--vs-line,#E5E7EB);border-radius:12px;background:rgba(255,255,255,.8)}
.vs-ft-opt-row input{transform:scale(1.05)}
.vs-ft-res-group{display:grid;gap:10px;padding:10px 12px;border:1px solid var(--vs-line,#E5E7EB);border-radius:12px;background:rgba(255,255,255,.8)}
.vs-ft-res-title{font-weight:700;color:var(--vs-ink,#0F172A);font-size:13px}
.vs-ft-radio{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.vs-ft-radio input{margin-top:3px}
.vs-ft-radio-col{display:grid;gap:2px}
.vs-ft-radio-top{font-weight:700;color:var(--vs-ink,#0F172A);font-size:13px}
.vs-ft-radio-sub{color:var(--vs-muted,#64748B);font-size:12px;line-height:1.35}
.vs-ft-radio input:disabled + .vs-ft-radio-col .vs-ft-radio-top,
.vs-ft-radio input:disabled + .vs-ft-radio-col .vs-ft-radio-sub{opacity:.6;cursor:not-allowed}

/* ===== Mobile header compaction (small screens) =====
   Goal: keep the top controls from getting tall/bunched by:
   - tightening spacing
   - preventing multi-line wraps where possible
   - switching the schedule title row to a clean 2-row grid
*/
@media (max-width: 520px){
  /* Sticky pagebar (tabs + add-to) */
  .vs-pagebar-inner{padding:8px 10px;gap:6px}
  .vs-page-tabs{gap:6px;padding-bottom:2px}
  .vs-page-tabs .vs-page-tab{padding:6px 8px}

  .vs-addto{gap:8px;flex-wrap:nowrap}
  .vs-addto-label{display:none}
  .vs-addto-pills{gap:6px;padding-bottom:2px}

  /* Week strip */
  .vs-weekstrip-wrap{gap:6px;margin:0 0 .45rem}
  .vs-weeknav{gap:8px;padding:0 2px}
  .vs-weekrange{font-size:.9rem}
  .vs-weekstrip .chip{min-width:68px;padding:7px 9px}
  .vs-weekstrip .wk-dow{font-size:.76rem}
  .vs-weekstrip .wk-date{font-size:.7rem}

  /* Schedule title / profile / views / actions */
  .vs-schedule-title-row{
    display:grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "actions";
    row-gap:0;
    column-gap:8px;
    align-items:center;
  }
  .schedule-title-group{display:none!important}
  #vs-schedule-title{display:none!important}
  .vs-profile-chip .vs-profile-name{max-width:64px}

  /* View mode tabs now live under the week strip */
  .vs-view-switcher{gap:6px;max-width:100%}
  .vs-view-switcher{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin:6px 0 4px}
  .vs-view-switcher::-webkit-scrollbar{display:none}
  .vs-view-chip{padding:6px 9px;font-size:.78rem}

  .schedule-actions{grid-area:actions;gap:4px}
  .schedule-actions .btn-icon{width:30px;height:30px}
  .schedule-actions .btn-speak{padding:.3rem .45rem}
  /* On small screens keep Read Day compact (icon-only) */
  .schedule-actions .btn-speak span{display:none}
}

@media (max-width: 360px){
  /* Extra-tight: show only icons for the main page tabs */
  .vs-page-tab{gap:0}
  .vs-page-tab span:not(.vs-tab-ic){display:none}
  .vs-tab-ic{font-size:1.1rem}
}

/*
 * ====================================================================
 * App Shell v2.2 Enhancements
 * --------------------------------------------------------------------
 * These styles modernise the PWA shell for a native look and feel.
 * They introduce a fixed top app bar, bottom navigation on mobile,
 * adaptive sidebar navigation on larger screens and responsive
 * library layout.  Safe area insets are respected to avoid
 * overlapping with iOS/Android status and gesture bars.  View
 * switcher pills are also compressed to reduce visual weight.
 *
 * Variables: define heights and widths for the app bar and sidebar.
 */

:root {
  --vs-appbar-height: 56px;
  --vs-sidebar-width: 220px;
}

/* Top app bar */
.vs-appbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Safe-area aware height (status bar on iOS) */
  height: calc(var(--vs-appbar-height) + env(safe-area-inset-top));
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top);
  padding-left: calc(10px + var(--vs-safe-left));
  padding-right: calc(10px + var(--vs-safe-right));
  background: var(--vs-panel-bg);
  border-bottom: 1px solid var(--vs-line);
  z-index: 100;
}

.vs-appbar-menu {
  /* PR-NAV3: Polished tap target + feedback */
  font-size: 1.5rem;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--vs-ink);
  min-width: 44px;
  min-height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 12px;
  transition: opacity 120ms ease;
}

.vs-appbar-menu:active{ opacity: 0.6; }
.vs-appbar-menu:focus-visible{
  outline: 2px solid rgba(54,171,156,.45);
  outline-offset: 2px;
}

.vs-appbar-title {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 0 2px 0 0;
  border: 0;
  background: transparent;
  color: var(--vs-ink);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.1;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease, color 120ms ease;
}

.vs-appbar-title__text{
  display: block;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.vs-appbar-title__chevron{
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.12em;
  min-width: 1.12em;
  font-size: 1.28rem;
  line-height: 1;
  font-weight: 800;
  color: var(--vs-muted);
  transform-origin: 50% 50%;
  transition: transform 160ms ease, color 120ms ease, opacity 120ms ease;
}

.vs-appbar-title:hover{ opacity:.92; }
.vs-appbar-title:focus-visible{
  outline: 2px solid rgba(54,171,156,.45);
  outline-offset: 2px;
  border-radius: 12px;
}
.vs-appbar-title[data-state="expanded"]{ opacity:1; }
.vs-appbar-title[data-state="expanded"] .vs-appbar-title__chevron{
  transform: rotate(180deg);
  color: var(--vs-ink);
}
.vs-appbar-title[data-state="compact"] .vs-appbar-title__chevron{
  transform: rotate(0deg);
  color: var(--vs-muted);
}
.vs-appbar-title[data-disclosure-enabled="false"]{
  cursor: default;
}
.vs-appbar-title[data-disclosure-enabled="false"] .vs-appbar-title__chevron{
  opacity: .55;
}

.vs-appbar-title[aria-disabled="true"]:focus-visible{
  outline: none;
}

@media (max-width: 520px){
  .vs-appbar{
    gap: 4px;
    padding-left: calc(8px + var(--vs-safe-left));
    padding-right: calc(8px + var(--vs-safe-right));
  }
  .vs-appbar-menu{ flex: 0 0 44px; }
  .vs-appbar-title{
    font-size: .98rem;
    gap: 4px;
    padding-right: 0;
  }
  .vs-appbar-title__chevron{
    width: 1.05em;
    min-width: 1.05em;
    font-size: 1.24rem;
  }
  .vs-profile-chip{
    max-width: 40vw;
    padding: 7px 9px;
    gap: 3px;
  }
  .vs-profile-chip .vs-profile-name{ max-width: 52px; }
}

@media (max-width: 380px){
  .vs-appbar-title{ font-size: .95rem; gap: 4px; }
  .vs-appbar-title__chevron{ font-size: 1.16rem; }
  .vs-profile-chip{
    max-width: 36vw;
    padding: 7px 8px;
  }
  .vs-profile-chip .vs-profile-name{ display: none; }
}

@media (min-width: 1100px) {
  :root{ --vs-appbar-height: 64px; }
}

/* Adjust main content padding to accommodate fixed app bar and bottom nav */
.app-main {
  padding-top: calc(var(--vs-appbar-height) + var(--vs-safe-top));
  padding-left: calc(1rem + var(--vs-safe-left));
  padding-right: calc(1rem + var(--vs-safe-right));
  padding-bottom: calc(2rem + var(--vs-bottomnav-h) + var(--vs-safe-bottom));
}

/* Page bar (navigation) default: bottom bar on small screens */
.vs-pagebar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(56px + var(--vs-safe-bottom));
  background: var(--vs-panel-bg);
  border-top: 1px solid var(--vs-line);
  z-index: 99;
}

.vs-pagebar-inner {
  height: 100%;
}

.vs-page-tabs {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}

.vs-page-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.8rem;
  padding: 4px 0;
}

/* On desktop/tablet: convert pagebar into vertical sidebar */
@media (min-width: 1100px) {
  .vs-pagebar {
    top: calc(var(--vs-appbar-height) + env(safe-area-inset-top));
    bottom: 0;
    left: 0;
    width: var(--vs-sidebar-width);
    height: auto;
    border-top: none;
    border-right: 1px solid var(--vs-line);
  }

  .vs-page-tabs {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 12px 0;
  }

  .vs-page-tab {
    flex: none;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    padding: 10px 16px;
    font-size: 0.9rem;
  }

  .vs-tab-ic {
    font-size: 1.2rem;
  }

  /* Expand main content to the right of sidebar */
  .app-main {
    padding-left: var(--vs-sidebar-width);
  }
}

/* Hide old schedule title and profile chip container within board header */
.schedule-title-group {
  display: none !important;
}

/* View switcher chips are styled in the PR-4 block above.
   Keep any late-file overrides scoped so we don't accidentally
   shrink chips across breakpoints. */
.vs-view-switcher--tabs .vs-view-chip{
  padding: 6px 10px;
  font-size: .84rem;
}

/* (PR-8) Library layout scaling is defined earlier in the Library section */


/* ===== PR-9: Store-ready safe-area + desktop padding corrections ===== */
@media (min-width: 1100px){
  /* Ensure content is not hidden under the left sidebar */
  .app-main{
    padding-left: calc(var(--vs-sidebar-width) + 18px + var(--vs-safe-left));
    padding-right: calc(18px + var(--vs-safe-right));
    padding-bottom: 2rem;
  }
  /* Bottom nav is replaced by side nav on desktop */
  .vs-bottom-nav{ display:none; }
}


/* ===========================================================
   PR‑FC5 — Focus Timer (optional)
   - Inline timer row inside NOW card
   - Timer chooser sheet button group
   =========================================================== */
.vs-focus-now .item-timer{
  margin-top: 0.35rem;
  font-size: 0.9rem;
  color: var(--vs-muted);
  width: 100%;
}

/* Focus timer start button (shown only when enabled) */
.vs-focus-timer-start-row{
  margin-top: 0.15rem;
  display:flex;
  justify-content: center;
}
.vs-focus-timer-start-row .btn.small{
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}
.vs-timer-row{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vs-timer-row--controls-only{
  justify-content: flex-end;
}
.vs-timer-row--done{
  justify-content: center;
  margin-top: 0.25rem;
}
.vs-timer-actions{
  display:flex;
  align-items:center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.vs-timer-row--done .vs-timer-actions{
  justify-content: center;
}
.vs-timer-row--done .btn.small{
  padding-left: 0.65rem;
  padding-right: 0.65rem;
}
.vs-timer-choices{
  display:flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vs-sheet-note{
  margin-top: 0.65rem;
  font-size: 0.85rem;
  color: var(--vs-muted);
}

/* PR-HDR-6: Jump-to-date sheet */
.vs-jumpdate-sheet{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.vs-jumpdate-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
}
.vs-jumpdate-quick{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* ==========================================================
   One-time “Was this helpful?” prompt (beta feedback)
   ========================================================== */
.vs-helpful{
  padding: 0.25rem 0.25rem 0.75rem;
}
.vs-helpful__lead{
  margin: 0 0 0.25rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--vs-ink);
}
.vs-helpful__sub{
  margin: 0 0 0.75rem;
  color: var(--vs-muted);
  line-height: 1.45;
}
.vs-helpful__row{
  display: flex;
  gap: 0.6rem;
}
.vs-helpful__row .btn{
  flex: 1;
  justify-content: center;
}
.vs-helpful__footer{
  margin-top: 0.6rem;
  display: flex;
  justify-content: flex-end;
}


.activity-main{padding-right:0}
.activity-quicktime-wrap{display:flex;align-items:center;margin-top:8px}
.activity-quicktime{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:28px;padding:5px 10px;border-radius:999px;border:1px solid rgba(54,171,156,.28);background:rgba(54,171,156,.10);color:var(--vs-ink);font-size:.76rem;font-weight:800;line-height:1;cursor:pointer;max-width:calc(100% - 6px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.activity-quicktime:hover{border-color:rgba(54,171,156,.42);background:rgba(54,171,156,.14)}
.activity-quicktime:focus-visible{outline:2px solid rgba(54,171,156,.38);outline-offset:2px}
.activity-quicktime .activity-quicktime-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:14px;height:14px;pointer-events:none;transform:translateY(-.2px)}
.activity-quicktime .activity-quicktime-text{display:block;pointer-events:none;white-space:nowrap}
.activity-quicktime .activity-quicktime-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;margin:0;padding:0;background:transparent;cursor:pointer;-webkit-appearance:none}
.activity.activity-has-delete .activity-quicktime,
.activity.has-delete .activity-quicktime{max-width:calc(100% - 38px)}
@media (max-width:420px){.activity-quicktime{gap:5px;padding:5px 9px}}


/* ==================================================
   PR-FM-3 — NOW/NEXT activity card upgrades (Focus-only)
   Safe visual pass: no logic, timer, export, or layout-system changes outside Focus.
   ================================================== */
#vs-focus-view .vs-focus-card{
  border-radius: 18px;
  padding: 12px;
  gap: 8px;
  border-color: rgba(148, 163, 184, 0.22);
  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.06),
    0 2px 8px rgba(15, 23, 42, 0.04);
}
@media (min-width: 900px){
  #vs-focus-view .vs-focus-card{
    padding: 14px 15px;
    gap: 9px;
    border-radius: 20px;
  }
}

#vs-focus-view .vs-focus-now{
  background:
    linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(248,250,252,0.98) 100%);
  border-color: rgba(54, 171, 156, 0.34);
  box-shadow:
    0 14px 34px rgba(15, 23, 42, 0.08),
    0 3px 10px rgba(15, 23, 42, 0.05);
}
#vs-focus-view .vs-focus-now .card-body{
  gap: 10px;
}
#vs-focus-view .vs-focus-now .item-main{
  gap: 7px;
}
#vs-focus-view .vs-focus-now .item-kicker-row{
  gap: 9px;
  align-items: center;
}
#vs-focus-view .vs-focus-now .item-time{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.9rem;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.09);
  color: var(--vs-muted);
  font-weight: 700;
}
#vs-focus-view .vs-focus-now .card-actions{
  max-width: min(100%, 29rem);
  margin-top: 2px;
}
#vs-focus-view .vs-focus-now .card-actions .btn{
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

#vs-focus-view .vs-focus-next-preview{
  background: rgba(255,255,255,0.94);
  border-color: rgba(148, 163, 184, 0.2);
  box-shadow:
    0 7px 18px rgba(15, 23, 42, 0.045),
    0 1px 4px rgba(15, 23, 42, 0.03);
  opacity: 1;
}
#vs-focus-view .vs-focus-next-preview .card-body{
  gap: 11px;
  min-height: 72px;
}
#vs-focus-view .vs-focus-next-preview .item-main{
  gap: 2px;
}
#vs-focus-view .vs-focus-next-preview .item-icon{
  width: 24px;
  height: 24px;
  font-size: 21px;
  opacity: 0.78;
}
#vs-focus-view .vs-focus-next-preview .item-kicker{
  color: rgba(71, 85, 105, 0.92);
}
#vs-focus-view .vs-focus-next-preview .item-label{
  font-weight: 640;
}
#vs-focus-view .vs-focus-next-preview .item-time{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.75rem;
  padding: 0.16rem 0.58rem;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.07);
  font-weight: 680;
}
#vs-focus-view .vs-focus-next-preview.is-empty{
  background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(248,250,252,0.96) 100%);
  border-style: dashed;
  border-color: rgba(148, 163, 184, 0.3);
}
#vs-focus-view .vs-focus-next-preview.is-empty:hover{
  background: linear-gradient(180deg, rgba(248,250,252,1) 0%, rgba(241,245,249,0.98) 100%);
}

@media (min-width: 720px){
  #vs-focus-view .vs-focus-now{
    padding: 15px 16px 16px;
  }
  #vs-focus-view .vs-focus-now .card-body{
    gap: 11px;
  }
  #vs-focus-view .vs-focus-now .item-main{
    max-width: min(100%, 32rem);
  }
  #vs-focus-view .vs-focus-next-preview{
    padding: 12px 14px;
  }
  #vs-focus-view .vs-focus-next-preview .card-body{
    min-height: 76px;
  }
}

html.vs-focus-immersive #vs-focus-view .vs-focus-now{
  background: rgba(255,255,255,0.86);
  border-color: rgba(54, 171, 156, 0.16);
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.055),
    0 1px 4px rgba(15, 23, 42, 0.025);
  outline: none;
}
html.vs-focus-immersive #vs-focus-view .vs-focus-now .card-body{
  gap: 8px;
}
html.vs-focus-immersive #vs-focus-view .vs-focus-now .item-time{
  background: rgba(255,255,255,0.58);
}
html.vs-focus-immersive #vs-focus-view .vs-focus-next-preview{
  background: rgba(255,255,255,0.72);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.035);
  opacity: 0.9;
}
html.vs-focus-immersive #vs-focus-view .vs-focus-next-preview .item-icon{
  opacity: 0.68;
}
html.vs-focus-immersive #vs-focus-view .vs-focus-next-preview .item-time{
  background: rgba(255,255,255,0.5);
}



/* PR-FM-6B: make the actual activity icons read much larger without
   changing timer logic or card structure. Keep this late in the file so it
   safely wins over earlier Focus sizing rules. */
#vs-focus-view .vs-focus-now .item-icon-wrap .item-icon{
  font-size: clamp(68px, 19vw, 102px);
  line-height: 1;
  transform: scale(1.16);
  transform-origin: center;
}
#vs-focus-view .vs-focus-next-preview .item-icon{
  width: 32px;
  height: 32px;
  font-size: 29px;
  line-height: 1;
}
@media (min-width: 720px){
  #vs-focus-view .vs-focus-now .item-icon-wrap .item-icon{
    font-size: clamp(92px, 8.8vw, 138px);
    transform: scale(1.18);
  }
  #vs-focus-view .vs-focus-next-preview .item-icon{
    width: 34px;
    height: 34px;
    font-size: 31px;
  }
}
html.vs-focus-immersive #vs-focus-view .vs-focus-now .item-icon-wrap .item-icon{
  font-size: clamp(74px, 21vw, 112px);
  transform: scale(1.2);
}
@media (min-width: 720px){
  html.vs-focus-immersive #vs-focus-view .vs-focus-now .item-icon-wrap .item-icon{
    font-size: clamp(98px, 9.2vw, 146px);
  }
}

@media (prefers-reduced-motion: reduce){
  #vs-focus-view .vs-focus-card,
  #vs-focus-view .vs-focus-now,
  #vs-focus-view .vs-focus-next-preview,
  #vs-focus-view .vs-focus-now .card-actions .btn{
    transition: none;
  }
}


/* PR-FM-6C: trim NEXT card height slightly in Focus so it feels tighter,
   especially on mobile, without changing logic or hierarchy. */
#vs-focus-view .vs-focus-next-preview{
  padding: 8px 10px;
}
#vs-focus-view .vs-focus-next-preview .card-body{
  gap: 9px;
  min-height: 64px;
}
#vs-focus-view .vs-focus-next-preview .item-main{
  gap: 1px;
}
@media (min-width: 720px){
  #vs-focus-view .vs-focus-next-preview{
    padding: 10px 12px;
  }
  #vs-focus-view .vs-focus-next-preview .card-body{
    min-height: 68px;
  }
}
html.vs-focus-immersive #vs-focus-view .vs-focus-next-preview{
  padding: 8px 10px;
}


/* PR-PRO-3 — unified Pro hub sheet */
.vs-pro-hub{display:grid;gap:10px}
.vs-pro-hub-head{display:grid;gap:6px}
.vs-pro-hub .vs-sheet-note{padding:0 4px 0 0;margin:0}
.vs-pro-hub-badge{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.82);font-weight:800;font-size:12px;letter-spacing:.01em;width:max-content;max-width:100%}
.vs-pro-hub .vs-sheet-list{margin-top:2px;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--vs-line)}

.vs-pro-status-summary{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card,#fff);box-shadow:0 1px 0 rgba(15,23,42,.03)}
.vs-pro-status-line{margin:0;font-weight:700;color:var(--ink)}
.vs-pro-status-line-muted{font-weight:600;color:var(--muted,#64748B)}
.vs-pro-hub .vs-sheet-item{padding:12px 14px}
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"]{background:var(--vs-brand);color:#fff;border-radius:16px;margin:0 0 2px;box-shadow:0 10px 24px rgba(54,171,156,.22)}
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"] + .vs-sheet-item{border-top:1px solid var(--vs-line)}
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"] .si-ic{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.22)}
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"] .si-title,
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"] .si-sub{color:#fff}
.vs-pro-hub .vs-sheet-item[data-license-hub-action="upgrade"] .si-sub{opacity:.92}
.vs-pro-hub-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--card, #fff);box-shadow:0 1px 0 rgba(15,23,42,.03)}
.vs-pro-hub-bullets{margin:8px 0 0;padding-left:18px;display:grid;gap:8px;color:var(--ink)}
.vs-pro-hub-bullets li{line-height:1.4}
.vs-pro-restore-callout{display:grid;gap:10px;border:1px solid color-mix(in srgb, var(--vs-brand, #36AB9C) 16%, var(--vs-line));border-radius:16px;padding:13px 14px;background:color-mix(in srgb, var(--vs-panel-bg, #F8FAFC) 78%, #fff)}
.vs-pro-restore-copy{display:grid;gap:4px}
.vs-pro-restore-callout .vs-sheet-note{margin:0}
.vs-pro-restore-btn{width:100%;justify-content:center;background:#fff;color:var(--vs-brand);border-color:color-mix(in srgb, var(--vs-brand, #36AB9C) 28%, var(--vs-line));font-weight:800}
.vs-pro-restore-btn:hover{background:color-mix(in srgb, var(--vs-brand, #36AB9C) 6%, #fff)}
@media (min-width:560px){
  .vs-pro-restore-callout{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .vs-pro-restore-btn{width:auto;min-width:190px}
}
.vs-more-item[data-license-state="pro"] .mi-title{color:var(--brand,#2f8f83)}
.vs-more-item[data-license-state="pro"] .mi-ic{filter:saturate(1.08)}