/* account.css — styles for the optional accounts feature
 *
 * A separate file because it has to work on two stylesheets that do not share
 * a vocabulary. The generated pages declare --brand, --line and --text on
 * .s-page; the hand-built home page declares --teal, --rule and --ink on
 * :root. Rather than duplicate this block into both, every colour below is
 * read through a fallback chain — the landing token, then the home page
 * token, then a literal — so one file styles the account surface identically
 * on all 1,622 pages without either stylesheet being touched.
 *
 * Nothing here applies until account.js adds .acct-ready to <html>. With
 * JavaScript off, or with no Supabase credentials configured at build time,
 * the header slot stays collapsed and the save buttons stay hidden, so the
 * site looks exactly as it did before accounts existed.
 */

/* DECLARED TWICE, ON PURPOSE.
 *
 * A var() inside a custom property is resolved on the element the property is
 * DECLARED on, not where it is used. The generated pages put --card, --text
 * and the rest on body.s-page; :root is <html>, which never sees them. So
 * every chain below fell through to its light-page literal on all 2,216
 * generated pages: a white modal on a dark site, with an <h2> that has no
 * colour of its own inheriting the page's near-white text. "Save this tool"
 * came out at 1.11 against its own card - white on white - while the fine
 * print, which does name a token, stayed readable and hid the fault.
 *
 * Repeating the block on body.s-page resolves the same chains where those
 * tokens actually live. The home page declares its own on :root and is
 * unaffected; a page type that does neither still gets the literals.
 */
