/* Flow web replica: same palette, sizes and layout as the desktop app (flow.pyw). */
.fl-stage-wrap { position: relative; width: 100%; overflow: hidden; }
.fl-stage {
  --BG: #0e1116; --SURFACE: #171b22; --SURFACE_2: #1f252e; --BORDER: #2a313b;
  --FG: #eef1f4; --MUTED: #8b95a1; --FAINT: #5b6570; --WARN: #f2b84b; --IDLE: #7d8793; --SIDEBAR: #12161c;
  --display: "Segoe UI Variable Display", "Segoe UI", "Inter", system-ui, sans-serif;
  --text: "Segoe UI Variable Text", "Segoe UI", "Inter", system-ui, sans-serif;
  position: absolute; left: 0; top: 0; width: 1280px; height: 860px; transform-origin: 0 0; border-radius: 10px; box-shadow: 0 0 0 1px rgba(0,0,0,.08);
  overflow: hidden; font-family: var(--text); color: var(--FG); user-select: none; line-height: 1.3;
  background:
    radial-gradient(1200px 700px at 30% 115%, #2b3a67 0%, transparent 60%),
    radial-gradient(900px 600px at 85% -10%, #3a2a52 0%, transparent 55%),
    linear-gradient(160deg, #0b1324, #101827 60%, #0a0f1b);
}
.fl-stage * { box-sizing: border-box; }
.fl-stage button { font: inherit; color: inherit; }

/* desktop hint + taskbar */
.fl-hint {
  position: absolute; left: 40px; top: 36px; width: 440px; padding: 18px 20px; border-radius: 12px;
  background: rgba(14, 17, 22, .72); border: 1px solid rgba(255, 255, 255, .08); backdrop-filter: blur(8px);
  font-size: 14px; color: #cfd6e2;
}
.fl-hint h4 { margin: 0 0 8px; font: 600 17px var(--display); color: #fff; }
.fl-hint p { margin: 6px 0; }
.fl-hint kbd { font: 600 12px var(--text); background: #222a35; border: 1px solid #333c49; padding: 1px 6px; border-radius: 5px; }
.fl-hint .fl-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.fl-taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px; display: flex; align-items: center;
  justify-content: center; gap: 6px; background: rgba(28, 32, 40, .86); border-top: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(20px);
}
.fl-taskbar .fl-app { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; }
.fl-taskbar .fl-app span { width: 24px; height: 24px; border-radius: 6px; display: block; }
.fl-tray { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #e8ebf0; }
.fl-trayicon { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; cursor: pointer; position: relative; }
.fl-trayicon:hover { background: rgba(255, 255, 255, .08); }
.fl-trayicon canvas { width: 20px; height: 20px; }
.fl-trayicon .fl-pulse { position: absolute; inset: 4px; border-radius: 8px; border: 2px solid #fff; opacity: 0; animation: flPulse 2s ease-out infinite; pointer-events: none; }
@keyframes flPulse { 0% { opacity: .7; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.3); } }
.fl-clock { text-align: right; padding: 0 8px; line-height: 1.35; }
.fl-tip { position: absolute; bottom: 54px; right: 8px; background: #2b2f36; border: 1px solid #3a3f48; padding: 5px 9px; border-radius: 6px; font-size: 12px; white-space: nowrap; pointer-events: none; }

/* shared pieces */
.fl-win { position: absolute; background: var(--SURFACE); border: 1px solid var(--BORDER); border-radius: 8px; box-shadow: 0 18px 50px rgba(0,0,0,.55); transition: opacity .2s, transform .2s cubic-bezier(.2,.8,.2,1); }
.fl-win.noborder { border-color: transparent; }
.fl-win.fl-hidden { opacity: 0; pointer-events: none; }
.fl-edge { position: absolute; inset: 0; pointer-events: none; border-radius: 8px; }
.fl-brand { display: flex; align-items: center; gap: 8px; font: 600 14.7px var(--display); }
.fl-brand canvas { display: block; }
.fl-spaced { font: 600 10.7px var(--text); letter-spacing: .32em; text-transform: uppercase; color: var(--FAINT); }
.fl-pill {
  border: 0; border-radius: 8px; padding: 0 16px; height: 34px; cursor: pointer; font: 600 13.3px var(--text) !important;
  background: var(--SURFACE_2); color: var(--FG); white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}
.fl-pill:hover { background: var(--BORDER); }
.fl-pill.primary { background: var(--accent); color: var(--accent-ink); }
.fl-pill.primary:hover { background: var(--accent-hover); }
.fl-pill.ghost { background: transparent; color: var(--MUTED); }
.fl-pill.ghost:hover { background: var(--SURFACE_2); }
.fl-pill.sm { height: 30px; padding: 0 14px; font-size: 12px !important; }
.fl-pill.xs { height: 26px; padding: 0 10px; font-size: 10.7px !important; min-width: 40px; }
.fl-icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fl-close { color: var(--MUTED); cursor: pointer; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; }
.fl-close:hover { color: var(--FG); }
.fl-entry { background: var(--SURFACE_2); border: 1px solid var(--BORDER); color: var(--FG); padding: 8px 11px; font: 13.3px var(--text); outline: none; border-radius: 0; }
.fl-entry:focus { border-color: var(--accent); }

/* session panel */
.fl-panel { width: 420px; padding: 18px 20px; }
.fl-panel .fl-status { font: 600 12px var(--text); margin-top: 18px; }
.fl-panel .fl-clockbig { font: 300 48px var(--display); margin: -2px 0 0 -2px; letter-spacing: .5px; }
.fl-panel .fl-sub { color: var(--MUTED); font-size: 12px; margin-top: 10px; }
.fl-panel .fl-focus { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; font-size: 13.3px; }
.fl-panel .fl-focus .fl-spaced { font-size: 9.3px; }
.fl-chips { display: flex; gap: 6px; }
.fl-row { display: flex; align-items: center; justify-content: space-between; }
.fl-bar { display: block; margin-top: 6px; }

/* tray menu */
.fl-menu { width: 316px; padding: 8px; }
.fl-menu .fl-head { display: flex; align-items: center; gap: 12px; padding: 6px 10px 10px; }
.fl-menu .fl-head b { font: 600 16px var(--display); display: block; }
.fl-menu .fl-head small { color: var(--MUTED); font-size: 12px; }
.fl-sep { height: 1px; background: var(--BORDER); margin: 6px 8px; }
.fl-mrow { height: 36px; border-radius: 8px; display: flex; align-items: center; padding: 0 12px 0 14px; gap: 14px; cursor: pointer; font-size: 13.3px; }
.fl-mrow .fl-icon { color: var(--MUTED); }
.fl-mrow:hover { background: var(--SURFACE_2); }
.fl-mrow:hover .fl-icon { color: var(--accent); }
.fl-mrow .fl-hintr { margin-left: auto; color: var(--FAINT); font-size: 12px; }
.fl-mrow.quiet { color: var(--MUTED); }
.fl-chipline { display: flex; align-items: center; padding: 3px 0; font-size: 13.3px; }
.fl-chipline .fl-icon { color: var(--MUTED); margin: 0 12px 0 14px; }
.fl-chipline .fl-chips { margin-left: auto; gap: 4px; padding-right: 6px; }

/* toast */
.fl-toast { width: 360px; padding: 14px 16px 17px; display: flex; gap: 12px; overflow: hidden; }
.fl-toast b { font: 600 14.7px var(--text); display: block; }
.fl-toast p { margin: 2px 0 0; color: var(--MUTED); font-size: 12px; white-space: pre-line; }
.fl-toast .fl-chips { margin-top: 12px; gap: 8px; }
.fl-toast .fl-tbar { position: absolute; left: 0; bottom: 0; height: 3px; }

/* welcome */
.fl-welcome { width: 440px; padding: 24px 28px; }
.fl-welcome h2 { font: 600 32px var(--display); margin: 22px 0 0; }
.fl-welcome .fl-lead { color: var(--MUTED); font-size: 16px; }
.fl-quote { display: flex; gap: 12px; margin-top: 18px; font-size: 13.3px; }
.fl-quote i { width: 3px; background: var(--accent); flex: none; }
.fl-welcome .fl-entry { width: 100%; }
.fl-small { font-size: 12px; color: var(--MUTED); }
.fl-faint { color: var(--FAINT); }

/* break screen */
.fl-break { position: absolute; inset: 0; background: var(--BG); display: flex; flex-direction: column; align-items: center; transition: opacity .45s; z-index: 1000; }
.fl-break canvas.fl-edge { border-radius: 0; }
.fl-break .fl-eyebrow { font: 600 var(--s13) var(--text); letter-spacing: .32em; margin-top: calc(var(--k) * 30px); }
.fl-break h1 { font: 300 calc(var(--k) * 46px) var(--display); margin: calc(var(--k) * 18px) 0 0; }
.fl-break .fl-bsub { color: var(--MUTED); font-size: calc(var(--k) * 16px); margin-top: calc(var(--k) * 12px); }
.fl-break .fl-bclock { font: 300 calc(var(--k) * 150px) var(--display); margin-top: calc(var(--k) * 30px); line-height: 1; font-variant-numeric: tabular-nums; }
.fl-break .fl-bstatus { display: flex; align-items: center; gap: calc(var(--k) * 10px); font-size: calc(var(--k) * 15px); margin-top: calc(var(--k) * 26px); }
.fl-break .fl-bstatus i { width: calc(var(--k) * 8px); height: calc(var(--k) * 8px); border-radius: 50%; }
.fl-break .fl-btip { color: var(--MUTED); font-size: calc(var(--k) * 17px); margin-top: calc(var(--k) * 70px); max-width: calc(var(--k) * 620px); text-align: center; transition: opacity .4s; }
.fl-break .fl-skip { position: absolute; bottom: calc(var(--k) * 46px); text-align: center; color: var(--FAINT); font-size: calc(var(--k) * 13px); }
.fl-break .fl-skip input { display: block; margin: 8px auto 0; width: 300px; text-align: center; }

/* windows with a title bar (settings, stats, advanced) */
.fl-dlg { background: var(--BG); border-color: var(--BORDER); overflow: hidden; }
.fl-title { height: 32px; display: flex; align-items: center; gap: 8px; padding-left: 10px; font-size: 12px; color: #c8cdd5; background: #1b1f26; cursor: move; }
.fl-title canvas { width: 16px; height: 16px; }
.fl-title .fl-x { margin-left: auto; width: 46px; height: 32px; display: grid; place-items: center; cursor: pointer; }
.fl-title .fl-x:hover { background: #c42b1c; color: #fff; }
.fl-card { background: var(--SURFACE); border: 1px solid var(--BORDER); border-radius: 12px; padding: 18px; }
.fl-card + .fl-card { margin-top: 12px; }
.fl-card .fl-spaced { margin-bottom: 10px; }
.fl-setrow { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fl-setrow.first { margin-top: 0; }
.fl-setrow .fl-st { flex: 1; font-size: 13.3px; }
.fl-setrow .fl-st small { display: block; color: var(--MUTED); font-size: 12px; max-width: 300px; }
.fl-stepper { display: flex; align-items: center; }
.fl-stepper .fl-pill { width: 32px; height: 32px; padding: 0; }
.fl-stepper span { width: 66px; text-align: center; font: 600 13.3px var(--text); }
.fl-toggle { width: 42px; height: 24px; border-radius: 12px; position: relative; cursor: pointer; background: var(--SURFACE_2); border: 1px solid var(--BORDER); flex: none; }
.fl-toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--MUTED); transition: left .15s; }
.fl-toggle.on { background: var(--accent); border-color: var(--accent); }
.fl-toggle.on::after { left: 21px; background: #fff; }
.fl-tabs { display: flex; gap: 4px; }
.fl-tab { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--MUTED); cursor: pointer; font: 600 12px var(--text) !important; }
.fl-tab.on { background: var(--SURFACE_2); border-color: var(--BORDER); color: var(--FG); }
.fl-slider { width: 150px; height: 24px; position: relative; cursor: pointer; }
.fl-slider i { position: absolute; left: 8px; right: 8px; top: 10px; height: 4px; border-radius: 2px; background: var(--SURFACE_2); }
.fl-slider b { position: absolute; left: 8px; top: 10px; height: 4px; border-radius: 2px; background: var(--accent); }
.fl-slider u { position: absolute; top: 5px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; }

.fl-settings { width: 760px; }
.fl-settings .fl-body { display: flex; height: 750px; }
.fl-side { width: 232px; background: var(--SIDEBAR); padding: 24px 12px 20px; display: flex; flex-direction: column; flex: none; }
.fl-side .fl-brand { padding: 0 8px 22px; font-size: 17px; }
.fl-side .fl-brand small { display: block; font: 12px var(--text); color: var(--MUTED); }
.fl-nav { height: 40px; width: 184px; border-radius: 8px; display: flex; align-items: center; gap: 12px; padding-left: 14px; color: var(--MUTED); cursor: pointer; position: relative; font-size: 13.3px; margin-bottom: 2px; }
.fl-nav:hover { background: #191e25; }
.fl-nav.on { background: var(--SURFACE_2); color: var(--FG); font-weight: 600; }
.fl-nav.on .fl-icon { color: var(--accent); }
.fl-nav.on::before { content: ""; position: absolute; left: 0; top: 28%; bottom: 28%; width: 3px; background: var(--accent); }
.fl-side .fl-note { margin-top: auto; padding: 0 12px; font-size: 10.7px; color: var(--FAINT); }
.fl-main { flex: 1; padding: 22px 28px; display: flex; flex-direction: column; }
.fl-main h3 { font: 600 24px var(--display); margin: 0; }
.fl-main .fl-psub { color: var(--MUTED); font-size: 13.3px; margin: 2px 0 16px; }
.fl-content { flex: 1; }
.fl-foot { display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.fl-foot .fl-saved { margin-left: auto; color: var(--accent); font: 600 12px var(--text); }
.fl-swatches { display: flex; gap: 8px; }
.fl-sw { text-align: center; font-size: 10.7px; color: var(--MUTED); cursor: pointer; }
.fl-sw span { display: block; width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 2px; }
.fl-sw.on span { box-shadow: 0 0 0 3px var(--SURFACE), 0 0 0 4.5px var(--FG); transform: scale(.82); margin-bottom: 4px; }
.fl-preview { background: var(--BG); height: 76px; margin-top: 12px; position: relative; display: grid; place-items: center; overflow: hidden; }

.fl-stats { width: 528px; }
.fl-stats .fl-in { padding: 20px 24px 22px; }
.fl-stats h3 { font: 600 24px var(--display); margin: 0; }
.fl-tiles { display: flex; gap: 12px; margin-top: 18px; }
.fl-tiles .fl-card { flex: 1; padding: 16px; margin: 0; }
.fl-tiles b { font: 600 29px var(--display); display: block; }
.fl-chart { position: relative; height: 190px; margin-top: 10px; }
.fl-chart .fl-col { position: absolute; bottom: 30px; border-radius: 4px 4px 0 0; background: var(--chart); }
.fl-chart .fl-grid { position: absolute; left: 0; right: 0; height: 1px; background: var(--SURFACE_2); }
.fl-chart .fl-glabel { position: absolute; left: 0; font-size: 10.7px; color: var(--FAINT); }
.fl-chart .fl-day { position: absolute; bottom: 6px; font-size: 12px; color: var(--MUTED); text-align: center; }
.fl-chart .fl-day.today { color: var(--FG); font-weight: 600; }
.fl-chart .fl-ttip { position: absolute; top: 2px; background: var(--SURFACE_2); border: 1px solid var(--BORDER); border-radius: 8px; padding: 7px 10px; font-size: 12px; white-space: pre; pointer-events: none; z-index: 2; }

.fl-mobile-note { display: none; font-size: .85rem; color: var(--muted); margin-top: 8px; }
@media (max-width: 900px) { .fl-mobile-note { display: block; } }

/* stand-up reminders (card in the middle of the screen, line in the session panel) */
.fl-stand { width: 400px; padding: 24px 28px; }
.fl-stand h2 { font: 600 29px var(--display); margin: 14px 0 0; }
.fl-stand .fl-lead { color: var(--MUTED); font-size: 14.7px; margin: 2px 0 0; }
.fl-stand .fl-eyebrow { display: flex; align-items: center; gap: 10px; }
.fl-stand .fl-eyebrow .fl-icon { width: 21px; height: 21px; }
.fl-stand .fl-quote { margin-top: 16px; }
.fl-stand .fl-bar { display: block; margin-top: 4px; }
.fl-standclock { font: 300 53px var(--display); margin-top: 8px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.fl-standline { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--MUTED); }
.fl-standline .fl-icon { width: 14px; height: 14px; }
.fl-link { margin-left: auto; color: var(--accent); font-weight: 600; cursor: pointer; }
.fl-link:hover { text-decoration: underline; }

/* gradient editor chips (Settings → Appearance) */
.fl-gchips { display: flex; align-items: center; gap: 6px; }
.fl-gchip { position: relative; width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--BORDER); cursor: pointer; padding: 0; }
.fl-gchip i { position: absolute; top: -1px; right: 2px; font: 600 12px var(--text); font-style: normal; display: none; }
.fl-gchip:hover i { display: block; }
.fl-gchip.add { background: var(--SURFACE_2); color: var(--FG); font: 600 15px var(--text); }

/* the Appearance page grew a gradient row, so the page area scrolls if it needs to */
.fl-settings .fl-content { overflow-y: auto; min-height: 0; }
.fl-settings .fl-main { min-height: 0; }