/* ============================================================================
   MinMax Pro - PER-CLIENT SKINS
   ----------------------------------------------------------------------------
   One tenant wears the full customization package. Its brand pack carries
   everything that can be a token - palette, canvas, type, corner, density - and
   the engine applies those the same way it applies any pack. This file is for
   the remainder: the handful of things that make a site recognizably ITSELF and
   that no token model can express.

     MinMax Strategies - their canvas is near-black. The product's client portal
       is a light "Daylight" theme by an earlier, deliberate ruling; that ruling
       is overridden HERE, for this one tenant, because their customers are
       meant to walk from minmaxstrategiesllc.com into the portal without
       noticing a seam.

   A second tenant's skin was REMOVED on 2026-08-28 along with its whole pack;
   that org is back on the product's default branding. See
   docs/CLIENT-BRANDS.md.

   ── THE THREE RULES THIS FILE LIVES BY ────────────────────────────────────
   1. EVERY selector begins with :root[data-brand-skin="<slug>"]. There are no
      bare selectors in this file, ever. A tenant without the attribute cannot
      match a single rule here, so nothing below can leak onto anyone else.
   2. The attribute is written only by applyBrand(), only from a HARD ALLOW-LIST
      (BRAND_SKINS in src/core/brand.js), and only from a value the SERVER
      stamped out of organizations.config.brand_skin - which is owner-writable
      only. A tenant cannot elect a skin by editing their own brand guide.
   3. STYLING ONLY. No `display`, no `position`, no `content` that introduces or
      removes information, nothing that changes what a control does or where it
      sits in the flow. A feature shipped tomorrow behaves identically for this
      tenant as for everyone else; it just wears their paint. Keep it that
      way - if a change here would alter behavior, it belongs in the feature,
      not in a skin.

   LOAD ORDER: last. These rules deliberately match the specificity of the
   layers they retune (portal-skin.css is (0,3,0) for a component; so is this),
   so they win on source order and on nothing else. Every <link> to this file
   must sit after theme/components/portal-skin/portal-v2/field, and must carry a
   ?v= cache-buster like every other stylesheet here - a stale copy of THIS file
   against fresh JS is the icon-blowup failure mode all over again.

   Captured from the live site on 2026-08-09. See brand-packs/*.json for
   the token half and the measurement notes.
   ========================================================================== */


/* ############################################################################
   MINMAX STRATEGIES                                 minmaxstrategiesllc.com
   ----------------------------------------------------------------------------
   The platform's first dark canvas. The pack supplies #0C0C0E / #1A1A1D /
   #222225 / #00E5FF / #DCDCE0 and brand.js mirrors the surface ramp for it (see
   darkCanvas()). What remains here is the handful of values that were written
   as light-canvas literals, plus the three places their site has a signature the
   token model has no name for: the cyan hairline glow, the serif display face
   against a mono eyebrow, and a hero that is dark with a cyan wash rather than a
   block of accent color.
   ######################################################################### */

:root[data-brand-skin="minmax"] {
  --mm-bg:     #0C0C0E;   /* site --bg */
  --mm-surf:   #1A1A1D;   /* site --surf */
  --mm-surf-2: #222225;   /* site --surf2 */
  --mm-text:   #DCDCE0;   /* site --text */
  --mm-muted:  #8E8E94;   /* site --muted */
  --mm-dim:    #4A4A50;   /* site --dim */
  --mm-acc:    #00E5FF;   /* site --acc */
  --mm-acc-d:  #0E2E36;   /* site --acc-d, the deep cyan panel */
  --mm-green:  #2EE0A8;   /* site --gold, the secondary */

  /* Their secondary/tertiary text. The derived ramp lands close, but these are
     the literal values their stylesheet publishes, and the gap is visible when
     a portal page sits open beside the marketing site. */
  --tx-soft: #A6A6AC;
  --tx-mute: var(--mm-muted);

  /* Their sign-in button sets rgb(6,24,27) on cyan. The engine's readableOn()
     picks the product's near-ink; this is the exact one they ship. */
  --on-teal: #06181B;

  /* --acc-deep is link and label text. Deepened cyan disappears on a near-black
     page, so their site brightens instead - the opposite move from a light
     canvas, and the reason this cannot be derived. */
  --teal-deep:   #5CEBFF;
  --accent-deep: #5CEBFF;

  /* Status TINTS. The engine emits --ok/--warn/--bad polarity-aware, but their
     `-soft` companions are pale literals in theme.css - a status pill is
     `color:var(--ok-tx, var(--ok)); background: var(--ok-soft)`, so on a dark canvas those
     pills come out as bright postage stamps stuck to a black page. Same hues,
     same semantics, as alpha over the canvas instead of pastel over white. */
  --ok-soft:   rgba(61, 220, 151, .12);
  --warn-soft: rgba(245, 154, 122, .13);
  --bad-soft:  rgba(255, 107, 107, .12);
  --info:      #6FB3FF;
  --info-soft: rgba(111, 179, 255, .13);

  --r-sm: 6px;
  --r-lg: 12px;
}

