/* ============================================================
   app.css
   The signed-in app: header, account menu, session setup and
   settings. Built from synappro.com's design system (tokens.css,
   chrome.css, components.css there) and the patterns of the
   internal dashboards (internal-home.css): warm borderless
   panels, white cards inside them, the "focus" card, lower-case
   labels, 16px text, and shadows only on menus and popovers.
   Colour keeps to one hue per mode, clay or sky, never both on one
   screen; the generated block below holds every colour that changes
   with it (tools/palette.py, which also checks their contrast).
   ============================================================ */

:root{
  /* synappro.com tokens that stay the same in every mode */
  --ink-950:#1F1F20;
  --terracotta-50:#F8EFEA; --terracotta-700:#6A3A22; /* error messages */

  --font-body:'Hanken Grotesk', system-ui, sans-serif;
  --font-heading:'Bricolage Grotesque','Hanken Grotesk', system-ui, sans-serif;
  --fs-text:16px; --fs-lead:20px; --fs-card-title:28px; --fs-wordmark:24px;

  --r-card:28px; --r-media:24px; --r-inner:20px; --r-nav:16px; --r-btn:16px; --r-link:12px; --r-pill:10px;
  --shadow-sm:0 2px 6px rgba(31,31,32,0.06);
  --shadow-md:0 8px 24px rgba(31,31,32,0.08);
  --shadow-lg:0 16px 40px rgba(31,31,32,0.10);
  --ease-breath:cubic-bezier(0.42,0,0.28,1);
  --dur-control:160ms; --dur-surface:260ms;
  --wrap:max(24px, calc((100% - 1392px) / 2));

  /* this app's own token names (theme.css, session.css), mapped on */
  --bg:var(--canvas);
  --text:var(--ink-900);
  --muted:var(--ink-700);
  --font:var(--font-body);
  --card-border:var(--border-hairline);
  --btn-hover:var(--panel-strong);
}

/* ---- generated by tools/palette.py: edit the ladder there, not here ---- */
:root{  /* clay, light */
  --canvas:#FDFFFD;
  --panel:#F6F2EE;
  --panel-strong:#F2ECE7;
  --card:#FFFFFF;
  --neutral-100:#EFEDEA;
  --border-hairline:#E4E0DB;
  --ink-900:#39393A; --ink-700:#55555A; --ink-500:#6E6E73;
  --focus-bg:#F0DDD2; --focus-ink:#6A3A22; --focus-line:rgba(106,58,34,0.14);
  --tone-tint:#F8EFEA; --tone-600:#7E4529;
  --cta:#985635; --cta-hover:#7E4529; --on-cta:#FFFFFF;
  --header-bg:rgba(253,255,253,0.78);
}
:root.cool{  /* sky, light */
  --canvas:#FDFFFD;
  --panel:#EDF3FC;
  --panel-strong:#E6EEF8;
  --card:#FFFFFF;
  --neutral-100:#EFEDEA;
  --border-hairline:#E4E0DB;
  --ink-900:#39393A; --ink-700:#55555A; --ink-500:#6E6E73;
  --focus-bg:#D3E2F8; --focus-ink:#0D305D; --focus-line:rgba(13,48,93,0.14);
  --tone-tint:#E1EBFA; --tone-600:#124382;
  --cta:#0D305D; --cta-hover:#124382; --on-cta:#FFFFFF;
  --header-bg:rgba(253,255,253,0.78);
}
:root.dark{  /* clay, dark */
  --canvas:#130E0C;
  --panel:#1F1713;
  --panel-strong:#2A1F1A;
  --card:#2E211B;
  --neutral-100:#392C26;
  --border-hairline:#3E322D;
  --ink-900:#F2EBE8; --ink-700:#CBC2BE; --ink-500:#ADA29D;
  --focus-bg:#3A261C; --focus-ink:#FAE2D7; --focus-line:rgba(250,226,215,0.14);
  --tone-tint:#492E21; --tone-600:#E8A686;
  --cta:#F1AB89; --cta-hover:#FBC2A8; --on-cta:#130E0C;
  --header-bg:rgba(19,14,12,0.78);
}
:root.dark.cool{  /* sky, dark */
  --canvas:#0D1014;
  --panel:#141920;
  --panel-strong:#1C222B;
  --card:#1E252F;
  --neutral-100:#28303A;
  --border-hairline:#2F3640;
  --ink-900:#E9EDF2; --ink-700:#BFC5CC; --ink-500:#9FA5AE;
  --focus-bg:#202C3D; --focus-ink:#DBE9FC; --focus-line:rgba(219,233,252,0.14);
  --tone-tint:#26364C; --tone-600:#92BAF1;
  --cta:#96C0FB; --cta-hover:#B5D3FE; --on-cta:#0D1014;
  --header-bg:rgba(13,16,20,0.78);
}
/* ---- end generated ---- */

