/* pantheon.inc's design language, as on the tools themselves: white paper under a fixed noise grain,
   ink and muted greys, 1px hairlines instead of boxes, square shapes, DM Sans 400 for titles, Geist
   for text, Geist Mono for numbers, 14px as the smallest type. */
@font-face { font-family:"Geist"; src:url("type/Geist-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("type/GeistMono-Latin.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"DM Sans"; src:url("type/DM-Sans.woff2") format("woff2"); font-weight:400; font-display:swap; }
:root {
  color-scheme:light;
  --bg:#ffffff; --soft:#f0f3f6; --ink:#1c1c1a; --muted:#6c6b66; --muted-2:#8a8984;
  --line:rgba(28,28,26,.22); --line-soft:rgba(28,28,26,.12); --highlight:#24241f;
  --side:272px; --gutter:clamp(16px,6vw,96px);
  --font-body:"Geist",Arial,Helvetica,sans-serif; --font-mono:"Geist Mono","SFMono-Regular",Consolas,monospace;
  --font-h1:"DM Sans","Geist",Arial,Helvetica,sans-serif;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background:var(--highlight); color:#fff; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:400 16px/1.55 var(--font-body); -webkit-font-smoothing:antialiased; }
.grain { position:fixed; inset:-20%; pointer-events:none; z-index:2147483644; background-image:var(--grain); background-size:200px 200px;
         filter:contrast(80%); opacity:.2; }
a { color:inherit; }
/* page loader, as pantheon.inc's (landing app/globals.css .page-loader): the page stays hidden from the
   first paint while the logo plays, then fades in as the loader goes */
.page-loader { position:fixed; inset:0; z-index:2147483645; display:flex; align-items:center; justify-content:center;
               background:var(--bg); opacity:0; transition:opacity 300ms ease; }
.page-loader--entered { opacity:1; }
.page-loader--exiting { opacity:0; pointer-events:none; }
.page-loader-video { display:block; height:auto; max-width:calc(100vw - 64px); width:clamp(58px,6vw,78px); transform:rotate(180deg); }
body > :not(.page-loader):not(.grain) { opacity:1; transition:opacity 1000ms ease; }
body:has(> .page-loader) > :not(.page-loader):not(.grain) { opacity:0; pointer-events:none; }
a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }

.shell { display:grid; grid-template-columns:var(--side) minmax(0,1fr); min-height:100vh; }

/* sidebar: the lockup, the sections, and who is signed in */
.side { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:40px;
        padding:20px 16px 20px 24px; border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:11px; height:44px; text-decoration:none; }
.brand img { display:block; filter:invert(1); }
.brand .icon { height:24px; width:auto; }
.brand .word { height:11px; width:auto; }
.brand .tag { color:var(--muted); font:400 14px/1 var(--font-body); padding-left:11px; border-left:1px solid var(--line); }
.nav { display:flex; flex-direction:column; gap:2px; }
.nav .group { margin:20px 0 6px 8px; color:var(--muted-2); font:400 14px/1.4 var(--font-body); }
.nav a { display:block; padding:7px 8px; text-decoration:none; color:var(--muted); font:400 15px/1.4 var(--font-body);
         transition:color 240ms ease, background-color 240ms ease; }
.nav a:hover { color:var(--ink); }
.nav a[aria-current="page"] { color:var(--ink); background:var(--soft); }
.account { margin-top:auto; display:flex; flex-direction:column; gap:4px; padding:16px 8px 0; border-top:1px solid var(--line-soft); }
.account .email { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.account[hidden] { display:none; }
.account .signout { color:var(--ink); font-size:14px; text-underline-offset:4px; text-decoration-thickness:1px; }

/* home */
.main { min-width:0; padding:0 var(--gutter); max-width:calc(1120px + 2 * var(--gutter)); }
.hello { padding:72px 0 36px; border-bottom:1px solid var(--line); }
.date { margin:0 0 14px; color:var(--muted); font:500 14px/1 var(--font-mono); letter-spacing:.01em; }
.hello h1 { margin:0; font:400 clamp(34px,4.4vw,54px)/0.98 var(--font-h1); }

/* one block per tool: what it is on the left, its numbers on the right */
.tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); gap:40px; padding:32px 0; border-bottom:1px solid var(--line); }
.tool h2 { margin:0 0 10px; font:400 21px/1.2 var(--font-h1); }
.tool p { margin:0 0 16px; color:var(--muted); font-size:15px; line-height:1.55; max-width:340px; }
.tool .open { display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px; background:var(--ink); color:#fff;
              border-radius:5px; text-decoration:none; font:500 14px/1 var(--font-body); transition:background-color 240ms ease; }
.tool .open:hover { background:#3f3f3b; }
.tool .open span { transition:transform 240ms ease; }
.tool .open:hover span { transform:translateX(3px); }
.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); align-self:start; }
.metric { padding:2px 0 2px 20px; border-left:1px solid var(--line); min-width:0; }
.metric .label { color:var(--muted); font-size:14px; line-height:1.4; }
/* every value takes the height of a number, so a cell without one keeps its note on the shared line */
.metric .value { display:flex; align-items:flex-end; height:clamp(28px,3vw,38px); margin:10px 0 8px;
                 font:500 clamp(28px,3vw,38px)/1 var(--font-mono); letter-spacing:-.01em; white-space:nowrap;
                 opacity:0; transition:opacity 320ms ease; }
.metric .value.in { opacity:1; }
.metric .value.na { font:400 15px/1.2 var(--font-body); letter-spacing:0; color:var(--muted-2); }
.metric .note { color:var(--muted-2); font-size:14px; line-height:1.4; }

.foot { padding:24px 0 32px; color:var(--muted); font-size:14px; }

/* the sign-in and sign-in error pages: the lockup, one line on what this is, and one button */
.gate { display:flex; flex-direction:column; min-height:100vh; padding:20px var(--gutter) 0; }   /* lockup, text and footer share one left edge */
.gate .card { margin:auto 0; max-width:560px; }
.gate h1 { margin:0 0 18px; font:400 clamp(34px,4.4vw,54px)/0.98 var(--font-h1); }
.gate p { margin:0 0 28px; color:var(--muted); font-size:16px; line-height:1.55; max-width:440px; }
.gate .open { display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; background:var(--ink); color:#fff; border:0;
              border-radius:5px; cursor:pointer; text-decoration:none; font:500 14px/1 var(--font-body); transition:background-color 240ms ease; }
.gate .open:hover { background:#3f3f3b; }
.gate .open span { transition:transform 240ms ease; }
.gate .open:hover span { transform:translateX(3px); }
.gate .open:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.gate .detail { margin:20px 0 0; color:var(--muted-2); font:400 14px/1.4 var(--font-mono); }
.gate .foot { padding:24px 0 32px; }

/* narrow screens: the sidebar becomes a bar across the top */
@media (max-width:900px) {
  .tool { grid-template-columns:minmax(0,1fr); gap:24px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
}
@media (max-width:760px) {
  .shell { grid-template-columns:minmax(0,1fr); }
  .side { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:12px 20px;
          padding:12px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .nav { flex-direction:row; flex-wrap:wrap; gap:4px; }
  .nav .group { display:none; }
  .account { margin:0 0 0 auto; padding:0; border:0; flex-direction:row; align-items:center; gap:12px; }
  .account .email { display:none; }
  .main { padding:0 16px; }
  .hello { padding:40px 0 28px; }
  .gate { padding:12px 16px 0; }
}
@media (prefers-reduced-motion:reduce) { * { transition:none !important; } }