/* ============================================================
   workspace.css — the dark pages: /tools/, /my-tools/, /my-feedback/
   ============================================================
   A FILE, not a <style> block. The CSP in _headers allows styles by
   'self' plus a hash generated from the HTML, so an inline <style>
   added later would be dropped and the page would render unstyled
   with a 200. Same reason site.css is a file.

   One file for all three, for the reason site.css is one file for the
   other 1,600: the chrome they share — the dark ground, the masthead,
   the hero, the figures, the buttons, the footer — cannot drift apart
   if there is only one copy of it. Classes are prefixed by who owns
   them: ws- is shared, br- belongs to the browse hub at /tools/, mt- to
   the saved-tools workspace, fb- to the feedback page. (/account/ is light
   and has its own file, account-page.css.)

   Everything is scoped under body.ws-page so none of it can reach the
   pages built from site.css, and none of these three loads site.css —
   every rule there is written against .s-page, so loading it would ship
   a stylesheet whose every selector misses.

   The account chrome is the exception. account.css is loaded on every
   page including these two, and it reads its colours through --acct-*
   variables. Redeclaring those on .ws-page turns the header menu, the
   modals, the toast and the list picker dark without touching that
   file, so the account surface stays one implementation rather than
   two.
   ============================================================ */

/* ---- the home page's fonts, on the home page's terms ----
   Self-hosted, latin subset, one variable file per family, served from this
   domain so no request reaches Google and no visitor IP goes to a third
   party. index.html declares the same three with relative paths because it
   sits at the root; from /assets/ the paths have to be absolute, and font-src
   is 'self' either way.

   These pages used to ask for Inter and get whatever the OS offers, because
   Inter is not shipped here and never was — so the dark pages rendered in the
   system UI font while every other page rendered in Public Sans. Two fonts
   for one site, with nothing choosing between them. */
