/* TG_PLATFORM_SITE_V1 -- dresses the grow portal screens in the website's
   look when they render inside the site (/portal, /book, /shop, /game ...).
   platform.css is generated from grow by tools/build_platform.py and must not
   be hand edited, so this file loads after it and only restyles. grow itself,
   at grow.tgsbarber.com, is untouched.

   The site's language: its own black and brass tokens, square edges with a
   cut corner, hairline borders, gold corner ticks, condensed uppercase
   headings, tracked uppercase labels, and struck-gold primary buttons. */

.tg-platform {
  --tg-black: var(--bg);
  --tg-charcoal: var(--bg-raised);
  --tg-charcoal-2: var(--surface);
  --tg-charcoal-3: var(--surface-2);
  --tg-line: var(--line-strong);
  --tg-line-soft: var(--line);
  --tg-gold: var(--accent);
  --tg-gold-bright: var(--accent-bright);
  --tg-gold-dim: var(--accent-deep);
  --tg-gold-wash: var(--accent-wash);
  --tg-text: var(--text);
  --tg-text-2: var(--text-dim);
  --tg-text-3: var(--muted);
  --tg-r-sm: 2px;
  --tg-r: 2px;
  --tg-r-lg: 2px;
  --tg-font: var(--font-sans);
  --tg-mono: var(--font-mono);
  --tg-display: var(--font-display);
  --tg-cut: var(--cut-poly);
  --tg-cut-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
  background: transparent;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}
.tg-platform::before { display: none; }

/* Headings: the site's condensed uppercase. */
.tg-platform h1, .tg-platform h2, .tg-platform h3, .tg-platform h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* The portal's own masthead: the site header already brands the page, so the
   brand block goes and the tabs become the site's tracked jump bar. */
.tg-platform .tg-head {
  position: static;
  background: transparent;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.tg-platform .tg-brand { display: none; }
.tg-platform .tg-head-in { min-height: 0; padding-block: 0.25rem; }
.tg-platform .tg-nav a,
.tg-platform .tg-nav button {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.tg-platform .tg-nav a:hover, .tg-platform .tg-nav button:hover { color: var(--text); background: transparent; }
.tg-platform .tg-nav [aria-current="page"], .tg-platform .tg-nav .is-active {
  color: var(--accent-bright);
  background: transparent;
  border: 0;
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* Sidebar: a plain notched panel, tracked labels, a gold bar on the current item. */
.tg-platform .tg-side {
  background: linear-gradient(180deg, var(--surface), var(--bg-raised));
  border: 1px solid var(--line-strong);
  border-radius: 0;
  clip-path: var(--tg-cut);
}
.tg-platform .tg-side h2 {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  color: var(--accent);
}
.tg-platform .tg-side-nav button,
.tg-platform .tg-side-nav a,
.tg-platform .tg-side-link {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 0;
  border: 0;
  border-left: 2px solid transparent;
}
.tg-platform .tg-side-nav button.is-active,
.tg-platform .tg-side-nav a.is-active {
  background: var(--accent-wash);
  color: var(--accent-bright);
  border-left-color: var(--accent);
}

/* Cards: the site's notched mount with two gold corner ticks, no rounded
   corners and no coloured edge stripe. */
.tg-platform .tg-card,
.tg-platform .tg-module {
  position: relative;
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-raised) 100%);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  box-shadow: none;
  clip-path: var(--tg-cut);
}
.tg-platform .tg-card::before, .tg-platform .tg-module::before,
.tg-platform .tg-card::after, .tg-platform .tg-module::after {
  content: '';
  position: absolute;
  width: var(--tick);
  height: var(--tick);
  border: 0;
  border-radius: 0;
  opacity: 1;
  pointer-events: none;
}
.tg-platform .tg-card::before, .tg-platform .tg-module::before {
  top: 0; left: 0; right: auto;
  border-top: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
}
.tg-platform .tg-card::after, .tg-platform .tg-module::after {
  top: auto; bottom: 0; right: 0; left: auto;
  border-bottom: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.tg-platform .tg-module:hover { transform: none; border-color: var(--line-accent); }
.tg-platform .tg-module h3 { color: var(--text); font-size: 1.15rem; }

/* Buttons: tracked uppercase with the site's cut corner; primary is struck gold. */
.tg-platform .tg-btn {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  box-shadow: none;
  clip-path: var(--tg-cut-sm);
}
.tg-platform .tg-btn:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-wash); transform: none; }
.tg-platform .tg-btn-primary {
  background: var(--leaf);
  background-size: 200% 100%;
  border-color: var(--accent-deep);
  color: var(--accent-ink);
}
.tg-platform .tg-btn-primary:hover { background: var(--leaf); background-size: 200% 100%; background-position: 100% 50%; color: var(--accent-ink); }

