/* Gmail Auto-Sync. Inherits the dashboard's CSS variables. */
.gs-head { display:flex; flex-wrap:wrap; gap:1rem; align-items:flex-end;
  justify-content:space-between; margin-bottom:.75rem; }
.gs-head-actions { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Which inbox is connected, and whether its access still works. The page
   header already says "Gmail Auto-Sync", so this row carries the state
   instead of repeating the title. */
.gs-account { display:flex; align-items:center; gap:.7rem; min-width:0; }
.gs-account-email { display:block; font-size:.98rem; font-weight:700;
  color:var(--text-main); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-account-state { display:block; font-size:.8rem; color:var(--text-muted); margin-top:.1rem; }
.gs-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:var(--text-muted); opacity:.5; }
.gs-dot.ok { background:#10b981; opacity:1; box-shadow:0 0 0 3px rgba(16,185,129,.16); }
.gs-dot.warn { background:#f59e0b; opacity:1; box-shadow:0 0 0 3px rgba(245,158,11,.16); }

.gs-btn { border:1px solid var(--border); background:var(--bg-hover); color:var(--text-main);
  padding:.6rem 1rem; border-radius:10px; font-weight:600; font-size:.875rem; cursor:pointer; }
.gs-btn:hover:not(:disabled) { filter:brightness(1.08); }
.gs-btn:disabled { opacity:.55; cursor:default; }
.gs-btn:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.gs-btn-primary { background:#EA4335; border-color:#EA4335; color:#fff; }
.gs-btn-ghost { background:transparent; }
.gs-btn-sm { padding:.4rem .75rem; font-size:.8rem; }

.gs-progress { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem;
  font-size:.82rem; color:var(--text-muted); }
/* display:flex above outranks the browser's own [hidden] rule, which left an
   empty track under the account row whenever no sync was running. */
.gs-progress[hidden] { display:none; }
.gs-bar { flex:1; height:6px; background:var(--bg-hover); border-radius:3px; overflow:hidden; }
.gs-bar span { display:block; height:100%; width:0; background:#EA4335; transition:width .3s; }

.gs-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.6rem; margin-bottom:1.25rem; }
.gs-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
  padding:.85rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.gs-stat .n { font-size:1.35rem; font-weight:800; color:var(--text-main);
  font-variant-numeric:tabular-nums; }
.gs-stat .l { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); }

.gs-tabs { display:flex; gap:.35rem; border-bottom:1px solid var(--border); margin-bottom:1rem; }
.gs-tab { background:transparent; border:none; border-bottom:2px solid transparent;
  padding:.6rem .9rem; font-size:.88rem; font-weight:600; color:var(--text-muted); cursor:pointer; }
.gs-tab.on { color:var(--text-main); border-bottom-color:#EA4335; }
.gs-badge { background:#EA4335; color:#fff; border-radius:20px; padding:0 .4rem;
  font-size:.7rem; margin-left:.2rem; }

.gs-queue-head { display:flex; justify-content:space-between; align-items:center;
  margin-bottom:.75rem; font-size:.84rem; color:var(--text-muted); }
.gs-queue { display:flex; flex-direction:column; gap:.6rem; }
.gs-card { display:flex; gap:1rem; justify-content:space-between; align-items:flex-start;
  background:var(--bg-card); border:1px solid var(--border); border-radius:13px; padding:.9rem 1rem; }
.gs-card-main { flex:1; min-width:0; }
.gs-card-top { display:flex; align-items:center; gap:.6rem; }
.gs-vendor { flex:1; min-width:0; background:transparent; border:none; font-size:.98rem;
  font-weight:700; color:var(--text-main); }
.gs-vendor:focus { outline:none; }
.gs-card-sub { margin:.15rem 0 0; font-size:.78rem; color:var(--text-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-reason { margin:.3rem 0 0; font-size:.74rem; color:#f59e0b; }
.gs-card-fields { display:flex; gap:.5rem; margin-top:.6rem; flex-wrap:wrap; }
.gs-card-fields label { display:flex; flex-direction:column; gap:.2rem; font-size:.7rem;
  color:var(--text-muted); font-weight:600; }
.gs-card-fields input, .gs-card-fields select { background:var(--bg-hover);
  border:1px solid var(--border); border-radius:8px; padding:.35rem .5rem;
  color:var(--text-main); font-size:.84rem; }
.gs-card-actions { display:flex; flex-direction:column; gap:.4rem; flex:none; }

.gs-conf { font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.18rem .5rem; border-radius:20px; }
.gs-conf-high { background:rgba(16,185,129,.15); color:#10b981; }
.gs-conf-medium { background:rgba(245,158,11,.15); color:#f59e0b; }
.gs-conf-low { background:rgba(239,68,68,.15); color:#ef4444; }

/* The record of what Auto-Sync has done: a panel that holds the tab, with one
   card per run carrying the same bar the example shows. */
.gs-hist-panel { flex:1 0 auto; display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--border); border-radius:20px;
  padding:1.1rem 1.25rem; }
.gs-hist-head { display:flex; justify-content:space-between; align-items:flex-start;
  gap:1rem; padding-bottom:.9rem; margin-bottom:.9rem; border-bottom:1px solid var(--border); }
.gs-hist-head strong { display:block; font-size:.98rem; color:var(--text-main); }

.gs-hist { display:grid; gap:.5rem; align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); }
.gs-hist-row { display:flex; flex-direction:column; gap:.4rem;
  background:var(--bg-hover); border:1px solid var(--border); border-radius:13px;
  padding:.75rem .9rem; color:var(--text-main); }
.gs-hist-line { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.gs-hist-line strong { font-size:.95rem; }
.gs-hist-when { font-size:.76rem; color:var(--text-muted); white-space:nowrap; }
/* A tinted track, so the bar reads as a share of something: the card colours
   either side of it are too close to tell apart. */
.gs-hist-bar { height:6px; border-radius:3px; background:rgba(234,67,53,.14); overflow:hidden; }
.gs-hist-bar span { display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#EA4335,#f6866f); }
.gs-hist-amount { font-size:.88rem; font-weight:700; font-variant-numeric:tabular-nums; }
.gs-hist-meta { display:block; font-size:.74rem; color:var(--text-muted); }

/* ------------------------------------------------------------------
   Settings tab
   ------------------------------------------------------------------ */

/* Cards across the width rather than one narrow column: the two controls sit
   side by side so their trade-off is visible at once, and the connection and
   privacy cards bracket them. */
.gs-settings { display:grid; gap:1rem; align-content:start;
  grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr)); }

.gs-setting-card { display:flex; flex-direction:column;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:16px; padding:1.15rem 1.25rem; }
.gs-setting-quiet { background:var(--bg-hover); }
.gs-setting-wide { grid-column:1/-1; }

/* Connection card */
.gs-conn-state { display:flex; align-items:flex-start; gap:.7rem; margin-top:1.1rem;
  background:var(--bg-hover); border:1px solid var(--border); border-radius:13px;
  padding:.8rem .9rem; }
.gs-conn-state .gs-dot { margin-top:.42rem; }
.gs-conn-lines { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.gs-conn-email { font-size:.95rem; font-weight:700; color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-conn-note { font-size:.79rem; line-height:1.5; color:var(--text-muted); }
.gs-setting-conn .gs-zero-facts { grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  margin-top:.6rem; }
.gs-conn-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:auto;
  padding-top:1.1rem; }

/* Privacy card: three reassurances across the width, with the running totals
   underneath when there is a connection to have totals for. */
.gs-privacy-grid .gs-steps { margin-top:1.15rem;
  grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr)); gap:1rem 2rem; }
.gs-privacy-grid .gs-facts { margin-top:1.4rem; padding-top:1.1rem;
  border-top:1px solid var(--border); gap:2.5rem; }
.gs-setting-quiet .gs-step-icon { background:var(--bg-card); }

.gs-setting-head { display:flex; gap:.85rem; align-items:flex-start; }
.gs-setting-head h4 { margin:0 0 .2rem; font-size:.98rem; font-weight:700;
  color:var(--text-main); }
.gs-setting-head p { margin:0; font-size:.83rem; line-height:1.55; color:var(--text-muted);
  max-width:62ch; }

.gs-setting-icon { width:36px; height:36px; border-radius:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(234,67,53,.12); color:#EA4335; font-size:.92rem; }

/* The lookback window: segmented choices rather than a dropdown, so the
   trade-off between them is visible without opening anything. */
.gs-choices { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1rem; }
.gs-choice { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  padding:.55rem .8rem; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:11px; color:var(--text-muted); font-family:inherit; cursor:pointer;
  transition:border-color .14s ease, color .14s ease, background .14s ease; }
.gs-choice:hover { border-color:#EA4335; color:var(--text-main); }
.gs-choice:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.gs-choice.on { background:rgba(234,67,53,.12); border-color:#EA4335; color:var(--text-main); }
.gs-choice-main { font-size:.86rem; font-weight:600; white-space:nowrap; }
.gs-choice-note { font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); }
.gs-choice.on .gs-choice-note { color:#EA4335; }

/* A real switch, and a line under it saying what the current position does,
   so the setting does not need a separate note to be understood. */
.gs-toggle-row { margin-top:1rem; }
.gs-toggle { display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; }
.gs-toggle input { position:absolute; opacity:0; width:0; height:0; }
.gs-toggle-track { position:relative; flex-shrink:0; width:40px; height:23px;
  margin-top:.1rem; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:999px; transition:background .16s ease, border-color .16s ease; }
.gs-toggle-thumb { position:absolute; top:2px; left:2px; width:17px; height:17px;
  border-radius:50%; background:var(--text-muted); transition:transform .16s ease, background .16s ease; }
.gs-toggle input:checked + .gs-toggle-track { background:#EA4335; border-color:#EA4335; }
.gs-toggle input:checked + .gs-toggle-track .gs-toggle-thumb { transform:translateX(17px); background:#fff; }
.gs-toggle input:focus-visible + .gs-toggle-track { outline:2px solid var(--primary); outline-offset:2px; }
.gs-toggle-text { display:flex; flex-direction:column; gap:.15rem; }
.gs-toggle-title { font-size:.9rem; font-weight:600; color:var(--text-main); }
.gs-toggle-desc { font-size:.79rem; color:var(--text-muted); }

.gs-facts { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1rem 0 0; }
.gs-facts div { display:flex; flex-direction:column; gap:.1rem; }
.gs-facts dt { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); }
.gs-facts dd { margin:0; font-size:1.15rem; font-weight:800; color:var(--text-main);
  font-variant-numeric:tabular-nums; }

.gs-hint { font-size:.78rem; color:var(--text-muted); margin:0; }

@media (max-width:560px) {
  .gs-choices { flex-direction:column; }
  .gs-choice { width:100%; flex-direction:row; align-items:center;
    justify-content:space-between; }
  .gs-setting-card { padding:1rem; }
}

/* ------------------------------------------------------------------
   Zero states

   A tab with nothing in it still has to hold the page, so the empty
   state is the panel: what this tab does on the left, and a worked
   example of what will fill it on the right.
   ------------------------------------------------------------------ */

/* Grow into whatever height the view has, and never shrink below the content.
   The dashboard's .content-area is the scroll container, so a panel squeezed to
   the leftover height on a short laptop screen just gets clipped - at both ends,
   with nothing left to scroll to. flex-shrink:0 down the chain makes the page
   scroll instead. (Below 769px the dashboard already sizes views to content.) */
#view-gmailsync.active { flex:1 0 auto; }
#gmailsync-root { display:flex; flex-direction:column; flex:1 0 auto; }
#gs-body { display:flex; flex-direction:column; flex:1 0 auto; }

/* Copy and example side by side, with the explanatory row spanning both
   underneath - the panel then holds the width instead of running tall. */
.gs-zero { flex:1 0 auto;
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:"copy art" "aside aside";
  gap:clamp(1.5rem,3vw,3rem); align-items:center; align-content:center;
  min-height:clamp(340px,50vh,620px);
  padding:clamp(1.4rem,3vw,2.75rem);
  border:1px solid var(--border); border-radius:24px;
  background:var(--bg-card);
  /* Two soft lights in the corners. Painted as backgrounds rather than blurred
     pseudo-elements, which needed overflow:hidden and so could clip the content. */
  background:
    radial-gradient(circle 360px at 100% 0%, rgba(234,67,53,.13), transparent 70%),
    radial-gradient(circle 420px at 0% 100%, color-mix(in srgb, var(--primary) 11%, transparent), transparent 70%),
    var(--bg-card); }

.gs-zero-copy { grid-area:copy; min-width:0; max-width:56ch; }
.gs-zero-aside { grid-area:aside; min-width:0; padding-top:clamp(.5rem,1.5vw,1rem);
  border-top:1px solid var(--border); }
.gs-zero-aside .gs-steps { margin-top:1.1rem;
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:1rem 1.75rem; }
.gs-zero-aside .gs-zero-facts { margin-top:1.1rem; }
.gs-zero-eyebrow { display:block; font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#EA4335; }
/* Gmail red is 3.9:1 on the light theme's white card; small text needs 4.5:1. */
.light-theme .gs-zero-eyebrow { color:#c5221f; }
.gs-zero-copy h3 { margin:.5rem 0 .6rem; font-size:clamp(1.45rem,2.4vw,2.05rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--text-main); }
.gs-zero-copy > p { margin:0; font-size:.95rem; line-height:1.65; color:var(--text-muted);
  max-width:54ch; }

.gs-zero-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1.35rem 0 0; }
.gs-btn-lg { padding:.78rem 1.3rem; font-size:.94rem; border-radius:12px; }
.gs-btn-lg i { margin-right:.45rem; }
.gs-btn-primary.gs-btn-lg { box-shadow:0 10px 22px -12px rgba(234,67,53,.9); }

.gs-steps { list-style:none; margin:1.6rem 0 0; padding:0;
  display:grid; gap:.85rem; }
.gs-steps li { display:flex; gap:.75rem; align-items:flex-start; }
.gs-step-icon { flex-shrink:0; width:30px; height:30px; border-radius:9px;
  display:flex; align-items:center; justify-content:center; font-size:.78rem;
  background:rgba(234,67,53,.12); color:#EA4335; }
.gs-step-text { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.gs-step-text strong { font-size:.88rem; font-weight:700; color:var(--text-main); }
.gs-step-text span { font-size:.8rem; line-height:1.55; color:var(--text-muted); }

.gs-zero-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
  gap:.5rem; margin:1.5rem 0 0; }
.gs-zero-facts div { min-width:0; background:var(--bg-hover); border:1px solid var(--border);
  border-radius:12px; padding:.6rem .75rem; }
.gs-zero-facts dt { font-size:.68rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); }
.gs-zero-facts dd { margin:.15rem 0 0; font-size:.92rem; font-weight:700; color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* The example. Faded towards the bottom so it reads as a sample of the list
   rather than as three receipts the user has to deal with. */
.gs-zero-art { grid-area:art; position:relative; min-width:0; align-self:stretch;
  display:flex; flex-direction:column; justify-content:center; }
.gs-zero-art-tag { align-self:flex-end; margin-bottom:.5rem;
  font-size:.63rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-muted); background:var(--bg-hover); border:1px solid var(--border);
  border-radius:20px; padding:.2rem .55rem; }
/* An explicit shrinkable column: the implicit one sizes to the cards' unwrapped
   content, which ignores the vendor name's ellipsis. */
.gs-ghost-stack { display:grid; grid-template-columns:minmax(0,1fr); gap:.55rem; }
.gs-ghost-stack > * { background:var(--bg-hover); border:1px solid var(--border);
  border-radius:14px; padding:.8rem .9rem; }
.gs-ghost-stack > :nth-child(2) { opacity:.72; }
.gs-ghost-stack > :nth-child(3) { opacity:.42; }

.gs-ghost-card { display:flex; align-items:center; gap:.7rem; }
.gs-ghost-icon { flex-shrink:0; width:34px; height:34px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(234,67,53,.12); color:#EA4335; font-size:.85rem; }
.gs-ghost-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.1rem; }
.gs-ghost-vendor { font-size:.9rem; font-weight:700; color:var(--text-main);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gs-ghost-meta { font-size:.72rem; color:var(--text-muted); }
.gs-ghost-right { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; }
.gs-ghost-amount { font-size:.92rem; font-weight:800; color:var(--text-main);
  font-variant-numeric:tabular-nums; }

.gs-ghost-run { display:flex; flex-direction:column; gap:.4rem; }
.gs-ghost-run-top { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.gs-ghost-run-top strong { font-size:.9rem; color:var(--text-main); }
.gs-ghost-bar { height:6px; border-radius:3px; background:rgba(234,67,53,.14); overflow:hidden; }
.gs-ghost-bar span { display:block; height:100%; border-radius:3px;
  background:linear-gradient(90deg,#EA4335,#f6866f); }

@media (max-width:980px) {
  /* minmax(0,1fr), not 1fr: a bare 1fr track won't shrink below the example
     cards' content, which pushed them off a 320px screen. */
  .gs-zero { grid-template-columns:minmax(0,1fr); grid-template-areas:"copy" "art" "aside";
    min-height:0; align-items:start; }
  .gs-zero-art { margin-top:.5rem; }
  .gs-zero-art-tag { align-self:flex-start; }
}

@media (max-width:480px) {
  .gs-zero-actions .gs-btn-lg { flex:1 1 100%; }
}

/* Verification Banner & Coming Soon State */
.gs-verification-banner {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.08) 0%, rgba(248, 113, 113, 0.04) 100%);
  border: 1px solid rgba(234, 67, 53, 0.25);
  border-radius: 18px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 16px -2px rgba(234, 67, 53, 0.08);
}

.light-theme .gs-verification-banner {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.05) 0%, rgba(248, 113, 113, 0.02) 100%);
  border-color: rgba(234, 67, 53, 0.2);
}

.gs-verification-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(234, 67, 53, 0.14);
  border: 1px solid rgba(234, 67, 53, 0.3);
  color: #ea4335;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.gs-verification-content {
  flex: 1;
  min-width: 0;
}

.gs-verification-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.gs-verification-title-row h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.gs-status-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.gs-verification-content p {
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.gs-verification-content code {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.15rem 0.4rem;
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--text-main);
}

.gs-verification-pills {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gs-v-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
}

.gs-v-pill i {
  color: #ea4335;
}

.gs-btn-disabled,
.gs-btn-disabled:hover {
  opacity: 0.65 !important;
  cursor: not-allowed !important;
  filter: none !important;
}