html.dark{
  --bg:var(--canvas); /* over theme.css's neutral dark, so a session sits on dark clay or sky */
  --btn-hover:var(--panel-strong);
  --ink-950:#FFFFFF;
  --shadow-lg:0 16px 40px rgba(0,0,0,0.45);
}

html, body{ background:var(--canvas); color:var(--ink-900); font-family:var(--font-body); font-size:var(--fs-text); line-height:1.6; -webkit-font-smoothing:antialiased; }
h1,h2,h3,p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:3px solid color-mix(in srgb, var(--cta) 35%, transparent); outline-offset:2px; }
kbd{ font-family:var(--font-body); font-size:13px; font-weight:600; color:var(--ink-500); background:var(--card); border-radius:6px; padding:2px 7px; }
svg{ flex:none; }

.t-metadata{ font-size:var(--fs-text); font-weight:600; line-height:1.4; color:var(--ink-700); }

/* ---------- buttons (components.css) ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap;
  font-size:var(--fs-text); font-weight:700; line-height:1.2; letter-spacing:-0.005em;
  padding:14px 26px; border-radius:var(--r-btn); border:1.5px solid transparent;
  transition:background var(--dur-control) var(--ease-breath), border-color var(--dur-control) var(--ease-breath), transform var(--dur-control) var(--ease-breath);
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--cta); color:var(--on-cta); }
.btn-primary:hover{ background:var(--cta-hover); }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn-secondary{ background:transparent; color:var(--cta); border-color:var(--cta); }
.btn-secondary:hover{ background:var(--tone-tint); }
.btn-block{ width:100%; }
.round-btn{
  width:38px; height:38px; border-radius:999px; display:inline-grid; place-items:center;
  background:var(--focus-bg); color:var(--ink-900); transition:background var(--dur-control) var(--ease-breath);
}
.round-btn:hover{ background:color-mix(in srgb, var(--tone-600) 20%, transparent); }
.round-btn svg{ width:18px; height:18px; }

/* ---------- header (chrome.css / internal-home.css) ---------- */
.site-header{
  position:sticky; top:0; z-index:300;
  background:var(--header-bg);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  padding:14px var(--wrap);
  transition:opacity 1.1s ease;
}
.site-header-bar{ display:flex; align-items:center; gap:32px; min-height:46px; } /* as tall as its chips, so a page without them (log-in) has the same header */
.site-header-brand{ display:flex; align-items:center; flex-shrink:0; }
/* the text wordmark, as on synappro internal's header */
.brand{
  font-family:'M PLUS Rounded 1c', sans-serif; font-weight:800; font-size:var(--fs-wordmark);
  letter-spacing:0.02em; line-height:1; color:#444446; white-space:nowrap;
}
html.dark .brand{ color:#F6F2EE; }
.site-header-wordmark{
  display:block; height:calc(var(--fs-wordmark) * 0.762); aspect-ratio:4249/762;
  background-color:#444446;
  -webkit-mask:url("../images/synappro-wordmark-small.svg") no-repeat left center/contain;
  mask:url("../images/synappro-wordmark-small.svg") no-repeat left center/contain;
  overflow:hidden; text-indent:110%; white-space:nowrap;
  transform:translateY(calc(var(--fs-wordmark) * 0.11));
}
html.dark .site-header-wordmark{ background-color:#F6F2EE; }
.product-tag{
  font-size:var(--fs-text); font-weight:600; line-height:1.2; color:var(--tone-600);
  background:var(--tone-tint); padding:7px 12px; border-radius:var(--r-link);
}
.site-header-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.chip-btn{
  display:inline-flex; align-items:center; gap:10px; padding:8px 18px 8px 8px; border-radius:var(--r-btn);
  background:var(--panel); font-weight:600; color:var(--ink-900); white-space:nowrap;
  transition:background var(--dur-control) var(--ease-breath), transform var(--dur-control) var(--ease-breath);
}
.chip-btn:hover, .chip-btn[aria-expanded="true"]{ background:var(--panel-strong); }
/* the open page's chip takes the menu's tint, so it stands out on the white page */
.chip-btn[aria-current="page"]{ background:var(--off-area); }
.chip-btn:active{ transform:scale(0.97); }
.chip-btn .ico{ width:30px; height:30px; border-radius:9px; background:var(--card); color:var(--tone-600); display:grid; place-items:center; }
.chip-btn svg{ width:17px; height:17px; pointer-events:none; }

.account{ position:relative; }
/* the header's profile menu (.menu below), under its chip */
.profile{ position:relative; }
.account-button{ display:flex; border-radius:999px; }
.account-button:hover .avatar, .account-button[aria-expanded="true"] .avatar{ box-shadow:0 0 0 3px var(--tone-tint); }
.avatar{
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:var(--focus-bg); color:var(--focus-ink); font-weight:700; font-size:15px;
}
.avatar-xl{ width:72px; height:72px; font-size:22px; }

.menu{
  position:absolute; right:0; top:calc(100% + 8px); width:280px; padding:8px; z-index:320;
  background:var(--card); border-radius:var(--r-inner); box-shadow:var(--shadow-lg);
}
.menu[hidden]{ display:none; }
/* who is signed in, on the panel colour so it reads apart from the actions below */
.menu-who{ padding:12px 14px; margin-bottom:6px; border-radius:var(--r-link); background:var(--panel); min-width:0; }
.menu-who div{ min-width:0; }
.menu-who strong{ display:block; font-weight:600; color:var(--ink-900); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu-who div span{ display:block; color:var(--ink-500); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.menu hr{ border:0; height:1px; background:var(--border-hairline); margin:6px 8px; }
.menu-item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:10px 12px; border-radius:var(--r-link); font-weight:600; color:var(--ink-900);
}
.menu-item:hover, .menu-item:focus-visible{ background:var(--panel); outline:none; }
.menu-item .ico{ width:30px; height:30px; border-radius:9px; background:var(--tone-tint); color:var(--tone-600); display:grid; place-items:center; }
.menu-item .ico svg{ width:18px; height:18px; }
.menu-item small{ display:block; font-weight:500; color:var(--ink-500); font-size:14px; line-height:1.3; }

/* ---------- session setup ---------- */
#setup{
  display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start;
  padding:4px var(--wrap) 24px;
  transition:opacity 1.1s ease;
}
.workspace{ display:flex; flex-direction:column; gap:16px; min-width:0; }

.panel{ background:var(--panel); border-radius:var(--r-card); padding:22px 24px 24px; min-width:0; }
.panel-head{ display:flex; align-items:baseline; gap:8px 16px; flex-wrap:wrap; margin-bottom:14px; }
.panel-title{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-0.02em; color:var(--ink-900); }
.panel-sub{ color:var(--ink-700); }

.cycle-row-wrap{ position:relative; }
.option-row{ display:grid; gap:12px; }
.option-row-cycles{ grid-template-columns:repeat(3, minmax(0,1fr)); }
.option-row-visuals{ grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); }

/* white cards inside warm panels (internal-home.css: .top-card) */
.option-card{
  position:relative; text-align:left; cursor:pointer; min-width:0;
  background:var(--card); color:var(--ink-900); border-radius:var(--r-inner);
  padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  box-shadow:inset 0 0 0 2px transparent;
  transition:box-shadow var(--dur-control) var(--ease-breath), transform var(--dur-control) var(--ease-breath);
}
.option-card:hover{ box-shadow:var(--shadow-sm), inset 0 0 0 2px transparent; }
.option-card:active{ transform:scale(0.99); }
.option-card[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px var(--accent); }
.option-card .name{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-lead); line-height:1.15; letter-spacing:-0.01em; color:var(--ink-900); }
.option-card .sub{ font-size:15px; color:var(--ink-700); line-height:1.4; }
.option-card-head{ display:flex; align-items:center; gap:8px; padding-right:30px; }

