/* Screens for the v1 server (sign-in, consent, and the admin sheet's insides). Uses the Orbit tokens from theme.css. */
/* theme.css's --cds-shadow-popover wraps whole shadows in light-dark(), which only accepts colours, so it computes to nothing; v1 uses its own */
:root { --v1-shadow: 0 12px 34px light-dark(rgba(30,30,80,.18), rgba(0,0,0,.6)); }
.v1-ov { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; font-size: 16px; line-height: 1.45; color: var(--color-fg); }
html.v1-lock, html.v1-lock body { overflow: hidden; }
.v1-screen { background: var(--color-bg); display: flex; justify-content: center; align-items: flex-start; padding: max(20px, env(safe-area-inset-top)) 16px max(40px, env(safe-area-inset-bottom));
  background-image: radial-gradient(50rem 30rem at 15% -10%, light-dark(rgba(8,145,178,.12), rgba(34,211,238,.12)), transparent 60%), radial-gradient(44rem 28rem at 95% 0%, light-dark(rgba(109,79,214,.12), rgba(167,139,250,.14)), transparent 60%); }
.v1-card { width: 100%; max-width: 480px; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; }
.v1-screen .v1-card { margin-top: 4vh; }

/* type and brand */
.v1-brand { display: flex; align-items: center; gap: 10px; } .v1-mark { width: 40px; height: 40px; } .v1-word { font: 800 22px var(--font-anthropic-sans); letter-spacing: -.03em; } .v1-word b { background: linear-gradient(120deg, var(--accent), var(--accent-2), var(--accent-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v1-h1 { margin: 6px 0 0; font: 800 30px/1.15 var(--font-anthropic-serif); letter-spacing: -.02em; }
.v1-lead, .v1-sub { margin: 0; color: var(--color-fg-muted); } .v1-lead { font-size: 17px; } .v1-sub { font-size: 15px; }
.v1-fine { margin: 0; font-size: 14px; color: var(--color-fg-muted); text-align: center; } .v1-fine.v1-left { text-align: left; }
.v1-bad { margin: 0; color: var(--color-bad); font-weight: 600; }
.v1-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .v1-head h2 { margin: 0; font-size: 22px; letter-spacing: -.01em; }
.v1-x { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--glass); color: var(--color-fg-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.v1-x:hover { color: var(--color-fg); }
.v1-or { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: var(--color-fg-muted); font-size: 15px; } .v1-or::before, .v1-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-line); }
.v1-stack { display: flex; flex-direction: column; gap: 14px; }

/* buttons: one gradient primary per screen, quiet secondaries, a red that is only for "cannot be undone" */
.v1-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-align: center; width: 100%; min-height: 50px; padding: 10px 18px; border: 0; border-radius: 999px; font: 700 16px var(--font-anthropic-sans); text-decoration: none; cursor: pointer; color: var(--heat-ink); background: linear-gradient(120deg, var(--accent), var(--accent-2) 60%, var(--accent-3)); box-shadow: 0 8px 24px var(--glow); }
.v1-btn.v1-sec { background: var(--glass-hi); color: var(--color-fg); border: 1px solid var(--cds-border); font-weight: 600; box-shadow: none; }
.v1-btn.v1-warn { color: var(--color-bad); border-color: color-mix(in srgb, var(--color-bad) 45%, transparent); }
.v1-btn.v1-danger { background: var(--color-bad); color: light-dark(#fff, #1a0610); box-shadow: none; } .v1-btn.v1-small { width: auto; min-height: 44px; padding: 6px 18px; font-size: 15px; }
/* disabled matches the connect popup: a quiet grey with readable muted text, not a faded colour (white on pale red was ~2:1) */
.v1-btn:disabled { background: var(--surface-3); color: var(--color-fg-muted); border-color: transparent; cursor: default; box-shadow: none; }
.v1-btnrow { display: flex; gap: 8px; flex-wrap: wrap; }
.v1-link { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--color-fg-muted); font: 16px var(--font-anthropic-sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.v1-ov button:focus-visible, .v1-ov a:focus-visible, .v1-ov input:focus-visible, .v1-ov summary:focus-visible, .v1-notice:focus-visible, .v1-account:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* admin sheet: section headings */
.v1-insheet h3 { margin: 0; font-size: 17px; }
/* forms */
.v1-form { display: grid; gap: 12px; margin: 0; }
.v1-field { display: grid; gap: 6px; font-size: 15px; font-weight: 600; color: var(--color-fg-muted); }
.v1-field input, .v1-note input { box-sizing: border-box; width: 100%; min-height: 50px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--cds-border); background: var(--color-panel); color: var(--color-fg); font: 400 16px var(--font-anthropic-sans); }
.v1-field input::placeholder { color: color-mix(in srgb, var(--color-fg-muted) 80%, transparent); }
/* Checkboxes drawn from tokens (the native grey square ignored the theme until ticked); the whole row is the 48px target. */
.v1-check { display: flex; gap: 12px; align-items: center; min-height: 48px; font-size: 16px; cursor: pointer; } .v1-check em { color: var(--color-fg-muted); font-style: normal; }
.v1-check + .v1-check { margin-top: -6px; }   /* the card's 14px gap minus 6 = 8px between rows */
.v1-check input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border-radius: 7px; border: 1.5px solid var(--cds-border); background: var(--color-panel); display: grid; place-content: center; cursor: pointer; }
.v1-check input[type=checkbox]:checked { background: linear-gradient(120deg, var(--accent), var(--accent-2)); border-color: transparent; }
.v1-check input[type=checkbox]:checked::before { content: ""; width: 12px; height: 7px; border: solid var(--heat-ink); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); }
.v1-check input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* A switch looks like a switch, not a tick box: 44x26 track inside a 48px row. */
.v1-check input[role=switch] { width: 44px; height: 26px; border-radius: 999px; place-content: center start; padding: 0 3px; transition: background .2s; }
.v1-check input[role=switch]::before { content: ""; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--color-fg-muted); transform: none; transition: transform .2s; }
.v1-check input[role=switch]:checked { background: linear-gradient(120deg, var(--accent), var(--accent-2)); }
.v1-check input[role=switch]:checked::before { width: 18px; height: 18px; border: 0; background: var(--heat-ink); transform: translateX(18px); }
.v1-err { color: var(--color-bad); font-size: 15px; font-weight: 500; } .v1-err:empty { display: none; }
.v1-more { border-top: 1px solid var(--color-border-line); }
.v1-more summary { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 600; list-style: none; }
.v1-more summary::-webkit-details-marker { display: none; }
.v1-more summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-right: 6px; border-right: 2px solid var(--color-fg-muted); border-bottom: 2px solid var(--color-fg-muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s; }
.v1-more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.v1-more[open] { padding-bottom: 12px; } .v1-more > .v1-form, .v1-more > .v1-btn, .v1-more > .v1-field { margin-top: 10px; } .v1-more > p { margin: 0 0 8px; } .v1-more > .v1-sub + .v1-err { margin-top: 6px; }

