/* tc-shell.css: only the site header/menu, for pages with their own design (Pixie). Generated from tc.css. */
/* tc.css: the Sentinels site look (2026-10-17 overhaul, modelled on TeleClaw's layout). Light by default, dark via
   the switch or the system setting. Every color is a token here, so both themes stay in step. */
:root {
  --tc-bg: #ffffff; --tc-bg2: #f6f8fb; --tc-card: #f3f6fa; --tc-card-b: #e3e8ef; --tc-ink: #111827; --tc-ink2: #4b5563; --tc-mute: #6b7280;
  --tc-line: #e5e7eb; --tc-blue: #2f8cf1; --tc-blue2: #1a73e8; --tc-blue-soft: #dceeff; --tc-glow: rgba(47,140,241,.35);
  --tc-head: rgba(255,255,255,.92); --tc-shadow: 0 10px 30px rgba(17,24,39,.08); --tc-overlay: rgba(17,24,39,.35);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --tc-bg: #0b0d12; --tc-bg2: #10131a; --tc-card: #151922; --tc-card-b: #252b37; --tc-ink: #f3f4f6; --tc-ink2: #c3c8d2; --tc-mute: #8b93a1;
  --tc-line: #222834; --tc-blue: #4ea1ff; --tc-blue2: #2f8cf1; --tc-blue-soft: #14283f; --tc-glow: rgba(78,161,255,.35);
  --tc-head: rgba(16,19,26,.9); --tc-shadow: 0 10px 30px rgba(0,0,0,.45); --tc-overlay: rgba(0,0,0,.55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tc-bg: #0b0d12; --tc-bg2: #10131a; --tc-card: #151922; --tc-card-b: #252b37; --tc-ink: #f3f4f6; --tc-ink2: #c3c8d2; --tc-mute: #8b93a1;
    --tc-line: #222834; --tc-blue: #4ea1ff; --tc-blue2: #2f8cf1; --tc-blue-soft: #14283f; --tc-glow: rgba(78,161,255,.35);
    --tc-head: rgba(16,19,26,.9); --tc-shadow: 0 10px 30px rgba(0,0,0,.45); --tc-overlay: rgba(0,0,0,.55); color-scheme: dark;
  }
}
/* header */
.tc-head { position: sticky; top: 10px; z-index: 50; margin: 10px 16px 0; }
.tc-bar { max-width: 1080px; margin: 0 auto; display: flex; align-items: center; gap: 12px; background: var(--tc-head); backdrop-filter: blur(14px);
  border: 1px solid var(--tc-line); border-radius: 28px; padding: 10px 12px 10px 16px; box-shadow: var(--tc-shadow); }