.cycle-card .sub{
  align-self:flex-start; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums;
  color:var(--tone-600); background:var(--tone-tint); padding:3px 10px; border-radius:999px;
}
.blurb{ font-size:15px; line-height:1.45; color:var(--ink-700);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.blurb::first-letter{ text-transform:uppercase; }
.cycle-info-btn{
  width:24px; height:24px; flex:none; border-radius:50%; display:inline-grid; place-items:center;
  background:var(--panel); color:var(--ink-700); font-size:13px; font-weight:700;
  transition:background var(--dur-control) var(--ease-breath);
}
.cycle-info-btn:hover{ background:var(--panel-strong); color:var(--ink-900); }
/* the "?" sits in the card's top right corner, centred on the name's line
   and inset by the card's own padding. A chosen card shows only its ring. */
.cycle-card .cycle-info-btn{ position:absolute; top:21px; right:22px; }

.visual-card{ flex-direction:row; align-items:center; gap:14px; padding:10px 14px 10px 10px; }
.visual-card .preview-tile{
  order:-1; width:92px; height:76px; flex:none; display:block;
  border-radius:14px; background:var(--panel); border:0;
}
.visual-card-info{ display:flex; flex-direction:column; gap:2px; min-width:0; padding-right:26px; }
.visual-card .sub{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* phase bar: one hue, three depths */
.phase-bar{ display:flex; height:10px; border-radius:999px; overflow:hidden; gap:3px; }
.phase-bar-seg{ background:var(--accent); border-radius:999px; }
.phase-inhale{ opacity:.4; } .phase-hold, .phase-holdEnd{ opacity:.7; } .phase-exhale{ opacity:1; }
.phase-dot{ width:9px; height:9px; border-radius:3px; background:var(--accent); flex:none; display:inline-block; }

/* ---------- session panel: tinted like the settings menu ---------- */
/* "off" and "not chosen": a light step of the mode's hue, shared by toggles and the colour/mode pills */
:root{ --off:color-mix(in srgb, var(--accent) 26%, var(--card)); }
/* the same colour for larger surfaces (pill tracks, the settings menu), a step lighter so it
   reads as the same shade: big areas of a colour look darker than a thin toggle track */
:root{ --off-area:color-mix(in srgb, var(--accent) 20%, var(--card)); }
.session-panel{
  position:sticky; top:82px;
  background:var(--off-area); color:var(--ink-900); border-radius:var(--r-card); /* the settings menu's tint */
  padding:22px 24px 24px; display:flex; flex-direction:column; gap:18px;
}
.focus-top{ display:flex; align-items:center; justify-content:space-between; }
.focus-top .t-metadata{ color:var(--ink-900); }
.tag{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; padding:4px 10px; border-radius:999px; white-space:nowrap; }
.tag.ready{ background:rgba(255,255,255,0.7); color:var(--focus-ink); }
.tag.ready::before{ content:''; width:7px; height:7px; border-radius:50%; background:#2F7D4F; }
html.dark .tag.ready{ background:rgba(255,255,255,0.08); color:var(--focus-ink); }


.fields{ margin:0; display:flex; flex-direction:column; }
.field{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; } /* no hairlines: rows are separated by space */
.field dt{ font-weight:600; color:var(--ink-900); }
.field dd{ margin:0; font-weight:700; color:var(--ink-900); }

.length-dropdown-wrap{ position:relative; }
.select-button{
  display:inline-flex; align-items:center; gap:8px; padding:8px 10px 8px 14px; border-radius:var(--r-link);
  background:var(--card); font-weight:700; color:var(--ink-900);
  transition:background var(--dur-control) var(--ease-breath);
}
.select-button:hover, .select-button[aria-expanded="true"]{ background:var(--panel); }
.select-button svg{ width:16px; height:16px; color:var(--ink-500); pointer-events:none; }
.select-button span{ pointer-events:none; }
.length-dropdown[hidden]{ display:none; }
.length-dropdown{
  position:absolute; top:calc(100% + 8px); right:0; min-width:220px; z-index:6;
  background:var(--card); border-radius:var(--r-inner); box-shadow:var(--shadow-lg); padding:8px;
  display:flex; flex-direction:column;
}
.length-option{ text-align:left; padding:10px 14px; border-radius:var(--r-link); font-weight:600; color:var(--ink-900); }
.length-option:hover{ background:var(--panel); }
.length-option[aria-selected="true"]{ box-shadow:inset 0 0 0 2px var(--accent); } /* the current length, as in every other list */
.pill-spinner{ width:13px; height:13px; border-radius:50%; border:2px solid var(--border-hairline); border-top-color:var(--accent); animation:spin .6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.switch{
  position:relative; width:46px; height:28px; flex:none; border-radius:999px;
  background:var(--off); /* off: a light step of the mode's own hue, not grey */
  transition:background var(--dur-control) var(--ease-breath);
}
.switch::after{
  content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:var(--on-cta); box-shadow:var(--shadow-sm); transition:transform var(--dur-control) var(--ease-breath);
}
.switch[aria-pressed="true"]{ background:var(--cta); }
.switch[aria-pressed="true"]::after{ transform:translateX(18px); }

.session-actions{ display:flex; flex-direction:column; gap:12px; }

/* ---------- settings ---------- */
/* a menu panel and one page panel, each with a headline. Items start on
   their headline's left edge, and both panels share one row rhythm
   (46px controls, 16px gaps) so the menu's rows line up with the page's.
   Labels sit in one column with their control right beside them. */
.settings{ display:grid; grid-template-columns:260px minmax(0,1fr); gap:16px; align-items:stretch; padding:4px var(--wrap) 24px; }
.settings[hidden]{ display:none; }
.settings-nav, .settings-section{ background:var(--panel); border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column; gap:16px; min-width:0; }
.settings-section[hidden]{ display:none; }
/* back to the menu: phones only, where the menu is its own page */
.settings-back{ display:none; align-items:center; gap:8px; align-self:flex-start; min-height:46px; color:var(--ink-700); }
.settings-back::before{ content:''; width:8px; height:8px; border-left:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); }
.settings h1{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-0.02em; color:var(--ink-900); }
.settings h1 + *{ margin-top:12px; } /* 12 + the 16px gap: 28px under every headline */
/* the selected outline reaches out into the padding, so the text stays on the headline's edge */
.settings-nav a{ display:flex; align-items:center; min-height:46px; padding:0 14px; margin-inline:-14px; border-radius:var(--r-btn); font-weight:600; color:var(--ink-900); transition:background var(--dur-control) var(--ease-breath); }
/* as the colour and mode pills: the menu sits on the off colour and only the open page changes, to white */
.settings-nav{ background:var(--off-area); }
.settings-nav a:hover{ background:color-mix(in srgb, var(--off-area) 60%, var(--card)); }
.settings-nav a.is-active{ background:var(--card); }

/* one grid on every page: label · main (a value or a field) · action.
   Every field is 360 wide, every button 180, every row 46 tall, so
   buttons and values land in the same place on every page. */
.set-grid{ display:flex; flex-direction:column; gap:16px; }
.set-row{ display:grid; grid-template-columns:220px minmax(0,360px) 180px 46px; column-gap:24px; align-items:center; min-height:46px; }
.set-label{ grid-column:1; font-weight:600; color:var(--ink-900); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.set-main{ grid-column:2; display:flex; align-items:center; gap:16px; min-width:0; color:var(--ink-700); }
.set-action{ grid-column:3; display:flex; }
.set-action > *, .set-main > .btn{ width:180px; }
.set-input{
  width:100%; height:46px; padding:0 16px; font:inherit; color:var(--ink-900);
  background:var(--card); border:0; border-radius:var(--r-btn);
}
.set-input:focus{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.settings .btn{ height:46px; padding:0 16px; }
/* button hierarchy: a filled button for the one main action of a form;
   everything secondary is a dark underlined link beside what it acts on */
/* quiet on purpose: regular weight, a softer colour and a thin, faint underline that firms up on hover */
.link-btn{ font-weight:400; color:var(--ink-700); text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb, currentColor 40%, transparent); text-underline-offset:3px; white-space:nowrap; }
.link-btn:hover{ color:var(--ink-900); text-decoration-color:currentColor; }
.set-action > .link-btn{ width:auto; } /* links keep their own width, starting on the action column's edge */
.link-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:4px; }
/* people: name · email · role as plain text · a "···" menu for the rest */
.set-label-note{ font-weight:400; } /* "(invited)": same colour as the name, lighter weight */
.set-role{ color:var(--ink-700); }
.set-more{ grid-column:4; position:relative; }
.more-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:var(--ink-700); }
.more-btn:hover, .more-btn[aria-expanded="true"]{ background:var(--card); }
.more-btn svg{ width:18px; height:18px; pointer-events:none; }
.set-more .dropdown-menu{ left:auto; right:0; width:200px; }
.set-invite{ width:180px; }

/* a small pop-up (the invite): the cycle detail's scrim, one warm panel */
.dialog{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(480px, calc(100vw - 32px));
  background:var(--panel); border-radius:var(--r-card); box-shadow:0 28px 72px rgba(31,31,32,0.16);
  padding:24px; display:flex; flex-direction:column; gap:16px;
}
.dialog-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.dialog-head h2{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-0.02em; color:var(--ink-900); }
.dialog-field{ display:flex; flex-direction:column; gap:8px; font-weight:600; color:var(--ink-900); }
.dialog .btn{ height:46px; align-self:flex-start; width:180px; margin-top:12px; }
.meter{ flex:1; height:10px; border-radius:999px; background:var(--card); overflow:hidden; }
.meter i{ display:block; height:100%; background:var(--cta); border-radius:999px; }

/* help: the settings layout, with reading text */
/* a label sits on its text's first line, not the middle of a wrapped paragraph;
   the padding centres that first line in a 46px row, so it lines up with the menu */
.help-row{ align-items:baseline; padding:11.4px 0; line-height:1.45; }
.help-row .set-main{ display:block; grid-column:2 / 5; margin:0; }
/* one text size throughout, as in settings: 16px, with only the page headline larger */
.help-text{ display:flex; flex-direction:column; gap:16px; max-width:68ch; color:var(--ink-700); font-size:var(--fs-text); line-height:1.55; }
.help-text h2{ font-size:var(--fs-text); font-weight:600; color:var(--ink-900); margin-top:8px; margin-bottom:-12px; } /* like a settings label */
.help-text sup{ font-size:0.7em; line-height:0; }
.help-refs[hidden]{ display:none; }
.help-refs{ margin-top:8px; padding-left:22px; display:flex; flex-direction:column; gap:8px; color:var(--ink-500); }

/* dropdown: the home screen's length dropdown at field size (app-shell.js: initDropdowns) */
.dropdown{ position:relative; width:100%; }
.dropdown-button{
  width:100%; height:46px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 16px; border-radius:var(--r-btn); background:var(--card); color:var(--ink-900); text-align:left;
}
.dropdown-button svg{ width:16px; height:16px; color:var(--ink-500); flex:none; pointer-events:none; }
.dropdown-button[aria-expanded="true"] svg{ transform:rotate(180deg); }
.dropdown-button[aria-expanded="true"], .dropdown-button:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--accent); }
.dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:10; display:flex; flex-direction:column; gap:2px;
  background:var(--card); border-radius:var(--r-inner); padding:8px; box-shadow:var(--shadow-lg);
}
.dropdown-menu[hidden]{ display:none; }
.dropdown-option{ text-align:left; padding:10px 14px; border-radius:var(--r-link); color:var(--ink-900); }
.dropdown-option:hover{ background:var(--panel); }
.dropdown-option[aria-selected="true"]{ font-weight:600; box-shadow:inset 0 0 0 2px var(--accent); }