/* consent */
.v1-trust { list-style: none; margin: 0; padding: 12px 14px; display: grid; gap: 8px; border-radius: 16px; background: var(--glass); border: 1px solid var(--color-border-line); }
.v1-trust li { position: relative; padding-left: 28px; } .v1-trust li::before { position: absolute; left: 0; top: 0; width: 20px; text-align: center; font-weight: 800; }
.v1-trust .y::before { content: "✓"; color: var(--color-ok); } .v1-trust .n::before { content: "✕"; color: var(--color-bad); } .v1-trust .k::before { content: "↺"; color: var(--accent); }
.v1-notice { max-height: 30vh; overflow-y: auto; padding: 4px 14px 10px; border: 1px solid var(--color-border-line); border-radius: 16px; background: var(--color-panel); font-size: 16px; }
.v1-notice::after { content: ""; position: sticky; bottom: -10px; display: block; height: 28px; margin: 0 -14px -10px; background: linear-gradient(transparent, var(--color-panel)); pointer-events: none; }   /* fades the text that continues below */
.v1-notice h2, .v1-notice h3, .v1-notice h4 { margin: 14px 0 4px; font-size: 17px; } .v1-notice p { margin: 6px 0; } .v1-notice ul { margin: 6px 0; padding-left: 20px; }