/* Status badges: square tracked tags like the site's, colour kept for meaning. */
.tg-platform .tg-badge {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  border-radius: 0;
}

.tg-platform .tg-foot { border-top-color: var(--line); }

/* TG_PLATFORM_SITE_MOBILE_V1 -- on phones and tablets the portal tabs are one
   swipeable row instead of wrapping into a stack four lines deep. */
@media (max-width: 64rem) {
  .tg-platform .tg-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
  }
  .tg-platform .tg-nav::-webkit-scrollbar { display: none; }
  .tg-platform .tg-nav a, .tg-platform .tg-nav button { flex: none; white-space: nowrap; }
}

/* TG_WEBSITE_PORTAL_PARITY_V1: host integration only; standalone GROW is unchanged. */
body.page-platform--portal .tg-platform { padding-block:16px 32px; }
body.page-platform--portal .tg-platform .tg-wrap { max-width:none; padding-inline:0; }
body.page-platform--portal .tg-platform .tg-head { border-bottom:0; }
body.page-platform--portal .tg-platform .tg-head-in { justify-content:flex-end; padding-block:0; min-height:44px; }
body.page-platform--portal .tg-platform .tg-nav { gap:4px; }
body.page-platform--portal .tg-platform .tg-nav a,
body.page-platform--portal .tg-platform .tg-nav button { color:#b4b4bd; }
body.page-platform--portal .tg-platform .tg-wrap-pad { padding-top:12px; padding-bottom:32px; }
body.page-platform--portal .tg-platform .tg-app { gap:24px; }
body.page-platform--portal .tg-platform .tg-side { padding:12px; background:linear-gradient(180deg,#19191d,#131316); }
body.page-platform--portal .tg-platform .tg-side h2 { font-size:.8rem; font-weight:600; line-height:1.4; margin:10px 8px 8px; color:#b4b4bd; text-transform:none; letter-spacing:0; }
body.page-platform--portal .tg-platform .tg-side h2:not(:first-child) { margin-top:20px; padding-top:16px; border-top:1px solid #32323b; }
body.page-platform--portal .tg-platform .tg-side-nav button { min-height:44px; font-size:.9rem; }
body.page-platform--portal .tg-platform .tg-side-nav button.is-active { border-left:2px solid var(--tg-gold); }
body.page-platform--portal .tg-platform .tg-portal-content { min-width:0; }
body.page-platform--portal .tg-platform .tg-portal-content .tg-card,
body.page-platform--portal .tg-platform .tg-portal-content .tg-module { padding:22px; background:linear-gradient(180deg,#1b1b1f,#151518); border-color:#34343d; }
body.page-platform--portal .tg-platform .tg-portal-content .tg-card-head { margin-bottom:14px; gap:12px; flex-wrap:wrap; }
body.page-platform--portal .tg-platform .tg-portal-content h2 { font-size:clamp(1.5rem,1.2rem + .65vw,1.9rem); line-height:1.2; }
body.page-platform--portal .tg-platform .tg-portal-content h3 { font-size:1.18rem; line-height:1.3; }
body.page-platform--portal .tg-platform .tg-portal-content p { line-height:1.55; color:#b4b4bd; }
body.page-platform--portal .tg-platform .tg-portal-content .tg-muted { color:#a3a3ae; }
body.page-platform--portal .tg-platform .tg-portal-content .tg-btn { min-height:44px; }
body.page-platform--portal .tg-platform .tg-welcome-points { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:20px 0; }
body.page-platform--portal .tg-platform .tg-welcome-point { min-width:0; padding:18px; border:1px solid #303036; background:#ffffff03; }
body.page-platform--portal .tg-platform .tg-welcome-point dt { font-size:.82rem; font-weight:600; color:#f2f2f4; }
body.page-platform--portal .tg-platform .tg-welcome-point dd { margin:10px 0 0; display:flex; flex-direction:column; gap:6px; }
body.page-platform--portal .tg-platform .tg-welcome-point strong { font-family:var(--tg-display); font-weight:700; color:var(--tg-gold-bright); font-size:2rem; line-height:1.15; }
body.page-platform--portal .tg-platform .tg-welcome-point dd span { color:#b4b4bd; font-size:.8rem; line-height:1.45; }
body.page-platform--portal .tg-platform .tg-welcome-point-goal { border-color:var(--tg-gold-dim); background:var(--tg-gold-wash); }
body.page-platform--portal .tg-platform .tg-ov-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
body.page-platform--portal .tg-platform .tg-ov-grid > .tg-module { display:flex; flex-direction:column; align-items:flex-start; margin:0; }
body.page-platform--portal .tg-platform .tg-ov-grid > .tg-module h3 { color:var(--tg-gold-bright); }
body.page-platform--portal .tg-platform .tg-ov-grid > .tg-module > p { flex:1; }
body.page-platform--portal .tg-platform .tg-ov-grid > .tg-module > .tg-btn:last-child { margin-top:14px; }
body.page-platform--portal .tg-platform .tg-account-stats { gap:12px; }
body.page-platform--portal .tg-platform .tg-account-stats .tg-stat { padding:16px; }
body.page-platform--portal .tg-platform .tg-account-stats .tg-stat:first-child { background:var(--tg-gold-wash); border-color:var(--tg-gold-dim); }
body.page-platform--portal .tg-platform .tg-account-stats .tg-stat .v { font-size:2rem; line-height:1.2; margin:8px 0; }
/* The host website already supplies its own copyright and footer. */
body.page-platform--portal .tg-platform .tg-foot { display:none; }
@media(max-width:1100px) and (min-width:901px) {
 body.page-platform--portal .tg-platform .tg-app { grid-template-columns:210px minmax(0,1fr); gap:20px; }
}
@media(max-width:600px) {
 body.page-platform--portal .tg-platform { padding-block:12px 24px; }
 body.page-platform--portal .tg-platform .tg-portal-content .tg-card,
 body.page-platform--portal .tg-platform .tg-portal-content .tg-module { padding:16px; }
 body.page-platform--portal .tg-platform .tg-account-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:560px) {
 body.page-platform--portal .tg-platform .tg-welcome-points,
 body.page-platform--portal .tg-platform .tg-ov-grid { grid-template-columns:1fr; }
 body.page-platform--portal .tg-platform .tg-welcome-point { display:grid; grid-template-columns:1fr 1.4fr; gap:12px; align-items:center; padding:14px; }
 body.page-platform--portal .tg-platform .tg-welcome-point dd { margin:0; }
}

body.page-platform--portal .tg-platform .tg-side h2:first-of-type {border-top:0;padding-top:0;margin-top:10px;}
.tg-platform .tg-token-guide {margin:24px 0 0;border:1px solid #34343d;border-radius:10px;background:#151518;color:#f2f2f4;}
.tg-platform .tg-token-guide>summary {min-height:48px;padding:16px 22px;cursor:pointer;font-weight:600;color:var(--tg-gold-bright);}
.tg-platform .tg-token-guide>div {padding:0 22px 18px;max-width:80ch;}
.tg-platform .tg-token-guide p,.tg-platform .tg-token-guide li {color:#b4b4bd;line-height:1.6;}
.tg-platform .tg-token-guide .tg-token-rate {font-size:1.2rem;color:#f2f2f4;}
.tg-platform .tg-token-guide ul {padding-left:20px;}
.tg-platform .tg-token-guide li+li {margin-top:8px;}

/* Customer portal: use 75 percent of wide desktop screens. */
@media(min-width:1280px){body.page-platform--portal .tg-platform__inner.shell{width:75vw;max-width:none;}}
@media(max-width:1279px){body.page-platform--portal .tg-platform__inner.shell{width:calc(100% - 32px);max-width:none;}}