/* components.css: the landing site's copy of the app's components (label, wordmark, button, dot,
   row, bar, tile, tab bar, field), so the phone mock on the landing is drawn with the app's own
   classes at reduced size. The app does not load this file: app/static/app.css carries the same
   rules under the same class names, and the two are kept in step by hand on these points:
   - weights: 300 only at 1.25rem and above (masthead wordmark, display sizes), 400 for everything
     smaller (wordmark at .9375rem and below included), 500 for labels
   - labels and button text: --label, .6875rem below 600px and .75rem from 600px (app --fs-label),
     no px floor (see THE SCALING RULE in style.css: a floor moved lines and widths)
   - tile numbers: 1.75rem below 600px, 2rem from 600px (app --fs-num)
   Every size is in rem (16px = 1rem at the reference width): see THE SCALING RULE in style.css.
   Only 1px hairlines and the 600px breakpoint stay in px.
   Depends on the tokens declared in :root by style.css:
   --bg --ink --ink-2 --ink-tab --ink-off --rule --rule-2 --font --label
   The row is the unit: every list, table and feed is a hairline-topped row. */

/* Labels */
.label{font-size:var(--label,.6875rem);font-weight:500;line-height:calc(var(--label,.6875rem) * 1.3);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-2);margin:0}
.label.on{color:var(--ink)}

/* Wordmark: the seo inside seond is weight 500 against the rest. 300 at 1.25rem and above only. */
.wm{font-weight:300;letter-spacing:-.02em;color:var(--ink);text-decoration:none;white-space:nowrap;line-height:1}
.wm b{font-weight:500}
.wm-s{font-size:.9375rem;font-weight:400}
/* A wordmark that is a link keeps its size but gets a 2.75rem hit area */
a.wm{display:inline-flex;align-items:center;min-height:2.75rem}

/* Buttons: 2.75rem, 1px white outline, radius 0, label type. One primary per screen. */
.btn{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:2.75rem;padding:0 1.25rem;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--label,.75rem);font-weight:500;line-height:1;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;-webkit-appearance:none;appearance:none;transition:opacity .2s}
.btn:active{opacity:.6}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn:disabled,.btn[aria-disabled="true"]{border-color:var(--ink-off);color:var(--ink-off);cursor:default}
.btn-block{display:flex;width:100%}

/* Status dots: filled = live, active, approved, indexed, posted; hollow = setup, pending, planned, building, awaiting, scheduled; off = paused */
.dot{display:inline-block;flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--ink);vertical-align:middle;box-sizing:border-box}
.dot.hollow{background:transparent;border:1px solid var(--ink)}
.dot.off{background:var(--ink-off)}

/* Rows */
.rows{list-style:none;margin:0;padding:0}
.rows.closed{border-bottom:1px solid var(--rule)}
.row{border-top:1px solid var(--rule);padding:.75rem 0;min-height:3.25rem;box-sizing:border-box;display:grid;grid-template-columns:1fr auto;column-gap:.75rem;row-gap:.375rem;align-items:center;font-size:.9375rem;line-height:1.5}
.row .k{display:flex;align-items:center;gap:.625rem;min-width:0}
.row .n{font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink)}
.row .n.absent{color:var(--ink-off)}
.row .v{color:var(--ink-2)}
/* Bars: an SVG whose rect widths are attributes, never inline styles */
.bar{display:block;width:100%;height:1px;grid-column:1 / -1}
/* SVG has its own coordinate space and ignores dir=rtl, so the fill would still grow from the
   left while the label and the number swap sides. Flipping the whole bar puts the fill back at
   the inline start, under the label it measures. LTR is untouched. */
html[dir=rtl] .bar{transform:scaleX(-1)}

/* Stat tiles */
/* background-clip:padding-box so the hairline background does not double up under the border. */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);background-clip:padding-box;border:1px solid var(--rule)}
@media (min-width:600px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{background:var(--bg);padding:1rem;display:flex;flex-direction:column;gap:.25rem;min-width:0}
.tile .n{font-size:1.75rem;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (min-width:600px){.tile .n{font-size:2rem}}
.tile .d{font-size:.8125rem;color:var(--ink-2)}

/* Tab bar: SITE, SEO, SOCIALS */
.tabbar{display:flex;flex:none;border-top:1px solid var(--rule);background:var(--bg);padding-bottom:calc(max(env(safe-area-inset-bottom),1.25rem) + .5rem)}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;min-height:2.75rem;padding:.5rem 0 0;color:var(--ink-tab);text-decoration:none;font-size:.6875rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;line-height:1}
.tab svg{width:1.375rem;height:1.375rem;display:block;fill:none;stroke:currentColor;stroke-width:1}
.tab.on,.tab[aria-current="page"]{color:var(--ink)}
.tab.on::before,.tab[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:50%;width:1.5rem;margin-left:-.75rem;border-top:1px solid var(--ink)}

/* Forms: the writing lines of a ledger. Inputs 1rem so iOS does not zoom; resting line at --rule-2 so it reads as a field in sunlight. */
.field{display:block;margin:0 0 1.5rem}
.field > .label,.field > label{display:block;margin-bottom:.5rem}
.input{display:block;width:100%;box-sizing:border-box;min-height:2.75rem;padding:.5rem 0;background:transparent;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;color:var(--ink);font-family:var(--font);font-size:1rem;font-weight:400;line-height:1.4;-webkit-appearance:none;appearance:none}
.input::placeholder{color:var(--ink-off)}
.input:focus{outline:none;border-bottom-color:var(--ink)}
.input:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
.field:focus-within > .label,.field:focus-within > label{color:var(--ink)}
select.input{color-scheme:dark}
.check{display:inline-flex;align-items:center;gap:.625rem;min-height:2.75rem;font-size:.9375rem}
.check input{width:1rem;height:1rem;margin:0;-webkit-appearance:none;appearance:none;border:1px solid var(--ink);border-radius:0;background:transparent;display:inline-block;position:relative}
.check input:checked{background:var(--ink)}
.err{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 0;font-size:.8125rem;color:var(--ink)}

/* Section mark */
.mark{width:3rem;height:0;margin:0 0 1.5rem;border:0;border-top:1px solid var(--rule-2)}

/* Focus, everywhere */
:focus-visible{outline:1px solid var(--ink);outline-offset:2px}