/* ── Chrome: the console rail ────────────────────────────────────────────────
   Already dark by default, but graphite-slate rather than their charcoal. */
:root[data-brand-skin="minmax"] {
  --rail-bg:      var(--mm-bg);
  --rail-bg-2:    #141417;
  --rail-bg-3:    #1F1F23;
  --rail-line:    rgba(255, 255, 255, .07);
  --rail-line-2:  rgba(255, 255, 255, .04);
  --rail-tx:      #F1F1F4;
  --rail-tx-dim:  rgba(220, 220, 224, .72);
  --rail-tx-mute: rgba(220, 220, 224, .45);
}

/* ── Type ────────────────────────────────────────────────────────────────────
   Nanum Myeongjo arrives from the pack. Their display sizes are tracked in hard
   (-0.03em at 70px); the product's default is half that. */
:root[data-brand-skin="minmax"] :is(h1, h2) {
  letter-spacing: -.03em;
}
/* Their eyebrows are JetBrains Mono, cyan, wide. */
:root[data-brand-skin="minmax"] .ov-eyebrow,
:root[data-brand-skin="minmax"] .section-label,
:root[data-brand-skin="minmax"] .brand-lockup-sub {
  color: var(--mm-acc);
  letter-spacing: .18em;
}

/* ── The hero ────────────────────────────────────────────────────────────────
   Their page has no block of flat accent anywhere. It has dark panels lit from
   one corner by a cyan glow, which is what this becomes. */
:root[data-brand-skin="minmax"] .ov-hero {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(0, 229, 255, .16), transparent 60%),
    linear-gradient(135deg, var(--mm-acc-d), var(--mm-bg) 70%);
  border: 1px solid rgba(0, 229, 255, .18);
  box-shadow: none;
  color: var(--mm-text);
}
:root[data-brand-skin="minmax"] .ov-hero::after {
  background: radial-gradient(circle, rgba(0, 229, 255, .22), transparent 70%);
}
:root[data-brand-skin="minmax"] .ov-hero h2,
html[data-brand-skin="minmax"] .ov-hero h2 {
  color: #F1F1F4;
}
:root[data-brand-skin="minmax"] .ov-hero p {
  color: rgba(220, 220, 224, .82);
}
:root[data-brand-skin="minmax"] .ov-hero p b {
  color: #F1F1F4;
}

/* ── Buttons ─────────────────────────────────────────────────────────────────
   Flat cyan on near-ink text, 8px, no float - their "Sign In". */
:root[data-brand-skin="minmax"] .btn-primary,
:root[data-brand-skin="minmax"] .cta {
  background: var(--mm-acc);
  background-image: none;
  color: var(--on-teal);
  box-shadow: none;
  font-weight: 600;
}
:root[data-brand-skin="minmax"] .btn-primary:hover,
:root[data-brand-skin="minmax"] .cta:hover {
  background: #4DECFF;
  background-image: none;
  box-shadow: none;
}
:root[data-brand-skin="minmax"] :is(.btn-ghost, .btn-quiet) {
  color: var(--mm-text);
}
:root[data-brand-skin="minmax"] .btn-ghost:hover {
  border-color: rgba(0, 229, 255, .22);
  color: var(--mm-acc);
  background: rgba(0, 229, 255, .06);
}

/* ── Hairlines and hovers ────────────────────────────────────────────────────
   Their whole site separates surfaces with a 6%-white hairline that turns cyan
   at 22% on hover. That pairing is the single most recognizable thing about the
   page after the color itself. */
:root[data-brand-skin="minmax"] :is(.card, .stat, .ov-tile, .ptabs, .cs-proj, .cs-deliv, .p3-bubble) {
  border-color: rgba(255, 255, 255, .06);
}
:root[data-brand-skin="minmax"] :is(.ov-tile:hover, .cs-deliv:hover, .ov-need:hover) {
  border-color: rgba(0, 229, 255, .22);
  box-shadow: none;
}
:root[data-brand-skin="minmax"] .ptabs button.on {
  background: rgba(0, 229, 255, .10);
  color: var(--mm-acc);
  box-shadow: inset 0 0 0 1px rgba(0, 229, 255, .22);
}
:root[data-brand-skin="minmax"] .ptab-badge,
:root[data-brand-skin="minmax"] .ptabs button.on .ptab-badge {
  background: rgba(0, 229, 255, .14);
  color: var(--mm-acc);
}
:root[data-brand-skin="minmax"] .avatar,
:root[data-brand-skin="minmax"] .cs-deliv-ic {
  background: rgba(0, 229, 255, .08);
  color: var(--mm-acc);
  border-color: rgba(0, 229, 255, .18);
}

