/* ---------------------------------------------------------------------------
   Onesec PMM brand application.
   Source: foundations/about/brand-style-guide.md v1.1 + Firecrawl branding
   extraction of onesecpmm.com (2026-08-24). Both agree on the values below.

   Three deliberate deviations, documented:
   1. Silka (Atipo Foundry) is a COMMERCIAL font and is not redistributable, so
      it is not vendored. The stack picks up a locally installed Silka first and
      falls back to Hanken Grotesk, which matches Silka's geometric proportions
      and offers the same 300/500 weights. Drop licensed Silka woff2 files into
      /public/brand/fonts and add an @font-face block to get the real thing.
   2. Signature lime #76FF02 on white is ~1.4:1 contrast, far below WCAG AA, so
      it is NEVER used for text on a light surface. It is used as a FILL with
      black text on top (~16:1), which is how the brand itself uses it.
   3. The brand's own button pairs lime with link-blue #0000EE text. That is
      poor contrast, so black is used on lime instead, matching the logo fill.
      Functional red for declining ranks is outside the brand palette but is
      needed to carry meaning in a data table.
--------------------------------------------------------------------------- */

:root{
  /* brand palette */
  --lime:#76FF02;
  --brand-black:#000;
  --off-white:#EEEEEE;
  --link:#0099FF;

  /* semantic, light (brand default - the site is light-only) */
  --bg:var(--off-white);
  --panel:#FFFFFF;
  --ink:var(--brand-black);
  --muted:rgba(0,0,0,.62);
  --line:rgba(0,0,0,.14);
  --chip:rgba(0,0,0,.06);
  --chip-on:var(--lime);
  --chip-on-ink:var(--brand-black);
  --accent-fill:var(--lime);
  --accent-ink:var(--brand-black);
  --up-fill:var(--lime);
  --up-ink:var(--brand-black);
  --down:#B3261E;
  --flat:rgba(0,0,0,.42);

  /* Brand geometry is a 0px default with a 30px pill on buttons. Softened here on
     operator request: surfaces get a real radius, controls a smaller one. The pill
     on buttons and chips is untouched, since that is the load-bearing brand cue. */
  --radius:14px;
  --radius-sm:9px;
  --radius-pill:30px;
  --u:4px;

  --sans-medium:"Silka Medium","Silka","Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --sans-light:"Silka Light","Silka","Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:"Cormorant",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0B; --panel:#141414; --ink:var(--off-white);
    --muted:rgba(238,238,238,.60); --line:rgba(238,238,238,.14);
    --chip:rgba(238,238,238,.08);
    --down:#EF6F66; --flat:rgba(238,238,238,.42);
  }
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans-light);font-weight:300;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}

/* ---------- header ---------- */
header{
  display:flex;align-items:center;gap:calc(var(--u)*4);
  padding:calc(var(--u)*3) calc(var(--u)*5);
  border-bottom:1px solid var(--line);background:var(--panel);
  position:sticky;top:0;z-index:20;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:calc(var(--u)*3)}
.logo{
  /* An <img> cannot inherit currentColor, so the mark is painted as a mask.
     This keeps one asset working on both the light and dark surface. */
  display:block;background-color:currentColor;
  -webkit-mask:url("/brand/onesec-logo.svg") no-repeat center/contain;
  mask:url("/brand/onesec-logo.svg") no-repeat center/contain;
  aspect-ratio:123.1/95;
}
.brand .logo{height:26px;color:var(--ink)}
.brand .divider{width:1px;height:24px;background:var(--line)}
h1.title{
  font-family:var(--sans-medium);font-weight:500;letter-spacing:-.04em;
  font-size:20px;margin:0;white-space:nowrap;
}
h1.title em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;letter-spacing:-.01em}
header .sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:-.01em}
.spacer{flex:1}

main{padding:calc(var(--u)*5);max-width:1600px;margin:0 auto}