@font-face{
  font-family:'Archivo';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('/fonts/archivo-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Public Sans';font-style:normal;font-display:swap;font-weight:100 900;
  src:url('/fonts/public-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';font-style:normal;font-display:swap;font-weight:100 800;
  src:url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

.ws-page{
  --display:'Archivo',system-ui,sans-serif;
  --body:'Public Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;

  --bg:#070912;
  --panel:rgba(11,16,31,.66);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.16);
  --text:#f7f8ff;
  --muted:#97a3bd;
  --violet:#8b5cf6;
  --indigo:#7C5CFF;
  --cyan:#5FE3D0;
  --green:#34d399;
  --amber:#f59e0b;
  --shadow:0 30px 80px rgba(0,0,0,.34);

  /* account.css resolves every colour through these, so the header
     menu, sign-in modal, list picker and toast follow this page into
     the dark instead of arriving as white boxes. */
  --acct-brand:#a5b4fc;
  --acct-brand-soft:rgba(99,102,241,.16);
  --acct-line:rgba(255,255,255,.12);
  --acct-text:#f7f8ff;
  --acct-muted:#97a3bd;
  --acct-card:#111a2e;
  --acct-bg:rgba(255,255,255,.05);
  --acct-dark:#1b2540;
  --acct-green:#34d399;
  --acct-shadow:0 24px 60px rgba(0,0,0,.5);
  --acct-radius:18px;
}

/* The whole reason the account menu shipped broken: an author rule that
   sets display beats the browser's own [hidden]{display:none}, however
   unspecific it is. Everything on this page that is shown and hidden by
   the hidden attribute — the workspace, the empty state, the gate — sets
   display in a class, so state it once here rather than per component
   and leave nothing to remember. */
.ws-page [hidden]{display:none !important}

.ws-page *{box-sizing:border-box}
.ws-page{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:var(--body);
  background:
    radial-gradient(circle at 12% -8%, rgba(99,102,241,.21), transparent 35%),
    radial-gradient(circle at 90% 8%, rgba(34,211,238,.10), transparent 32%),
    linear-gradient(180deg,#070912 0%,#080b14 45%,#060811 100%);
  overflow-x:hidden;
}
/* Archivo for the headings, Public Sans for everything else — the split the
   home page makes. The sizes and the negative tracking below are unchanged;
   only the face is. */
.ws-page h1,.ws-page h2,.ws-page h3{font-family:var(--display)}
.ws-page a{color:inherit;text-decoration:none}
.ws-page button,.ws-page input{font:inherit}

.ws-page .skip{position:absolute;left:-9999px}
.ws-page .skip:focus{
  left:8px;top:8px;z-index:80;background:#111a2e;color:#fff;
  padding:8px 12px;border-radius:10px;border:1px solid var(--line-strong);
}

/* The grid and the three blurred orbs are drawn with pseudo-elements and
   empty divs rather than images: nothing to fetch, nothing to cache, and
   no third-party host in img-src. */
.ws-page::before{
  content:"";
  position:fixed;inset:0;z-index:-3;opacity:.18;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 72%);
  -webkit-mask-image:linear-gradient(to bottom,black,transparent 72%);
}
.ws-orb{position:fixed;border-radius:999px;filter:blur(70px);pointer-events:none;z-index:-2;opacity:.42}
.ws-orb.one{width:320px;height:320px;left:-120px;top:230px;background:#5b21b6}
.ws-orb.two{width:300px;height:300px;right:-130px;top:480px;background:#075985}
.ws-orb.three{width:220px;height:220px;left:48%;bottom:-120px;background:#1d4ed8}

/* ============ shared: masthead ============ */

/* The masthead, on every dark page. One bar: the mark, two links, a search
   that goes to /tools/, and the slot account.js fills with a Sign in button
   or the avatar menu.

   It used to be 74px of glass with a blur behind it. It is flat and 64px now
   because the hero directly underneath is itself a translucent panel, and two
   blurred surfaces stacked read as a smear rather than as two things. */
.ws-top{
  position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;
  background:#080B14;border-bottom:1px solid rgba(255,255,255,.07);
}
.ws-top-in{
  width:min(1240px,calc(100% - 36px));margin:auto;
  display:flex;align-items:center;gap:22px;
}
.ws-brand{display:flex;align-items:center;gap:9px;flex:none}
/* THE MARK: the viewfinder, which is also the favicon — the same mark the
   figure on /tools/ shows at ten times the size, so the thing in the corner
   of the bar and the thing in the middle of the picture are one mark.

   No tile behind it. It was a dark tile with a glowing letter R in it, and
   before that a violet tile with a white R; the mark is a frame now, and a
   frame set inside a bordered tile reads as two boxes rather than as a logo.
   The brackets take this colour — brandMark() draws them with currentColor,
   because the favicon's own near-black would vanish against the bar. */
.ws-brand-mark{
  width:32px;height:32px;display:grid;place-items:center;flex:none;color:var(--text);
}
.ws-brand-mark svg{
  width:32px;height:32px;filter:drop-shadow(0 0 10px rgba(95,227,208,.4));
}
.ws-brand-title{font-family:var(--display);font-size:15.5px;font-weight:800;letter-spacing:-.015em;white-space:nowrap}

.ws-nav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
/* The search used to take the slack between the nav and the account slot.
   With it gone the slot takes it, so the nav stays beside the mark rather
   than drifting into the middle of an empty bar. */
.ws-page .acct-slot{margin-left:auto}
.ws-nav::-webkit-scrollbar{display:none}
.ws-nav a{
  position:relative;padding:8px 11px;border-radius:9px;
  color:#9aa5bd;font-size:13.5px;font-weight:600;white-space:nowrap;transition:.18s ease;
}
.ws-nav a:hover{color:#fff;background:rgba(255,255,255,.055)}
/* The current page is named by aria-current, which the generator already
   emits and a screen reader already announces, so the underline below is the
   same fact drawn for everyone else. */
.ws-nav a[aria-current="page"]{color:#c4b5fd;background:transparent}
.ws-nav a[aria-current="page"]::after{
  content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#7C5CFF,#a78bfa);
}


/* THE BUTTON INSIDE THE ACCOUNT DIALOGS.

   account.js builds them with class "btn", which is not account.css's class
   and never was: it is defined in index.html's own <style>, and on the pages
   built from site.css by site.css. These four pages load neither, so every
   button in the sign-in box, the confirm box and the list picker arrived as
   an unstyled browser control — a white rectangle with black 2px borders and
   square corners, in the middle of a dark dialog. The dialog itself was
   already dark, which is why this survived: the panel, the heading and the
   fine print all read --acct-* tokens, and the one element that reads none
   of them is the one you press.

   The values are the home page's, so the box a reader meets here is the box
   they would have met there. .ws-page .btn rather than a list of containers:
   nothing else on these pages carries that class, because everything else
   they draw is a .ws-btn or a .ws-mini. */
.ws-page .btn{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;cursor:pointer;
  height:38px;padding:0 13px;border-radius:10px;
  background:#131126;border:1px solid #272141;color:#F2F3FA;
  font:inherit;font-size:13px;font-weight:650;
  transition:border-color .18s ease,background .18s ease;
}
.ws-page .btn:hover{border-color:#7C5CFF;background:#171434}
.ws-page .btn:disabled{opacity:.55;cursor:progress}
.ws-page .acct-modal .btn{justify-content:center}
/* openSignIn focuses this button, so the ring is on screen every time the
   box opens. The browser's own is a white rectangle on a dark dialog. */
.ws-page .btn:focus-visible{outline:2px solid #818cf8;outline-offset:2px}
/* Cancel sits beside a destructive confirm and must not look like it. */
.ws-page .btn.secondary{background:rgba(255,255,255,.045);border-color:var(--line)}
.ws-page .btn.secondary:hover{background:rgba(255,255,255,.075);border-color:var(--line-strong)}
.ws-page .btn.danger{
  background:rgba(239,68,68,.12);border-color:rgba(248,113,113,.3);color:#fda4af;
}
.ws-page .btn.danger:hover{background:rgba(239,68,68,.2);border-color:rgba(248,113,113,.45)}

/* The account slot is account.css's, and only its two literal white
   backgrounds need saying again here. */
.ws-page .acct-link,.ws-page .acct-avatar{background:rgba(255,255,255,.05);border-color:var(--acct-line)}
.ws-page .acct-avatar{background:linear-gradient(135deg,#312e81,#06b6d4);color:#fff;border-color:transparent}
.ws-page .acct-picker-new input{background:rgba(255,255,255,.05);color:var(--acct-text)}
.ws-page .acct-pop a:hover,.ws-page .acct-pop button:hover{background:rgba(255,255,255,.07);color:#fff}

/* ============ shared: shell, hero and figures ============ */

.ws-shell{width:min(1240px,calc(100% - 36px));margin:0 auto;padding:56px 0 70px}

.ws-hero{
  position:relative;padding:34px 34px 30px;overflow:hidden;
  border:1px solid rgba(255,255,255,.095);border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.035)),rgba(11,16,32,.62);
  box-shadow:var(--shadow);
}
.ws-hero::before{
  content:"";position:absolute;inset:-40% 20% auto -10%;height:320px;
  transform:rotate(-6deg);filter:blur(18px);pointer-events:none;
  background:linear-gradient(90deg,rgba(99,102,241,.22),rgba(34,211,238,.05),transparent);
}
.ws-hero-top{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:30px}

.ws-eyebrow{
  display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;
  border:1px solid rgba(52,211,153,.20);background:rgba(52,211,153,.07);
  color:#9ff3d2;font-size:12px;font-weight:750;letter-spacing:.015em;
}
.ws-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 0 5px rgba(52,211,153,.08),0 0 16px rgba(52,211,153,.55);
}
.ws-hero h1{
  margin:17px 0 10px;font-size:clamp(34px,4.7vw,58px);line-height:1;
  letter-spacing:-.055em;max-width:760px;
}
/* Violet, not cyan. The accent on these pages is the violet in the mark, the
   buttons, the badges and the active list card; a headline that ended in
   turquoise was the one place the page disagreed with itself. */
.ws-grad{
  background:linear-gradient(90deg,#fff 0%,#dcd2ff 38%,#a78bfa 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ws-hero-copy{max-width:675px;margin:0;color:#9aa7c0;line-height:1.65;font-size:15.5px}
.ws-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

.ws-btn{
  border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:11px 15px;border-radius:12px;color:#fff;font-weight:730;font-size:13px;
  transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.ws-btn:hover{transform:translateY(-1px)}
.ws-btn.primary{
  background:linear-gradient(135deg,#6d5dfc,#6D4AFF 55%,#0ea5e9);
  box-shadow:0 10px 28px rgba(79,70,229,.25), inset 0 0 0 1px rgba(255,255,255,.14);
}
.ws-btn.secondary{background:rgba(255,255,255,.045);border:1px solid var(--line);color:#d6dced}
.ws-btn.secondary:hover{background:rgba(255,255,255,.075);border-color:var(--line-strong)}
.ws-btn.danger{background:rgba(239,68,68,.08);border:1px solid rgba(248,113,113,.24);color:#fda4af}
.ws-btn.danger:hover{
  background:rgba(239,68,68,.14);border-color:rgba(248,113,113,.38);
  box-shadow:0 10px 26px rgba(127,29,29,.16);
}
.ws-btn svg{width:16px;height:16px}

/* Back to the home page, above everything else in the shell, where a way
   out is looked for. Quiet: it is a way out, not the thing on the page. */
.ws-back{
  display:inline-flex;align-items:center;gap:7px;margin:0 0 18px;padding:8px 14px 8px 11px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);
  color:#d6dced;font-size:13.5px;font-weight:700;text-decoration:none;
  transition:background .18s ease, border-color .18s ease;
}
.ws-back:hover{background:rgba(255,255,255,.075);border-color:var(--line-strong);color:#fff}
.ws-back:focus-visible{outline:2px solid #a78bfa;outline-offset:2px}

.ws-metrics{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:28px}
/* /account/ has one figure worth showing rather than four, and a lone tile
   stretched across the hero reads as a mistake. */
.ws-metrics.single{grid-template-columns:minmax(220px,320px)}
/* /tools/ shows three, and they sit under the hero copy rather than filling
   the width of the panel. */
.ws-metrics.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.ws-metric{
  min-height:78px;padding:14px 15px;border-radius:15px;
  border:1px solid rgba(255,255,255,.08);background:rgba(6,10,22,.42);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ws-metric-label{font-size:11px;color:#7e8aa4;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.ws-metric-value{
  font-size:21px;font-weight:800;letter-spacing:-.03em;margin-top:6px;
  /* A category name is whatever the catalogue calls it, and the tile is a
     quarter of the hero: let it clip rather than push the row apart. */
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ws-metric-value small{font-size:11px;font-weight:700;color:#73e8c1;margin-left:5px}

/* ============ shared: the signed-out gate ============ */

.ws-gate{
  margin-top:18px;padding:44px 28px;text-align:center;
  border:1px solid rgba(255,255,255,.09);border-radius:22px;
  background:var(--panel);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.ws-gate h2{margin:0 0 8px;font-size:22px;letter-spacing:-.03em}
.ws-gate p{margin:0 auto 20px;max-width:52ch;color:#98a4bb;font-size:14px;line-height:1.6}

/* ============ /tools/: browse by category ============ */

.ws-crumbs{color:#7e8ba4;font-size:12px;margin:0 0 18px}
.ws-crumbs a:hover{color:#fff}

/* ---- the tool search, above everything ----
   Wider and taller than the filter in the hero, because it is the first
   thing on the page and the one most readers want. */
.br-tool-find{position:relative;margin:0 0 26px;max-width:720px;z-index:20}
.br-tsearch{position:relative;display:block}
.br-tsearch svg{
  position:absolute;left:17px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;color:#7b88a4;pointer-events:none;
}
.br-tsearch input{
  width:100%;height:56px;border-radius:15px;padding:0 17px 0 48px;
  border:1px solid var(--line-strong);background:rgba(255,255,255,.05);color:#fff;
  font-size:15px;outline:none;transition:.2s ease;
}
.br-tsearch input::placeholder{color:#6b7792}
.br-tsearch input:focus{border-color:rgba(124,92,255,.6);box-shadow:0 0 0 4px rgba(124,92,255,.13)}

.br-tresults{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  padding:7px;border-radius:15px;
  border:1px solid var(--line-strong);background:#0d1326;
  box-shadow:0 26px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;gap:2px;max-height:min(60vh,420px);overflow:auto;
}
.br-thit{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:11px 13px;border-radius:11px;color:#dfe5f2;
}
.br-thit:hover,.br-thit:focus-visible{background:rgba(124,92,255,.16);color:#fff;outline:none}
.br-thit[aria-selected="true"]{background:rgba(124,92,255,.22);color:#fff}
.br-thit-n{font-size:13.5px;font-weight:750}
.br-thit-m{font-size:11.5px;color:#8591ab}
.br-thit:hover .br-thit-m,.br-thit[aria-selected="true"] .br-thit-m{color:#c3cbe2}
.br-tnone{margin:0;padding:12px 13px;color:#8d99b2;font-size:12.5px;line-height:1.55}

/* The hero is not in a panel. /my-tools/ puts one there because that page is
   a workspace and the hero is its header; this page is a directory, and a
   bordered box around the heading only adds an edge between the title and the
   nineteen bordered boxes under it. */
.br-hero{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:40px;padding:10px 0 4px;
  /* The figure's glow bleeds past its own box on purpose, and at 1280px the
     shell has 20px of margin to absorb a 25px bleed — so the page gained
     five pixels of horizontal scroll at the single most common laptop
     width. It was checked at 1440 and at 390 and passed both. Clipped at
     the hero rather than trimmed at the glow, because the next decoration
     to bleed should not be able to do this again. */
  overflow:hidden;
}
.br-hero-main{min-width:0;flex:1 1 auto;max-width:720px}
.br-hero h1{margin:0;font-size:clamp(34px,4.5vw,54px);line-height:1.02;letter-spacing:-.05em}
.br-hero-figs{
  margin:12px 0 0;font-size:17px;font-weight:750;letter-spacing:-.02em;color:#b9a9ff;
}
.br-hero .ws-hero-copy{margin-top:10px;font-size:14.5px}

/* The search, first thing, full width of the column it is in. */
.br-find{position:relative;display:block;margin-top:22px;max-width:620px}
.br-find-lab{display:block;margin:0 0 7px;color:#78849e;font-size:12px}
.br-find svg{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:#71809b;pointer-events:none;
}
.br-find input{
  width:100%;height:52px;border-radius:14px;border:1px solid var(--line-strong);
  background:rgba(255,255,255,.045);color:#fff;outline:none;padding:0 16px 0 45px;
  font-size:14px;transition:.2s ease;
}
.br-find input::placeholder{color:#64728d}
.br-find input:focus{border-color:rgba(124,92,255,.6);box-shadow:0 0 0 4px rgba(124,92,255,.13)}

.br-pop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:14px}
.br-pop > span{color:#78849e;font-size:12px;flex:none}
.br-pop a{
  padding:7px 13px;border-radius:999px;font-size:12px;font-weight:650;color:#c0c9df;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);
  transition:.18s ease;
}
.br-pop a:hover{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.14);color:#fff}

.br-or{margin:14px 0 0;color:#78849e;font-size:12.5px}
.br-or a{color:#c4b5fd;font-weight:700}
.br-or a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ---- the figure ----
   The site's mark in the middle, four of the tools it rates around it, three
   empty panes behind. Every box is a div; the only files are the four logos
   the cards already use. */
.br-art{position:relative;width:420px;height:300px;flex:0 0 420px}
.br-art-glow{
  position:absolute;inset:4% -6% 6% -4%;border-radius:60px;pointer-events:none;
  background:
    radial-gradient(50% 50% at 50% 48%, rgba(124,92,255,.55), transparent 70%),
    radial-gradient(40% 36% at 22% 72%, rgba(34,211,238,.14), transparent 72%);
  filter:blur(30px);
}
.br-art-pane{
  position:absolute;border-radius:22px;
  border:1px solid rgba(190,170,255,.20);
  background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.015));
}
.br-art-pane.one{left:34px;top:30px;width:230px;height:180px;transform:rotate(-5deg)}
.br-art-pane.two{left:150px;top:14px;width:240px;height:200px;transform:rotate(4deg);opacity:.75}
.br-art-pane.three{left:96px;top:66px;width:250px;height:190px;transform:rotate(-1deg);opacity:.5}

.br-art-tile,.br-art-mark{
  position:absolute;border-radius:19px;display:grid;place-items:center;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.br-art-tile{width:62px;height:62px;background:#fff;overflow:hidden}
.br-art-tile img{width:40px;height:40px;object-fit:contain}
.br-art-tile.a{left:40px;top:74px}
.br-art-tile.b{right:92px;top:44px}
.br-art-tile.c{right:72px;top:172px;background:#0d1326;border:1px solid rgba(255,255,255,.14)}
.br-art-tile.d{right:0;top:104px;width:66px;height:66px}
.br-art-tile.spark{
  left:62px;top:160px;width:56px;height:56px;border-radius:17px;
  background:#121a30;border:1px solid rgba(255,255,255,.12);color:#b9a4ff;
}
.br-art-tile.spark svg{width:26px;height:26px;filter:drop-shadow(0 0 12px rgba(167,139,250,.7))}

/* The mark, big, over everything. The tile stays here, unlike in the
   masthead: everything else in this figure is a tile, so the mark reads as
   one of them rather than as a frame floating over the panes. Inline SVG,
   drawn by the same brandMark() the bar uses, so there is one mark and it is
   the favicon. */
.br-art-mark{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:134px;height:134px;border-radius:30px;
  color:var(--text);background:#070c1b;
  border:1px solid rgba(95,227,208,.3);
  box-shadow:0 0 60px rgba(95,227,208,.2), 0 24px 60px rgba(0,0,0,.55),
             inset 0 0 40px rgba(95,227,208,.06);
}
.br-art-mark svg{width:84px;height:84px;filter:drop-shadow(0 0 22px rgba(95,227,208,.45))}

.br-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:18px}

.br-card{
  position:relative;padding:20px;border-radius:22px;overflow:hidden;
  border:1px solid rgba(255,255,255,.085);background:var(--panel);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 18px 60px rgba(0,0,0,.16);
}
.br-card::after{
  content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  right:-130px;top:-130px;pointer-events:none;
  background:radial-gradient(circle,rgba(99,102,241,.12),transparent 67%);
}
/* The audience card carries 35 links to the topic cards' handful, so it runs
   the width of the grid and lays its links out three across. */
.br-card.wide{grid-column:1 / -1}

.br-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.065);
}
.br-card-title{display:flex;align-items:center;gap:12px;min-width:0}
/* Nineteen cards and nineteen identical violet tiles read as one wall. The
   accent is on the tile and nowhere else — the card, its border and its links
   stay the same on every card, so the colour is a way of telling them apart
   at a glance and never a claim about the category. */
.br-icon{
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,var(--ic-a),var(--ic-b));
  border:1px solid var(--ic-l);color:#fff;
  --ic-a:rgba(124,92,255,.9);--ic-b:rgba(99,102,241,.55);--ic-l:rgba(167,139,250,.35);
}
.br-icon.violet{--ic-a:#7C5CFF;--ic-b:#5B21B6;--ic-l:rgba(167,139,250,.4)}
.br-icon.blue{--ic-a:#4f7cff;--ic-b:#1e3a8a;--ic-l:rgba(147,180,255,.38)}
.br-icon.pink{--ic-a:#ec4899;--ic-b:#9d174d;--ic-l:rgba(249,168,212,.38)}
.br-icon.rose{--ic-a:#f43f5e;--ic-b:#9f1239;--ic-l:rgba(253,164,175,.38)}
.br-icon.cyan{--ic-a:#22d3ee;--ic-b:#0e7490;--ic-l:rgba(103,232,249,.38)}
.br-icon.amber{--ic-a:#f59e0b;--ic-b:#92400e;--ic-l:rgba(253,208,138,.38)}
.br-icon.green{--ic-a:#34d399;--ic-b:#065f46;--ic-l:rgba(134,239,172,.38)}
.br-icon svg{width:19px;height:19px}
.br-card-head h2{margin:0;font-size:17px;letter-spacing:-.03em}
.br-card-head p{margin:4px 0 0;color:#75839f;font-size:11px}
.br-count{
  min-width:34px;height:28px;padding:0 9px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:rgba(99,102,241,.10);border:1px solid rgba(99,102,241,.18);
  color:#bfc7ff;font-size:11px;font-weight:780;
}

.br-links{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.wide .br-links{grid-template-columns:repeat(3,minmax(0,1fr))}
.br-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;padding:10px 11px;border-radius:12px;
  color:#aeb9d0;background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.065);
  font-size:11.5px;font-weight:680;transition:.18s ease;
}
.br-link:hover{
  color:#fff;border-color:rgba(129,140,248,.22);transform:translateY(-1px);
  background:linear-gradient(90deg,rgba(99,102,241,.12),rgba(34,211,238,.04));
}
.br-link svg{width:13px;height:13px;flex:0 0 13px;color:#6f7c97}
.br-link:hover svg{color:#a5b4fc}
.ws-page .br-link:focus-visible{outline:2px solid #818cf8;outline-offset:2px}

.br-empty{
  margin-top:18px;padding:46px 20px;text-align:center;color:#8190aa;
  border:1px dashed rgba(255,255,255,.12);border-radius:20px;background:rgba(11,16,31,.5);
}
.br-empty strong{display:block;color:#d8deed;margin-bottom:6px}

.br-note{
  margin-top:18px;padding:18px;border-radius:18px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);color:#92a0ba;font-size:13px;line-height:1.65;
}
.br-note b{color:#cdd6e8}
.br-note a{color:#a5b4fc}
.br-note a:hover{text-decoration:underline;text-underline-offset:3px}

/* ============ /my-tools/: the workspace ============ */

/* THE FIGURE IN THE HERO — a saved stack, drawn as a saved stack.

   Three panels going back and to the right, the front one carrying two real
   marks and two rows of a list, with two more tools floating off its corner.
   Everything here is a div, a border and a gradient except the four logos,
   which are the catalogue's own files: nothing is fetched for the figure
   itself, and img-src stays at 'self'.

   It replaced rings and satellites, which was decoration about nothing. A
   figure beside a heading that says "your saved AIs" should be the saved
   AIs. */
.mt-art{position:relative;width:352px;height:250px;flex:0 0 352px;margin-top:2px}

.mt-art-glow{
  position:absolute;inset:-26% -18% -30% -10%;border-radius:48px;pointer-events:none;
  background:
    radial-gradient(58% 54% at 70% 42%, rgba(124,92,255,.62), transparent 70%),
    radial-gradient(42% 42% at 30% 82%, rgba(34,211,238,.18), transparent 74%);
  filter:blur(26px);
}

.mt-art-back,.mt-art-card{position:absolute;border-radius:19px}
.mt-art-back{
  border:1px solid rgba(190,170,255,.26);
  background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.025));
}
.mt-art-back.one{left:64px;top:14px;right:18px;height:158px;transform:rotate(-3.5deg)}
.mt-art-back.two{left:108px;top:0;right:0;height:148px;transform:rotate(-7deg);opacity:.55}

.mt-art-card{
  left:0;top:40px;width:236px;padding:16px;
  display:flex;flex-direction:column;gap:11px;
  border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(165deg,rgba(26,22,58,.96),rgba(12,14,30,.96));
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.mt-art-marks{display:flex;gap:11px}
.mt-art-logo{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:#fff;overflow:hidden;box-shadow:0 8px 18px rgba(0,0,0,.3);
}
/* Bigger than the 28px every other logo tile on these pages gets, because
   this one is the picture rather than a label beside a name. */
.mt-art .tool-logo{width:32px;height:32px;border-radius:0;background:none}

.mt-art-row{display:flex;align-items:center;gap:9px}
.mt-art-ic{
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none;
  background:rgba(124,92,255,.16);border:1px solid rgba(124,92,255,.22);color:#c4b5fd;
}
.mt-art-ic svg{width:11px;height:11px}
/* The grey bars are a list standing in for itself. They carry no words
   because inventing a saved tool's name in a decoration is inventing a fact. */
.mt-art-bars{flex:1;display:grid;gap:5px;min-width:0}
.mt-art-bars i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.mt-art-bars i:last-child{width:62%;background:rgba(255,255,255,.07)}

.mt-art-float{
  position:absolute;width:52px;height:52px;border-radius:15px;
  display:grid;place-items:center;background:#fff;overflow:hidden;
  box-shadow:0 16px 34px rgba(0,0,0,.42), 0 0 0 1px rgba(255,255,255,.14);
}
.mt-art-float.one{right:52px;top:70px;width:58px;height:58px;border-radius:17px}
.mt-art-float.two{right:0;top:130px;width:50px;height:50px;border-radius:14px}
.mt-art-float .tool-logo{width:34px;height:34px;border-radius:0;background:none}
.mt-art-float.two .tool-logo{width:30px;height:30px}

.mt-art-spark{color:#b9a4ff;position:absolute;right:58px;bottom:30px;display:block}
.mt-art-spark svg{width:38px;height:38px;filter:drop-shadow(0 0 16px rgba(167,139,250,.75))}

/* The small caps over the h1. Two words naming the page, so the headline
   underneath does not have to. */
.mt-eyebrow{
  margin:0 0 14px;font-size:11px;font-weight:800;color:#a78bfa;
  text-transform:uppercase;letter-spacing:.12em;
}

/* ---- signed out: what an account is for ---- */

.mt-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.mt-feat{
  padding:17px;border-radius:17px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(10,15,29,.7);
}
.mt-feat-i{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(124,92,255,.22);background:rgba(124,92,255,.12);color:#c4b5fd;
}
.mt-feat-i svg{width:17px;height:17px}
.mt-feat strong{display:block;margin-top:13px;font-size:13.5px}
.mt-feat p{margin:5px 0 0;color:#8e9ab3;font-size:12px;line-height:1.5}

/* Shown only once account.js has run and the feature is configured, the same
   way account.css holds back the save button and the account slot. A build
   with no Supabase credentials is a real deploy of this site: on it, these
   are controls with nothing behind them, and the page offers the directory
   instead. */
.mt-acct-only{display:none}
.acct-ready .ws-btn.mt-acct-only{display:inline-flex}
.acct-ready .mt-prompt.mt-acct-only{display:block}
.acct-ready .mt-noacct{display:none}
.acct-ready .mt-act.save{display:inline-flex}
.mt-act.save{display:none}

/* The last thing on the signed-out screen, under four tools whose Save
   buttons open the sign-in box. Dashed, because it is an outline of
   something that is not there yet. */
.mt-prompt{
  margin-top:26px;padding:32px 22px;text-align:center;
  border:1px dashed rgba(124,92,255,.32);border-radius:20px;
  background:rgba(124,92,255,.045);
}
.mt-prompt-i{
  width:44px;height:44px;border-radius:14px;display:inline-grid;place-items:center;
  border:1px solid rgba(124,92,255,.24);background:rgba(124,92,255,.12);color:#c4b5fd;
}
.mt-prompt-i svg{width:20px;height:20px}
.mt-prompt strong{display:block;margin-top:13px;font-size:16px;letter-spacing:-.02em}
.mt-prompt p{margin:7px auto 0;max-width:56ch;color:#96a2bb;font-size:13px;line-height:1.6}
.mt-prompt .ws-btn{margin-top:17px}

/* ---- signed in: the four figures ---- */

/* Icon beside the number rather than a label above it, so a tile reads as one
   fact in one line. "Account sync" stayed, against the first draft of this
   redesign, because a page whose entire promise is that a list survives this
   browser should say somewhere that it has. */
.ws-metrics.mt-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
.ws-metrics.mt-stats.three{max-width:none}
.mt-stats .ws-metric{
  display:flex;align-items:center;gap:13px;min-height:0;padding:15px 16px;border-radius:17px;
}
.mt-stat-i{
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(124,92,255,.2);background:rgba(124,92,255,.11);color:#c4b5fd;
}
.mt-stat-i svg{width:17px;height:17px}
.mt-stats .ws-metric > div{min-width:0}
.mt-stats .ws-metric-value{margin-top:0;font-size:19px}
/* A tile whose value is a phrase rather than a number. "General-Purpose AI
   Assistants" and "Output was not good enough" are what the catalogue and the
   reason list actually call those things, and a tile sized for "11" clipped
   both to an ellipsis — which is a figure that says nothing at all. Two
   lines, smaller, rather than a shorter lie. */
.mt-stats .ws-metric.txt .ws-metric-value{
  font-size:14.5px;line-height:1.25;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mt-stats .ws-metric-label{
  margin-top:2px;font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;
}

/* ---- the two sections ---- */

/* Headings on the page itself rather than inside bordered panels. The panels
   were a box around a box: a translucent pane holding a grid of translucent
   cards, with the same border drawn twice, nine pixels apart. */
.mt-section{margin-top:32px}
.mt-sec-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin-bottom:14px;
}
.mt-sec-title h2{margin:0;font-size:21px;letter-spacing:-.03em}
.mt-sec-title p{margin:5px 0 0;color:#8290a9;font-size:12.5px}

.mt-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mt-search{position:relative;min-width:230px}
.mt-search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;color:#6f7d99;pointer-events:none;
}
.mt-search input{
  width:100%;height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.038);color:#fff;outline:none;padding:0 12px 0 36px;
  font-size:13px;transition:.2s ease;
}
.mt-search input::placeholder{color:#63708a}
.mt-search input:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.12)}

.mt-select{position:relative;display:block}
/* The word "Category" is there for a screen reader and for anybody who
   wonders what the box is before opening it; the box itself says "All
   categories" until it says otherwise. */
.mt-select-lab{position:absolute;left:-9999px}
.mt-select select{
  height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.038);color:#cfd6e6;outline:none;
  padding:0 30px 0 12px;font:inherit;font-size:12.5px;font-weight:650;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='m6 9 6 6 6-6' stroke='%236f7d99' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;background-size:15px;
}
.mt-select select:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.mt-select option{background:#111a2e;color:#e8ecf7}

.mt-filter{
  height:38px;padding:0 12px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.038);color:#aeb8cc;font-size:12px;font-weight:700;cursor:pointer;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.mt-filter:hover{border-color:var(--line-strong);color:#fff}
.mt-filter svg{width:14px;height:14px}
.mt-filter[aria-pressed="true"]{
  background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.35);color:#9ff3d2;
}

.ws-mini{
  height:34px;padding:0 13px;border-radius:10px;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);
  color:#c3cde1;font-size:12px;font-weight:750;
}
.ws-mini svg{width:14px;height:14px}
.ws-mini:hover{border-color:var(--line-strong);color:#fff}
.ws-mini.accent{
  border-color:rgba(124,92,255,.42);background:rgba(124,92,255,.14);color:#d6ccff;
}
.ws-mini.accent:hover{background:rgba(124,92,255,.22);color:#fff}
.ws-mini.danger{color:#fca5a5;border-color:rgba(248,113,113,.28)}
.ws-mini.danger:hover{background:rgba(248,113,113,.12);color:#fecaca}

/* ---- the list cards ---- */

.mt-lists{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mt-list{
  position:relative;display:flex;flex-direction:column;gap:13px;cursor:pointer;
  padding:15px;border-radius:17px;text-align:left;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),rgba(10,15,29,.78);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mt-list:hover{
  transform:translateY(-3px);border-color:rgba(129,140,248,.28);
  box-shadow:0 18px 38px rgba(0,0,0,.2);
}
.mt-list.active{
  border-color:rgba(124,92,255,.45);
  background:linear-gradient(180deg,rgba(124,92,255,.17),rgba(34,211,238,.035)),rgba(10,15,29,.8);
}
.mt-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:9px}
.mt-list-id{display:flex;align-items:center;gap:10px;min-width:0}
.mt-list-icon{
  width:31px;height:31px;border-radius:10px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:#aab5ca;
}
.mt-list-icon svg{width:14px;height:14px}
.mt-list.active .mt-list-icon{border-color:rgba(124,92,255,.32);background:rgba(124,92,255,.16);color:#d6ccff}
.mt-list-text{min-width:0}
.mt-list-name{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-list-count{font-size:10.5px;color:#7c89a4;margin-top:3px}

/* Up to four marks, overlapped, so a list is recognisable before it is read.
   Tiles rather than bare images for the reason the card's logo tile is one: a
   white-on-transparent mark has to have something to sit on. */
/* Side by side with a gap, not overlapped. Overlapping them saved nine pixels
   and cost the one thing the row is for: four marks sitting on top of each
   other are not four marks a reader can tell apart. */
.mt-list-logos{display:flex;align-items:center;gap:6px;min-height:28px}
.mt-list-logo{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,#151c31,#0d1221);
  overflow:hidden;
}
.mt-list-more{
  margin-left:2px;font-size:10px;font-weight:750;color:#77839e;
  padding:2px 7px;border-radius:999px;background:rgba(255,255,255,.05);
}
.mt-list-empty{font-size:10.5px;color:#6f7c96}

.mt-list-go{
  display:flex;align-items:center;gap:5px;margin-top:auto;
  border:0;background:none;padding:0;cursor:pointer;
  color:#b8c2d9;font-size:11px;font-weight:750;
}
.mt-list-go svg{width:12px;height:12px}
.mt-list-go:hover{color:#fff}
.mt-list.active .mt-list-go{color:#d6ccff}

/* The create card is the last tile in the grid rather than only a button
   beside the heading, so an account with no lists still has somewhere
   obvious to press. */
.mt-list.mt-list-add{
  border-style:dashed;align-items:center;justify-content:center;text-align:center;
  color:#78859f;background:rgba(255,255,255,.015);min-height:150px;gap:0;
}
.mt-list-add:hover{color:#b7c4dd;background:rgba(124,92,255,.04);transform:none;box-shadow:none}
.mt-list-add strong{font-size:12.5px;margin-top:11px}
.mt-list-add small{font-size:10.5px;margin-top:4px;line-height:1.45;max-width:22ch}

.mt-newlist{display:flex;gap:6px;margin:0 0 14px;max-width:380px}
.mt-newlist input{
  flex:1;min-width:0;height:36px;border-radius:10px;padding:0 11px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;outline:none;
}
.mt-newlist input::placeholder{color:#63708a}
.mt-newlist input:focus{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.12)}
.mt-newlist button{
  height:36px;padding:0 13px;border-radius:10px;border:1px solid rgba(124,92,255,.4);
  background:rgba(124,92,255,.2);color:#e2dbff;font-size:12px;font-weight:750;cursor:pointer;
}

/* ============ /my-tools/: the tool cards ============ */

.mt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.mt-card{
  position:relative;display:flex;flex-direction:column;min-height:214px;padding:16px;
  border-radius:17px;border:1px solid rgba(255,255,255,.085);overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018)),
    rgba(10,15,29,.78);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.mt-card::after{
  content:"";position:absolute;width:180px;height:180px;border-radius:50%;
  top:-110px;right:-90px;pointer-events:none;
  background:radial-gradient(circle,rgba(124,92,255,.12),transparent 65%);
}
.mt-card:hover{
  transform:translateY(-3px);border-color:rgba(129,140,248,.28);
  box-shadow:0 18px 38px rgba(0,0,0,.2);
}
.mt-card > *{position:relative;z-index:1}

/* Logo, then the kind of tool, on one line. The order under it — name, who
   makes it, what it is for — is the order somebody checks they have the right
   product in. The maker used to be a fallback shown only when the category
   was missing, so the one fact that separates two products with the same name
   was the one fact usually hidden. */
.mt-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mt-logo{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,#151c31,#0d1221);
  box-shadow:inset 0 0 18px rgba(255,255,255,.025);
  overflow:hidden;
}
/* The mark itself is the same markup every other page uses, so the tile
   colours a white-on-transparent logo needs have to exist here too — on a
   page that does not load site.css, a missing .lg-bg-black is a logo that
   is present, loads, and shows nothing. */
.ws-page .tool-logo{width:28px;height:28px;object-fit:contain;border-radius:7px;background:#fff}
.ws-page .tool-logo-full{object-fit:cover;width:100%;height:100%;border-radius:0}
.ws-page .tool-mono{
  display:grid;place-items:center;font-weight:850;font-size:12px;
  background:rgba(255,255,255,.06);color:#dbe2f2;border-radius:9px;
}
.ws-page .lg-bg-black{background:#000}
.ws-page .lg-bg-syn{background:#3E57DA}

/* The category is whatever the catalogue calls it, and the catalogue calls
   one of them "General-Purpose AI Assistants" — 29 characters for a pill that
   shares a line with a 42px logo. It wraps rather than truncating: half a
   category name is worse than two short lines of one, and it is the fact that
   tells a reader what kind of thing the card is. */
.mt-badge{
  flex:0 1 auto;max-width:58%;padding:5px 9px;border-radius:999px;
  border:1px solid rgba(124,92,255,.26);background:rgba(124,92,255,.12);
  color:#c9bdfb;font-size:9.5px;font-weight:750;line-height:1.3;text-align:right;
}
.mt-name{margin-top:14px;font-size:14.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-name a:hover{text-decoration:underline;text-underline-offset:3px}
.mt-maker{font-size:11px;color:#8d9ab4;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.mt-desc{
  margin:10px 0 12px;color:#93a0b8;font-size:12px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;margin-bottom:12px}
.mt-chip{
  padding:4px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.075);
  background:rgba(255,255,255,.035);color:#8996af;font-size:9.5px;font-weight:700;
}

.mt-card-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.mt-act{
  height:32px;padding:0 12px;border-radius:10px;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);background:rgba(255,255,255,.045);
  color:#cfd6e6;font-size:11.5px;font-weight:750;
}
.mt-act svg{width:13px;height:13px}
.mt-act:hover{border-color:var(--line-strong);color:#fff}
.mt-act.compare{
  border-color:rgba(95,227,208,.3);background:rgba(95,227,208,.1);color:#9fe8dc;
}
.mt-act.compare:hover{background:rgba(95,227,208,.18);color:#fff;border-color:rgba(95,227,208,.45)}
.mt-act.save{
  border-color:rgba(124,92,255,.4);background:rgba(124,92,255,.16);color:#ded6ff;
}
.mt-act.save:hover{background:rgba(124,92,255,.24);color:#fff}
.mt-act.save[aria-pressed="true"]{
  border-color:rgba(52,211,153,.4);background:rgba(52,211,153,.14);color:#9ff3d2;
}
.mt-menu{
  width:32px;height:32px;border-radius:10px;flex:none;margin-left:auto;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:#75819b;display:grid;place-items:center;cursor:pointer;
}
.mt-menu:hover{color:#fff;background:rgba(255,255,255,.06)}
.mt-menu svg{width:15px;height:15px}
/* On a list card the menu is in the corner, not at the end of a row. */
.mt-list .mt-menu{width:28px;height:28px;margin-left:0}

.mt-add{
  min-height:150px;border-style:dashed;cursor:pointer;color:#71809b;
  align-items:center;justify-content:center;text-align:center;
  background:rgba(255,255,255,.018);
}
.mt-add:hover{color:#b7c4dd;background:rgba(124,92,255,.035)}
.mt-add::after{display:none}
.mt-plus{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:9px;
  background:rgba(124,92,255,.1);border:1px solid rgba(124,92,255,.2);color:#c4b5fd;
}
.mt-plus svg{width:18px;height:18px}
.mt-add strong{font-size:12px}
.mt-add small{font-size:10px;margin-top:4px}

/* The empty state is the only thing on the page when it shows, so it says
   what to do next rather than only what is missing. */
.mt-empty{
  padding:46px 22px;text-align:center;color:#8190aa;
  border:1px dashed rgba(255,255,255,.12);border-radius:18px;
}
.mt-empty strong{display:block;color:#e2e7f3;font-size:16px;letter-spacing:-.02em;margin-bottom:7px}
.mt-empty p{margin:7px auto 0;max-width:56ch;font-size:13px;line-height:1.6}
.mt-empty .ws-btn{margin-top:18px}
.mt-steps{
  list-style:none;counter-reset:mt 0;margin:20px auto 0;padding:0;max-width:430px;
  display:grid;gap:10px;text-align:left;
}
.mt-steps li{
  counter-increment:mt;position:relative;padding:12px 14px 12px 46px;
  border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.025);
}
.mt-steps li::before{
  content:counter(mt);position:absolute;left:13px;top:12px;
  width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
  background:rgba(124,92,255,.14);border:1px solid rgba(124,92,255,.24);
  color:#c4b5fd;font-size:11px;font-weight:800;
}
.mt-steps strong{display:block;color:#dde3f0;font-size:12.5px}
.mt-steps span{display:block;margin-top:3px;color:#8a97b0;font-size:11.5px;line-height:1.5}

/* The per-card menu is positioned in the viewport rather than inside the
   card, for the same reason the list picker is: a card clips its own
   overflow, and one near the right edge would push a popover off screen. */
.mt-cardmenu{
  position:absolute;z-index:70;min-width:210px;padding:6px;
  border-radius:14px;border:1px solid var(--line-strong);
  background:#111a2e;box-shadow:0 24px 60px rgba(0,0,0,.5);
  display:flex;flex-direction:column;gap:2px;
}
.mt-cardmenu button{
  text-align:left;padding:9px 11px;border-radius:9px;border:0;background:none;
  color:#cfd6e6;font-size:12.5px;font-weight:650;cursor:pointer;
}
.mt-cardmenu button:hover{background:rgba(255,255,255,.07);color:#fff}
.mt-cardmenu button.danger{color:#fca5a5}
.mt-cardmenu button.danger:hover{background:rgba(248,113,113,.12);color:#fecaca}
.mt-cardmenu .mt-cardmenu-h{
  padding:7px 11px 5px;color:#6f7c96;font-size:10px;font-weight:750;
  text-transform:uppercase;letter-spacing:.07em;
}

.ws-page .ws-btn:focus-visible,.ws-page .mt-list:focus-visible,
.ws-page .mt-menu:focus-visible,.ws-page .mt-list-go:focus-visible,
.ws-page .ws-mini:focus-visible,.ws-page .mt-filter:focus-visible,
.ws-page .mt-act:focus-visible,.ws-page .mt-open:focus-visible,
.ws-page .mt-cardmenu button:focus-visible,.ws-page .mt-name a:focus-visible{
  outline:2px solid #818cf8;outline-offset:2px;
}

/* ============ /account/: the dashboard ============ */

/* ============ /my-feedback/ ============ */
/* This page was built on /my-tools/'s toolbar, banner, grid and card: same
   furniture, one implementation, no drift. It drifted twice — once when
   /my-tools/ became sections and badges, and again when an answer stopped
   being a card. It owns all of it now. The only things it still shares are
   the shell, the hero, the section head, the logo tile and the mini button,
   which are the site's, not /my-tools/'s. */

/* The figure: the mark between a verdict each way, over the shapes of
   answers. The bars carry no words, because a decoration that spelled out
   somebody's note would be inventing one. */
.fb-art{width:400px;height:260px;flex:0 0 400px}
.fb-art .br-art-pane.one{left:34px;top:24px;width:235px;height:165px;transform:rotate(-4deg)}
.fb-art .br-art-pane.two{left:150px;top:16px;width:225px;height:175px;transform:rotate(5deg);opacity:.7}
.fb-art-bars{position:absolute;display:grid;gap:7px;width:104px}
.fb-art-bars i{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.14)}
.fb-art-bars i:last-child{width:64%;background:rgba(255,255,255,.07)}
.fb-art-bars.x{left:20px;top:146px}
.fb-art-bars.y{right:18px;top:60px}
.fb-art-tile{
  position:absolute;width:60px;height:60px;border-radius:18px;display:grid;place-items:center;
  box-shadow:0 16px 34px rgba(0,0,0,.45);
}
.fb-art-tile svg{width:26px;height:26px}
.fb-art-tile.up{
  left:30px;top:48px;color:#073b2b;
  background:linear-gradient(145deg,#34d399,#0f766e);border:1px solid rgba(167,243,208,.4);
}
.fb-art-tile.down{
  right:34px;top:132px;color:#3f0a16;transform:rotate(180deg);
  background:linear-gradient(145deg,#fb7185,#9f1239);border:1px solid rgba(254,205,211,.38);
}

/* The privacy claim, across the width. Violet rather than the green
   /account/ uses for the same panel: there the claim is the good news on a
   page of settings, here it is the frame the whole page sits in. */
/* Both class names, not just .fb-private: .ac-claim sets border as a
   shorthand and happens to be written further down this file, so a one-class
   override of it lost on source order and the panel stayed green. */
.ac-claim.fb-private{
  margin-top:26px;border-color:rgba(124,92,255,.26);background:rgba(124,92,255,.07);
}
.ac-claim.fb-private .ac-claim-i{
  background:rgba(124,92,255,.14);border-color:rgba(124,92,255,.26);color:#c9bdfb;
}
.ac-claim.fb-private strong{color:#e7e2ff}
.ac-claim.fb-private p{color:#9c9ec4;max-width:none}

.fb-stats{margin-top:14px}
.mt-stat-i.green{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.24);color:#6ee7b7}
.mt-stat-i.red{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.26);color:#fca5a5}
.mt-stat-i.down svg{transform:rotate(180deg)}

/* The filter, with the count on the button it belongs to, so a reader can
   see there is nothing under "Did not work" before pressing it. */
.fb-filter{display:flex;gap:6px;flex-wrap:wrap}
.fb-filter button{
  height:36px;padding:0 14px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  color:#aab5ca;font:inherit;font-size:12.5px;font-weight:700;
}
.fb-filter button span{opacity:.6;margin-left:4px}
.fb-filter button:hover{color:#fff;border-color:var(--line-strong)}
.fb-filter button[aria-pressed="true"]{
  background:linear-gradient(135deg,#6d5dfc,#6D4AFF);border-color:transparent;color:#fff;
}
.fb-filter button[aria-pressed="true"] span{opacity:.8}

/* ---- one answer, one row ---- */
.fb-list{display:grid;gap:10px}
.fb-item{
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(255,255,255,.085);border-left:3px solid var(--fb-edge,transparent);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015)),rgba(10,15,29,.7);
  transition:border-color .18s ease;
}
.fb-item.yes{--fb-edge:rgba(52,211,153,.6)}
.fb-item.no{--fb-edge:rgba(248,113,113,.55)}
.fb-item:hover{border-top-color:rgba(255,255,255,.14);border-right-color:rgba(255,255,255,.14);border-bottom-color:rgba(255,255,255,.14)}

.fb-item-main{
  display:grid;align-items:center;gap:14px;padding:13px 15px;
  grid-template-columns:42px minmax(140px,1.1fr) auto minmax(0,1.6fr) auto auto;
}
.fb-item-id{min-width:0}
.fb-item-name{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-item-name a:hover{text-decoration:underline;text-underline-offset:3px}
.fb-item-cat{font-size:11px;color:#7f8ca6;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fb-pill{
  display:inline-flex;align-items:center;gap:6px;flex:none;
  padding:7px 12px;border-radius:999px;font-size:11.5px;font-weight:750;white-space:nowrap;
}
.fb-pill svg{width:14px;height:14px}
.fb-pill.yes{background:rgba(52,211,153,.13);border:1px solid rgba(52,211,153,.3);color:#9ff3d2}
.fb-pill.no{background:rgba(248,113,113,.11);border:1px solid rgba(248,113,113,.28);color:#fca5a5}

/* Two lines of what they wrote, clamped. The full text is in the control
   that opens under the row, where it can be read and changed. */
.fb-item-note{
  margin:0;color:#97a3bb;font-size:12.5px;line-height:1.5;min-width:0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.fb-item-when{color:#74819c;font-size:11.5px;white-space:nowrap;flex:none}
.fb-item-acts{display:flex;align-items:center;gap:7px;flex:none}
.fb-item-go{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;
  color:#6f7c96;border:1px solid transparent;
}
.fb-item-go svg{width:15px;height:15px}
.fb-item-go:hover{color:#fff;background:rgba(255,255,255,.06);border-color:var(--line)}

/* The control, open under the row it belongs to rather than in it. */
.fb-item .fb{
  margin:0;padding:14px 15px 15px;
  border-top:1px solid rgba(255,255,255,.07);background:rgba(0,0,0,.18);
}

/* The control itself, which is account.js's and is the same node here as it
   is under a recommendation. Only the palette differs. */
.ws-page .fb:empty{display:none}
.ws-page .fb{margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.065)}
.ws-page .fb-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ws-page .fb-q{font-size:12px;font-weight:650;color:#98a4bb}
.ws-page .fb-b{
  display:inline-flex;align-items:center;gap:5px;padding:5px 13px;border-radius:9px;
  border:1px solid var(--line);background:rgba(255,255,255,.038);color:#aeb8cc;
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.ws-page .fb-b:hover{border-color:var(--line-strong);color:#fff}
.ws-page .fb-b.yes.on{background:rgba(52,211,153,.13);border-color:rgba(52,211,153,.35);color:#9ff3d2}
.ws-page .fb-b.no.on{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.32);color:#fca5a5}
.ws-page .fb-clear{
  border:0;background:none;padding:2px 4px;font:inherit;font-size:11.5px;font-weight:650;
  color:#77849d;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.ws-page .fb-clear:hover{color:#fff}
.ws-page .fb-why{margin-top:10px}
.ws-page .fb-why-q{
  display:block;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:#77849d;
}
.ws-page .fb-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.ws-page .fb-chip{
  padding:4px 10px;border-radius:8px;border:1px solid var(--line);
  background:rgba(255,255,255,.038);color:#aeb8cc;
  font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;
}
.ws-page .fb-chip:hover{border-color:var(--line-strong);color:#fff}
.ws-page .fb-chip.on{background:rgba(99,102,241,.16);border-color:rgba(129,140,248,.45);color:#c7d2fe}
.ws-page .fb-fine{margin:9px 0 0;font-size:11px;color:#77849d}

/* The note box. Closed until asked for, empty when it opens, and carrying
   the one warning on this site that has to be read before something is
   typed rather than after. */
.ws-page .fb-note{margin-top:10px}
.ws-page .fb-link{
  border:0;background:none;padding:2px 0;font:inherit;font-size:11.5px;font-weight:650;
  color:L#fff;cursor:pointer;text-decoration:underline;text-underline-offset:2px;
}
.ws-page .fb-link:hover{color:#fff}
.ws-page .fb-note-t{
  margin:0 0 7px;padding:8px 11px;border-left:2px solid var(--line);background:rgba(255,255,255,.038);
  border-radius:0 7px 7px 0;font-size:12px;line-height:1.5;color:#98a4bb;
  white-space:pre-wrap;overflow-wrap:break-word;
}
.ws-page .fb-note-a{display:flex;gap:12px}
.ws-page .fb-note-in{
  display:block;width:100%;box-sizing:border-box;min-height:64px;resize:vertical;
  padding:9px 11px;border-radius:9px;border:1px solid var(--line);background:rgba(255,255,255,.038);color:#fff;
  font:inherit;font-size:12.5px;line-height:1.5;outline:none;
}
.ws-page .fb-note-in:focus{border-color:rgba(129,140,248,.45)}
.ws-page .fb-note-in::placeholder{color:#77849d}
.ws-page .fb-note-f{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:7px}
.ws-page .fb-note-n{margin-right:auto;font-size:11px;color:#77849d;font-variant-numeric:tabular-nums}
.ws-page .fb-note-n.low{color:#fca5a5}
.ws-page .fb-b.save{border-color:rgba(129,140,248,.45);background:rgba(129,140,248,.45)G;color:#c7d2fe}
.ws-page .fb-warn{
  margin:8px 0 0;padding:7px 10px;border-radius:7px;font-size:11px;line-height:1.5;
  border:1px solid rgba(234,179,8,.28);background:rgba(234,179,8,.28)G;color:#e8c97a;
}

/* The privacy claim panel. /my-feedback/ draws it (as .ac-claim.fb-private,
   above); /account/ no longer does - that page is light now and has its own
   stylesheet, account-page.css. */
/* ---- the claim panel ---- */
.ac-claim{
  display:flex;gap:13px;padding:15px;border-radius:17px;
  border:1px solid rgba(52,211,153,.26);background:rgba(52,211,153,.07);
}
.ac-claim-i{
  width:42px;height:42px;border-radius:14px;display:grid;place-items:center;flex:none;
  background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.26);color:#9ff3d2;
}
.ac-claim-i svg{width:20px;height:20px}
.ac-claim strong{display:block;font-size:13.5px;color:#d9f7ec}
.ac-claim p{margin:6px 0 0;color:#8fb3a8;font-size:12px;line-height:1.55}


/* ============ shared: footer ============ */

.ws-foot{
  width:min(1240px,calc(100% - 36px));margin:0 auto;padding:0 0 38px;
  color:#7E829C;font-size:11px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.ws-foot a:hover{color:#9aa7bf}

/* ============ responsive ============ */

@media(max-width:980px){
  .mt-art,.br-art{display:none}
  .br-hero{display:block}
  .br-grid{grid-template-columns:1fr}
  .br-card.wide{grid-column:auto}
  .wide .br-links{grid-template-columns:1fr 1fr}
  .ws-metrics{grid-template-columns:repeat(2,1fr)}
  .mt-lists{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Three across as long as three fit. The rules below take it to two and
     then to one — without them, .ws-metrics.mt-stats.three is three class
     names and beats the plain .ws-metrics rules at every width, which is how
     "193" ended up rendering as "1…" on a phone. */
  .ws-metrics.mt-stats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mt-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* The bar holds a mark, two links, a search and a button across a phone, and
   the space comes out of the gaps and then out of the search, never out of a
   label. The nav used to be display:none below 980px, which is why "My tools"
   was unreachable on a phone from the one page that is about my tools. */
@media(max-width:520px){
  .ws-top-in{gap:12px}
  .ws-nav a{padding:7px 7px;font-size:12.5px}
  .ws-nav a[aria-current="page"]::after{left:7px;right:7px}
}

@media(max-width:700px){
  .ws-top-in,.ws-shell,.ws-foot{width:min(100% - 22px,1240px)}
  .ws-shell{padding:28px 0 44px}
  .ws-hero{padding:24px 20px 20px;border-radius:22px}
  .ws-hero-top{display:block}
  .ws-hero h1{font-size:39px}
  /* Every variant named with its own selector, spelled exactly as the wide
     rule spells it. .ws-metrics.mt-stats is two class names and beat a
     one-class phone rule at every width, which is how four tiles stayed four
     across on a 390px screen and clipped "Output was not good enough" to
     nothing. Same specificity, later in the file, so this one wins — and
     preflight can see that it does, because it is the same selector. */
  .ws-metrics,.ws-metrics.mt-stats,.ws-metrics.mt-stats.three{grid-template-columns:1fr 1fr}
  .mt-lists{grid-template-columns:1fr 1fr}
  .mt-feats{grid-template-columns:1fr 1fr}
  .ws-metrics.three{grid-template-columns:1fr}
  .br-find{max-width:none}
  .br-card{padding:15px;border-radius:18px}
  .br-links,.wide .br-links{grid-template-columns:1fr}
  .mt-sec-head{align-items:flex-start;flex-direction:column}
  /* Six columns do not fit a phone and none of them can be dropped: the
     verdict, what was written and when are the whole answer. It becomes
     two rows of three. */
  .fb-item-main{grid-template-columns:42px 1fr auto;row-gap:11px}
  .fb-item-note{grid-column:1 / -1;-webkit-line-clamp:3}
  .fb-item-when{grid-column:1 / 2}
  .fb-item-acts{grid-column:2 / -1;justify-content:flex-end}
  .mt-actions{width:100%}
  .mt-search{flex:1;min-width:0}
  .mt-grid{grid-template-columns:1fr}
  .mt-prompt{padding:26px 16px}
}

@media(max-width:460px){
  .ws-brand-title{display:none}
  .ws-metrics,.ws-metrics.mt-stats,.ws-metrics.mt-stats.three{grid-template-columns:1fr}
  .mt-lists{grid-template-columns:1fr}
  .mt-feats{grid-template-columns:1fr}
  .mt-filter span{display:none}
  .ws-hero-copy{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .ws-page *{transition:none !important}
  .mt-card:hover,.ws-btn:hover{transform:none}
}

/* 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){
  .ws-page .fb-note-in,
  .br-find input,
  .br-tsearch input,
  .mt-search input,
  .mt-select select,
  .mt-newlist input{font-size:16px}
}