/* The account page (/account): the Library, boards, account settings and the sign-in screens.
   Shared with the desktop app (synced by tack-browser-app/scripts/sync-shared.mjs). */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:          #f0ebe3;
  --ink-muted:    #8a8070;
  --accent:       #013FF4;
  --accent-light: #8FBEF7;
  --accent-soft:  rgba(1,63,244,0.10);
  --error:        #e03d2f;   /* borders and icons (4.27:1 on the card, passes the 3:1 non-text rule) */
  --error-text:   #ff8c80;   /* error copy on the dark surfaces: 8.16:1 on --bg-card (--error is 4.27:1) */
  --bg:           #0d0b09;
  --bg2:          #111009;
  --bg-card:      #161410;
  --border:       rgba(240,235,227,0.07);
  --border-hi:    rgba(240,235,227,0.14);
  --radius-card:  16px;
  --nav-height:   68px;
  --nav-gutter:   52px;     /* nav bar and footer share this side gutter */
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  pointer-events: none; z-index: 999; opacity: 0.38;
}

/* ══ NAV ══ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: var(--nav-height); padding: 0 var(--nav-gutter);
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(13,11,9,0.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
}
.nav-logo img { height: 28px; width: auto; display: block; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-right.hidden { display: none; }
.nav-link {
  color: var(--ink-muted); font-size: var(--text-ui); text-decoration: none;
  font-weight: 400; transition: color 0.2s;
}
@media (hover: hover) { .nav-link:hover { color: var(--ink); } }
.nav-cta {
  background: var(--accent); color: #fff; border: none;
  padding: var(--control-pad-y) var(--control-pad-x); border-radius: var(--control-radius);
  font-family: 'DM Sans', sans-serif; font-size: var(--text-ui); font-weight: 500;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  box-shadow: 0 4px 24px rgba(1,63,244,0.3);
}
@media (hover: hover) { .nav-cta:hover { opacity: 0.88; transform: translateY(-1px); } }
.nav-account {
  position: relative;
  display: none;
  align-items: center;
}
.nav-account.open .nav-account-menu { display: block; }
.nav-account-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
  border: 1px solid var(--border-hi);
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.15s, background 0.2s;
}
@media (hover: hover) { .nav-account-trigger:hover {
  border-color: var(--ink-muted);
  background: rgba(240,235,227,0.08);
  transform: translateY(-1px);
} }
.nav-account-avatar {
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}
.nav-account-chevron {
  display: inline-flex;          /* SVG chevron, vertically centred on the avatar */
  align-items: center;
  width: 15px;
  height: 15px;
  color: var(--ink-muted);
}
.nav-account-chevron svg {
  display: block;
  width: 15px;
  height: 15px;
  transition: transform 0.25s ease;
}
.nav-account.open .nav-account-chevron svg { transform: rotate(180deg); }
@media (hover: hover) { .nav-account-trigger:hover .nav-account-chevron svg { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .nav-account-chevron svg { transition: none; } }
.nav-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 250;
  display: none;
  box-sizing: border-box;
  width: 240px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  border: 1px solid rgba(240, 235, 227, 0.08);
  border-radius: 16px;
  background: rgba(20, 18, 16, 0.98);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.34);
  text-align: left;
}
/* Same menu as the extension: avatar, email and plan, then icon rows. */
.nav-account-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 8px 12px;
  border-bottom: 1px solid rgba(240, 235, 227, 0.08);
}
.nav-account-user-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
}
.nav-account-user-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.nav-account-email {
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nav-account-plan {
  color: var(--ink-muted);
  font-size: 13px;
  line-height: 1.3;
}
/* A paid plan reads in the title highlight blue; Free stays grey beside its blue Upgrade link. */
.nav-account-plan:is([data-plan="pro"], [data-plan="studio"]) { color: var(--accent-light); }
.nav-account-action {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-account-action:hover,
.nav-account-action:focus-visible {
  background: rgba(240, 235, 227, 0.07);
  color: var(--ink);
  text-decoration: none;
  outline: none;
}
.nav-account-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Upgrade shows only once the plan is known to be Free; paid plans manage billing in settings. */
/* Upgrade sits on the plan line ("Free plan · Upgrade"), only once the plan is known to be Free. */
.nav-account-plan-row { display: flex; align-items: baseline; gap: 4px; min-width: 0; }
.nav-account-upgrade { display: none; position: relative; color: var(--accent-light, #8fbef7); font-size: 13px; font-weight: 500; line-height: 1.3; text-decoration: none; }
.nav-account-upgrade::before { content: '·'; display: inline-block; margin-right: 4px; color: #94a0b0; }
.nav-account-upgrade::after { content: ''; position: absolute; inset: -8px -8px; }
.nav-account-upgrade:hover,
.nav-account-upgrade:focus-visible { color: var(--accent-light, #8fbef7); text-decoration: underline; text-underline-offset: 2px; outline: none; }
.nav-account-menu:has(.nav-account-plan[data-plan="free"]) .nav-account-upgrade { display: inline-block; }
.nav-account-divider {
  height: 1px;
  margin: 8px 0;
  background: rgba(240, 235, 227, 0.08);
}
/* Website version and environment, same look as the extension's version line. */
.nav-account-version {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px 4px;
  border-top: 1px solid rgba(240, 235, 227, 0.08);
  color: var(--ink-muted);
  font-size: 12px;
  line-height: 1.3;
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}
.nav-account-version:empty { display: none; }
/* Green dot on production, amber where the site is not live. */
.nav-account-version::before {
  content: '';
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #5fd38d;
}
.nav-account-version[data-env="preview"]::before,
.nav-account-version[data-env="local"]::before { background: #f2c46d; }
.nav-account-action.danger {
  color: #ff8c80;
  border-color: rgba(224,61,47,0.22);
  background: rgba(224,61,47,0.08);
}
@media (hover: hover) { .nav-account-action.danger:hover {
  border-color: rgba(224,61,47,0.42);
  background: rgba(224,61,47,0.12);
} }

/* ══ PAGE LAYOUT ══ */
.page-wrap {
  width: 100%;
  margin: 0 auto;
  padding: 110px var(--nav-gutter) 56px;   /* content shares the nav and footer gutter */
  box-sizing: border-box;
  flex: 1 0 auto;   /* grows inside #history-screen so the footer sits at the bottom */
}

/* ══ SIGN-IN SCREEN ══ */
#signin-screen,
#reset-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px);
  padding: 40px 20px;
}
#reset-screen {
  display: none;
}
#forgot-screen,
/* One light scrollbar for every scrolling area (same look as the desktop app's panel): thin rounded thumb, transparent
   track, a little brighter on hover. Firefox gets the standard properties; Chromium the ::-webkit-scrollbar set. */
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: rgba(240,235,227,0.3) transparent; } }
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track, *::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-thumb { min-height: 42px; border: 3px solid transparent; border-radius: 999px; background: rgba(240,235,227,0.3); background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(240,235,227,0.5); background-clip: padding-box; }
/* The page's own scrollbar runs along the window's edge: a wider gutter keeps its thumb 5px off the edge. */
body::-webkit-scrollbar { width: 16px; }   /* Chromium styles the window's scrollbar from body */
body::-webkit-scrollbar-thumb { border-width: 5px; }

html { scrollbar-gutter: stable; }   /* space for the scrollbar is always kept, so a scrollbar never shifts the page */
#verify-screen {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 68px);
  padding: 40px 20px;
}
.signin-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px 44px;
  width: 100%;
  max-width: 420px;
}
.signin-logo {
  width: 52px; height: 52px;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(1,63,244,0.4);
  margin: 0 auto 28px;
  display: block;
}
.signin-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-align: center;
  margin-bottom: 6px;
}
.signin-card .back-link { display: flex; width: fit-content; min-height: 40px; margin-bottom: var(--space-4); font-size: var(--text-16); }
.signin-card .back-link span { font-size: 20px; line-height: 1; }   /* the arrow reads at the text's size */  /* block, so the card's centred text does not centre it */
.signin-title em { font-style: italic; color: var(--accent-light); }
.signin-sub {
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  margin-bottom: 32px;
}
.form-field { margin-bottom: 14px; }
.form-field label {
  display: block;
  font-size: var(--text-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--space-2);
}
.form-field input {
  width: 100%;
  background: rgba(240,235,227,0.05);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-input);
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
}
.form-field input:focus { border-color: var(--accent-light); }
.form-field input::placeholder { color: var(--ink-muted); }
.signin-btn {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s;
  box-shadow: 0 4px 24px rgba(1,63,244,0.3);
}
@media (hover: hover) { .signin-btn:hover { opacity: 0.88; } }
.signin-btn:disabled:not([aria-busy="true"]) { opacity: 0.5; cursor: not-allowed; }
.provider-btn {
  width: 100%;
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  border: 1px solid var(--border-hi);
  border-radius: 10px;
  padding: 13px 14px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 12px;
  transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
@media (hover: hover) { .provider-btn:hover { border-color: var(--ink-muted); background: rgba(240,235,227,0.07); transform: translateY(-1px); } }
.provider-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; }
.provider-btn:disabled { transform: none; }   /* fade and cursor come from the shared disabled rule */
.signin-error {
  color: var(--error-text);
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  min-height: 18px;
}
.signin-helper {
  color: var(--ink-muted);
  font-size: 12px;
  margin-top: 10px;
  text-align: center;
  min-height: 18px;
  line-height: 1.5;
}
.signin-helper.success { color: var(--accent-light); }
.signin-link-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -4px;
  margin-bottom: 4px;
}
.signin-link {
  font-size: 11px;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
@media (hover: hover) { .signin-link:hover { color: var(--accent-light); } }
/* Create account | Sign in: the All | Boards pill; the thumb slides to the chosen side. */
.auth-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 0 0 var(--space-6); padding: 4px; border: 1px solid var(--border); border-radius: 999px; background: rgba(240,235,227,0.03); }
.auth-switch::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 12px) / 2); border-radius: 999px; background: rgba(240,235,227,0.11); box-shadow: inset 0 0 0 1px rgba(240,235,227,0.08); transition: transform 0.25s ease; }
.signin-card[data-mode="signin"] .auth-switch::before { transform: translateX(calc(100% + 4px)); }
@media (prefers-reduced-motion: reduce) { .auth-switch::before { transition: none; } }
.auth-switch-tab { position: relative; z-index: 1; min-height: 36px; padding: 0 var(--space-2); white-space: nowrap; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font-family: 'DM Sans', sans-serif; font-size: var(--text-ui); cursor: pointer; transition: color 0.2s; }
.auth-switch-tab[aria-selected="true"] { color: var(--ink); }
@media (hover: hover) { .auth-switch-tab:hover { color: var(--ink); } }
.auth-switch-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.signin-card[data-mode="signup"] .signin-only,
.signin-card[data-mode="signin"] .signup-only { display: none; }
/* 16px above and below "or": the button before it drops its own bottom margin. */
.signin-card .provider-btn:has(+ .signin-divider) { margin-bottom: 0; }
/* OR: its line sits mid-box and the Email label adds about 4px of leading, so 16 above and 12 below read the same. */
.signin-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); color: var(--ink-muted); font-size: var(--text-12); letter-spacing: 0.1em; text-transform: uppercase; }
.signin-divider::before, .signin-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.signin-password-wrap { position: relative; }
.signin-password-wrap input { padding-right: 48px; }
.signin-password-toggle { position: absolute; top: 50%; right: 4px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; transform: translateY(-50%); border: 0; border-radius: 8px; background: transparent; color: var(--ink-muted); cursor: pointer; }
.signin-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.signin-password-toggle .eye-hide, .signin-password-toggle[aria-pressed="true"] .eye-show { display: none; }
.signin-password-toggle[aria-pressed="true"] .eye-hide { display: block; }
@media (hover: hover) { .signin-password-toggle:hover { color: var(--ink); } }
.signin-password-toggle:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
.signin-sub-line { display: block; }
/* 32px from the password rule (Create account) or Forgot password? (Sign in) to the button,
   as in the extension. */