/* segmented control: the tinted nav pill (internal-home.css: .pills) */
.segmented{ display:inline-flex; gap:2px; padding:5px; border-radius:var(--r-nav); background:var(--tone-tint); }
.segmented button{
  display:inline-flex; align-items:center; gap:8px; padding:9px 16px; border-radius:var(--r-link);
  font-weight:600; color:var(--ink-700); transition:background var(--dur-control) var(--ease-breath);
}
.segmented button:hover{ background:rgba(255,255,255,0.6); }
.segmented button[aria-pressed="true"]{ background:var(--card); color:var(--ink-900); }
.swatch-dot{ width:12px; height:12px; border-radius:50%; }
.swatch-dot.warm{ background:#985635; } .swatch-dot.cool{ background:#1758AB; }
html.dark .swatch-dot.warm{ background:#E08D65; } html.dark .swatch-dot.cool{ background:#75A6EC; }

.toast{
  position:fixed; bottom:24px; left:50%; transform:translateX(-50%); z-index:400;
  background:var(--ink-950); color:var(--canvas); font-weight:600; padding:12px 18px; border-radius:var(--r-btn);
  box-shadow:var(--shadow-lg);
}
.toast[hidden]{ display:none; }

/* ---------- session view (fullscreen) ---------- */
/* the session sits on the same panel colour as the cycle and animation blocks */
#session{ font-family:var(--font-body); background:var(--panel); }
#phaseWord{ font-family:var(--font-heading); letter-spacing:-0.01em; }
#sessionControls button, #patternTag{ font-weight:600; letter-spacing:0; text-transform:none; }

/* ---------- responsive ---------- */
@media (max-width: 1180px){
  #setup{ grid-template-columns:minmax(0,1fr) 340px; }
  .option-row-cycles{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  #setup, .settings{ grid-template-columns:1fr; padding:4px 16px 24px; }
  .site-header{ padding:10px 16px; }
  .session-panel{ position:static; }
  .session-actions{ position:sticky; bottom:12px; }
  /* phones, settings and help: the menu is a page of its own (a list); choosing
     an item opens its page, with a way back (app-shell.js: route) */
  .settings{ grid-template-rows:1fr; }
  .settings.is-list .settings-section, .settings:not(.is-list) .settings-nav{ display:none; }
  .settings-nav a{ justify-content:space-between; }
  .settings-nav a::after{ content:''; width:8px; height:8px; border-right:2px solid var(--ink-500); border-top:2px solid var(--ink-500); transform:rotate(45deg); margin-right:4px; }
  .settings-nav a.is-active{ background:none; } /* a list, not a selection */
  .settings-back{ display:inline-flex; }
  .settings-section{ padding:20px 16px; }
  /* rows: label with its value under it on the left; a role, link or menu on the right */
  .set-grid{ gap:20px; }
  .set-row{ grid-template-columns:minmax(0,1fr) auto auto; column-gap:12px; row-gap:4px; }
  .set-row:not(:has(.set-action, .set-more)){ grid-template-columns:minmax(0,1fr); }
  .set-row:has(.set-input, .dropdown, .btn){ row-gap:8px; }
  .set-label{ grid-column:1; grid-row:1; white-space:normal; }
  .set-main{ grid-column:1; grid-row:2; }
  .set-action{ grid-column:2; grid-row:1 / span 2; }
  .set-more{ grid-column:3; grid-row:1 / span 2; }
  /* people: role and menu in fixed columns, so every role lines up (the owner has no menu) */
  .set-row:has(.set-role){ grid-template-columns:minmax(0,1fr) 84px 46px; }
  .set-main > .btn, .set-main:only-child > .btn{ width:100%; }
  .help-row{ padding:0; } /* no menu beside it to line up with on a phone */
  .help-row .set-main{ grid-column:1 / -1; }
  /* header chips: square icon buttons, the label hidden */
  .chip-btn{ width:46px; height:46px; padding:0; justify-content:center; }
  .chip-label{ display:none; }
  /* the profile menu spans the screen under the header */
  .profile .menu{ position:fixed; left:16px; right:16px; top:72px; width:auto; }
}
@media (max-width: 560px){
  .option-row-visuals{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } }

/* keep every choice above the fold: cycle name, "?" and timing share a row */
.cycle-card{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; row-gap:6px; }
.cycle-card .option-card-head{ padding-right:0; }
.cycle-card .sub{ justify-self:start; }
.cycle-card .blurb{ grid-column:1 / -1; margin:0; }

/* animations: four to a row on wide screens so all seven sit above the fold */
@media (min-width: 1181px){
  .option-row-visuals{ grid-template-columns:repeat(4, minmax(0,1fr)); }
}
.visual-card{ gap:12px; padding:10px 12px 10px 10px; }
.visual-card .preview-tile{ width:68px; height:68px; border-radius:12px; }
.visual-card .name{ font-size:18px; }
.visual-card .sub{ font-size:14px; }
.visual-card-info{ padding-right:0; }

/* ---------- full-height layout: header + blocks fill the viewport ---------- */
body{ height:auto; min-height:100dvh; display:flex; flex-direction:column; }
#setup{ flex:1; align-items:stretch; }
.workspace > .panel:last-child{ flex:1; }
.session-panel{ position:static; }
.session-actions{ margin-top:auto; }
.settings{ flex:1; }



/* ---------- balance: content sized to the screen, spacing shared evenly ---------- */
/* cycle cards: name and timing, then the description straight under it */
.cycle-card{ padding:20px 22px; row-gap:10px; }


/* session card: settings and start spread evenly down its height */
.session-panel{ justify-content:space-between; gap:16px; }
.session-actions{ margin-top:0; }

/* animation cards share the panel's height equally (two rows); each
   preview fills its card's height. The canvas is positioned out of flow
   so its pixel size, set from the layout, never feeds back into it. */
.workspace > .panel:last-child{ display:flex; flex-direction:column; }
.option-row-visuals{ flex:1; grid-auto-rows:minmax(88px, 1fr); }
.visual-card{ position:relative; justify-content:center; padding:12px 14px 12px calc(38% + 22px); }
.visual-card .preview-tile{ position:absolute; top:10px; bottom:10px; left:10px; width:38%; height:auto; border-radius:14px; }
@media (max-width: 900px){
  .option-row-visuals{ grid-auto-rows:96px; }
}
/* a canvas is a replaced element: top/bottom alone won't stretch it */
.visual-card .preview-tile{ height:calc(100% - 20px); }
/* session card: a headline like the other panels, then compact 46px rows
   16px apart (the settings rhythm), and the start button at the foot */
.session-panel{ justify-content:flex-start; }
.session-panel .panel-head{ margin-bottom:-2px; } /* .panel-head's 14px less the panel's 16px gap, so the first row starts level with the cycle cards */
.fields{ gap:16px; }
.session-actions{ margin-top:auto; }

/* ---------- equal panels; animations scroll sideways ---------- */
/* both panels share the height, so the animation cards come out the same
   size as the breathing cycle cards: three to a row */
.workspace > .panel{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; }
.cycle-row-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; }
.option-row-cycles{ flex:1; grid-template-columns:repeat(3, minmax(0,1fr)); grid-template-rows:minmax(0,1fr); }
.cycle-card{ grid-template-rows:auto auto 1fr; }
.cycle-card .phase-bar{ grid-column:1 / -1; align-self:end; }

.option-row-visuals{
  flex:1; min-height:0; display:grid;
  grid-template-columns:none; grid-auto-flow:column; grid-template-rows:minmax(0,1fr); grid-auto-rows:auto;
  grid-auto-columns:calc((100% - 24px) / 3);
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none;
}
.option-row-visuals::-webkit-scrollbar{ display:none; }
.option-row-visuals .visual-card{ scroll-snap-align:start; }

.panel-head{ align-items:center; }
.scroll-nav{ margin-left:auto; display:flex; gap:8px; }
.scroll-nav .round-btn:disabled{ opacity:.35; cursor:default; background:var(--tone-tint); }

@media (max-width: 900px){
  .workspace > .panel{ flex:none; }
  .option-row-cycles, .option-row-visuals{
    display:grid; grid-template-columns:none; grid-auto-flow:column; grid-template-rows:none;
    grid-auto-columns:80%; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .option-row-cycles .cycle-card{ scroll-snap-align:start; min-height:150px; }
  .option-row-visuals{ grid-auto-rows:150px; }
}
.panel-head{ min-height:38px; }
.option-row-visuals .visual-card{ justify-content:flex-start; padding-top:20px; }
.visual-card .sub{ -webkit-line-clamp:3; }
.option-row-visuals .visual-card{ align-items:flex-start; }

/* session card: colour and mode sit with the other settings */
/* the unchosen options sit on the same colour as an off toggle */
.field .segmented{ background:var(--off-area); padding:4px; }
/* on the tinted session panel, off toggles and option tracks take a darker step so they still show */
.session-panel{ --off-on-tint:color-mix(in srgb, var(--accent) 42%, var(--card)); }
.session-panel .switch, .session-panel .field .segmented{ background:var(--off-on-tint); }
.session-panel .switch[aria-pressed="true"]{ background:var(--cta); }
.field .segmented button{ padding:6px 11px; font-size:15px; }
.fields .field{ min-height:46px; }

/* ---------- session card controls: one standard width ---------- */
/* length, colour and mode share a width; each control's options split it evenly */
.session-panel{ --control-w:200px; }
.fields .select-button{ width:var(--control-w); justify-content:space-between; }
.fields .length-dropdown{ min-width:var(--control-w); }
.field .segmented{ display:flex; width:var(--control-w); }
.field .segmented button{ flex:1; justify-content:center; gap:6px; padding:6px 0; }
/* length, colour and mode share one shape: 46px tall, 16px corners
   (12px for the pill inside), 15px semibold text */
.fields .select-button{ height:46px; padding:0 14px 0 16px; border-radius:var(--r-btn); font-size:15px; font-weight:600; }
.field .segmented{ height:46px; border-radius:var(--r-btn); }
.field .segmented button{ border-radius:var(--r-link); font-size:15px; font-weight:600; color:var(--ink-900); } /* unselected as dark as selected; the white pill marks the choice */

/* ---------- cycle detail: the panel behind a cycle's "?" ---------- */
/* the scrim every pop-up sits on (cycle detail, invite) */
.detail-scrim{
  position:fixed; inset:0; z-index:400;
  background:rgba(31,31,32,0.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  animation:scrim-in var(--dur-surface) var(--ease-breath);
}
.detail-scrim[hidden]{ display:none; }
@keyframes scrim-in{ from{ opacity:0; } }

/* as the cycle sheet in the synappro breathe app, full screen in two
   panels like settings: bar and phases (tinted, like the settings
   menu) beside the name, description and references */
.cycle-dialog{
  position:absolute; inset:24px; max-width:1392px; margin:0 auto;
  display:grid; grid-template-columns:minmax(280px, 400px) minmax(0,1fr); gap:16px;
  background:var(--canvas); border-radius:var(--r-card); padding:16px; box-shadow:0 28px 72px rgba(31,31,32,0.16);
}
.cycle-side, .cycle-main{ border-radius:var(--r-card); padding:24px; display:flex; flex-direction:column; gap:16px; min-height:0; }
.cycle-side{ background:var(--off-area); }
.cycle-main{ background:var(--panel); overflow-y:auto; }
.cycle-side > *, .cycle-main > *{ flex-shrink:0; }
.cycle-main .dialog-head h2{ font-family:var(--font-heading); font-weight:700; font-size:var(--fs-card-title); line-height:1.1; letter-spacing:-0.02em; color:var(--ink-900); }
.cycle-main .dialog-head{ margin-bottom:12px; }
.cycle-main .help-text{ max-width:68ch; }
/* phones: one scrolling block in the app's order (name, bar, phases,
   description, references), the two panels dissolved into it */
@media (max-width: 900px){
  .cycle-dialog{ inset:0; border-radius:0; display:flex; flex-direction:column; gap:16px; padding:20px 16px 32px; overflow-y:auto; background:var(--panel); }
  .cycle-side, .cycle-main{ display:contents; }
  .cycle-main .dialog-head{ order:1; margin-bottom:8px; }
  .cycle-dialog .cycle-bar{ order:2; height:30px; border-radius:var(--r-link); }
  .cycle-phases{ order:3; margin-bottom:8px; }
  #detailCopy{ order:4; }
  #detailRefsToggle, .cycle-main > div:has(#detailRefsToggle){ order:5; }
  #detailRefs{ order:6; }
}
.cycle-bar{ display:flex; gap:3px; height:46px; border-radius:var(--r-btn); overflow:hidden; }
.cycle-bar-seg{ background:var(--accent); }
.cycle-bar-seg.is-dimmed{ background:var(--ink-500); }
.cycle-phases{ display:flex; flex-direction:column; gap:8px; }
.cycle-phase{
  display:grid; grid-template-columns:12px minmax(0,1fr) auto; align-items:center; gap:12px;
  height:56px; padding:0 20px; border-radius:var(--r-btn); background:var(--card); color:var(--ink-900); text-align:left;
}
.cycle-phase .phase-dot{ width:12px; height:12px; border-radius:50%; }
.cycle-phase span:last-child{ font-variant-numeric:tabular-nums; }
.cycle-phase[aria-pressed="true"]{ box-shadow:inset 0 0 0 2px var(--accent); font-weight:600; }
.cycle-intro{ font-weight:600; color:var(--ink-900); }

/* ---------- phones ---------- */
@media (max-width: 900px){
  /* start session stays in reach at the foot of the screen */
  .session-actions{
    position:fixed; left:0; right:0; bottom:0; z-index:200; margin:0;
    padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background:var(--header-bg);
    backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  }
  #setup{ padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
}
/* fingers, not cursors: 44px targets (WCAG 2.5.5) without changing the look */
@media (pointer: coarse){
  .cycle-info-btn{ position:relative; }
  .cycle-info-btn::before{ content:''; position:absolute; inset:-10px; }
  .segmented button{ min-height:40px; }
  .field .segmented button{ min-height:0; } /* the session card's pills fill a fixed 46px track; 40px would spill out of it */
  .round-btn{ width:44px; height:44px; }
}