.tc-logo { display: flex; align-items: center; gap: 10px; color: var(--tc-ink); font-weight: 800; font-size: 19px; white-space: nowrap; letter-spacing: -.01em; margin-right: auto; }
.tc-logo img { width: 36px; height: 36px; border-radius: 50%; background: #111; padding: 5px; object-fit: contain; }
.tc-links { display: none; gap: 22px; margin-right: 8px; }
.tc-links a { color: var(--tc-ink2); font-size: 15px; font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 999px; font-family: inherit;
  font-weight: 700; font-size: 17px; line-height: 1; padding: 16px 26px; color: #fff; background: linear-gradient(180deg, #5aaefc, var(--tc-blue2));
  box-shadow: 0 8px 24px var(--tc-glow); transition: transform .15s; }
.btn:hover { transform: translateY(-1px); }
.btn.sm { padding: 11px 18px; font-size: 16px; }
.btn.ghost { background: var(--tc-card); color: var(--tc-ink); box-shadow: none; border: 1px solid var(--tc-line); }
.btn svg { width: 20px; height: 20px; }
.tc-burger { background: none; border: 0; color: var(--tc-ink); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.tc-burger svg { width: 26px; height: 26px; }
.tc-menu { display: none; max-width: 1080px; margin: 10px auto 0; background: var(--tc-bg); border: 1px solid var(--tc-line); border-radius: 28px;
  padding: 18px 22px 22px; box-shadow: var(--tc-shadow); max-height: calc(100vh - 120px); overflow-y: auto; }
.tc-head.open .tc-menu { display: block; }
.tc-shade { display: none; position: fixed; inset: 0; background: var(--tc-overlay); backdrop-filter: blur(3px); z-index: 40; }
.tc-head.open + .tc-shade { display: block; }
.tc-menu > a, .tc-acc > button { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; color: var(--tc-ink);
  font-size: 19px; font-weight: 500; background: none; border: 0; font-family: inherit; cursor: pointer; text-align: left; }
.tc-acc > button svg { width: 20px; height: 20px; transition: transform .2s; color: var(--tc-mute); }
.tc-acc.open > button svg { transform: rotate(180deg); }
.tc-acc .tc-sub { display: none; padding: 2px 0 10px; }
.tc-acc.open .tc-sub { display: grid; gap: 4px 20px; grid-template-columns: 1fr; }
.tc-sub a { display: flex; gap: 12px; align-items: flex-start; padding: 9px 4px; color: var(--tc-ink); border-radius: 12px; }
.tc-sub a:hover { background: var(--tc-card); }
.tc-sub .ic { flex: none; }
.tc-sub b { display: block; font-weight: 600; font-size: 16px; color: var(--tc-ink); }
.tc-sub b + span { color: var(--tc-mute); font-size: 14px; line-height: 1.35; }
.tc-hr { border: 0; border-top: 1px solid var(--tc-line); margin: 8px 0; }
.tc-theme { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--tc-line); border-radius: 999px;
  background: var(--tc-bg2); margin: 12px 0; font-size: 16px; color: var(--tc-ink); }
.seg { display: inline-flex; background: var(--tc-card); border: 1px solid var(--tc-line); border-radius: 999px; padding: 3px; }
.seg button { border: 0; background: none; color: var(--tc-mute); font: 600 14px/1 inherit; font-family: inherit; padding: 8px 12px; border-radius: 999px; cursor: pointer; }
.seg button.on { background: var(--tc-bg); color: var(--tc-ink); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.tc-menu .btn { width: 100%; margin-top: 10px; }


.tc-head .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; border-radius:999px; font-family:inherit;
  font-weight:700; font-size:17px; line-height:1; padding:16px 26px; color:#fff; background:linear-gradient(180deg,#5aaefc,var(--tc-blue2)); box-shadow:0 8px 24px var(--tc-glow); text-decoration:none; }
.tc-head .btn.sm { padding:11px 18px; font-size:16px; }
.tc-head .btn.ghost { background:var(--tc-card); color:var(--tc-ink); box-shadow:none; border:1px solid var(--tc-line); }
.tc-head .btn svg { width:20px; height:20px; }
.tc-head .ic { width:40px; height:40px; border-radius:12px; background:var(--tc-blue-soft); color:var(--tc-blue); display:grid; place-items:center; }
.tc-head .ic svg { width:20px; height:20px; }
.tc-head .seg { display:inline-flex; background:var(--tc-card); border:1px solid var(--tc-line); border-radius:999px; padding:3px; }
.tc-head .seg button { border:0; background:none; color:var(--tc-mute); font:600 14px/1 inherit; font-family:inherit; padding:8px 12px; border-radius:999px; cursor:pointer; }
.tc-head .seg button.on { background:var(--tc-bg); color:var(--tc-ink); box-shadow:0 1px 3px rgba(0,0,0,.12); }
.tc-head, .tc-shade { font: 17px/1.6 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.tc-head a { text-decoration:none; }
.tc-head img { display:block; }
@media (min-width: 860px) { .tc-links { display:flex; } .tc-acc.open .tc-sub { grid-template-columns:1fr 1fr; } .tc-menu { max-width:520px; margin-right:0; } }

/* 2026-10-17 fixes: menu buttons keep their own shape (the plain menu-link rule was overriding them), no dark
   edges, and the burger stays centred even on pages with their own button styles (Pixie). */
.tc-menu > a.btn { display: flex; justify-content: center; padding: 16px 26px; font-size: 17px; font-weight: 700; color: #fff; width: 100%; margin-top: 10px; box-sizing: border-box; }
.tc-menu > a.btn.ghost { color: var(--tc-ink); }
.tc-head .btn, .tc-menu .btn { border: 0; outline: none; -webkit-appearance: none; appearance: none; background-clip: padding-box; text-decoration: none; }
.tc-head .btn.ghost { border: 1px solid var(--tc-line); }
.tc-bar { align-items: center; min-height: 64px; box-sizing: border-box; }
.tc-burger { flex: none; margin: 0; padding: 0; line-height: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; -webkit-appearance: none; appearance: none; align-self: center; }
.tc-burger svg { display: block; }
.tc-bar > .btn { flex: none; white-space: nowrap; }

/* 2026-10-17 (2): the menu-link rule's "background: none" beat the button's blue, so Open in Telegram showed white on
   white in light mode. Locked here. Header: title, Open and the close/menu icon sit evenly on small phones. */
.tc-menu > a.btn { background: linear-gradient(180deg, #5aaefc, #1a73e8) !important; color: #fff !important; }
.tc-menu > a.btn.ghost { background: var(--tc-card) !important; color: var(--tc-ink) !important; }
.tc-bar { gap: 10px; padding: 10px 10px 10px 14px; }
.tc-logo { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tc-bar > .btn.sm { margin-left: auto; padding: 10px 16px; }
@media (max-width: 400px) { .tc-logo { font-size: 17px; gap: 8px; } .tc-logo img { width: 32px; height: 32px; } .tc-bar > .btn.sm { padding: 9px 14px; font-size: 15px; } }

.tc-group { grid-column: 1 / -1; margin: 10px 4px 2px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tc-mute); }

/* ── TOP MENU (2026-10-22): Dashboard · Wallet · Pixie · Campaigns · King Spear · Nexis · Jinx. Each button's sub-menu
   sits folded up behind it and slides down when tapped; both rows scroll sideways. ── */
.tc-navbox { max-width: 1080px; margin: 8px auto 0; }
.tc-nav { background: var(--tc-head); backdrop-filter: blur(14px); border: 1px solid var(--tc-line); border-radius: 22px; box-shadow: var(--tc-shadow); padding: 6px; position: relative; z-index: 2; }
.tc-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tc-chips::-webkit-scrollbar, .tc-subrow::-webkit-scrollbar { display: none; }
.tc-chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--tc-ink2); font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s; }
.tc-chip .ci { width: 28px; height: 28px; border-radius: 50%; background: var(--tc-blue-soft); color: var(--tc-blue); display: grid; place-items: center; }
.tc-chip .ci svg { width: 16px; height: 16px; }
.tc-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--tc-bg); transition: transform .25s; }
.tc-chip em { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tc-mute); border: 1px solid var(--tc-line); border-radius: 999px; padding: 2px 6px; }
.tc-chip.soon { opacity: .75; }
.tc-chip.here { color: var(--tc-ink); }
.tc-chip.here .ci, .tc-chip.here img { box-shadow: 0 0 0 2px var(--tc-blue); }
.tc-chip.on { background: var(--tc-blue-soft); color: var(--tc-blue); border-color: transparent; }
.tc-chip.on img { transform: scale(1.08); }
.tc-subs { position: relative; z-index: 1; margin-top: -18px; }
.tc-subwrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.2,.8,.2,1); }
.tc-subwrap.open { grid-template-rows: 1fr; }
.tc-subwrap > .tc-subrow { min-height: 0; overflow: hidden; }
.tc-subrow { display: flex; gap: 8px; overflow-x: auto !important; scrollbar-width: none; scroll-snap-type: x proximity; background: var(--tc-bg); border: 1px solid var(--tc-line);
  border-top: 0; border-radius: 0 0 22px 22px; box-shadow: var(--tc-shadow); padding: 0 8px; margin: 0 10px;
  transform: translateY(-16px); opacity: 0; transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s, padding .38s; }