.v1-card h3 { margin: 0; font-size: 17px; }
.v1-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .v1-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.v1-sw { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--color-border-line); border-radius: 16px; } .v1-sw.v1-off { border-color: color-mix(in srgb, var(--color-warn) 55%, transparent); background: color-mix(in srgb, var(--color-warn) 6%, transparent); }
.v1-sw .v1-small { justify-self: start; }
.v1-pill { display: inline-block; margin-left: 6px; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--color-ok); background: color-mix(in srgb, var(--color-ok) 14%, transparent); }
.v1-off .v1-pill { color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 16%, transparent); }
.v1-note { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.v1-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .v1-tabs button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cds-border); background: transparent; color: var(--color-fg-muted); font: 600 15px var(--font-anthropic-sans); cursor: pointer; }
.v1-tabs button[aria-selected=true] { background: linear-gradient(120deg, var(--accent), var(--accent-2)); color: var(--heat-ink); border-color: transparent; }
.v1-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.v1-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .v1-stat { display: grid; padding: 12px; border: 1px solid var(--color-border-line); border-radius: 16px; background: var(--glass); } .v1-stat b { font-size: 24px; letter-spacing: -.02em; } .v1-stat span { font-size: 13px; color: var(--color-fg-muted); }
.v1-account { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--color-border-line); background: var(--glass); color: var(--color-fg-muted); cursor: pointer; } .v1-account:hover { color: var(--color-fg); } .v1-account svg { width: 22px; height: 22px; }
.v1-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px 18px; border-radius: 14px; background: var(--color-fg); color: var(--color-bg); font-size: 15px; box-shadow: var(--v1-shadow); }

/* ===== The shared dashboard pieces (apps panel, connect / disconnect popups), restyled for v1 only.
   html.rl-v1 is set by boot.js once /api/v1/health answers, so none of this reaches legacy mode. ===== */
.rl-v1 .rl-panel { box-sizing: border-box; font-size: 15px; box-shadow: var(--v1-shadow); }
.rl-v1 .rl-panel .rl-sub { font-size: 14px; }
.rl-v1 .rl-hd { align-items: center; } .rl-v1 .rl-hd .rl-sub { margin-left: auto; }
.rl-v1 .rl-appspanel .rl-x { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--glass); color: var(--color-fg-muted); font-size: 24px; line-height: 1; }
.rl-v1 .rl-panel button:focus-visible, .rl-v1 .rl-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* app cards: readable status lines and 44px buttons */
.rl-v1 .rl-nm b { font-size: 15px; } .rl-v1 .rl-nm small { font-size: 13px; } .rl-v1 .rl-tag { font-size: 12px; padding: 2px 9px; }
.rl-v1 .rl-wc .rl-sm, .rl-v1 .rl-wc .rl-sub { font-size: 13px; } .rl-v1 .rl-warnb, .rl-v1 .rl-fees { font-size: 13px; }
.rl-v1 .rl-wc .rl-p, .rl-v1 .rl-wc .rl-o { min-height: 44px; padding: 0 20px; font-size: 15px; }
.rl-v1 .rl-wc .rl-l { min-height: 44px; padding: 0 10px; margin-right: -10px; font-size: 15px; font-weight: 600; text-decoration: none; opacity: 1; }
.rl-v1 .rl-wc .rl-l:hover { text-decoration: underline; text-underline-offset: 3px; }
/* status lines wrap to two lines instead of cutting mid-word ("reconnect to kee…") */
.rl-v1 .rl-nm small { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.rl-v1 .rl-wc.offc .rl-wbody > .rl-sub { font-size: 15px; opacity: 1; }
/* the week axis sits on its own line under the bars, with a baseline */
.rl-v1 .rl-wbars { border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); padding-bottom: 2px; }
.rl-v1 .rl-wlab { margin-top: 6px; line-height: 1.2; }
.rl-v1 .rl-panel [data-refresh] { min-height: 44px; padding: 0 18px; border-radius: 999px; font-weight: 600; }
.rl-v1 .rl-mini b { font-size: 14px; } .rl-v1 .rl-mini .rl-sub { font-size: 13px; }
/* a not-connected card is always dark grey, so its text must be light whatever the app's own ink colour is (Blinkit's is near-black) */
.rl-v1 .rl-wc.offc { --ink: #e8ebff !important; }
/* the brand bar: every control at least 44px for thumbs */
.rl-v1 #brand-actions .rl-chip { min-height: 44px; min-width: 44px; justify-content: center; font-size: 14px; padding: 0 14px; }
.rl-v1 .sp-theme { width: 44px; height: 44px; }
@media (max-width: 640px) {
  /* phone: the apps panel and the date range become bottom sheets, within thumb reach, never wider than the screen */
  .rl-v1 .rl-panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 88vh; overscroll-behavior: contain; border-radius: 22px 22px 0 0; border-bottom: 0; padding: 6px 16px max(18px, env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax rgba(0,0,0,.5), var(--v1-shadow); z-index: 80; }
  .rl-v1 .rl-panel::before { content: ""; flex: none; display: block; width: 40px; height: 5px; margin: 4px auto 4px; border-radius: 3px; background: var(--cds-chart-muted); }
}