/* app.css — FeelSame design tokens. The one place the theme is defined.
   Every page links this before its own <style>, so a page can still override a token
   it genuinely needs to differ on (store.html does); nothing else should redeclare them. */
:root {
  --t4-bg: #000;
  --t4-fg: #fff;
  --t4-muted: rgba(255, 255, 255, .66);
  --t4-line: rgba(255, 255, 255, .12);
  --t4-window-bg: #08080a;
  --t4-pill-bg: #fff;
  --t4-pill-fg: #000;
  --t4-dot: rgba(255, 255, 255, .16);
  --t4-soft: rgba(255, 255, 255, .06);

  --mk-accent: #c5df64;      /* FeelSame lime */
  --mk-on-accent: #141a05;   /* text and icons on an accent fill */
}

html.t4-light {
  --t4-bg: #e7e8ec;
  --t4-fg: #0a0a0c;
  --t4-muted: rgba(0, 0, 0, .6);
  --t4-line: rgba(0, 0, 0, .14);
  --t4-window-bg: #f5f5f7;
  --t4-pill-bg: #0a0a0c;
  --t4-pill-fg: #fff;
  --t4-dot: rgba(0, 0, 0, .2);
  --t4-soft: rgba(0, 0, 0, .05);

  --mk-accent: #5a7a0a;      /* lime is unreadable on light surfaces */
  --mk-on-accent: #fff;
}

/* ── Retired marketplace surfaces ─────────────────────────────────────────────
   FeelSame no longer presents itself as a freelancer marketplace. The backend and
   every record stay; these controls are simply not shown. Delete a selector to
   bring that control back. */
.fhire-btn,                               /* "Hire" on a reel */
.pv-act.hire,                             /* "Hire" in the profile post viewer */
.p-frl,                                   /* "Freelancer" badge on profiles */
.p-shop-pill,                             /* shop link on profiles */
.np-cat-block,                            /* work category in the post composer */
.t4-row[data-kw^="hire button"],          /* Settings: "Show Hire button" */
.t4-verify-cta[data-id="plus"] {          /* Settings: Plus upsell */
  display: none !important;
}

/* Money and deals stay reachable for the accounts that have them:
   html.fs-has-wallet = a balance or at least one deal; html.fs-has-deals = deal chats. */
.t4-group.fs-pay, .t4-row[data-id="wallet"], .mk-dtabs { display: none !important; }
html.fs-has-wallet .t4-group.fs-pay { display: block !important; }
html.fs-has-wallet .t4-row[data-id="wallet"] { display: flex !important; }
html.fs-has-deals .mk-dtabs { display: flex !important; }

/* ── Title page: rating strip (TMDB · FeelSame Meter · you) ─────────────────── */
.td-rates { display: flex; gap: 0; flex-wrap: wrap; align-items: baseline; margin: 16px 0 0; }
.td-rates:empty { display: none; }
.td-rate { display: inline-flex; align-items: baseline; gap: 5px; }
.td-rate + .td-rate::before { content: "\00b7"; color: var(--t4-muted); margin: 0 10px; }
.td-rate b { font-family: "Geist", "Inter", sans-serif; font-size: 15px; font-weight: 700; }
.td-rate small { font-size: 13px; font-weight: 500; color: var(--t4-muted); }
.td-rate.mine { border-color: color-mix(in srgb, var(--mk-accent) 45%, transparent); background: color-mix(in srgb, var(--mk-accent) 14%, transparent); }
.td-rate.mine b { color: var(--mk-accent); }

/* ── Scrollbars follow the theme (the browser default is a bright bar on a dark page) ── */
html { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
html.t4-light { scrollbar-color: rgba(0, 0, 0, .28) transparent; }

/* Keyboard focus: a lime ring on anything you can press when you reach it with Tab (many controls
   turn the browser outline off; mouse and touch never show it — :focus-visible). Text fields keep
   their own focus style. */
:is(a, button, [role="button"], [tabindex]:not([tabindex="-1"]), summary, select):focus-visible {
  outline: 2px solid var(--mk-accent) !important;
  outline-offset: 2px !important;
}

/* ── toast polish: slimmer capsule, tighter chip, softer shadow (overrides the inline #fsToastCss) ── */
html #fsToast{top:calc(10px + env(safe-area-inset-top));gap:8px;max-width:min(86vw,400px);padding:8px 15px 8px 9px;font-size:13px;font-weight:600;letter-spacing:0;border-radius:9999px;background:rgba(22,22,28,.88);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 26px rgba(0,0,0,.32)}
html #fsToast .ic{width:20px;height:20px;flex:0 0 20px}
html #fsToast .ic svg{width:11px;height:11px}
html #fsToast .act{font-size:13px}
html.t4-light #fsToast{background:rgba(255,255,255,.94);color:#141418;border-color:rgba(0,0,0,.08);box-shadow:0 8px 26px rgba(0,0,0,.14)}
/* No decorative frame around the page (apps like Instagram draw none). The markup stays on older pages; this hides it everywhere. */
html .t4-page-frame{display:none!important}