.tc-subwrap.open .tc-subrow { transform: none; opacity: 1; padding: 28px 8px 10px; }
.tc-subwrap:not(.open) .tc-subrow { border-width: 0; box-shadow: none; }
.tc-si { flex: none; scroll-snap-align: start; display: flex; gap: 10px; align-items: center; width: 210px; padding: 10px 12px; border-radius: 16px; background: var(--tc-card); border: 1px solid var(--tc-card-b); color: var(--tc-ink); }
.tc-si:hover { border-color: var(--tc-blue); }
.tc-si b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.tc-si b + span { display: block; color: var(--tc-mute); font-size: 13px; line-height: 1.3; }
.tc-si .ic { flex: none; }
.tc-si.off { opacity: .55; cursor: default; }
.tc-si.off:hover { border-color: var(--tc-card-b); }
@media (min-width: 860px) { .tc-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .tc-subwrap, .tc-subrow { transition: none; } }

.tc-si .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--tc-blue-soft); color: var(--tc-blue); display: grid; place-items: center; }
.tc-si .ic svg { width: 20px; height: 20px; }
.tc-chip, .tc-si { -webkit-appearance: none; appearance: none; box-shadow: none; text-transform: none; letter-spacing: normal; }

/* signed-in header button: icon + one word, icon only on small phones (2026-10-22) */
.tc-tgbtn { padding: 10px 14px !important; }
@media (max-width: 420px) { .tc-tgbtn span { display: none; } .tc-tgbtn { padding: 10px 12px !important; } }