:root,
body.s-page,
body.ac-page{
  --acct-brand:var(--brand,var(--teal,#886BFF));
  --acct-brand-soft:var(--brand-soft,#e8f5f2);
  --acct-line:var(--line,var(--rule,#e6e8ec));
  --acct-text:var(--text,var(--ink,#111827));
  --acct-muted:var(--muted,#667085);
  --acct-card:var(--card,#fff);
  --acct-bg:var(--bg,var(--paper,#f7f8fa));
  --acct-dark:var(--dark,var(--ink,#111827));
  --acct-green:var(--green,#067647);
  --acct-danger:#b42318;
  --acct-shadow:var(--shadow,0 10px 30px rgba(17,24,39,.06));
  --acct-radius:var(--radius,22px);
}

.acct-slot{display:none}
.save-btn{display:none}
.acct-ready .acct-slot{display:flex;align-items:center}
.acct-ready .save-btn{display:inline-flex}

/* ---------- header ---------- */
/* These three used to say background:#fff, which was true of every page that
   existed when they were written. It stopped being true when the site gained
   dark pages: a literal is the one thing the --acct-* variables above cannot
   correct, so a white button kept its now-light text and the label vanished.
   --acct-card is the surface a panel is drawn on — #fff on a light page,
   because --card is #fff there, and the dark card colour on a dark one. */
.acct-link,.acct-avatar{
  font-family:inherit;cursor:pointer;border:1px solid var(--acct-line);
  background:var(--acct-card);color:var(--acct-text);border-radius:12px;
}
.acct-link{padding:8px 14px;font-size:14px;font-weight:700}
.acct-link:hover{border-color:var(--acct-brand);color:var(--acct-brand)}
.acct-avatar{
  width:36px;height:36px;border-radius:50%;font-size:14px;font-weight:800;
  background:var(--acct-brand-soft);color:var(--acct-brand);border-color:transparent;
}
.acct-menu{position:relative}
.acct-pop{
  position:absolute;right:0;top:44px;min-width:180px;z-index:30;
  background:var(--acct-card);border:1px solid var(--acct-line);border-radius:14px;
  box-shadow:var(--acct-shadow);padding:6px;display:flex;flex-direction:column;
}
/* The menu is closed by setting the hidden attribute, and an author rule wins
   over the browser's own [hidden]{display:none} no matter how specific it is.
   Without this line the display:flex above keeps the menu on screen for every
   signed-in visitor, on every page, whether or not anyone opened it. */
.acct-pop[hidden]{display:none}
.acct-pop a,.acct-pop button{
  text-align:left;padding:10px 12px;border-radius:10px;border:0;background:none;
  font-family:inherit;font-size:14px;color:var(--acct-text);cursor:pointer;
}
.acct-pop a:hover,.acct-pop button:hover{background:var(--acct-bg);color:var(--acct-brand)}

/* ---------- the save control on a card ---------- */
/* Absolute inside the card's own padding so adding it moves nothing: the
   card's height, the logo tile and the text all sit exactly where they did
   before the button existed. */
.save-btn{
  width:34px;height:34px;align-items:center;justify-content:center;
  border:1px solid var(--acct-line);border-radius:10px;background:var(--acct-card);
  color:var(--acct-muted);cursor:pointer;padding:0;flex:none;
}
/* Inside a card it sits in the corner the logo tile leaves free, absolutely
   positioned so the card's height and every line of its text stay exactly
   where they were. Anywhere else — the tool page's action row, a comparison
   column — it is an ordinary inline control. */
.tool-card{position:relative}
.tool-card .save-btn{position:absolute;top:14px;right:14px;z-index:2}
.actions .save-btn,.hero-card .save-btn{width:40px;height:40px}
.save-btn:hover{color:var(--acct-brand);border-color:var(--acct-brand)}
.save-btn.on{color:var(--acct-brand);border-color:var(--acct-brand);background:var(--acct-brand-soft)}
.save-btn.on svg path{fill:currentColor}
.save-btn:focus-visible,.acct-link:focus-visible,
.acct-avatar:focus-visible{
  outline:2px solid var(--acct-brand);outline-offset:2px;
}
.save-btn[disabled]{opacity:.5;cursor:default}

/* ---------- modal ---------- */
.acct-back{
  position:fixed;inset:0;z-index:60;background:rgba(17,24,39,.45);
  display:flex;align-items:center;justify-content:center;padding:18px;
}
.acct-modal{
  position:relative;width:100%;max-width:420px;background:var(--acct-card);
  border-radius:var(--acct-radius);box-shadow:var(--acct-shadow);padding:28px 24px 22px;
}
/* Names its colour rather than inheriting one. Every other line in this
   dialog reads a token and stayed legible while the heading - the one
   element with no colour of its own - took whatever the page behind it
   happened to be using. A heading is the last thing that should depend on
   where the dialog was appended. */
.acct-modal h2{font-size:26px;letter-spacing:-.03em;margin:0 0 8px;color:var(--acct-text)}
.acct-sub{color:var(--acct-muted);font-size:14px;margin:0 0 18px}
.acct-modal .btn{width:100%;margin-bottom:10px}
/* ---------- the sign-in card ----------
   Built to the mock, and LIGHT ON EVERY PAGE: white ground, near-black
   text, the accent violet - literals rather than the --acct- tokens,
   because the tokens follow the page's palette and this card is meant not
   to, exactly as the first-visit card on the home page does. Each selector
   carries .acct-modal.acct-signin so it outranks the generic modal rules
   above, including the heading's colour. */
.acct-back.acct-glass{background:rgba(14,20,32,.6);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.acct-modal.acct-signin{
  max-width:440px;background:#FFFFFF;color:#0E1420;border:1px solid #E3E6F0;
  border-radius:20px;padding:34px 30px 30px;box-shadow:0 24px 60px rgba(0,0,0,.28);
}
.acct-modal.acct-signin h2{font-size:32px;line-height:1.1;letter-spacing:-.03em;margin:0 0 8px;color:#0E1420}
.acct-modal.acct-signin .acct-sub{font-size:16px;line-height:1.5;color:#5C6870;margin:0 0 24px}
.acct-modal.acct-signin .acct-x{top:18px;right:18px;color:#5C6870;display:inline-flex;align-items:center;justify-content:center}
.acct-modal.acct-signin .acct-x:hover{background:#F3F2FA;color:#0E1420}
.acct-google{
  display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;
  border:1px solid #E3E6F0;border-radius:12px;background:#FFFFFF;color:#0E1420;
  font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;margin:0;
}
.acct-google:hover{border-color:#6D4AFF}
.acct-google:disabled{opacity:.6;cursor:default}
.acct-g{display:inline-flex;flex:none}
.acct-or{display:flex;align-items:center;gap:14px;margin:20px 0;font-size:15px;color:#8A94A6}
.acct-or::before,.acct-or::after{content:"";flex:1;height:1px;background:#E3E6F0}
.acct-form{display:block;margin:0}
.acct-field{
  display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;margin:0 0 12px;
  border:1px solid #E3E6F0;border-radius:12px;background:#FFFFFF;color:#5C6870;
}
.acct-field:focus-within{border-color:#6D4AFF;box-shadow:0 0 0 3px rgba(109,74,255,.15)}
.acct-ico{display:inline-flex;flex:none}
.acct-field input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:none;padding:0;
  font-family:inherit;font-size:16px;color:#0E1420;
}
.acct-field input::placeholder{color:#8A94A6}
.acct-eye{
  flex:none;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  margin:0 -8px 0 0;border:0;border-radius:8px;background:none;color:#5C6870;cursor:pointer;
}
.acct-eye:hover{color:#0E1420}
.acct-hint{margin:-2px 0 16px;font-size:14px;color:#5C6870}
.acct-forgot{margin:-2px 0 16px;text-align:right}
.acct-textlink{
  border:0;background:none;padding:0;font-family:inherit;font-size:16px;font-weight:700;
  color:#6D4AFF;cursor:pointer;
}
.acct-textlink:hover{text-decoration:underline}
.acct-err{margin:0 0 12px;font-size:14px;line-height:1.45;color:#b42318}
.acct-err[hidden]{display:none}
.acct-primary{
  display:flex;align-items:center;justify-content:center;width:100%;height:56px;margin:4px 0 0;
  border:1px solid #6D4AFF;border-radius:12px;background:#6D4AFF;color:#FFFFFF;
  font-family:inherit;font-size:17px;font-weight:700;cursor:pointer;
}
.acct-primary:hover{background:#5B3BE6;border-color:#5B3BE6}
.acct-primary:disabled{opacity:.6;cursor:default}
.acct-switch{margin:22px 0 0;text-align:center;font-size:16px;color:#5C6870}
.acct-google:focus-visible,.acct-primary:focus-visible,.acct-textlink:focus-visible,.acct-eye:focus-visible,
.acct-modal.acct-signin .acct-x:focus-visible{outline:2px solid #6D4AFF;outline-offset:2px}
/* The same button as the modal, on the callback page after a sign-in that
   did not complete. Outside the modal it has no width to inherit. */
.acct-retry{margin:16px 0 0;max-width:320px}
.acct-retry .btn{width:100%}
.acct-fine{color:var(--acct-muted);font-size:12px;line-height:1.5;margin:14px 0 0}
.acct-fine a{color:var(--acct-brand);font-weight:700}
.acct-x{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  border:0;background:none;font-size:22px;color:var(--acct-muted);cursor:pointer;
  border-radius:8px;line-height:1;font-family:inherit;
}
.acct-x:hover{background:var(--acct-bg);color:var(--acct-text)}
.acct-actions{display:flex;gap:10px;margin-top:18px}
.acct-actions .btn{margin:0}
.btn.danger{background:var(--acct-danger);border-color:var(--acct-danger);color:#fff}

/* ---------- list picker ---------- */
.acct-picker{
  position:absolute;z-index:70;width:250px;background:var(--acct-card);
  border:1px solid var(--acct-line);border-radius:16px;box-shadow:var(--acct-shadow);padding:14px;
}
.acct-picker-h{font-size:13px;font-weight:800;margin:0 0 10px;color:var(--acct-text)}
.acct-picker-list{max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.acct-picker-row{
  display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:9px;
  font-size:14px;cursor:pointer;
}
.acct-picker-row:hover{background:var(--acct-bg)}
.acct-picker-new{display:flex;gap:6px;margin-top:10px}
.acct-picker-new input{
  flex:1;min-width:0;padding:8px 10px;border:1px solid var(--acct-line);
  border-radius:9px;font-family:inherit;font-size:13px;
}
.acct-picker-new button,.acct-picker-done{
  border:1px solid var(--acct-line);background:var(--acct-card);border-radius:9px;padding:8px 10px;
  font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--acct-text);
}
.acct-picker-done{width:100%;margin-top:8px}

/* Both signed-in screens were built from rules that lived here. They are
   their own pages now, in workspace.css, and what they stopped using went
   with them rather than staying behind as rules no page can reach. What is
   left in this file is the account surface that appears on all 1,600 of the
   others: the header slot, the save button, the list picker, the modals and
   the toast. */

/* ---------- toast ---------- */
.acct-toast{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);
  background:var(--acct-dark);color:#fff;padding:12px 18px;border-radius:12px;
  font-size:14px;font-weight:700;z-index:80;max-width:calc(100vw - 32px);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
}
.acct-toast.on{opacity:1;transform:translate(-50%,0)}
.acct-toast.err{background:var(--acct-danger)}

/* ---------- narrow screens ---------- */
/* The nav is already a flex row that wraps; the account control is the last
   item in it, so it stays on the row and the links wrap around it. The picker
   is positioned in the viewport by account.js and clamped to it, so neither
   it nor the modal can push the page wider than the screen. */
@media (max-width:560px){
  .acct-link{padding:7px 11px;font-size:13px}
  .acct-picker{width:min(250px,calc(100vw - 16px))}
  .acct-modal{padding:24px 18px 18px}
  .acct-modal h2{font-size:22px}
  .acct-modal.acct-signin{padding:26px 20px 22px}
  .acct-modal.acct-signin h2{font-size:28px}
}

/* ---------- home page: the accounts promotion ---------- */
/* Hidden until account.js confirms the feature is configured, so an
   unconfigured build shows the home page exactly as it was. */
.acct-promo{display:none}
.acct-ready .acct-promo{
  display:block;margin:0 0 34px;padding:26px 28px;
  background:var(--acct-card);border:1px solid var(--acct-line);
  border-radius:18px;
}
.acct-promo h2{margin:0 0 8px;font-size:24px;letter-spacing:-.02em}
.acct-promo p{margin:0 0 16px;color:var(--acct-muted);max-width:60ch}
.acct-promo-cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.acct-promo-btn{
  font-family:inherit;font-size:14px;font-weight:800;cursor:pointer;
  padding:12px 18px;border-radius:12px;border:1px solid var(--acct-dark);
  background:var(--acct-dark);color:#fff;
}
.acct-promo-alt{font-size:14px;font-weight:700;color:var(--acct-brand)}
.acct-promo-fine{margin:14px 0 0;font-size:12px;line-height:1.5;color:var(--acct-muted)}
.acct-promo-btn:focus-visible,.acct-promo-alt:focus-visible{
  outline:2px solid var(--acct-brand);outline-offset:2px;
}
@media (max-width:560px){
  .acct-ready .acct-promo{padding:20px 18px}
  .acct-promo h2{font-size:20px}
  .acct-promo-btn{width:100%}
}

/* 16px on a touch screen, or iOS Safari zooms the page in on the tap and
   leaves it there. See the same note in ask.css. */
@media (pointer:coarse),(max-width:900px){
  .acct-picker-new input{font-size:16px}
}