/* ---------- surfaces ---------- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:calc(var(--u)*4);margin-bottom:calc(var(--u)*4);
}
.row{display:flex;gap:calc(var(--u)*3);flex-wrap:wrap;align-items:flex-end}

label{
  display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);margin-bottom:calc(var(--u)*1.5);
}
input,select,textarea{
  font-family:var(--sans-light);font-size:14px;color:inherit;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:calc(var(--u)*2) calc(var(--u)*2.5);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:-1px}

button{
  font-family:var(--mono);font-size:13px;letter-spacing:-.01em;cursor:pointer;
  background:var(--accent-fill);color:var(--accent-ink);border:1px solid transparent;
  border-radius:var(--radius-pill);padding:calc(var(--u)*2) calc(var(--u)*4);
}
button:hover{filter:brightness(.94)}
button.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
button.ghost:hover{background:var(--chip);filter:none}
button:disabled{opacity:.45;cursor:not-allowed;filter:none}

.chips{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap}
.chip{
  font-family:var(--mono);font-size:12px;padding:calc(var(--u)*1.25) calc(var(--u)*3);
  border-radius:var(--radius-pill);background:var(--chip);border:1px solid transparent;
  cursor:pointer;user-select:none;color:var(--ink);
}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);font-weight:700}

/* ---------- stat cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));
  gap:calc(var(--u)*3);margin-bottom:calc(var(--u)*4)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:calc(var(--u)*3) calc(var(--u)*3.5)}
.card .k{font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted)}
.card .v{font-family:var(--sans-medium);font-weight:500;font-size:26px;
  letter-spacing:-.04em;margin-top:calc(var(--u))}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius) var(--radius) 0 0;
  background:var(--panel);border-bottom:none}
.tablewrap table{border-radius:inherit;overflow:hidden}
thead th:first-child{border-top-left-radius:var(--radius)}
thead th:last-child{border-top-right-radius:var(--radius)}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:calc(var(--u)*2.5) calc(var(--u)*3);
  border-bottom:1px solid var(--line);white-space:nowrap}
th{
  position:sticky;top:0;background:var(--panel);cursor:pointer;z-index:1;
  font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--muted);font-weight:400;
}
th:hover{color:var(--ink)}
tbody tr:hover{background:var(--chip)}
td.num{text-align:right;font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.kw{font-family:var(--sans-medium);font-weight:500;letter-spacing:-.02em;
  max-width:340px;overflow:hidden;text-overflow:ellipsis}

/* Improvement gets the signature lime as a FILL (never as text on a light surface).
   The pill lives in a span: setting display:inline-block on a <td> drops the cell
   out of table layout and breaks column alignment. */
.delta{font-family:var(--mono);font-weight:700;font-size:12px;
  display:inline-block;min-width:44px;text-align:center;padding:2px 9px;
  border-radius:var(--radius-pill)}
.delta.up{background:var(--up-fill);color:var(--up-ink)}
.delta.down{color:var(--down)}
.delta.flat{color:var(--flat)}

.seg{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 9px;border-radius:var(--radius-pill);background:var(--chip);color:var(--muted)}
.url{color:var(--muted);font-size:12px;max-width:300px;overflow:hidden;
  text-overflow:ellipsis;display:block}
.muted{color:var(--muted)}
.flag{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted)}

/* ---------- misc ---------- */
.err{background:color-mix(in srgb,var(--down) 10%,transparent);
  border:1px solid var(--down);color:var(--down);
  padding:calc(var(--u)*2.5) calc(var(--u)*3.5);border-radius:var(--radius-sm);
  margin-bottom:calc(var(--u)*3.5);font-size:14px}

.login{max-width:360px;margin:12vh auto;text-align:center;padding:0 calc(var(--u)*5)}
.login .logo{height:40px;color:var(--ink);margin:0 auto calc(var(--u)*7)}
.login h1{font-family:var(--sans-medium);font-weight:500;letter-spacing:-.04em;
  font-size:26px;margin:0 0 calc(var(--u)*2)}
.login h1 em{font-family:var(--serif);font-style:italic;font-size:34px;letter-spacing:-.01em}
.login p{color:var(--muted);margin:0 0 calc(var(--u)*6)}
.login input{width:100%;margin-bottom:calc(var(--u)*3);text-align:center;font-family:var(--mono);font-size:14px}
.login button{width:100%}

.viewlist{display:flex;gap:calc(var(--u)*1.5);flex-wrap:wrap;margin-top:calc(var(--u))}
.viewbtn{display:inline-flex;align-items:center;gap:calc(var(--u)*1.5);background:var(--chip);
  border-radius:var(--radius-pill);padding:calc(var(--u)*1.25) calc(var(--u)*1.5) calc(var(--u)*1.25) calc(var(--u)*3.5);
  font-family:var(--mono);font-size:12px}