/* ── MENU, LOCKED (2026-10-22, Stephen: "use the code for the one that is stable… across all pages" and "the sub menu
   needs to be the same size and the same measurements as the main one"). The chip font was an invalid shorthand, so
   the row grew 10px taller than its box and scrolled up and down on phones. Fixed sizes, no vertical scroll, and the
   sub-menu items are the same 40px pills as the main row (icon + name). ── */
.tc-chips { height: 40px; overflow-y: hidden !important; align-items: center; overscroll-behavior: contain; touch-action: pan-x; }
.tc-chip { height: 40px; font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1; padding: 0 12px 0 6px; text-decoration: none; }
.tc-chip > span:not(.ci) { line-height: 1; }
.tc-subrow { gap: 6px !important; overflow-y: hidden !important; touch-action: pan-x; overscroll-behavior: contain; margin: 0 10px !important; }
.tc-subwrap.open .tc-subrow { padding: 24px 6px 6px !important; }
.tc-si { width: auto !important; height: 40px; padding: 0 12px 0 6px !important; gap: 8px !important; border-radius: 999px !important; flex: none; }
.tc-si .ic, .tc-si .ic.sm { width: 28px !important; height: 28px !important; border-radius: 50% !important; }
.tc-si .ic svg { width: 16px !important; height: 16px !important; }
.tc-si b { font-size: 14px !important; font-weight: 600; white-space: nowrap; line-height: 1; }
.tc-si b + span { display: none !important; }

.tc-chip { display: inline-flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; overflow: hidden; }
.tc-chip > * { flex: none; }
.tc-chip em { font-size: 9px; padding: 2px 5px; }

/* ── VERTICAL MENU (2026-10-22, Stephen: "a vertical drop down… it pops down one by one, one under the next… graceful,
   in one single motion"). The panel opens under the chip row and each item drops in a beat after the one above. ── */
.tc-subrow { flex-direction: column !important; overflow: hidden !important; gap: 4px !important; scroll-snap-type: none !important; touch-action: auto !important; }
.tc-subwrap.open .tc-subrow { padding: 26px 8px 8px !important; }
.tc-si { width: 100% !important; height: 44px; border-radius: 14px !important; background: transparent !important; border: 1px solid transparent !important;
  opacity: 0; transform: translateY(-10px); transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1), background .15s; transition-delay: 0s; }
.tc-subwrap.open .tc-si { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms + 60ms); }
.tc-si:hover { background: var(--tc-card) !important; }
.tc-si.cur { background: var(--tc-blue-soft) !important; }
.tc-si.cur b { color: var(--tc-blue); }
.tc-si b { font-size: 15px !important; }
.tc-instant .tc-subwrap, .tc-instant .tc-subrow, .tc-instant .tc-si { transition: none !important; }
@media (min-width: 860px) { .tc-subrow { max-width: 420px; margin: 0 auto !important; } }
@media (prefers-reduced-motion: reduce) { .tc-si { transition: none !important; } }

/* swipe hint on the top menu (2026-10-22) */
.tc-nav { position: relative; }
.tc-swipe { position: absolute; top: 50%; right: 18px; width: 30px; height: 30px; margin-top: -10px; color: var(--tc-ink); opacity: 0; pointer-events: none; z-index: 3;
  animation: tcswipe 2.6s ease-in-out 0.8s infinite; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.tc-swipe svg { width: 100%; height: 100%; }
.tc-swipe.gone { animation: none; opacity: 0; transition: opacity .3s; }
@keyframes tcswipe { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: .35; } 70% { transform: translateX(-120px); opacity: .35; } 85%, 100% { transform: translateX(-140px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tc-swipe { display: none; } }