.signin-card[data-mode="signup"] .form-field:has(.signin-pw-hint) { margin-bottom: var(--space-8); }
.signin-card .signin-link-row { margin-bottom: var(--space-8); }
/* Every form: the line under the last field (the password rule, its problem, Forgot password?)
   sits 8px under the field and 32px above the main button. Forgot password? sits right under the
   field like the rule, not in a tall box (ids outrank messaging.css). */
#signin-card[data-mode="signin"] .form-field:has(#password) { margin-bottom: var(--space-2); }
#signin-card .signin-link-row { margin: 0 0 var(--space-8); }
#signin-card .signin-link { min-height: 0; line-height: 1.5; }
/* Google, Apple, the fields and the main button are all 48px tall, as in the extension. */
:is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-card :is(.form-field input, .signin-btn) { box-sizing: border-box; height: 48px; min-height: 48px; }
/* The exception: where nothing stands under the last field (Forgot password, Set new password), a
   problem that appears there keeps 16px to the button, like the space between two fields, so
   the button only moves by the problem's line. */
.signin-card .form-field:has(+ .signin-error):has(.field-error:not(:empty)) { margin-bottom: var(--space-4); }
/* With a problem showing, the rule (or Forgot password?) → problem → button are 16px apart. */
.signin-card:has(#signin-error:not(:empty)) :is(.form-field:has(.signin-pw-hint), .signin-link-row) { margin-bottom: var(--space-4); }
.signin-card #signin-error:not(:empty) { margin: 0 0 var(--space-4); }
#verify-screen :is(#verify-error, #verify-helper):not(:empty) { margin-top: var(--space-2); }   /* Resend's 32px box already adds the rest: ~16px to the text */
.signin-pw-hint { margin: var(--space-2) 0 0; color: var(--ink-muted); font-size: 13px; line-height: 1.5; }   /* the size of Forgot password? */
.form-field:has(.field-error:not(:empty)) .signin-pw-hint { display: none; }   /* the problem replaces the rule */
/* A button that takes you somewhere or does one thing on its own carries an 18px line icon. */
.signin-btn:has(.btn-icon) { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); }
:is(.signin-btn, .empty-cta) .btn-icon { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-btn-icon.is-filled { fill: currentColor; stroke: none; }
a.signin-btn { box-sizing: border-box; text-decoration: none; }
.signin-btn.secondary { background: transparent; border: 1px solid var(--border-hi); box-shadow: none; color: var(--ink); }
.signin-btn[hidden] { display: none; }
.verify-inbox { margin-top: 0; }
/* Waiting for confirmation… has 32px above and below it. */
#verify-screen .signin-card .signin-sub { margin-bottom: var(--space-8); }
#verify-screen .verify-status { margin-bottom: var(--space-8); }
/* Resend: a quiet text link centred under the inbox button. Its 32px box puts the text about 16px under the button. */
/* Open email: the same blue button, with a menu of services under it. */
.verify-inbox-choose { position: relative; }
.verify-inbox-choose[hidden] { display: none; }
.verify-inbox-choose .verify-inbox { width: 100%; }
.verify-inbox-choose .verify-inbox { position: relative; }
.verify-inbox-caret { position: absolute; top: 50%; right: var(--space-4); margin-top: -9px; transition: transform 0.2s ease; }   /* at the edge, like a select; envelope and text stay centred */
.verify-inbox[aria-expanded="true"] .verify-inbox-caret { transform: rotate(180deg); }
/* Floating UI makes it position: fixed and places it under the button, or above it when the window
   is too short, so opening it never changes the page's height (no scrollbar, no jump). Without the
   library it falls back to sitting under the button. */
.verify-inbox-menu { position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0; z-index: 300; display: grid; gap: 2px; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 6px; border: 1px solid rgba(240,235,227,0.08); border-radius: 16px; background: #141210; box-shadow: 0 20px 45px rgba(0,0,0,0.34); text-align: left; }   /* opaque, so Resend never shows through */
.verify-inbox-menu[hidden] { display: none; }
.verify-inbox-option { display: flex; align-items: center; gap: var(--space-3); height: 44px; padding: 0 10px; border-radius: 8px; color: var(--ink); font-size: var(--text-14); font-weight: 500; text-decoration: none; }
@media (hover: hover) { .verify-inbox-option:hover { background: rgba(240,235,227,0.07); } }   /* like the account menu */
.verify-inbox-option:focus-visible { outline: none; background: rgba(240,235,227,0.07); }
.verify-inbox-logo { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: #fff; }   /* white tile, so every logo reads on the dark menu */
.verify-inbox-logo svg { width: 16px; height: 16px; }
.verify-resend { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 32px; margin: var(--space-2) auto 0; padding: 0 var(--space-2); border: 0; background: none; color: var(--ink-muted); font-family: 'DM Sans', sans-serif; font-size: var(--text-14); cursor: pointer; transition: color 0.2s; }
.verify-resend[hidden] { display: none; }
.verify-resend .btn-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .verify-resend:hover:not(:disabled) { color: var(--ink); } }
.verify-resend:disabled { cursor: default; opacity: 0.6; }
.verify-resend[aria-busy="true"] { opacity: 1; }
.verify-resend { font-variant-numeric: tabular-nums; }   /* the countdown doesn't wobble */
.verify-resend:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 6px; }
.verify-email { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.verify-status { display: flex; align-items: center; justify-content: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--ink-muted); font-size: var(--text-14); }
/* The logo's dots from the buttons, half as large again; blue, like the logo. */
.verify-status .btn-spinner { zoom: 1.5; margin-right: 6px; color: var(--accent-light); }
.verify-status.is-stopped .btn-spinner { display: none; }
/* The art's own transparent edge adds about 10px over it, so 24px above reads as ~34px: the
   card ends 32px under its last button to match. Screen ids outrank messaging.css. */
@media (min-width: 601px) {
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-card { padding-bottom: var(--space-8); }
}
/* Phones: like the extension's sign-in sheet. The card's box goes, everything runs edge to edge
   at the page gutter, and the title sits on the left above the switch. No slide: it's a page. */
@media (max-width: 600px) {
  #signin-screen, #forgot-screen, #verify-screen, #reset-screen { justify-content: flex-start; padding: var(--space-4) var(--space-4) var(--space-6); }
  .auth-switch { margin-bottom: var(--space-4); }
  .auth-switch-tab { padding: 0 var(--space-1); }   /* "Create account" stays one line down to 320px */
  /* Screen ids outrank messaging.css, which loads after this page's styles. */
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-card { max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-card .signin-art { display: none; }
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) :is(.signin-title, .signin-sub) { text-align: left; }
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-title { font-size: 32px; }
  :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) .signin-sub { margin-bottom: var(--space-6); }
  .verify-status { justify-content: flex-start; }
}
@media (max-width: 359px) {
  #signin-screen, #forgot-screen, #verify-screen, #reset-screen { padding-left: var(--space-3); padding-right: var(--space-3); }   /* 12px, like the Library at 320 */
}