.viewbtn span{cursor:pointer}
.viewbtn span:hover{color:var(--ink)}
.viewbtn .x{border:none;background:transparent;color:var(--muted);padding:0 calc(var(--u)*1.25);
  font-size:15px;line-height:1;border-radius:0}
.viewbtn .x:hover{color:var(--down);background:transparent;filter:none}

iframe.looker{width:100%;height:640px;border:1px solid var(--line);
  border-radius:var(--radius);background:#fff}

footer{padding:calc(var(--u)*5);color:var(--muted);font-family:var(--mono);
  font-size:11px;text-align:center;letter-spacing:-.01em}

/* ---------- tooltips ----------
   Pure CSS via data-tip. The table wrapper sets overflow-x:auto, which makes the
   browser compute overflow-y:auto too, so a tooltip escaping the wrapper would be
   clipped. Header tips therefore open downward over the first rows, and body tips
   open upward, both staying inside the scroll box. A always-visible SERP legend
   sits under the table so the meanings are discoverable without hovering at all. */
[data-tip]{position:relative}
[data-tip]::after{
  content:attr(data-tip);
  position:absolute;left:0;top:calc(100% + 6px);z-index:60;
  width:max-content;max-width:290px;white-space:normal;text-align:left;
  background:var(--ink);color:var(--panel);
  font-family:var(--sans-light);font-weight:300;font-size:12.5px;line-height:1.45;
  letter-spacing:0;text-transform:none;
  padding:calc(var(--u)*2) calc(var(--u)*2.5);
  border-radius:var(--radius-sm);
  opacity:0;visibility:hidden;transition:opacity .12s ease .25s,visibility 0s linear .37s;
  pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.22);
}
[data-tip]:hover::after,[data-tip]:focus-visible::after{
  opacity:1;visibility:visible;transition-delay:.25s,0s;
}
/* keep tips inside the scroll box near the right edge */
th:nth-last-child(-n+3)[data-tip]::after,
td:nth-last-child(-n+3) [data-tip]::after{left:auto;right:0}
/* body-row tips open upward */
tbody [data-tip]::after{top:auto;bottom:calc(100% + 6px)}

th[data-tip]{text-decoration:underline dotted;text-underline-offset:4px;
  text-decoration-color:var(--line)}
th[data-tip]:hover{text-decoration-color:var(--muted)}

.serpflag{cursor:help;border-bottom:1px dotted var(--line)}
.serpflag+.serpflag{margin-left:6px}
/* Filled = this is the feature we hold, not just one present on the page. */
.serpflag.owned{background:var(--lime);color:var(--brand-black);font-weight:700;
  padding:1px 5px;border-radius:var(--radius-sm);border-bottom:0}
/* Marks a feature that appeared since the comparison date. This has to be a real
   element rather than ::after, because [data-tip]::after is already the tooltip and
   overriding it here silently replaced the tooltip text. */
.serpflag .fresh{font-size:8px;color:var(--link);font-weight:700;margin-left:1px}
.serpflag.owned .fresh{color:var(--brand-black)}

/* Result type: what our own best position IS (Ahrefs best_position_kind). */
.result{white-space:nowrap}
.rk{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.03em;
  padding:2px 8px;border-radius:var(--radius-pill);background:var(--chip);
  color:var(--muted);cursor:help}
.rk.rk-win{background:var(--lime);color:var(--brand-black);font-weight:700}
.rk.rk-paid{background:transparent;border:1px solid var(--line)}
.rk.changed{box-shadow:0 0 0 1px var(--link)}

.legend{display:flex;gap:calc(var(--u)*4);flex-wrap:wrap;align-items:center;
  padding:calc(var(--u)*3) calc(var(--u)*3.5);border:1px solid var(--line);
  border-radius:0 0 var(--radius) var(--radius);background:var(--panel);font-family:var(--mono);font-size:10.5px;
  color:var(--muted);letter-spacing:.03em}
.legend b{color:var(--ink);font-weight:700;margin-right:5px}
.legend .lg-title{text-transform:uppercase;letter-spacing:.08em}