/* ── Surfaces the light theme wrote as literals ──────────────────────────────
   The scrim and the frosted bar were tuned against pale paper. Everything else
   on this page now flows from --card / --paper (see the note in
   portal-skin.css §3); these two cannot, because they are alpha over the page. */
:root[data-brand-skin="minmax"] .scrim {
  background: rgba(0, 0, 0, .66);
}
:root[data-brand-skin="minmax"] .portal-top::before {
  background: linear-gradient(180deg, rgba(12, 12, 14, .98), rgba(12, 12, 14, .72) 70%, transparent);
  border-bottom-color: rgba(255, 255, 255, .06);
}
/* The ambient wash: their cyan glow top-right, their green thread bottom-left. */
:root[data-brand-skin="minmax"] body::before {
  background:
    radial-gradient(110% 70% at 100% -8%, rgba(0, 229, 255, .07), transparent 50%),
    radial-gradient(95% 60% at -8% 4%, rgba(46, 224, 168, .045), transparent 55%);
}
/* Form fields are the one place a dark theme fails loudly if it is missed: an
   inherited white field with dark placeholder text on a black page. */
:root[data-brand-skin="minmax"] :is(.input, .select, .textarea) {
  background: var(--mm-surf);
  border-color: rgba(255, 255, 255, .08);
  color: var(--mm-text);
}
:root[data-brand-skin="minmax"] :is(.input, .select, .textarea):focus {
  border-color: rgba(0, 229, 255, .45);
  box-shadow: 0 0 0 3px rgba(0, 229, 255, .12);
}
:root[data-brand-skin="minmax"] ::placeholder {
  color: var(--mm-dim);
}
/* A native select/date control renders its own popup in the UA's scheme; tell
   the UA the page is dark so those match instead of flashing white. */
:root[data-brand-skin="minmax"] {
  color-scheme: dark;
}
:root[data-brand-skin="minmax"] .sigpad {
  background: var(--mm-surf-2);
  border-color: rgba(255, 255, 255, .12);
}

/* ── Sign-in screen (login.html) ─────────────────────────────────────────────
   Their site's own hero: charcoal panel, cyan glow top-left, a green counter-
   tone, a serif headline with one cyan phrase. */
:root[data-brand-skin="minmax"] .signin {
  background: var(--mm-acc);
  background-image: none;
  color: var(--on-teal);
  box-shadow: none;
  font-weight: 600;
}
:root[data-brand-skin="minmax"] .signin:hover:not(:disabled) {
  background: #4DECFF;
  background-image: none;
  box-shadow: none;
}
:root[data-brand-skin="minmax"] .brand-panel .b1 {
  background: radial-gradient(circle, rgba(0, 229, 255, .30), transparent 70%);
}
:root[data-brand-skin="minmax"] .brand-panel .b2 {
  background: radial-gradient(circle, rgba(46, 224, 168, .18), transparent 70%);
}
:root[data-brand-skin="minmax"] .brand-panel .grid {
  background-image:
    linear-gradient(rgba(0, 229, 255, .10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, .10) 1px, transparent 1px);
}
:root[data-brand-skin="minmax"] .bp-eyebrow {
  color: var(--mm-acc);
}
:root[data-brand-skin="minmax"] .bp-hero h2 em {
  background: linear-gradient(100deg, var(--mm-acc), var(--mm-green));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
:root[data-brand-skin="minmax"] .bp-rule {
  background: linear-gradient(90deg, var(--mm-acc), transparent);
}
:root[data-brand-skin="minmax"] .field input:focus {
  border-color: rgba(0, 229, 255, .45);
  box-shadow: 0 0 0 4px rgba(0, 229, 255, .12);
}
:root[data-brand-skin="minmax"] .forgot,
:root[data-brand-skin="minmax"] .fc-foot a {
  color: var(--mm-acc);
}
/* The inline error/info chips are pale-pink and pale-mint literals - invisible
   type on a near-black card. Same semantics, dark-canvas weights. */
:root[data-brand-skin="minmax"] .error {
  background: rgba(255, 107, 107, .10);
  border-color: rgba(255, 107, 107, .28);
  color: #FF8A8A;
}