/* SortFlow, WardogsNow house theme.

   The visual language of wardogsnow.com carried onto SortFlow: Barlow, grey surfaces on a
   near-black page, black hairlines, 4px corners, uppercase tracked labels, outlined uppercase
   buttons, gold #D4A843 as the one accent, no gradients, no glows. Layout, content and every
   page's Parcel Simulator flow stay exactly as they are; this file only changes presentation.

   index.php injects this stylesheet as the last thing in every page head, so it loads after each
   view's own inline <style>. Every rule sits under `html body:not(#sf-theme)`: the :not()
   of an id nobody uses adds id-level specificity, so the theme wins over the older page rules
   (which go as far as `body.public-landing .card`) without resorting to !important.

   The colour palette itself lives in each stylesheet's own tokens, which were converted to the
   WardogsNow values in place, so the planner's light theme keeps working. The planner has its
   own block at the end, written against its tokens, because it has a light mode. */

/* ---------- typefaces (self-hosted, same files as WardogsNow) ---------- */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/barlow-400-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("../fonts/barlow-600-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700-latin.woff2") format("woff2"); }

html body:not(#sf-theme):not(.sf-planner) {
  /* ---------- tokens: type and shape only; colours come from each page's palette ---------- */
  --sans: "Barlow", "Segoe UI", system-ui, sans-serif;
  --display: "Barlow", "Segoe UI", system-ui, sans-serif;
  --mono: "Barlow", "Segoe UI", system-ui, sans-serif;
  --technical: "Cascadia Code", Consolas, "JetBrains Mono", monospace;
  --accent-rgb: 212, 168, 67;
  --accent-tint: rgba(212, 168, 67, .20);
  --gold: #D4A843; --gold-2: #E2BB5A;

  font-family: var(--sans);
  background-image: none;
  -webkit-font-smoothing: antialiased;

  &::before { display: none; }
  ::selection { background: rgba(var(--accent-rgb), .35); color: #fff; }

  /* ---------- type ---------- */
  & h1, & h2, & h3, & h4, & .pgtitle, & .title, & .update-title, & .news-modal-title {
    font-family: var(--display); font-weight: 600; letter-spacing: .02em; text-transform: uppercase;
  }
  & code, & pre, & kbd, & samp, & .kbd, & .technical { font-family: var(--technical); }

  /* The one small-text style the theme shares: uppercase, tracked, quiet. */
  & .kicker, & .sb-label, & .insp-h, & .eyebrow, & .product-context, & .admin-context,
  & .news-share-label, & .update-date, & .news-meta, & th {
    font-family: var(--sans); font-weight: 500; font-size: 11px; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  }
  & .kicker, & .eyebrow { color: var(--gold); }
  & .product-context { color: var(--gold); }

  /* ---------- buttons: outlined, uppercase, no fills, no lift ---------- */
  & .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 9px 16px; border-radius: 4px;
    border: 1px solid #000; background: #26262C; color: #E8E8E8; box-shadow: none; transform: none;
    font: 500 12px/1.2 var(--sans); letter-spacing: .10em; text-transform: uppercase; text-decoration: none;
    transition: background-color .14s, border-color .14s, color .14s;
  }
  & .btn:hover, & .btn:focus-visible { background: #2F2F35; border-color: var(--gold); color: var(--gold); transform: none; }
  & .btn.amber, & .btn.primary, & .btn.admin { background: #26262C; border-color: var(--gold); color: var(--gold); }
  & .btn.amber:hover, & .btn.primary:hover, & .btn.admin:hover,
  & .btn.amber:focus-visible, & .btn.primary:focus-visible { background: var(--accent-tint); border-color: var(--gold); color: var(--gold); }
  & .btn.ghost { background: #26262C; border-color: #000; color: #E8E8E8; }
  & .btn.danger { background: #26262C; border-color: #C2453C; color: #C2453C; }
  & .btn.danger:hover { background: rgba(194, 69, 60, .16); color: #C2453C; }
  & .btn.green { background: #26262C; border-color: #46C46A; color: #46C46A; }
  & .btn.green:hover { background: rgba(70, 196, 106, .14); color: #46C46A; }
  & .btn.sm, & .btn.small { min-height: 32px; padding: 6px 12px; font-size: 11px; }
  & .btn.big, & .btn.dl-big { min-height: 46px; padding: 12px 22px; font-size: 13px; }
  & .btn[disabled], & .btn:disabled { color: #8A8A8E; border-color: #000; background: #26262C; opacity: .6; }
  & .btn svg { width: 15px; height: 15px; }
  & .steam, & .steam-cta {
    border: 1px solid var(--gold); border-radius: 4px; background: #26262C; color: var(--gold); box-shadow: none;
    font: 500 12px/1.2 var(--sans); letter-spacing: .10em; text-transform: uppercase;
  }
  & .steam:hover, & .steam-cta:hover { background: var(--accent-tint); color: var(--gold); }
  & .icon-btn { border-radius: 4px; box-shadow: none; }
  & .read-more, & .news-card .read-more { font-family: var(--sans); font-weight: 500; letter-spacing: .10em; color: var(--gold); }

  /* ---------- inputs ---------- */
  & input[type=text], & input[type=password], & input[type=number], & input[type=email], & input[type=url],
  & input[type=search], & input[type=date], & input[type=datetime-local], & input[type=time], & textarea, & select {
    border: 1px solid #000; border-radius: 4px; background-color: #26262C; color: #E8E8E8;
    font-family: var(--sans); box-shadow: none;
  }
  & input:hover, & textarea:hover, & select:hover { border-color: #2A2A30; }
  & input:focus, & textarea:focus, & select:focus { border-color: var(--gold); outline: none; box-shadow: none; }
  & input::placeholder, & textarea::placeholder { color: #8A8A8E; }
  & input[type=checkbox], & input[type=radio], & input[type=range] { accent-color: var(--gold); }
  & :focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

  /* ---------- surfaces: flat grey on near-black, black hairlines ---------- */
  & .card, & .tile, & .news-card, & .update, & .game, & .community, & .panel,
  & .flash, & .notice, & .empty, & .disc {
    background: #1A1A1E; border-color: #000; border-radius: 4px; box-shadow: none;
  }
  & .card:hover, & .tile:hover, & .news-card:hover { border-color: #2A2A30; transform: none; box-shadow: none; }
  & .tile::after { background: var(--gold); opacity: 1; }
  & .update.feat { border-left: 3px solid var(--gold); background: #1A1A1E; }
  & .badge, & .news-label, & .update-label { border-radius: 4px; box-shadow: none; }
  & .update-label { background: transparent; border: 1px solid var(--gold); color: var(--gold); }
  & .news-label { background: #26262C; border-color: #000; color: var(--gold); }
  & .dot { box-shadow: none; }
  & .social { background: #26262C; border-color: #000; border-radius: 4px; }
  & .social:hover { border-color: var(--gold); transform: none; }
  & .news-share-btn { border-color: #000; background: #26262C; border-radius: 4px; }
  & .news-modal-box, & .cloud-panel, & .toast { border-color: #000; border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, .5); }
  & .news-modal-backdrop { background: rgba(15, 15, 18, .82); }

  /* ---------- tables ---------- */
  & table.t { border-color: #000; border-radius: 4px; box-shadow: none; }
  & table.t thead th, & th { background: #26262C; border-bottom: 1px solid #000; color: #8A8A8E; }
  & td { border-bottom-color: #000; }
  & tbody tr:hover { background: #2F2F35; }

  /* ---------- public header: WardogsNow site-head ---------- */
  & .nav {
    background: #1A1A1E; border-bottom: 1px solid #000; backdrop-filter: none; box-shadow: none;
  }
  & .nav .wrap { height: 64px; padding-top: 0; padding-bottom: 0; align-items: stretch; }
  & .nav .wrap > * { align-self: center; }
  & .nav .logo { padding-right: 18px; margin-right: 4px; }
  & .nav .wrap > .links, & .nav .wrap > .landing-links, & .nav .links, & .nav .landing-links {
    align-self: stretch; display: flex; align-items: stretch; gap: 0; margin-left: 0;
    padding-left: 10px; border-left: 1px solid #2A2A30;
  }
  & .nav .links a, & .nav .landing-links a {
    display: flex; align-items: center; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    background: transparent; color: #8A8A8E; font: 500 12px/1.2 var(--sans); letter-spacing: .10em; text-transform: uppercase;
  }
  & .nav .links a:hover, & .nav .landing-links a:hover { background: transparent; color: #E8E8E8; }
  & .nav .links a.on, & .nav .landing-links a.on { background: var(--accent-tint); color: var(--gold); border-bottom-color: var(--gold); }
  & .nav .header-actions::before { border-left-color: #2A2A30; }
  /* narrow screens keep the pages' own behaviour: tabs hide, the header keeps logo + actions */
  @media (max-width: 720px) {
    & .nav .wrap > .links, & .nav .wrap > .landing-links, & .nav .product-context { display: none; }
    & .nav .wrap { height: 60px; }
  }
  & .product-context { border-left-color: #2A2A30; }
  & .product-context i { color: #46C46A; }

  /* ---------- admin shell ---------- */
  & .sidebar { background: #1A1A1E; border-right: 1px solid #000; box-shadow: none; }
  & .sidebar .sb-brand { border-bottom-color: #000; }
  & .sidebar a.sb-link { border-radius: 0; border-left: 2px solid transparent; color: #B4B4B8; }
  & .sidebar a.sb-link:hover { background: #26262C; color: #E8E8E8; }
  & .sidebar a.sb-link.active { background: var(--accent-tint); border-left-color: var(--gold); color: var(--gold); }
  & .sb-console { border-color: rgba(var(--accent-rgb), .55); color: var(--gold); }
  & .topbar { background: #1A1A1E; border-bottom: 1px solid #000; backdrop-filter: none; box-shadow: none; }
  & .topbar .viewsite { box-shadow: none; }

  /* ---------- footer ---------- */
  & footer, & .foot { background: #1A1A1E; border-top: 1px solid #000; }
  & .foot-links a { font-family: var(--sans); font-weight: 500; letter-spacing: .10em; text-transform: uppercase; color: #B4B4B8; }
  & .foot-links a:hover { color: var(--gold); }
  & .disc { border: 1px solid #000; background: #26262C; color: #8A8A8E; }
  & .disc b { color: #E8E8E8; }

  /* ---------- landing: WardogsNow full-bleed hero ---------- */
  &.public-landing .hero {
    margin: 0; max-width: none; min-height: 560px; border: 0; border-bottom: 1px solid #000; border-radius: 0; box-shadow: none;
  }
  &.public-landing .hero .shot { filter: saturate(.8) brightness(.72); }
  &.public-landing .hero .veil {
    background: linear-gradient(90deg, rgba(15, 15, 18, .92) 0%, rgba(15, 15, 18, .7) 45%, rgba(15, 15, 18, .35) 100%),
                linear-gradient(0deg, #0F0F12 0%, transparent 35%);
  }
  &.public-landing .hero .wrap { max-width: 1280px; padding: 110px 24px 96px; }
  &.public-landing .hero h1 { font-size: clamp(2.4rem, 4.2vw, 3.6rem); line-height: 1.04; letter-spacing: .02em; max-width: 16ch; }
  &.public-landing .hero h1 .a { color: var(--gold); }
  &.public-landing .hero p.lead { color: #B4B4B8; font-size: 16px; max-width: 56ch; }
  &.public-landing .hero .badge {
    border: 0; padding: 0; background: transparent; color: var(--gold);
    font: 500 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  }
  &.public-landing .hero .badge .dot { display: none; }
  &.public-landing section { border-bottom: 1px solid #000; }
  &.public-landing .card, &.public-landing .news-card, &.public-landing .update,
  &.public-landing .game, &.public-landing .community { background: #1A1A1E; border-color: #000; box-shadow: none; }
  &.public-landing .card:hover, &.public-landing .news-card:hover { border-color: rgba(var(--accent-rgb), .6); }
  &.public-landing .card .ic { color: var(--gold); }
  &.public-landing .shots a { border-color: #000; border-radius: 4px; }
  &.public-landing footer { background: #1A1A1E; }

  /* ---------- Mod Hub ---------- */
  &.mod-hub .featured-mod { background: #1A1A1E; border-color: #000; box-shadow: none; }
  &.mod-hub .featured-mod__eyebrow { border-color: rgba(var(--accent-rgb), .65); color: var(--gold); font: 500 10px var(--sans); letter-spacing: .12em; }
  &.mod-hub .featured-mod h2 { font-family: var(--display); font-weight: 600; letter-spacing: .02em; }
  &.mod-hub .nav-search { border-color: #000; background: #26262C; }
  &.mod-hub .nav-search button { border-left-color: #000; background: #26262C; }
  &.mod-hub-admin .nav { border-bottom-color: rgba(var(--accent-rgb), .55); }
  &.mod-hub .loader-feature { background: #1A1A1E; border: 1px solid #000; border-left: 3px solid var(--gold); box-shadow: none; }
  &.mod-hub .loader-feature::before, &.mod-hub .loader-feature::after { background-image: none; }
  /* selection is a gold tint and a gold word, never a solid fill */
  & .chip, & .branch-opt { border-radius: 4px; font-family: var(--sans); font-weight: 500; letter-spacing: .10em; }
  & .chip.on, & .branch-opt.on, & .tabs a.on, & .tabs button.on {
    background: var(--accent-tint); border-color: var(--gold); color: var(--gold); box-shadow: none;
  }

  /* ---------- shared language picker (dormant, kept consistent) ---------- */
  & .sf-language-trigger { border-color: #000; background: #26262C; border-radius: 4px; }
}

/* ---------- planner app ---------- */
html body.sf-planner:not(#sf-theme) {
  --accent-rgb: 212, 168, 67;
  --accent-tint: rgba(212, 168, 67, .20);
  --mono: "Barlow", "Segoe UI", system-ui, sans-serif;
  --sans: "Barlow", "Segoe UI", system-ui, sans-serif;

  & h1, & h2, & h3, & h4 { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
  & .kicker, & .insp-h, & .sb-label { font-family: var(--sans); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
  & .card { border-radius: 4px; box-shadow: none; background-image: none; }
  & input:focus, & select:focus, & textarea:focus { border-color: var(--amber); outline: none; box-shadow: none; }
  & ::selection { background: rgba(var(--accent-rgb), .35); }
  & .brand .word { font-family: "Poppins", var(--sans); font-weight: 700; font-size: 20px; letter-spacing: 0; text-transform: uppercase; }
  & .brand .word b { font-weight: 500; letter-spacing: .08em; margin-left: 3px; color: var(--amber-ink); }
  & .brand .word .sim { font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
  & .tnum, & .v.tnum, & .zoom-lvl { font-variant-numeric: tabular-nums; }

  & .side, & .inspector, & .catalog-tabs, & .catalog-rail, & .top, & .topbar, & .tabs { background-image: none; box-shadow: none; }
  & .side, & .inspector { background-color: var(--panel); }
  & .stage, & .canvas-wrap, & .board { background-image: none; }

  & .tool, & .icon-btn, & .cloud-btn, & .wh-select, & .speed button, & .tabs button {
    border-radius: 4px; box-shadow: none;
    font-family: var(--sans); font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  }
  & .tool.on, & .tabs button.on, & .tabs .on { background: var(--accent-tint); border-color: var(--amber); color: var(--amber-ink); box-shadow: none; }
  & .cloud-btn.primary { background: var(--panel-2); border-color: var(--amber); color: var(--amber-ink); }
  & .cloud-btn.primary:hover { background: var(--accent-tint); }
  & .part.active { box-shadow: none; border-color: var(--amber); }
  & .meter i { background: var(--amber); }
  & .insp-h { color: var(--ink-3); }
  & .planner-product-brand { font-family: "Poppins", var(--sans); font-weight: 700; font-size: 14px; letter-spacing: 0; text-transform: uppercase; gap: 0; }
  & .planner-product-brand span { margin-right: 9px; }
  & .planner-product-brand b { font-weight: 500; letter-spacing: .08em; margin-left: 2px; }
  & .steam-cta { background: var(--panel-2); border-color: #000; }
  & .steam-cta .b { background: transparent; border: 1px solid var(--amber); color: var(--amber-ink); font-weight: 500; letter-spacing: .10em; }
  & .steam-cta:hover .b { background: var(--accent-tint); }
}