.who{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em;
  margin-right:calc(var(--u)*2)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- rank + difficulty colour scales ----------
   JS supplies only --h (hue). Saturation and lightness live here so one hue reads
   correctly against both the light and the dark surface, and so an unranked or
   unknown value (no --h set) falls back to the muted token instead of hsl(0). */
.rank,.kd{
  font-variant-numeric:tabular-nums;font-weight:700;
  color:var(--muted); /* fallback when --h is absent, i.e. no position / no KD */
}
.rank[style*="--h"],.kd[style*="--h"]{
  color:hsl(var(--h) var(--scale-s) var(--scale-l));
}
.rank.prev[style*="--h"]{
  /* previous position is context, not the headline, so it sits back a step */
  color:hsl(var(--h) calc(var(--scale-s) - 22%) var(--scale-l));font-weight:400;
}
.kd[style*="--h"]{
  /* difficulty reads as a tinted chip so it does not compete with the rank figures */
  color:hsl(var(--h) var(--scale-s) var(--scale-chip-l));
  background:hsl(var(--h) var(--scale-s) var(--scale-chip-bg) / var(--scale-chip-a));
  padding:2px 8px;border-radius:var(--radius-pill);display:inline-block;min-width:34px;text-align:center;
}
:root{
  --scale-s:72%;      /* saturation */
  --scale-l:32%;      /* text lightness on a light surface */
  --scale-chip-l:28%;
  --scale-chip-bg:60%;
  --scale-chip-a:.20;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --scale-s:78%;
    --scale-l:64%;
    --scale-chip-l:74%;
    --scale-chip-bg:60%;
    --scale-chip-a:.22;
  }
}

/* ---------- intent flags, region flags, traffic ---------- */
.intents{white-space:nowrap}
.intent{
  display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:700;
  width:17px;height:17px;line-height:17px;text-align:center;border-radius:var(--radius-pill);
  background:var(--chip);color:var(--muted);cursor:help;
}
.intent+.intent{margin-left:3px}
/* commercial and transactional are the two that signal a buyer, so they carry the brand lime */
.intent.i-C,.intent.i-T{background:var(--lime);color:var(--brand-black)}
.region{white-space:nowrap;font-family:var(--mono);font-size:12.5px}
.region .fl{margin-right:6px;font-size:13px;font-family:
  "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}

/* ---------- overview chart ---------- */
.chart{width:100%;height:320px;position:relative}
/* The viewBox is generated at the container's real pixel width, so the SVG must not
   be scaled again here. width/height:100% over a matching viewBox is a 1:1 map. */
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .band{fill:var(--ink);opacity:.045}
.chart .band-lbl{opacity:.75}
.chart .guide{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.chart .axis{fill:var(--muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em}
.chart .slabel{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.02em}
.chart .line{fill:none;stroke:var(--ink);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:var(--panel);stroke:var(--ink);stroke-width:2}
.chart .col-hit{fill:transparent;cursor:crosshair}
.chart .empty{fill:var(--muted);font-family:var(--sans-light);font-size:13px}
.chart-tip{
  position:absolute;pointer-events:none;background:var(--ink);color:var(--panel);
  font-family:var(--mono);font-size:11px;padding:8px 10px;border-radius:var(--radius-sm);
  white-space:nowrap;transform:translate(-50%,0);top:8px;opacity:0;transition:opacity .1s;z-index:5;
  box-shadow:0 6px 18px rgba(0,0,0,.28);
}
.chart-tip .tt-date{font-weight:700;margin-bottom:5px;letter-spacing:.04em}
.chart-tip .tt-row{display:flex;align-items:center;gap:7px;line-height:1.7}
.chart-tip .tt-row i{width:7px;height:7px;border-radius:50%;flex:none}
.chart-tip .tt-lbl{flex:1}
.chart-tip .tt-val{font-weight:700;margin-left:10px}
.chart-legend{display:flex;flex-wrap:wrap;gap:calc(var(--u)*3);margin-top:calc(var(--u)*3);
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.02em}
.chart-legend .lgd{display:inline-flex;align-items:center;gap:6px}
.chart-legend .lgd i{width:9px;height:3px;border-radius:2px;flex:none}
.chart-legend .lgd b{color:var(--ink);font-weight:700}
.warn-inline{color:var(--down)}
tbody tr.focused{background:color-mix(in srgb,var(--lime) 22%,transparent)}
tbody tr{cursor:pointer}
.trend-delta{font-family:var(--mono);font-size:11px;font-weight:700;margin-left:7px}
.trend-delta.up{color:var(--up-ink);background:var(--lime);padding:1px 7px;border-radius:var(--radius-pill)}
.trend-delta.down{color:var(--down)}
.trend-delta.flat{color:var(--flat)}