/* ══ HISTORY SCREEN ══ */
/* Shown as a flex column (see showHistory) that fills the viewport:
   .page-wrap grows, the shared footer takes the remaining space. */
#history-screen { display: none; flex-direction: column; min-height: 100vh; }

/* Back link (in a board), title and subtitle; a board's name gets the full width. */
.history-header { display: grid; grid-template-columns: minmax(0, 1fr); }
.history-header > .back-link { justify-self: start; margin-bottom: var(--space-2); }
/* All | Boards and this view's actions on one row that sticks under the nav while the images
   scroll, on the nav's blurred background from edge to edge. A line shows once it is stuck. */
.library-toolbar {
  position: sticky;
  top: calc(var(--nav-height) - 1px);   /* 1px under the nav's edge, so the observer sees it stick */
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin: var(--space-3) calc(-1 * var(--nav-gutter)) calc(var(--space-8) - var(--space-3));   /* 32px to the images, as before */
  padding: var(--space-3) var(--nav-gutter);
  /* No band and no line: only the controls float over the images when the bar sticks. */
  background: transparent;
}
/* Each control carries its own surface (the card colour, frosted), so it stays readable over any image
   scrolling under it; the primary blue keeps its own colour. */
.library-toolbar :is(.library-tabs, .library-action:not(.primary), .board-menu-trigger) {
  background: rgba(22,20,16,0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.library-toolbar .selection-count {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(22,20,16,0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.library-toolbar:not(:has(> :not(.hidden))) { display: none; }   /* account settings: nothing to show */
.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-left: auto;   /* rightmost, also in a board where there is no All | Boards */
}
.action-icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Same as the extension's How to pill: 9px before the icon, 6px gap, 11px after the label,
   13px semibold label, 20px icon with its stroke kept at 1.6px on screen. */
.header-actions .library-action { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 11px 0 9px; font-size: 13px; font-weight: 600; }
.header-actions .library-action .action-icon { width: 20px; height: 20px; stroke-width: 1.28; }
#select-mode-btn[aria-pressed="true"] { padding: 0 11px; }
/* Select's check circle sits 2.5px inside its 20px box, so the left edge gets 1px less padding than
   the right: the space before the circle then matches the space after the text. */
#select-mode-btn[aria-pressed="false"] { padding: 0 12px 0 9px; }
/* Create board's plus is drawn smaller (16px: a 9px cross, as tall as the text's capitals), and the
   padding is set so the space before the cross matches the space after the text. */
#create-board-btn { padding: 0 12px 0 8px; }
#create-board-btn .action-icon { width: 16px; height: 16px; stroke-width: 1.5; }
/* Cancel takes Select's place and width; it has no icon. */
#select-mode-btn[aria-pressed="true"] .select-icon { display: none; }
.history-heading {
  font-family: 'Cormorant Garamond', serif;
  font-size: var(--text-app-title);
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.history-heading em { font-style: italic; color: var(--accent-light); }
.history-meta {
  font-size: var(--text-subtitle);
  color: var(--ink-muted);
  margin-top: var(--title-gap);
}
/* Select and Cancel sit in the same slot: same width, same place, so the
   control under the pointer does not move when the mode flips. */
.library-action.toolbar-anchor { min-width: 90px; text-align: center; }   /* Select's own width, so Cancel keeps it */
.library-actions,
.board-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.library-action,
.board-back {
  border-radius: var(--control-radius);
  border: 1px solid var(--border-hi);
  background: rgba(240,235,227,0.04);
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  padding: var(--control-pad-y) var(--control-pad-x);
  min-height: var(--control-height);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
@media (hover: hover) { .library-action:not(.primary):hover,.board-back:hover {
  border-color: var(--ink-muted);
  color: var(--ink);
  transform: translateY(-1px);
} }
@media (hover: hover) { .library-action.primary:hover:not(:disabled) { background: #0f49ff; border-color: transparent; transform: translateY(-1px); } }   /* primary blue, same lift as Select */
.library-action.primary {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 24px rgba(1,63,244,0.26);
}
/* All | Boards: a neutral segmented filter (the same control as the extension's
   orientation picker), not a pair of buttons. */
.library-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(240,235,227,0.03);
}
.library-tab {
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
@media (hover: hover) { .library-tab:hover { color: var(--ink); } }
.library-tab.active {
  background: rgba(240,235,227,0.11);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(240,235,227,0.08);
}
.library-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
/* The active pill slides between All and Boards (syncTabIndicator measures the active tab). */
.library-tabs { position: relative; }
.library-tab { position: relative; z-index: 1; }
.library-tabs::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: var(--tab-w, 0);
  border-radius: 999px;
  background: rgba(240,235,227,0.11);
  box-shadow: inset 0 0 0 1px rgba(240,235,227,0.08);
  opacity: 0;
  transform: translateX(var(--tab-x, 0));
  transition: transform 0.25s ease, width 0.25s ease;
}
.library-tabs.has-indicator::before { opacity: 1; }
.library-tabs.has-indicator .library-tab.active { background: transparent; box-shadow: none; }
.library-tabs.no-slide::before { transition: none; }
@media (prefers-reduced-motion: reduce) { .library-tabs::before { transition: none; } }
.hidden {
  display: none !important;
}
.library-action.hidden {
  display: none !important;
}
/* ⋯ board options: tertiary, no fill on the board page; a glass circle on board cards. */
.board-menu-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.board-menu-trigger svg { width: 16px; height: 16px; fill: currentColor; }
@media (hover: hover) { .board-menu-trigger:hover { color: var(--ink); background: rgba(240,235,227,0.08); } }
.board-menu-trigger[aria-expanded="true"] { color: var(--ink); background: rgba(240,235,227,0.08); }
.board-menu-trigger:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.board-menu-trigger.hidden { display: none; }
/* ⋯ on the board page: the same outlined button as Select, as a circle. */
#board-menu-btn {
  width: var(--control-height);
  height: var(--control-height);
  border: 1px solid var(--border-hi);
  background: rgba(240,235,227,0.04);
  transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}
@media (hover: hover) { #board-menu-btn:hover {
  border-color: var(--ink-muted);
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  transform: translateY(-1px);
} }
#board-menu-btn[aria-expanded="true"] { border-color: var(--ink-muted); background: rgba(240,235,227,0.08); color: var(--ink); }
.board-card { position: relative; }
.board-card .board-menu-trigger {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 2;
  width: 32px;
  height: 32px;
  color: var(--ink);
  background: rgba(14,12,10,0.6);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}
/* Shown on hover; always on touch screens, which have no hover. */
.board-card:hover .board-menu-trigger,
.board-card .board-menu-trigger:focus-visible,
.board-card .board-menu-trigger[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .board-card .board-menu-trigger { opacity: 1; } }
@media (hover: hover) { .board-card .board-menu-trigger:hover { background: rgba(14,12,10,0.82); } }
.board-options-menu {
  position: fixed;
  overflow-y: auto;   /* Floating UI limits its height in a very short window */
  box-sizing: border-box;
  z-index: 260;
  min-width: 200px;
  padding: var(--space-2);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  background: rgba(22,20,16,0.98);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
}
.board-options-menu[hidden] { display: none; }
.board-options-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  text-align: left;
  cursor: pointer;
}
.board-options-item svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { .board-options-item:hover { background: rgba(240,235,227,0.07); } }
.board-options-item:focus-visible { outline: none; background: rgba(240,235,227,0.07); }
.board-options-item.danger { color: #ff8c80; }
.board-options-divider { height: 1px; margin: var(--space-2) 0; background: var(--border); }
/* Toast: bottom centre, the same glass as the selection bar. */
.library-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 1100;   /* above the full-size view */
  display: flex;
  align-items: center;
  gap: var(--space-3);   /* icon, text and action */
  max-width: calc(100vw - 32px);
  min-height: 48px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: rgba(22,20,16,0.95);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  color: var(--ink);
  font-size: var(--text-ui);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.library-toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
/* Over the full-size view the toast goes to the top, clear of its prompt bar. */
/* Without an action button the pill is even: 16px on both sides (the action's own padding made up the right). */
.library-toast:not(:has(.library-toast-action:not([hidden]))) { padding-right: var(--space-4); }
.library-toast-icon { display: inline-flex; flex: none; color: var(--accent-light); }
.library-toast-icon[hidden] { display: none; }
.library-toast-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body:has(#lightbox.open) .library-toast { bottom: auto; top: var(--space-6); transform: translate(-50%, -16px); }
body:has(#lightbox.open) .library-toast.is-visible { transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .library-toast { transition: none; } }
.library-toast-action {
  min-height: 32px;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: 999px;
  background: rgba(240,235,227,0.08);
  color: var(--accent-light);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  font-weight: 500;
  cursor: pointer;
}
@media (hover: hover) { .library-toast-action:hover { background: rgba(240,235,227,0.14); } }
.library-toast-action:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.library-toast-action[hidden] { display: none; }

/* Selecting: the count floats at the bottom in dark glass, centred, rising in with the first
   pick; the picked images' actions sit left of Cancel in the sticky toolbar. */
.selection-bar {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  z-index: 120;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: rgba(22,20,16,0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  pointer-events: none;   /* it only shows the count; clicks reach the tile under it */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.selection-bar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) { .selection-bar { transition: none; } }
.selection-status {
  color: var(--ink);
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Tablets and desktop: the count sits in the toolbar, left of the actions; the bar is phones only. */
.selection-count {
  padding: 0 var(--space-2);
  color: var(--ink);
  font-size: var(--text-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (min-width: 601px) { .selection-bar { display: none; } }
.header-actions .selection-action { color: var(--ink); white-space: nowrap; }
.header-actions .library-action.primary.selection-action { color: #fff; box-shadow: none; }
@media (hover: hover) { .header-actions .library-action.primary.selection-action:hover { background: #0f49ff; border-color: transparent; } }
.header-actions .library-action.danger.selection-action { color: #ffb3b3; }
.selection-action:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.selection-action .btn-spinner { margin-right: 6px; }   /* only the dots' own width: the gap spaces the label */
/* Phones: the count floats at the bottom instead; All | Boards stays and the row tightens. */
@media (max-width: 600px) {
  .selection-bar { bottom: var(--space-4); }
  .selection-count { display: none; }
  /* The bar floats over the last row: leave room so nothing ends up under it. */
  body.is-selecting .page-wrap { padding-bottom: 96px; }
  .library-toolbar:has(.selection-action:not(.hidden)) { gap: var(--space-2); }
  .library-toolbar:has(.selection-action:not(.hidden)) #select-mode-btn { min-width: 0; }
}
/* Up to 699px the actions keep only their icons (each keeps its name), so the row fits beside
   Cancel: with the count on tablets, with All | Boards and 16px margins on phones. */
@media (max-width: 699px) {
  .header-actions .selection-action { width: var(--control-height); padding: 0; }
  .selection-action .selection-label,
  .selection-action .btn-busy-label { display: none; }
}
/* Very small phones (320px): Cancel keeps only its ✕ (its name stays "Cancel"). */
.cancel-icon { display: none; }
@media (max-width: 359px) {
  #select-mode-btn[aria-pressed="true"] { width: var(--control-height); min-width: 0; padding: 0; }
  #select-mode-btn[aria-pressed="true"] .cancel-icon { display: block; }
  #select-mode-btn[aria-pressed="true"] #select-mode-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Account settings: each section's title and explanation above its card, 48px between sections; at most 1408px, the full width of a 14" MacBook Pro window (1512px less the 52px margins). 32px under the subtitle. */
.account-settings { display: flex; flex-direction: column; width: 100%; max-width: 1408px; margin-top: var(--space-8); margin-bottom: var(--space-8); }
.settings-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.settings-section + .settings-section { margin-top: var(--space-12); }   /* the cards already split sections: space, no line */
.settings-section[hidden], .settings-section.hidden { display: none; }
.settings-section-head { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.settings-section-title {
  margin: 0;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-18);
  font-weight: 500;
  line-height: 1.3;
  text-wrap: balance;
}
.settings-section-desc { margin: 0; color: var(--ink-muted); font-size: var(--text-14); line-height: 1.5; }
.settings-section-body { min-width: 0; }
.settings-card {
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  background: rgba(22,20,16,0.72);
  padding: 0 var(--space-6);
}
/* Every row: name (16px) with its value or note under it (14px grey), the button on the right. */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 72px;
  padding: var(--space-4) 0;
}
.settings-row + .settings-row { border-top: 1px solid var(--border); }
.settings-row-text { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; min-width: 0; }
/* A 20px line icon before each row's name, in the account menu's style; level with the name. */
.settings-row-icon {
  flex: none;
  align-self: flex-start;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  margin-right: calc(var(--space-3) - var(--space-4));   /* 12px to the name; the row's 16px gap stays before the button */
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.settings-row-label { color: var(--ink); font-size: var(--text-body); font-weight: 500; }
.settings-row-value { color: var(--ink-muted); font-size: var(--text-14); line-height: 1.5; overflow-wrap: anywhere; }
/* Plan and its name on one line ("Plan  Pro plan"), the usage under them: one line less. */
.settings-row-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); min-width: 0; }
#settings-plan-value { color: var(--accent-light); }   /* the plan's name in the accent, every plan */
.settings-row-detail { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); min-width: 0; }
.settings-row-detail > [hidden] { display: none; }
.settings-text-link { padding: 0; border: 0; background: none; color: var(--accent-light); font: inherit; cursor: pointer; }
@media (hover: hover) { .settings-text-link:hover { text-decoration: underline; } }
.settings-text-link:focus-visible { text-decoration: underline; outline: 0; }
.settings-row-note { color: var(--ink-muted); font-size: var(--text-14); line-height: 1.5; }
.settings-row-note[hidden] { display: none; }
.settings-pending-email { color: var(--accent-light); }
.settings-row-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: 0 var(--control-pad-x);
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
@media (hover: hover) { .settings-row-btn:hover { border-color: var(--ink-muted); background: rgba(240,235,227,0.08); } }
.settings-row-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.settings-row-btn[hidden] { display: none; }
/* Change has a pencil, Manage plan a box with an arrow (it leaves Settings). */
/* Plan usage: a thin bar and "37 of 120 generations used · resets Nov 28". */
.settings-usage { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); max-width: 320px; }
.settings-usage[hidden] { display: none; }
.settings-usage-bar { display: block; height: 4px; border-radius: 999px; background: rgba(240,235,227,0.1); overflow: hidden; }
.settings-usage-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent-light); transition: width 0.4s ease; }
.settings-usage.is-full .settings-usage-fill { background: #e8b048; }
.settings-usage-text { color: var(--ink-muted); font-size: var(--text-13); }
/* Images per generation: the page's own popover menu (not the system list), pill trigger like the other controls. */
.settings-menu { flex: none; }
.settings-menu[hidden] { display: none; }
.settings-menu[aria-busy="true"] .settings-menu-trigger { opacity: 0.6; pointer-events: none; }
.settings-menu-trigger { height: 40px; min-width: 72px;   /* "1" or "2" and the caret */ padding: 0 12px 0 16px; display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--border); border-radius: 999px; background: rgba(240,235,227,0.03); color: var(--ink); font: inherit; font-size: var(--text-ui); cursor: pointer; transition: border-color 0.2s; }
@media (hover: hover) { .settings-menu-trigger:hover:not(:disabled) { border-color: var(--border-hi); } }
.settings-menu-trigger[aria-expanded="true"] { border-color: var(--border-hi); }
.settings-menu-trigger:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.settings-menu-trigger:disabled { opacity: 0.5; cursor: not-allowed; }   /* Free: shown, so the choice is seen to exist, but not live */
.settings-menu-caret { flex: none; width: 16px; height: 16px; fill: none; stroke: rgba(240,235,227,0.56); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.settings-menu-trigger[aria-expanded="true"] .settings-menu-caret { transform: rotate(180deg); }
/* The list is the account menu's look; Floating UI sets position, top and left. */
.settings-menu-list { z-index: 300; display: grid; gap: 2px; box-sizing: border-box; min-width: 120px; padding: 6px; border: 1px solid rgba(240,235,227,0.08); border-radius: 16px; background: rgba(20,18,16,0.98); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 20px 45px rgba(0,0,0,0.34); overflow-y: auto; overscroll-behavior: contain; }
.settings-menu-list[hidden] { display: none; }
.settings-menu-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 40px; padding: 0 10px 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: var(--text-14); font-weight: 500; text-align: left; cursor: pointer; }
.settings-menu-option:focus-visible { outline: none; background: rgba(240,235,227,0.07); }
@media (hover: hover) { .settings-menu-option:hover { background: rgba(240,235,227,0.07); } }
.settings-menu-check { flex: none; width: 16px; height: 16px; fill: none; stroke: var(--accent-light); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }   /* hidden, not removed, so widths do not shift */
.settings-menu-option[aria-selected="true"] .settings-menu-check { visibility: visible; }
.settings-btn-icon { flex: none; width: 16px; height: 16px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Delete account is a quiet text button; it turns error red only on hover or focus.
   The type-DELETE dialog keeps its red confirm button. */
.settings-row-btn.danger {
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.settings-row-btn.danger:focus-visible { color: var(--error-text); }
@media (hover: hover) { .settings-row-btn.danger:hover { border-color: transparent; background: transparent; color: var(--error-text); } }
/* Delete account: set apart by space and a thin line, a normal card; no "Danger zone". */
.settings-section.settings-delete .settings-row-text { max-width: 60ch; }
.settings-card.is-danger #apple-delete-reauth { margin-bottom: var(--space-4); }
.settings-delete-note { margin: 0; color: var(--ink-muted); font-size: var(--text-14); line-height: 1.5; }
/* Apple subscription settings: the note's own grey, underlined; brighter on hover. */
.settings-delete-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s; }
@media (hover: hover) { .settings-delete-note a:hover { color: var(--ink); } }
.settings-delete-note a:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; border-radius: 2px; }
#settings-extension-helper, #settings-subscription-helper { margin-top: var(--space-3); text-align: left; }
#settings-subscription-helper:empty { display: none; }
/* Images per generation: two choices; 2 shows what it costs before Save. */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#settings-extension-helper:empty { display: none; }
#settings-signin-helper { margin-top: var(--space-3); text-align: left; }
#settings-signin-helper:empty { display: none; }
/* Change email / Change password dialogs */
.board-modal-panel.settings-modal-panel { width: min(480px, 100%); text-align: left; }   /* 480: the Change email subtitle fits on one line; */   /* messaging.css centres dialog text; fields read left */
.settings-modal-panel .board-modal-title,
.settings-modal-panel .board-modal-sub { text-align: center; }
.settings-modal-panel .form-field { margin: var(--space-4) 0 0; }
.settings-modal-panel .form-field label { display: block; margin-bottom: var(--space-2); color: var(--ink); font-size: var(--text-ui); text-transform: none; letter-spacing: 0; }
.settings-modal-panel .form-field input { box-sizing: border-box; height: 48px; padding-top: 0; padding-bottom: 0; }   /* same height as the buttons below */
.board-modal-panel.settings-modal-panel .board-modal-btn { min-height: 48px; }
.settings-modal-panel .form-field[hidden] { display: none; }
.settings-modal-panel .signin-error:not(:empty) { margin-top: var(--space-4); text-align: left; }
.settings-modal-panel .signin-error:empty { display: none; }
.settings-modal-panel .board-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-6); }
.settings-password-wrap { position: relative; }
.settings-password-wrap input { width: 100%; padding-right: 48px; }
.settings-password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-muted);
  transform: translateY(-50%);
  cursor: pointer;
}
.settings-password-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.settings-password-toggle[aria-pressed="true"] { color: var(--ink); }
@media (hover: hover) { .settings-password-toggle:hover { color: var(--ink); } }
/* Phones: the button always stays to the right; a long value (an email) wraps beside it. */
/* Under 400px Change and Manage plan show only their icon (a 32px circle at the row's top right); the label stays for screen readers. */
@media (max-width: 399px) {
  .settings-row-btn:has(.settings-btn-icon) { align-self: flex-start; width: 32px; min-height: 32px; height: 32px; padding: 0; }   /* top right, level with the name */
  .settings-row-btn .settings-btn-icon { margin-left: 0; }
  .settings-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 600px) {
  .settings-card { padding: 0 var(--space-4); }
  .settings-modal-panel .board-modal-btn { min-height: 48px; }
}

/* Delete account lives on the plans page; Settings keeps it only in the iPhone app (Apple requires it in-app). */
.account-settings:not(.ios-source) .settings-delete { display: none; }
/* Apple reconnect inside the delete dialog, when Apple needs the person to sign in again. */
.apple-delete-reauth { display: flex; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; margin-top: var(--space-4); }
.apple-delete-reauth[hidden] { display: none; }
/* Board detail: the title is the board name, so a long one wraps instead of overflowing. */
.history-heading { min-width: 0; overflow-wrap: break-word; }   /* break inside a word only if it cannot fit */
.board-back.board-rename { min-height: 32px; padding: var(--space-1) var(--space-4); }
/* ══ GENERATION GRID ══ */
.masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1px;
  gap: 0 12px;
  width: 100%;
}
/* Columns follow the screen so a tile stays roughly 350–450px wide: 4 on laptops,
   5 from 1920px, 6 from 2400px (a 27" 1440p screen). */
@media (min-width: 1920px) { .masonry { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 2400px) { .masonry { grid-template-columns: repeat(6, 1fr); } }
@media (max-width: 1100px) { .masonry { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .masonry { grid-template-columns: 1fr; } }
/* Fewer images than columns keep the same column width as a full grid, so a tile is the same
   size in All and in every board, whatever the count. */

.masonry-item {
  width: 100%;
  margin-bottom: 12px;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--bg-card);
  cursor: pointer;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
@media (hover: hover) { .masonry-item:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,0,0,0.6); } }
.masonry-item.selecting { cursor: pointer; }
.masonry-item.selected {
  box-shadow: 0 0 0 2px rgba(143,190,247,0.9), 0 20px 60px rgba(1,63,244,0.24);
  transform: translateY(-3px);
}
.masonry-item img {
  width: 100%;
  height: auto;
  object-fit: cover;   /* a capped tall image fills its tile, cropped top and bottom; no blurred sides */
  position: relative;
  display: block;
  border-radius: inherit;
  transition: opacity 0.2s ease;
}
/* Until its image arrives a tile is a shimmering skeleton; the image then fades in. */
.masonry-item.is-loading {
  background: linear-gradient(100deg, var(--bg-card) 30%, rgba(240,235,227,0.06) 50%, var(--bg-card) 70%) var(--bg-card);
  background-size: 250% 100%;
  animation: tile-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
}
.masonry-item.is-loading img { opacity: 0; }
.masonry-item.is-loading .tile-label,
.masonry-item.is-loading .tile-save-btn,
.masonry-item.is-loading .tile-edit-btn,
.masonry-item.is-loading .tile-check { visibility: hidden; }
@keyframes tile-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .masonry-item.is-loading { animation: none; }
  .masonry-item img { transition: none; }
}
/* While deleted tiles leave and the rest glide into place, the grid ignores clicks. */
#gallery-wrap.is-removing { pointer-events: none; }
.tile-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(240,235,227,0.18);
  background: rgba(13,11,9,0.72);
  color: rgba(240,235,227,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.18s, background 0.18s, color 0.18s, border-color 0.18s;
  pointer-events: none;
  z-index: 2;
  backdrop-filter: blur(10px);
}
.masonry-item.selecting .tile-check,
.masonry-item.selected .tile-check {
  opacity: 1;
}
/* While the picked images are being saved to a board, the selection cannot change. */
body.is-saving-selection .masonry-item.selecting { cursor: not-allowed; }
body.is-saving-selection .masonry-item.selecting .tile-check { opacity: 0.4; }
body.is-saving-selection #select-mode-btn { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.masonry-item.selected .tile-check {
  background: var(--accent);
  border-color: transparent;
  color: #fff;
  font-size: 14px;
}
/* Same as the extension: a grey "+" on every tile while selecting, a blue "✓" once picked. */
.tile-check::before { content: '+'; }
.masonry-item.selected .tile-check::before { content: '✓'; }
.masonry-item .tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 40px 14px 12px;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.5) 55%, transparent 100%);
  font-size: var(--text-13);
  color: rgba(255,255,255,0.6);
  font-family: 'DM Sans', sans-serif;
  opacity: 0;
  transition: opacity 0.2s;
}
@media (hover: hover) { .masonry-item:hover .tile-label { opacity: 1; } }
.tile-save-btn,
.tile-edit-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  border: 1px solid rgba(240,235,227,0.18);
  background: rgba(13,11,9,0.82);
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: var(--text-ui);
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
  max-width: calc(100% - 24px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s, background 0.18s, border-color 0.18s;
  backdrop-filter: blur(10px);
}
.masonry-item.save-open .tile-save-btn,
.masonry-item.save-open .tile-edit-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
@media (hover: hover) { .masonry-item:hover .tile-save-btn,
.masonry-item:hover .tile-edit-btn {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
} }
@media (hover: hover) { .tile-save-btn:hover,
.tile-edit-btn:hover {
  border-color: var(--ink-muted);
  background: rgba(20,18,16,0.94);
} }
.tile-save-btn, .tile-edit-btn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 400; cursor: pointer; }
.tile-edit-btn { left: auto; right: 12px; text-decoration: none; }
/* Selecting: the + / ✓ takes the top right corner, so Edit steps aside. */
.masonry-item.selecting .tile-edit-btn { display: none; }
/* Save leaves room for Edit, so a long board name never runs under it. */
.masonry-item:has(.tile-edit-btn) .tile-save-btn { max-width: calc(100% - 112px); }
/* Touch screens have no hover: the chip is always there. */
@media (hover: none) { .tile-save-btn, .tile-edit-btn { opacity: 1; pointer-events: auto; } }
.tile-save-icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
/* A board name is cut at about 20 characters; the tooltip has it in full. */
.tile-save-label { min-width: 0; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; }
/* Saved: a light pill with a filled bookmark reads as "on" at a glance. */
.tile-save-btn.is-saved { background: rgba(240,235,227,0.94); border-color: transparent; color: #14120f; }
/* Edit matches Save beside it: dark glass, or the light pill once the image is on a board. */
.masonry-item:has(.tile-save-btn.is-saved) .tile-edit-btn { background: rgba(240,235,227,0.94); border-color: transparent; color: #14120f; }
.tile-save-btn.is-saved .tile-save-icon { fill: currentColor; }
.tile-edit-btn .tile-save-icon { fill: currentColor; }
@media (hover: hover) { .tile-save-btn.is-saved:hover, .masonry-item:has(.tile-save-btn.is-saved) .tile-edit-btn:hover { background: #fff; border-color: transparent; } }
/* Narrow cards say "3 boards" instead of "Saved in 3 boards". */
.masonry-item { container-type: inline-size; }
@container (max-width: 220px) { .tile-save-long { display: none; } }
.tile-subject {
  font-size: var(--text-ui);
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  font-weight: 400;
  margin-bottom: var(--space-1);
  display: -webkit-box;           /* at most three lines on the tile; the lightbox shows the full text */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tile-more {
  display: none;
  margin-bottom: var(--space-1);
  line-height: 1.4;
  color: var(--accent-light);
  font-size: var(--text-13);
  font-weight: 500;
}
.tile-label.is-clamped .tile-more { display: block; }
/* A wide, short tile with no room under Save and Edit keeps only the date. */
.tile-label.no-subject .tile-subject,
.tile-label.no-subject .tile-more { display: none; }
.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  justify-content: stretch;
  align-items: start;
  gap: 22px 22px;
}
/* auto-fit: a few boards share the row instead of shrinking beside empty slots;
   with 1-3 boards the grid stops growing once cards reach 420px (phones stay full width). */
@media (min-width: 561px) {
  .boards-grid:has(> :only-child) { max-width: 420px; }
  .boards-grid:has(> :nth-child(2):last-child) { max-width: calc(2 * 420px + 22px); }
  .boards-grid:has(> :nth-child(3):last-child) { max-width: calc(3 * 420px + 2 * 22px); }
}
.board-card {
  --board-meta-height: 76px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1;   /* square card at every width; the images take what the name row leaves */
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
@media (hover: hover) { .board-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-hi);
  box-shadow: 0 22px 54px rgba(0,0,0,0.42);
} }
.board-card-preview {
  display: grid;
  --preview-space: 10px;   /* one value for the padding round the images and the gaps between them */
  grid-template-columns: 2fr 1fr;
  gap: var(--preview-space);
  padding: var(--preview-space);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: rgba(240,235,227,0.02);
}
.board-card-preview.is-single {
  grid-template-columns: 1fr;
}
.board-card-preview-main,
.board-card-preview-side {
  display: grid;
  gap: var(--preview-space);
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
.board-card-preview-side {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}
.board-card-preview-side.is-one {
  grid-template-rows: minmax(0, 1fr);   /* a lone side image fills the column */
}
.board-card-preview-main img,
.board-card-preview-side img,
.board-card-placeholder {
  width: 100%;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  object-fit: cover;
  border-radius: 14px;
  display: block;
  background: rgba(240,235,227,0.05);
}
.board-card-placeholder {
  min-height: 100%;
  background:
    radial-gradient(circle at 30% 20%, rgba(143,190,247,0.18), transparent 40%),
    linear-gradient(180deg, rgba(240,235,227,0.05), rgba(240,235,227,0.02));
}
.board-card-meta {
  height: var(--board-meta-height);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.board-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: 0;
  color: var(--ink);
  min-width: 0;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Room for descenders (g, y, p) inside the clipped box, without moving the layout; it must not
     shrink in the fixed-height meta row, or the room is squeezed away and the letters are cut. */
  flex-shrink: 0;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
.board-card-count {
  margin-top: var(--space-1);
  font-size: var(--text-meta);
  line-height: 1.35;
  color: var(--ink-muted);
}
/* Three per row down to 900px (smaller cards from 930px, where three 260px cards stop fitting), then two. */
@media (max-width: 930px) {
  .boards-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}
@media (max-width: 899px) {
  .boards-grid {
    grid-template-columns: repeat(auto-fit, minmax(calc((100% - 22px) / 2), 1fr));
  }
}
@media (max-width: 900px) {
  .board-card {
    --board-meta-height: 74px;
  }
  .board-card-title {
    font-size: 24px;
  }
}
@media (max-width: 560px) {
  .boards-grid {
    grid-template-columns: 1fr;
  }
  .board-card {
    width: 100%;
  }
}

.board-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(0,0,0,0.78);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.board-modal.open { display: flex; }
/* While any modal is open the page behind it does not scroll (the gutter stays, so nothing shifts). */
html:has(.board-modal.open, .confirm-modal.open, .quick-save-popover.open, #lightbox.open, .tack-refs-overlay:not([hidden])) { overflow: hidden; scrollbar-gutter: stable; }
.confirm-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(0,0,0,0.78);
  align-items: center;
  justify-content: center;
  padding: 24px;
  backdrop-filter: blur(10px);
}
.confirm-modal.open { display: flex; }
.board-modal-panel {
  width: min(520px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  max-height: 90vh;
  max-height: 90dvh;   /* short screens: the panel scrolls inside instead of running off the edge */
  overflow-y: auto;
  overscroll-behavior: contain;
}
.confirm-modal-panel {
  width: min(460px, 100%);
}
.board-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 36px;
  font-weight: 300;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.board-modal-title em {
  color: var(--accent-light);
  font-style: italic;
  font-weight: 300;
}
.board-modal-sub {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
}
.board-modal-list {
  margin-top: 18px;
  display: grid;
  gap: var(--space-2);
  max-height: 240px;
  overflow: auto;
  padding-right: 4px;
}
.board-option {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  text-align: left;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.board-option.selected {
  border-color: var(--accent-light);
  background: rgba(1,63,244,0.12);
}
.board-option-meta {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-muted);
}
.board-modal-divider {
  height: 1px;
  background: var(--border);
  margin: 18px 0;
}
.board-input {
  width: 100%;
  background: rgba(240,235,227,0.05);
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  padding: 12px 16px;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-input);
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
}
.board-input:focus { border-color: var(--accent-light); }
/* Inputs in dialogs show focus with their border, like every other field; the dialog-wide
   focus ring (messaging.css) is for buttons and would sit over the input's own border. */
.board-modal-panel input:focus-visible { outline: none; }
.board-input.confirm-delete {
  margin-top: 16px;
  border-color: rgba(224,61,47,0.28);
}
.board-modal-actions {
  margin-top: 22px;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.board-modal-btn {
  border-radius: var(--control-radius);
  border: 1px solid var(--border-hi);
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  padding: var(--control-pad-y) var(--control-pad-x);
  min-height: var(--control-height);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
/* Same hover as the other bordered buttons (Settings rows, Quick save): border and fill step up. */
@media (hover: hover) { .board-modal-btn:hover:not(:disabled) { border-color: var(--ink-muted); background: rgba(240,235,227,0.08); } }
.board-modal-btn.primary {
  border-color: transparent;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 24px rgba(1,63,244,0.24);
}
/* Primary blue brightens to #0f49ff, like Quick save and the billing toolbar. */
@media (hover: hover) { .board-modal-btn.primary:hover:not(:disabled) { background: #0f49ff; border-color: transparent; } }
.board-modal-btn.danger {
  border-color: transparent;
  background: #c84040;
  color: #fff;
  box-shadow: 0 6px 24px rgba(200,64,64,0.26);
}
.library-action.danger,
.board-modal-btn.danger-soft {
  border-color: rgba(255,107,107,0.42);
  color: #ffb3b3;
  background: rgba(255,107,107,0.08);
}
@media (hover: hover) { .library-action.danger:hover:not(:disabled),.board-modal-btn.danger-soft:hover:not(:disabled) {
  border-color: rgba(255,107,107,0.7);
  background: rgba(255,107,107,0.14);
} }
@media (hover: hover) { .board-modal-btn.danger:hover:not(:disabled) {
  background: #d74a4a;
} }
.library-action.danger:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.board-modal-error {
  min-height: 18px;
  margin-top: var(--space-2);   /* 8px under the input, like the form field errors */
  color: var(--error-text);
  font-size: 12px;
}
/* Save to board: a centred dialog (a bottom sheet on phones). */
.quick-save-popover {
  position: fixed;
  inset: 0;
  z-index: 1250;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  background: rgba(9,8,6,0.6);
}
.quick-save-popover.open { display: flex; }
.quick-save-panel {
  display: flex;
  flex-direction: column;
  width: min(400px, 100%);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;                /* on very short screens the whole panel scrolls */
  overscroll-behavior: contain;
  padding: var(--space-6);
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  background: rgba(22,20,16,0.98);
  box-shadow: 0 24px 70px rgba(0,0,0,0.46);
}
.quick-save-handle { display: none; }
.quick-save-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--space-4);
}
.quick-save-title em { color: var(--accent-light); font-style: italic; }
.quick-save-new {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--border-hi);
  border-radius: 12px;
  background: rgba(240,235,227,0.04);
  color: var(--ink-muted);
}
.quick-save-new:focus-within { border-color: var(--accent-light); }
.quick-save-new:has(input[aria-invalid="true"]) { border-color: var(--error); }
.quick-save-new svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.quick-save-new input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-input, 16px);
}
.quick-save-new input::placeholder { color: var(--ink-muted); }
.quick-save-error { margin: var(--space-2) 0 0; color: var(--error-text); font-size: var(--text-13); line-height: 1.4; }
.quick-save-error:empty { display: none; }
.quick-save-list {
  flex: 1 1 auto;
  min-height: 112px;               /* two rows stay visible; below that the panel scrolls */
  margin: var(--space-4) calc(-1 * var(--space-2)) 0;
  padding: 0 var(--space-2);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* With no board or only one, the list is as tall as its content, so Cancel and Save sit right under it. */
.quick-save-list:not(:has(.quick-save-option ~ .quick-save-option)) { min-height: 0; }
.quick-save-group {
  margin: var(--space-4) 0 var(--space-2) var(--space-2);
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quick-save-group:first-child { margin-top: 0; }
.quick-save-section + .quick-save-section .quick-save-group { margin-top: var(--space-4); }
/* Desktop: with both groups, "Saved in" and "Other boards" are two columns of a wider dialog. */
@media (min-width: 800px) {
  .quick-save-panel:has(.quick-save-section + .quick-save-section) { width: min(720px, 100%); }
  .quick-save-list:has(.quick-save-section + .quick-save-section) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: var(--space-4);
  }
  .quick-save-section + .quick-save-section .quick-save-group { margin-top: 0; }
}
/* A board row reads like a folder: cover, name, count; the circle on the right is its state. */
.quick-save-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 64px;
  padding: var(--space-2);
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  text-align: left;
  cursor: pointer;
}
@media (hover: hover) { .quick-save-option:hover { background: rgba(240,235,227,0.06); } }
.quick-save-option:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
/* Board preview: wider than tall, so the cover image reads. */
.quick-save-cover {
  display: grid;
  place-items: center;
  width: 64px;
  height: 48px;
  flex: none;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(240,235,227,0.06);
  color: var(--ink-muted);
}
.quick-save-cover img { width: 100%; height: 100%; object-fit: cover; }
.quick-save-cover svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.quick-save-option-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.quick-save-option-name { font-size: var(--text-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-save-option-meta { color: var(--ink-muted); font-size: 13px; }
/* Light, not the blue of selection: the same light as the saved chip on the card. */
.quick-save-check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border: 1.5px solid rgba(240,235,227,0.32);
  border-radius: 5px;
  color: #14120f;
}
.quick-save-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.quick-save-option[aria-checked="true"] .quick-save-check { background: #f0ebe3; border-color: #f0ebe3; }
.quick-save-option[aria-checked="true"] .quick-save-check svg { opacity: 1; }
.quick-save-empty { margin: 0 var(--space-2); color: var(--ink-muted); font-size: var(--text-13); }
.quick-save-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.quick-save-btn {
  min-height: 40px;
  border: 1px solid var(--border-hi);
  border-radius: 999px;
  background: rgba(240,235,227,0.04);
  color: var(--ink);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--text-ui);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
@media (hover: hover) { .quick-save-btn:hover { background: rgba(240,235,227,0.08); border-color: var(--ink-muted); } }
.quick-save-btn.primary { background: var(--accent); border-color: transparent; color: #fff; }
@media (hover: hover) { .quick-save-btn.primary:hover { background: #0f49ff; border-color: transparent; } }
.quick-save-btn:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
@media (max-width: 600px) {
  .quick-save-popover { align-items: flex-end; padding: 0; }
  .quick-save-panel {
    width: 100%;
    padding: var(--space-2) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
  }
  .quick-save-handle { display: block; width: 40px; height: 4px; margin: 0 auto var(--space-4); border-radius: 2px; background: rgba(240,235,227,0.24); }
  .quick-save-btn { min-height: 48px; }
}

/* Disabled buttons must look disabled; a busy button keeps full colour so its spinner reads. */
button:disabled:not([aria-busy="true"]) { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
@media (hover: hover) { button:disabled:hover { transform: none; } }
button[aria-busy="true"] { cursor: progress; }

/* ══ EMPTY STATE ══ */
.empty-state {
  text-align: center;
  padding: var(--space-8) 20px calc(var(--space-8) + 64px);   /* sits a little above the centre of the space under the toolbar, which reads as centred against the page */
  margin: auto;   /* centred in the space left between the header and the footer */
}
/* An empty Library or Boards view fills the rest of the screen instead of adding fixed padding,
   so the footer stays visible without a scrollbar whenever the window is tall enough. */
.page-wrap:has(> #gallery-wrap > .empty-state) { display: flex; flex-direction: column; }
#gallery-wrap:has(> .empty-state) { flex: 1 0 auto; display: flex; }
.empty-state-icon {
  font-size: 48px;
  margin-bottom: 20px;
  opacity: 0.3;
}
.empty-state h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 12px;
}
.empty-state p {
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 340px;
  margin: 0 auto 28px;
}
.empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;   /* a <button> or an <a>: neither shows the browser's button border */
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  box-shadow: 0 6px 28px rgba(1,63,244,0.35);
  transition: opacity 0.2s, transform 0.15s;
}
@media (hover: hover) { .empty-cta:hover { opacity: 0.9; transform: translateY(-1px); } }
.empty-cta .action-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
/* Same layout as the empty state, for a library or boards fetch that failed. */
.library-error h2 { color: var(--error-text); }

/* ══ LOADING ══ */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ LIGHTBOX ══ */
#lightbox {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.94);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 12px;
}
#lightbox.open { display: flex; }
#lightbox {
  justify-content: safe center;   /* short screens: image, actions and caption scroll instead of being cut off */
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: 24px;   /* a small, fixed breathing space: the picture takes the rest of the height */
}
/* The frame is sized from the picture's ratio before the full file arrives, so the bar and buttons never move. */
.lightbox-figure {
  position: relative;
  flex: none;
  aspect-ratio: var(--ratio, 4 / 3);
  /* The height the picture may take: the screen minus the lightbox's padding (2 × 24px), the gap
     and the bar (a date, a two-line prompt and the buttons: about 124px). */
  --lightbox-room: calc(100dvh - 48px - 12px - 124px);
  width: min(92vw, 1040px, calc(var(--lightbox-room) * var(--ratio, 1.3333)));
  max-height: var(--lightbox-room);
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.8);
  background: #242622;
  cursor: zoom-out;
}
#lightbox-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: filter 200ms ease, transform 200ms ease;
}
.lightbox-figure.is-loading #lightbox-img { filter: blur(6px); transform: scale(1.03); }
.lightbox-skeleton {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(240,235,227,.1) 50%, transparent 70%);
  background-size: 250% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.lightbox-figure.is-loading .lightbox-skeleton { opacity: 1; animation: lightbox-shimmer 1.4s ease-in-out infinite; }
@keyframes lightbox-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  #lightbox-img { transition: none; }
  .lightbox-skeleton { transition: none; }
  .lightbox-figure.is-loading .lightbox-skeleton { animation: none; }
}
/* As wide as the image (syncLightboxBar), never narrower than 360px or wider than the screen. */
.lightbox-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(92vw, 1040px);
  max-width: 90vw;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
}
.lightbox-meta:empty { display: none; }
/* The prompt with Read more at its right end, on the prompt's last line. */
.lightbox-text { display: flex; align-items: flex-end; gap: var(--space-4); min-width: 0; }
.lightbox-text .lightbox-meta { flex: 1 1 auto; min-width: 0; }
.lightbox-text #lightbox-more { flex: none; line-height: 1.5; }
.lightbox-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
/* Phones: the stage steps aside so the actions are a row of pills under the bar, as wide as the bar. */
.lightbox-stage { display: contents; }
.lightbox-figure { order: 1; }
.lightbox-bar { order: 2; }
.lightbox-actions { order: 3; justify-content: flex-end; width: var(--lightbox-bar-width, auto); max-width: 90vw; }
.lightbox-meta {
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.5;
  color: rgba(255,255,255,0.8);
  display: -webkit-box;           /* two lines, then "Read more" */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lightbox-meta.is-expanded {
  display: block;
  max-height: 40vh;
  overflow: auto;
}
#lightbox-more {
  background: none;
  border: 0;
  padding: 0;
  color: var(--accent-light);
  font: 500 var(--text-ui) 'DM Sans', sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s;
}
@media (hover: hover) { #lightbox-more:hover { color: var(--ink); } }
.lightbox-date {
  font-size: var(--text-13);
  color: rgba(255,255,255,0.55);
}
#lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  color: rgba(255,255,255,0.4);
  font-size: 26px;
  cursor: pointer;
  padding: 8px;
  line-height: 1;
  transition: color 0.15s;
}
@media (hover: hover) { #lightbox-close:hover { color: rgba(255,255,255,0.85); } }
/* See references, Edit and Save image: one pill style, each with a 16px icon. */
#lightbox-download,
#lightbox-edit,
#lightbox-share,
#see-references {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 40px;
  padding: 0 20px;
  background: rgba(255,255,255,0.1);
  color: #fff;
  text-decoration: none;
  border-radius: 100px;
  font: 500 var(--text-ui)/1 'DM Sans', sans-serif;
  white-space: nowrap;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: background 0.15s;
}
#see-references[hidden] { display: none; }
/* Same icons and stroke as the editor's buttons. */
.lightbox-action-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) { #lightbox-download:hover, #lightbox-edit:hover, #lightbox-share:hover, #see-references:hover { background: rgba(255,255,255,0.18); } }
#lightbox-download:focus-visible, #lightbox-edit:focus-visible, #lightbox-share:focus-visible, #see-references:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
/* Phones: three labelled pills under the bar, left-aligned; one that does not fit starts a new line at the left. */
@media (max-width: 767px) {
  .lightbox-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: var(--space-2); }
}
/* From 768px (tablets too): round icons in a column at the picture's right side; each widens over the
   picture to show its label on hover or keyboard focus, and narrows back the same way. */
@media (min-width: 768px) {
  .lightbox-stage { display: block; position: relative; order: 1; }
  .lightbox-figure {
    --lightbox-room: calc(100dvh - 48px - 12px - 76px);   /* the bar is the date and two prompt lines here */
    width: min(92vw - 112px, 1040px, calc(var(--lightbox-room) * var(--ratio, 1.3333)));   /* 44px icons and 12px gap on each side */
  }
  /* The column starts 12px right of the picture and each button widens to the right, away from it;
     when the screen leaves no room for a label there, it widens to the left over the picture (is-tight). */
  .lightbox-actions {
    position: absolute; top: 0; left: calc(100% + 12px);
    flex-direction: column; align-items: flex-start;
    width: auto; max-width: none;
  }
  .lightbox-actions.is-tight { left: auto; right: -56px; align-items: flex-end; }
  #lightbox-download, #lightbox-edit, #lightbox-share, #see-references {
    gap: 0; width: auto; min-width: 44px; height: 44px; padding: 0 13px;
    background: rgba(20,18,16,0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    transition: background 0.15s, padding 0.24s ease, gap 0.24s ease;
  }
  #lightbox-download > span, #lightbox-edit > span, #lightbox-share > span, #see-references > span {
    max-width: 0; overflow: hidden; opacity: 0;
    transition: max-width 0.24s ease, opacity 0.18s ease;
  }
  :is(#lightbox-download, #lightbox-edit, #lightbox-share, #see-references):is(:focus-visible, :active) { gap: var(--space-2); padding: 0 18px 0 13px; }
  :is(#lightbox-download, #lightbox-edit, #lightbox-share, #see-references):is(:focus-visible, :active) > span { max-width: 140px; opacity: 1; }
}
@media (min-width: 768px) and (hover: hover) {
  :is(#lightbox-download, #lightbox-edit, #lightbox-share, #see-references):hover { gap: var(--space-2); padding: 0 18px 0 13px; background: rgba(36,34,30,0.92); }
  :is(#lightbox-download, #lightbox-edit, #lightbox-share, #see-references):hover > span { max-width: 140px; opacity: 1; }
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  #lightbox-download, #lightbox-edit, #lightbox-share, #see-references, #lightbox-download > span, #lightbox-edit > span, #lightbox-share > span, #see-references > span { transition: none; }
}

/* Phones: 16px side margins for the nav, toolbar, content and footer; 12px on 320px screens. */
@media (max-width: 600px) {
  :root { --nav-gutter: 16px; }
  .page-wrap { padding-top: 90px; padding-bottom: 40px; }
  .nav-account-menu { right: -4px; }
}
@media (max-width: 359px) {
  :root { --nav-gutter: 12px; }
}

/* Sign-in, sign-up and their follow-up screens: the plans page's soft red glow behind the card. */
body.account-auth::after {
  content: '';
  position: fixed;
  top: 50%;   /* centred on the card, both ways */
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  max-width: 100vw;
  height: 600px;
  background: radial-gradient(ellipse, rgba(224,61,47,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;   /* the screens below sit at z-index 1; body::before keeps the grain on top */
}
body.account-auth :is(#signin-screen, #forgot-screen, #verify-screen, #reset-screen) { position: relative; z-index: 1; }

.library-more { height: 1px; }   /* infinite-scroll sentinel: invisible, observed 800px early */
.masonry-item:focus { outline: none; }