/* ============================================================
   TribeCity Modern UI — tribecity-modern.css
   A fresh design system layered on top of the existing Bootstrap 3
   framework. Add this AFTER main.css and tribalry.css.
   ============================================================

   === HOUSE RULE ==============================================
   DO NOT add custom CSS classes to this file unless the class
   is a TRULY GLOBAL COMPONENT reused across multiple pages.

   • Page-specific styles → put them in a <style> block inside
     that template's .tpl file.
   • Mobile / responsive tweaks for a single page → same thing,
     local <style> block in the template.
   • Dedicated feature modules (sidebar menu, feed, post tile,
     etc.) → their own partial or dedicated stylesheet.

   This file is for reusable primitives + globally-shared
   components ONLY. If you're about to add a class that only one
   page will ever use, it does not belong here. Adding one-offs
   here is how this file grew to 2,944 lines in the first place.
   =============================================================
*/

/* Poppins @import removed (PERF): it serialized a 3-hop font chain behind this
   65KB stylesheet. The font now loads via preconnect + <link> in the page heads. */

/* ----------------------------------------------------------
   1. DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Brand Colors */
  --tc-brand:        #e8a66d;
  --tc-brand-dark:   #d4904f;
  --tc-brand-light:  #f5d4b3;
  --tc-brand-subtle: #fdf3ea;

  /* Neutrals */
  --tc-bg:           #f7f8f9;
  --tc-surface:      #ffffff;
  --tc-surface-alt:  #f1f2f4;
  --tc-border:       #e2e4e8;
  --tc-border-light: #eff0f2;
  --tc-text:         #1a1a2e;
  --tc-text-muted:   #6b7280;
  --tc-text-light:   #9ca3af;

  /* Status */
  --tc-success:      #22c55e;
  --tc-warning:      #f59e0b;
  --tc-danger:       #ef4444;
  --tc-info:         #3b82f6;

  /* Shadows */
  --tc-shadow-sm:    0 1px 2px rgba(0,0,0,0.05);
  --tc-shadow:       0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --tc-shadow-md:    0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --tc-shadow-lg:    0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);

  /* Radius */
  --tc-radius-sm:    6px;
  --tc-radius:       10px;
  --tc-radius-lg:    16px;
  --tc-radius-xl:    24px;
  --tc-radius-full:  9999px;

  /* Spacing */
  --tc-space-xs:     4px;
  --tc-space-sm:     8px;
  --tc-space-md:     16px;
  --tc-space-lg:     24px;
  --tc-space-xl:     32px;
  --tc-space-2xl:    48px;

  /* Typography */
  --tc-font:         'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --tc-font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}


/* ----------------------------------------------------------
   2. BASE OVERRIDES (tc-scoped only — framework overrides live in head <style>)
   ---------------------------------------------------------- */

/* Site-wide Poppins. Neither main.css nor Bootstrap set a body font,
   so without this rule body defaults to the browser default (Times New
   Roman on most installs). var(--tc-font) is 'Poppins' (see Typography
   tokens above), so this is the one rule that turns the platform on. */
html, body {
  font-family: var(--tc-font);
}
/* Bootstrap 3 sets its own font-family on form controls, buttons, dropdowns,
   alerts, panels, navs, and modals — overriding our body inheritance. Force
   them all to inherit so Poppins wins everywhere without modifying Bootstrap. */
input, select, textarea, button,
.btn, .form-control,
.dropdown-menu, .alert, .nav, .panel, .modal,
.tooltip, .popover, .label, .badge {
  font-family: inherit;
}

.tc-page {
  font-family: var(--tc-font);
  color: var(--tc-text);
  background: #f7f8f9;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 0px 0px 20px 20px !important;
  padding: 20px 0px 20px 0px;
}

/* Tribefire modern + any other --feed surface keeps the soft gray
   on every breakpoint. tribalry.css ships an `!important` override
   that zeros this out on mobile (`background: transparent`); this
   rule wins by being declared later AND using the same specificity
   with !important to neutralize it. */
.tc-page.tc-page--feed {
  background: #f7f8f9 !important;
}

.tc-page h1, .tc-page h2, .tc-page h3, .tc-page h4, .tc-page h5 {
  font-family: var(--tc-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--tc-text);
}

.tc-page h1 { font-size: 20px; line-height: 1.2; letter-spacing: -0.5px; margin-bottom: 20px; }
.tc-page h2 { font-size: 22px; line-height: 1.3; }
.tc-page h3 { font-size: 18px; line-height: 1.4; }
.tc-page h4 { font-size: 16px; line-height: 1.4; }

.tc-page p {
  color: #333;
  line-height: 1.6;
}

/* All /hut routes share a soft-grey page surface. The hut controller
   sets html.htmlclass to "hut <subroute>" (e.g. "hut profile",
   "hut bank") with one outlier of "invitations" for /hut/invitations.
   This rule lets all sub-routes pick up the bg without per-template
   inline styles. */
html.hut #page,
html.invitations #page {
  background-color: #f7f8f9;
}


/* ----------------------------------------------------------
   3. CARDS
   ---------------------------------------------------------- */
.tc-card {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-sm);
  padding: var(--tc-space-lg);
}

.tc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tc-space-lg);
  padding-bottom: var(--tc-space-md);
  border-bottom: 1px solid var(--tc-border-light);
}

.tc-card-header h3,
.tc-card-header h4 {
  margin: 0;
}


/* ----------------------------------------------------------
   4. FORMS
   ---------------------------------------------------------- */
.tc-form-group {
  /* Tightened from --tc-space-lg to a flat 15px across the board (operator):
     content-page forms were spacing out too much between groups. */
  margin-bottom: 15px;
}

.tc-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: gray;
  margin-bottom: var(--tc-space-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tc-input,
.tc-select,
.tc-textarea,
select.tc-input,
textarea.tc-input {
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-family: var(--tc-font);
  color: var(--tc-text);
  background: var(--tc-surface);
  border: 1.5px solid var(--tc-border);
  border-radius: 5px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
}

.tc-input:focus,
.tc-select:focus,
.tc-textarea:focus,
select.tc-input:focus,
textarea.tc-input:focus {
  border-color: var(--tc-brand);
  box-shadow: 0 0 0 3px var(--tc-brand-subtle);
}

.tc-input::placeholder,
textarea.tc-input::placeholder {
  color: var(--tc-text-light);
  font-weight: 300;
}

textarea.tc-input,
.tc-textarea {
  resize: vertical;
  min-height: 100px;
}


/* ----------------------------------------------------------
   4b. CHECK ROWS / TOGGLE SWITCHES
   ------------------------------------------------------------
   Reusable two-line settings row: bold label + muted description +
   modern iOS-style toggle. Markup:

     <label class="tc-check-row">
       <input type="checkbox" name="..." value="1" checked>
       <span class="tc-switch"></span>
       <div class="tc-check-text">
         <div class="tc-check-label">Title</div>
         <div class="tc-check-desc">Description.</div>
       </div>
     </label>

   The native <input> is hidden via clip (NOT display:none so the form
   still submits it) and the .tc-switch sibling provides the visual.
   ---------------------------------------------------------- */
.tc-check-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--tc-border-light);
  cursor: pointer;
  color: var(--tc-text);
  margin: 0;
}
.tc-check-row:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

.tc-check-row input[type="checkbox"],
input[type="checkbox"].tc-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tc-switch {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 20px;
  background-color: #d1d5db;
  border-radius: 999px;
  margin-top: 1px;
  cursor: pointer;
  transition: background-color 0.18s ease;
}
.tc-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease;
}
.tc-check-row input[type="checkbox"]:checked ~ .tc-switch,
input[type="checkbox"].tc-toggle-input:checked + .tc-switch,
input[type="checkbox"].tc-toggle-input:checked ~ .tc-switch {
  background-color: var(--tc-brand);
}
.tc-check-row input[type="checkbox"]:checked ~ .tc-switch::after,
input[type="checkbox"].tc-toggle-input:checked + .tc-switch::after,
input[type="checkbox"].tc-toggle-input:checked ~ .tc-switch::after {
  transform: translateX(14px);
}
.tc-check-row input[type="checkbox"]:focus-visible ~ .tc-switch,
input[type="checkbox"].tc-toggle-input:focus-visible + .tc-switch,
input[type="checkbox"].tc-toggle-input:focus-visible ~ .tc-switch {
  box-shadow: 0 0 0 3px var(--tc-brand-subtle);
}
.tc-check-row input[type="checkbox"]:disabled ~ .tc-switch,
input[type="checkbox"].tc-toggle-input:disabled + .tc-switch,
input[type="checkbox"].tc-toggle-input:disabled ~ .tc-switch {
  opacity: 0.5;
  cursor: not-allowed;
}

.tc-check-text {
  flex: 1;
}
.tc-check-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--tc-text);
  line-height: 1.3;
  letter-spacing: -0.4px;
}
.tc-check-desc {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 400;
  color: var(--tc-text-muted);
  line-height: 1.5;
  max-width: 560px;
}
.tc-check-desc a {
  color: var(--tc-brand-dark);
}


/* ----------------------------------------------------------
   4c. POST MEATBALL MENU
   ------------------------------------------------------------
   Markup: views/templates/components/posts/postMeatball.tpl
   Behavior: /js/tcpostmeatball.js
   Anchored top-right inside .tc-media-card-media (already relative).
   ---------------------------------------------------------- */
.tc-post-meatball {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 5;
}
.tc-post-meatball-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.tc-post-meatball-btn:hover,
.tc-post-meatball-btn:focus-visible {
  background: rgba(0, 0, 0, 0.78);
  outline: none;
}
/* On feed-card surfaces (Tribefire row + future white-card feeds) the
   dark image-tile treatment reads too heavy. Soften to a muted-gray
   ghost button — image-tile feeds (news/posts/stories) keep the dark
   variant above because the button sits on a photo. */
.tc-feed-card .tc-post-meatball-btn {
  background: transparent;
  color: var(--tc-text-muted);
}
.tc-feed-card .tc-post-meatball-btn:hover,
.tc-feed-card .tc-post-meatball-btn:focus-visible {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
}
.tc-post-meatball-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  min-width: 170px;
  padding: 4px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-light);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  display: none;
}
.tc-post-meatball.is-open .tc-post-meatball-menu {
  display: block;
}
.tc-post-meatball-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  text-align: left;
  font-family: var(--tc-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.2px;
  color: var(--tc-text);
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.10s ease;
}
.tc-post-meatball-item:hover,
.tc-post-meatball-item:focus-visible {
  background: var(--tc-surface-alt);
  outline: none;
}


/* ----------------------------------------------------------
   5. BUTTONS
   ---------------------------------------------------------- */
.tc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 15px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--tc-font);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  line-height: 1.4;
}

.tc-btn-primary {
  background: var(--tc-brand);
  color: #fff;
}
.tc-btn-primary:hover {
  background: var(--tc-brand-dark);
  color: #fff;
  transition: 100ms ease-in-out;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--tc-shadow-md);
}

.tc-btn-secondary {
  background: var(--tc-surface);
  color: var(--tc-text);
  border: 1.5px solid var(--tc-border);
}
.tc-btn-secondary:hover {
  background: var(--tc-surface-alt);
  border-color: var(--tc-text-light);
  text-decoration: none;
}

.tc-btn-ghost {
  background: transparent;
  color: var(--tc-text-muted);
}
.tc-btn-ghost:hover {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
  text-decoration: none;
}

/* Outlined secondary — transparent fill, dark text + dark border.
   For low-emphasis actions sitting next to a primary CTA. */
.tc-btn-outline {
  background: transparent;
  color: var(--tc-text);
  border: 1.5px solid var(--tc-text);
}
.tc-btn-outline:hover {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
  text-decoration: none;
}

.tc-btn-success {
  background: var(--tc-success);
  color: #fff;
}
.tc-btn-success:hover {
  background: #16a34a;
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--tc-shadow-md);
}

.tc-btn-danger {
  background: #fef2f2;
  color: var(--tc-danger);
  border: 1.5px solid #fecaca;
}
.tc-btn-danger:hover {
  background: var(--tc-danger);
  color: #fff;
  text-decoration: none;
}

.tc-btn-sm {
  height: auto;
  padding: 8px 10px;
  font-size: 13px;
}

.tc-btn-lg {
  height: auto;
  padding: 14px 32px;
  font-size: 16px;
}


/* ----------------------------------------------------------
   6. TABS (modern hut tabs replacement)
   ---------------------------------------------------------- */
.tc-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 !important;
  background: var(--tc-surface-alt);
  border-radius: 15px 15px 0px 0px;
  border-bottom: 1px solid #e8e8e8;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}



.tc-tab {
  flex: 1;
  padding: 10px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--tc-font);
  color: var(--tc-text-muted);
  text-decoration: none;
  border-radius: var(--tc-radius);
  white-space: nowrap;
  transition: all 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.tc-tab:hover {
  color: var(--tc-text);
  background: rgba(255,255,255,0.6);
  text-decoration: none;
}

.tc-tab.active,
li.active > .tc-tab,
li.active > .tc-tab:hover,
li.active > .tc-tab:focus {
  background: var(--tc-surface);
  color: var(--tc-text);
  font-weight: 600;
  box-shadow: var(--tc-shadow-sm);
  text-decoration: none;
}

/* Reset li styling inside tc-tabs */
.tc-tabs > li {
  list-style: none;
  flex: 1;
  display: flex;
}
.tc-tabs > li > .tc-tab {
  flex: 1;
}

/* Responsive stacking */
@media (max-width: 768px) {
  .tc-tabs {
    flex-wrap: wrap;
  }
  .tc-tab {
    flex: 0 0 auto;
    font-size: 13px;
    padding: 8px 12px;
  }

  .tc-tabs.tc-tabs-inner .tc-tab {
    width: 100%;
    text-align: left;
  }
}


/* ----------------------------------------------------------
   7. VERTICAL NAV (profile sidebar tabs)
   ---------------------------------------------------------- */
.tc-vnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style-type: none;
  padding: 0px;
}

.tc-vnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--tc-font);
  color: var(--tc-text-muted);
  text-decoration: none;
  border-radius: var(--tc-radius);
  transition: all 0.10s ease;
  cursor: pointer;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
}

.tc-vnav-item:hover {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
  text-decoration: none;
  transform: translateX(3px);
}

.tc-vnav-item.active {
  background: var(--tc-brand);
  color: #fff;
  font-weight: 400;
}

.tc-vnav-item.active:hover {
  background: var(--tc-brand-dark);
  color: #fff;
}

/* Bootstrap tab JS puts .active on <li>, mirror it to the vnav-item */
.tc-vnav li.active > .tc-vnav-item,
.tc-vnav li.active > .tc-vnav-item:hover,
.tc-vnav li.active > .tc-vnav-item:focus {
  background: var(--tc-brand);
  color: #fff;
  font-weight: 400;
  border: none;
  border-radius: var(--tc-radius);
  box-shadow: none;
  text-decoration: none;
}

/* Danger variant keeps red when active */
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger,
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger:hover,
.tc-vnav li.active > .tc-vnav-item.tc-vnav-danger:focus {
  background: var(--tc-danger);
  color: #fff;
}

.tc-vnav-item i {
  width: 20px;
  text-align: center;
  font-size: 15px;
}

/* Danger variant for Leave Tribe */
.tc-vnav-item.tc-vnav-danger {
  color: var(--tc-danger);
}
.tc-vnav-item.tc-vnav-danger:hover {
  background: #fef2f2;
}

/* Mobile: stay stacked vertically, full-width touch targets */
@media (max-width: 768px) {
  .tc-vnav {
    gap: 2px;
  }
  .tc-vnav-item {
    padding: 12px 14px;
    font-size: 14px;
    width: 100%;
  }
}


/* ----------------------------------------------------------
   8. AVATAR
   ---------------------------------------------------------- */
.tc-avatar {
  display: block;
  border-radius: var(--tc-radius-full);
  object-fit: cover;
  background-color: var(--tc-surface-alt);
  background-size: cover;
  background-position: center;
  border: 3px solid var(--tc-surface);
  box-shadow: var(--tc-shadow);
}

.tc-avatar-sm  { width: 40px;  height: 40px; }
.tc-avatar-md  { width: 80px;  height: 80px; }
.tc-avatar-lg  { width: 120px; height: 120px; }
.tc-avatar-xl  { width: 160px; height: 160px; }

.tc-avatar-upload {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tc-avatar-upload-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.5);
  color: #fff;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  font-weight: 600;
  border-radius: 0 0 var(--tc-radius-full) var(--tc-radius-full);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.tc-avatar-upload:hover .tc-avatar-upload-overlay {
  opacity: 1;
}


/* ----------------------------------------------------------
   9. BADGES & STATUS
   ---------------------------------------------------------- */
.tc-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--tc-radius-full);
  letter-spacing: 0.02em;
}

.tc-badge-brand  { background: var(--tc-brand-subtle); color: var(--tc-brand-dark); }
.tc-badge-success { background: #dcfce7; color: #15803d; }
.tc-badge-warning { background: #fef3c7; color: #92400e; }
.tc-badge-danger  { background: #fef2f2; color: #b91c1c; }
.tc-badge-info    { background: #dbeafe; color: #1e40af; }
.tc-badge-muted   { background: var(--tc-surface-alt); color: var(--tc-text-muted); }


/* ----------------------------------------------------------
   10. SECTION HEADER
   ---------------------------------------------------------- */
.tc-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--tc-space-lg);
}

.tc-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--tc-text);
  margin: 0;
  font-family: poppins;
  letter-spacing: -0.5px;
}

.tc-section-subtitle {
  font-size: 14px;
  color: var(--tc-text-muted);
  margin: 4px 0 0 0;
}


/* ----------------------------------------------------------
   11. PROFILE SPECIFIC
   ---------------------------------------------------------- */
.tc-profile-header {
  display: flex;
  align-items: center;
  gap: var(--tc-space-lg);
  padding: var(--tc-space-xl);
  border: 1px solid #f0f0f0;
  border-radius: var(--tc-radius-lg);
  margin-bottom: var(--tc-space-xl);
}

.tc-profile-info h2 {
  margin: 0 0 4px 0;
  font-size: 22px;
}

.tc-profile-info p {
  margin: 0;
  font-size: 14px;
}

.tc-profile-meta {
  display: flex;
  gap: var(--tc-space-lg);
  margin-top: var(--tc-space-sm);
  margin-bottom: var(--tc-space-md);
}

.tc-profile-meta-item {
  font-size: 13px;
  color: var(--tc-text-muted);
}

.tc-profile-meta-item i {
  margin-right: 4px;
  color: var(--tc-brand);
}

@media (max-width: 768px) {
  .tc-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--tc-space-lg);
    margin-left: 0;
    margin-right: 0;
    gap: var(--tc-space-md);
  }
  .tc-profile-header .tc-avatar-lg {
    width: 80px;
    height: 80px;
  }
  .tc-profile-meta {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tc-space-sm);
  }
}


/* ----------------------------------------------------------
   12. RATING / METER
   ---------------------------------------------------------- */
.tc-meter {
  display: flex;
  align-items: center;
  gap: var(--tc-space-md);
  margin-bottom: var(--tc-space-md);
}

.tc-meter-label {
  flex: 0 0 160px;
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
}

.tc-meter-bar {
  flex: 1;
  height: 8px;
  background: var(--tc-surface-alt);
  border-radius: var(--tc-radius-full);
  overflow: hidden;
}

.tc-meter-fill {
  height: 100%;
  background: var(--tc-brand);
  border-radius: var(--tc-radius-full);
  transition: width 0.6s ease;
}

.tc-meter-value {
  flex: 0 0 50px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--tc-brand-dark);
}


/* ----------------------------------------------------------
   13. EMPTY STATE
   ---------------------------------------------------------- */
.tc-empty {
  text-align: center;
  padding: var(--tc-space-2xl) var(--tc-space-lg);
  color: var(--tc-text-muted);
}

.tc-empty i {
  font-size: 48px;
  color: var(--tc-border);
  margin-bottom: var(--tc-space-md);
  display: block;
}

.tc-empty h4 {
  color: var(--tc-text);
  margin-bottom: var(--tc-space-sm);
}


/* ----------------------------------------------------------
   14. TABLE-BASED TOP TAB BAR
   Used by viewHutHeader.tpl which keeps a <table> structure.
   ---------------------------------------------------------- */
.tc-tabs-table {
  width: 100%;
  background: var(--tc-surface-alt);
  border-radius: 0;
  border-bottom: none;
  border-collapse: separate;
  border-spacing: 4px;
}
.tc-tabs-table td { padding: 2px; }
.tc-tabs-table .tc-tab { display: block; width: 100%; }

/* Scrollable wrapper for the top nav on mobile */
.tc-tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  scrollbar-width: none;
  border-radius: 10px 10px 0px 0px;
}
.tc-tabs-scroll::-webkit-scrollbar {
  display: none;
}
@media (max-width: 768px) {
  .tc-tabs-scroll .tc-tabs-table {
    min-width: max-content;
    width: auto;
  }
}


/* ----------------------------------------------------------
   15. TOGGLE
   ---------------------------------------------------------- */
.tc-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.tc-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tc-toggle__track {
  position: relative;
  width: 40px;
  height: 22px;
  background: var(--tc-border);
  border-radius: var(--tc-radius-full);
  transition: background 0.2s ease;
  flex-shrink: 0;
}

.tc-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: var(--tc-radius-full);
  box-shadow: var(--tc-shadow-sm);
  transition: transform 0.2s ease;
}

.tc-toggle input[type="checkbox"]:checked + .tc-toggle__track {
  background: var(--tc-success);
}

.tc-toggle input[type="checkbox"]:checked + .tc-toggle__track::after {
  transform: translateX(18px);
}

.tc-toggle__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--tc-text);
  font-family: var(--tc-font);
}


/* ----------------------------------------------------------
   16. SEGMENTED CONTROL
   Pill-style radio button group. Handles 2 or 3 options.
   Usage: wrap radios in .tc-seg, each option in .tc-seg__option
   ---------------------------------------------------------- */
.tc-seg {
  display: inline-flex;
  background: var(--tc-surface-alt);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-full);
  padding: 3px;
  gap: 2px;
}

.tc-seg__option {
  position: relative;
  cursor: pointer;
  margin: 0;
}

.tc-seg__option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.tc-seg__option span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  font-family: var(--tc-font);
  color: var(--tc-text-muted);
  border-radius: var(--tc-radius-full);
  white-space: nowrap;
  transition: all 0.15s ease;
  user-select: none;
}

.tc-seg__option:hover span {
  color: var(--tc-text);
}

.tc-seg__option input[type="radio"]:checked + span {
  background: var(--tc-surface);
  color: var(--tc-text);
  font-weight: 600;
  box-shadow: var(--tc-shadow-sm);
}

/* Visibility row layout */
.tc-visibility-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--tc-border-light);
  gap: 16px;
}

.tc-visibility-row:last-child {
  border-bottom: none;
}

.tc-visibility-label {
  font-size: 14px;
  font-family: var(--tc-font);
  color: var(--tc-text);
}

@media (max-width: 600px) {
  .tc-visibility-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* ----------------------------------------------------------
   17. TABLES
   Apply .tc-table to the <table> or a wrapper element.
   All descendant rows, cells, and headers style automatically.
   ---------------------------------------------------------- */
.tc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tc-font);
  font-size: 14px;
  color: var(--tc-text);
}

/* Header row */
.tc-table thead tr,
.tc-table > tr:first-child {
  background: var(--tc-surface-alt);
  border-bottom: 2px solid var(--tc-border);
}

.tc-table thead th,
.tc-table > tr:first-child > th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-text-muted);
  text-align: left;
  white-space: nowrap;
}

/* Body rows */
.tc-table tbody tr,
.tc-table > tr:not(:first-child) {
  border-bottom: 1px solid var(--tc-border-light);
  transition: background 0.12s ease;
}

.tc-table tbody tr:last-child,
.tc-table > tr:last-child {
  border-bottom: none;
}

.tc-table tbody tr:hover,
.tc-table > tr:not(:first-child):hover {
  background: var(--tc-surface-alt);
}

/* Cells */
.tc-table tbody td,
.tc-table > tr > td {
  padding: 10px 14px;
  vertical-align: middle;
  color: var(--tc-text);
}

/* Muted cell text variant */
.tc-table td.tc-table-muted {
  color: var(--tc-text-muted);
  font-size: 13px;
}

/* Wrapper variant: wraps a plain <table> inside */
.tc-table-wrap {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  box-shadow: var(--tc-shadow-sm);
}

.tc-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--tc-font);
  font-size: 14px;
  color: var(--tc-text);
}

.tc-table-wrap table thead tr {
  background: var(--tc-surface-alt);
  border-bottom: 2px solid var(--tc-border);
}

.tc-table-wrap table thead th {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tc-text-muted);
  text-align: left;
  white-space: nowrap;
}

.tc-table-wrap table thead th.text-center {
  text-align: center;
}

.tc-table-wrap table tbody tr {
  border-bottom: 1px solid var(--tc-border-light);
  transition: background 0.12s ease;
}

.tc-table-wrap table tbody tr:last-child {
  border-bottom: none;
}

.tc-table-wrap table tbody tr:hover {
  background: var(--tc-surface-alt);
}

.tc-table-wrap table tbody td {
  padding: 10px 14px;
  vertical-align: middle;
}

@media (max-width: 768px) {
  .tc-table thead,
  .tc-table-wrap table thead {
    display: none;
  }

  .tc-table tbody tr,
  .tc-table-wrap table tbody tr {
    display: block;
    border-bottom: 1px solid var(--tc-border);
    padding: var(--tc-space-sm) 0;
  }

  .tc-table tbody td,
  .tc-table-wrap table tbody td {
    display: flex;
    justify-content: space-between;
    padding: 6px 14px;
    font-size: 13px;
  }

  .tc-table tbody td[data-label]::before,
  .tc-table-wrap table tbody td[data-label]::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tc-text-muted);
    margin-right: var(--tc-space-md);
  }
}


/* ----------------------------------------------------------
   18. ICON BUTTON — small, circular action button
   ---------------------------------------------------------- */
.tc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--tc-radius-full);
  background: transparent;
  border: 1px solid transparent;
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  padding: 0;
}
.tc-icon-btn:hover {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
}
.tc-icon-btn svg { width: 18px; height: 18px; }
.tc-icon-btn img { height: 18px; width: auto; }


/* ----------------------------------------------------------
   19. BACK LINK — small "‹ Back" link with chevron/icon
   ---------------------------------------------------------- */
.tc-back-link {
  display: inline-flex;
  font-family: poppins;
  align-items: center;
  gap: var(--tc-space-xs);
  color: var(--tc-text-muted);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  left: 0px;
  background: #fff;
  margin-bottom: var(--tc-space-md);
  transition: color 0.15s ease;
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 10px;
}
.tc-back-link:hover,
.tc-back-link:focus {
  color: var(--tc-brand-dark);
  text-decoration: none;
}
.tc-back-link svg { width: 16px; height: 16px; }


/* ----------------------------------------------------------
   20. COIN INDICATOR — inline coin display
   For banners, use the .tc-alert primitive (section 22).
   ---------------------------------------------------------- */
.tc-coin-indicator {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--tc-text-muted); font-size: 13px; font-weight: 500;
}
.tc-coin-indicator img { width: 22px; height: 22px; }
.tc-coin-indicator strong { color: var(--tc-text); font-weight: 700; }


/* ---- Post body text (global) ---- */
.tc-post-text { font-size: 14px; }


/* ============================================================
   21. COMMENT SYSTEM — shared across all post-view pages
   Used by: comment.tpl (threaded comments), plus the compose bar,
   reply container, GIF picker, and attachment list inside it.
   ============================================================ */

/* ---- Comment item ---- */
.tc-comment {
  display: flex;
  /* NO `gap` here on purpose. Every comment is <div class="row comment
     tc-comment">, and Bootstrap 3's clearfix (`.row:before { display: table;
     content: " " }`) turns that pseudo-element into a real FLEX ITEM sitting
     before the avatar. A flex `gap` then applies between that phantom and the
     avatar too, pushing the whole row right while the thread connectors —
     positioned from .tc-comment's left edge — stay put. The avatar/text
     spacing lives on .tc-comment-main's margin-left instead, which only ever
     affects the one edge it is meant to. */
  /* One token for the row gap: the stem below reaches exactly this far
     so it lands on the reply container. Overridden once for mobile. */
  --tc-comment-gap: var(--tc-space-md);
  margin: 0 0 var(--tc-comment-gap) 0;
  align-items: flex-start;
  /* Positioning context for the thread connectors (the ::after stem on a
     parent, and the ::before elbow when this row is itself a reply). */
  position: relative;
}
.tc-comment-avatar { flex: 0 0 auto; }
.tc-comment-avatar .tc-avatar { cursor: pointer; }
/* Carries the avatar/text spacing that used to be .tc-comment's flex `gap`
   (see the note there — the gap also applied to Bootstrap's phantom clearfix
   item and shifted the row off the connector lines). */
.tc-comment-main { flex: 1; min-width: 0; margin-left: 10px; }
.tc-comment-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tc-space-sm);
  margin-bottom: 4px;
}
.tc-comment-identity {
  display: flex;
  align-items: baseline;
  gap: var(--tc-space-sm);
  min-width: 0;
  flex-wrap: wrap;
}
.tc-comment-author {
  font-weight: 600;
  color: var(--tc-text);
  font-size: 14px;
}
.tc-comment-date {
  font-size: 12px;
  color: var(--tc-text-muted);
}
/* Tribe-admin chip beside the author name (the Reddit "MOD" tag).

   Uses the same subtle-fill + dark-text pairing as .tc-badge-brand above
   rather than white-on-brand: --tc-brand is a light peach (#e8a66d), so white
   text on it lands around 2.2:1 and this chip is 10px uppercase — the size
   that can least afford weak contrast. The subtle pairing is both more legible
   and the file's established convention for badges. It is also quieter, which
   is the point: it should mark authority at a glance without out-shouting the
   comment, in a row this change exists to calm down. */
.tc-comment-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--tc-brand-subtle);
  color: var(--tc-brand-dark);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tc-comment-tools { flex: 0 0 auto; }
.tc-comment-tools .dropdown { display: inline-block; }

.tc-comment-body {
  /* Operator-specified: --tc-surface-alt (#f1f2f4) at ~51% alpha. Softer than
     the solid token so the bubbles recede behind the thread connectors instead
     of competing with them. Kept as a literal, not a token — this is a
     one-off for the comment bubble, not a new design-system surface. */
  background: #f1f2f482;
  border-radius: var(--tc-radius);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #111;
  word-wrap: break-word;
}
.tc-comment-body p:last-child { margin-bottom: 0; }
.tc-comment-body img {
  display: block;
  clear: both;
  max-width: 300px;
  height: auto;
  border-radius: 5px;
  margin: 8px 0 5px;
}

/* Sits directly under the comment bubble, so it reads as part of the same
   block rather than a detached toolbar. 6px of top margin plus the bubble's
   own padding made every comment look twice as tall as its content. */
.tc-comment-actions {
  margin-top: 2px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: var(--tc-space-sm);
}

.tc-comment-menu .tc-icon-btn { padding: 2px 6px; color: var(--tc-text-muted); }
.tc-comment-menu .tc-icon-btn:hover { color: var(--tc-text); }

.tc-comment-compose-inline textarea.tc-textarea { min-height: 70px; }
.tc-comment-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--tc-space-sm);
  margin-top: var(--tc-space-sm);
}

/* ---- Thread connectors ----

   Three pieces draw one continuous line from a parent's profile image, down,
   and curving into each of its replies' profile images:

     STEM   on the parent .tc-comment  — leaves the bottom of its avatar and
            runs down through the gap into the reply block.
     TRUNK  the border-left on .tc-comment-replies — one unbroken vertical for
            the whole sub-thread, so it spans nested branches for free.
     ELBOW  on each reply — drops out of the trunk and CURVES right into that
            reply's avatar, so replies hang off the line instead of merely
            sitting beside it.

   The elbow's own border-left is placed at exactly the trunk's x in the same
   colour, so trunk and elbow read as a single stroke with no seam.

   All of it is static CSS on pseudo-elements — deliberately not JS/SVG. The
   thread is rendered in lazy AJAX batches and re-rendered on Turbo restores,
   so anything that measures DOM positions would need re-running on every
   batch, every late-loading avatar that shifts layout, and every resize.
   Pseudo-elements just reflow.

   GEOMETRY — every number derives from the avatar column. To retune, change
   only the custom properties; the rules below are all expressed in them.
     parent avatar is 40px wide, so replies indent to its RIGHT EDGE:
     19 (--tc-thread-rail) + 21 (--tc-thread-run) = 40   <- replies align

   The indent deliberately EXCLUDES the avatar/text spacing (.tc-comment-main's
   margin-left). Including it pushed the whole nested block that much further
   right than the avatar it hangs off.

   --tc-thread-rail is ALSO the x of the whole vertical line, because the
   parent's 40px avatar is centred at 20px and the line at 19..20 sits on
   that centre. Stem, trunk and elbow all resolve to this same x — that is what
   makes them read as one stroke, so do not let them drift apart. (They did:
   the container used to carry a 2px border-left that counted toward the
   indent. Removing it left the elbow 2px left of the stem, and a line that
   cannot meet the segment above it is a line that looks broken.) */
.tc-comment-replies {
  --tc-thread-rail:   19px;  /* x of the line == parent avatar's centre */
  --tc-thread-run:    21px;  /* line -> child avatar edge (also the padding) */
  --tc-thread-weight:  1px;  /* stroke width of every segment */
  --tc-thread-color: var(--tc-border); /* one token for all three segments */
  --tc-thread-mid:    20px;  /* avatar half-height: where the curve lands */
  --tc-thread-radius: 12px;  /* how round the bend is */

  position: relative;
  margin-left: var(--tc-thread-rail);
  padding-left: var(--tc-thread-run);
}

/* The node wrapper (comment + its whole sub-thread) is what makes a
   correctly-terminating line possible. A line drawn on .tc-comment-replies
   itself spans the CONTAINER's full height, so it kept running past the last
   reply and down the side of that reply's own sub-thread — the dangling tail.
   Per-node, the last reply simply draws no trunk.

   flow-root stops .tc-comment's bottom margin collapsing out of the node,
   which would otherwise leave a gap in the trunk between consecutive nodes. */
.tc-comment-node { display: flow-root; }

/* Both selector families are required throughout: comment.tpl wraps every
   reply past the 5th in a hidden .tc-comments-overflow div (the "Show N more
   replies" control), so those nodes are grandchildren, not children. Matching
   only `>` would drop connectors from exactly the replies that button reveals. */
.tc-comment-replies > .tc-comment-node,
.tc-comment-replies > .tc-comments-overflow > .tc-comment-node {
  position: relative;
}

/* ELBOW — drops from the node's top and curves right into this reply's avatar.
   The comment is the node's first child, so the avatar's half-height is
   measured straight from the node's top with no extra offset. */
.tc-comment-replies > .tc-comment-node::before,
.tc-comment-replies > .tc-comments-overflow > .tc-comment-node::before {
  content: "";
  position: absolute;
  left:   calc(-1 * var(--tc-thread-run));
  top:    0;
  width:  var(--tc-thread-run);
  height: var(--tc-thread-mid);
  border-left:   var(--tc-thread-weight) solid var(--tc-thread-color);
  border-bottom: var(--tc-thread-weight) solid var(--tc-thread-color);
  border-bottom-left-radius: var(--tc-thread-radius);
  pointer-events: none;
}

/* TRUNK — carries the line from this reply's avatar down past its entire
   sub-thread to the NEXT reply. :not(:last-child) is the whole fix: the final
   reply draws none, so the line ends on its curve instead of continuing down.
   Node bottoms and tops are flush, so consecutive segments join seamlessly. */
.tc-comment-replies > .tc-comment-node:not(:last-child)::after,
.tc-comment-replies > .tc-comments-overflow > .tc-comment-node:not(:last-child)::after {
  content: "";
  position: absolute;
  left:   calc(-1 * var(--tc-thread-run));
  top:    var(--tc-thread-mid);
  bottom: 0;
  width:  var(--tc-thread-weight);
  background: var(--tc-thread-color);
  pointer-events: none;
}

/* STEM — carries the line from the parent's avatar down into its reply block,
   so a thread visibly begins AT the profile image. Without it the trunk starts
   in mid-air below the parent and the chain reads as disconnected.

   `left` comes from --tc-thread-rail so it can never drift from the elbow and
   trunk again; the fallback covers a top-level comment, which has no
   .tc-comment-replies ancestor to inherit from. `top` stays a literal because
   it is the avatar's HEIGHT (its bottom edge), which --tc-thread-mid only
   half-describes, and `bottom` matches .tc-comment's own margin so the stem
   lands exactly on the reply container's top edge where the elbow begins. */
.tc-comment:has(+ .tc-comment-replies)::after {
  content: "";
  /* MUST be block. Every comment is <div class="row comment tc-comment"> and
     Bootstrap 3's clearfix sets `.row:after { display: table; content: " " }`.
     `display` cascades independently of `position`, so without this line the
     stem inherits display:table — and an absolutely-positioned TABLE box sizes
     to its (empty) content instead of stretching between top and bottom. The
     stem collapsed to zero height and the thread looked disconnected, while
     the elbow (on .tc-comment-node, which carries no .row) rendered fine. */
  display: block;
  position: absolute;
  left: var(--tc-thread-rail, 19px);
  top: 40px;
  bottom: calc(-1 * var(--tc-comment-gap));
  width: var(--tc-thread-weight, 1px);
  background: var(--tc-thread-color, var(--tc-border));
  pointer-events: none;
}

/* Cap the indent after 3 nested levels so deep threads stay readable. Trunk
   and elbow STAY — they carry the relationship; only the indent collapses, so
   a deep branch stops marching off the right edge. The stem is dropped at that
   depth: with no indent left, the parent avatar no longer sits above the trunk
   and the stem would point at nothing. */
.tc-comment-replies .tc-comment-replies .tc-comment-replies .tc-comment-replies {
  --tc-thread-rail: 0px;
  --tc-thread-run: var(--tc-space-sm);
  --tc-thread-radius: 6px;
}
/* Descendant, not `>`: the parent whose stem we're dropping may itself sit
   inside a .tc-comments-overflow wrapper. Matching depth >= 3 is correct —
   every comment at or below that depth has a capped child container. */
.tc-comment-replies .tc-comment-replies .tc-comment-replies .tc-comment::after {
  display: none;
}

@media (max-width: 767px) {
  /* Re-derived for the 32px avatar: 15 (rail) + 17 (run) = 32. */
  .tc-comment-replies {
    --tc-thread-rail:   15px;
    --tc-thread-run:    17px;
    --tc-thread-mid:    16px;
    --tc-thread-radius: 10px;
  }
  .tc-comment:has(+ .tc-comment-replies)::after {
    left: var(--tc-thread-rail, 15px);
    top: 32px;
  }
  /* Tighter cap on mobile: stop indenting after 2 nested levels */
  .tc-comment-replies .tc-comment-replies .tc-comment-replies {
    --tc-thread-rail: 0px;
    --tc-thread-run: var(--tc-space-sm);
    --tc-thread-radius: 6px;
  }
  .tc-comment-replies .tc-comment-replies .tc-comment::after {
    display: none;
  }
}

/* Show-more overflow for long reply threads */
.tc-show-more-comments {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 12px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--tc-border, #e2e4e8);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tc-text, #1a1a2e);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.tc-show-more-comments:hover,
.tc-show-more-comments:focus {
  background-color: var(--tc-surface-alt, #f1f2f4);
  border-color: var(--tc-border-dark, #cbd0d8);
  outline: none;
}
.tc-comment-divider {
  display: none;
  height: 1px;
  background: var(--tc-border-light);
  margin: var(--tc-space-md) 0;
}

/* ---- Reply link + container ---- */
.tc-reply-link {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #7c7c7c;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tc-reply-link:hover { color: var(--tc-brand-dark); }

.tc-reply-container { position: relative; padding-top: 4px; }
.tc-reply-cancel {
  position: absolute; top: -6px; right: -6px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tc-surface-alt);
  border: 1px solid var(--tc-border-light);
  color: var(--tc-text-muted);
  cursor: pointer; font-size: 14px; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.tc-reply-cancel:hover { background: var(--tc-border-light); color: var(--tc-text); }

/* ---- Compose bar (textarea + send + tool row) ---- */
.tc-compose-wrap {
  display: flex; align-items: flex-end;
  gap: var(--tc-space-xs);
  background: #f7f8f9;
  border: 1px solid var(--tc-border);
  border-radius: 22px;
  padding: 6px 6px 6px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.tc-compose-wrap:focus-within { background: var(--tc-surface); border-color: var(--tc-brand); }
.tc-compose-input {
  flex: 1; border: 0; outline: 0; resize: none;
  background: transparent;
  font-family: var(--tc-font); font-size: 13px; line-height: 1.5;
  color: var(--tc-text);
  padding: 6px 0;
  max-height: 200px; overflow-y: auto;
}
.tc-compose-input::placeholder { color: var(--tc-text-muted); }
.tc-compose-send {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--tc-surface-alt);
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.tc-compose-send:hover { background: var(--tc-border-light); color: var(--tc-text); }
.tc-compose-send:disabled { opacity: 0.5; cursor: not-allowed; }
.tc-compose-send svg { transform: translateX(-1px); }
.tc-compose-input:not(:placeholder-shown) ~ .tc-compose-send,
.tc-compose-input:not(:placeholder-shown) ~ .tc-compose-send:hover {
  background: var(--tc-brand);
  color: #fff;
}

.tc-compose-tools {
  display: flex; align-items: center; gap: 2px;
  margin-top: var(--tc-space-xs); padding-left: 4px;
}
.tc-compose-tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: transparent;
  color: var(--tc-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.tc-compose-tool:hover { background: var(--tc-surface-alt); color: var(--tc-text); }

/* ---- GIF picker (inline popover) ---- */
.tc-gif-wrap { position: relative; display: inline-block; }
.tc-gif-picker {
  position: absolute;
  bottom: calc(100% + 6px); left: 0;
  z-index: 50;
  width: 340px; max-width: 90vw;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-light);
  border-radius: var(--tc-radius);
  box-shadow: var(--tc-shadow-md);
  padding: 8px;
}
.tc-gif-picker[hidden] { display: none; }
.tc-gif-search {
  width: 100%;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  padding: 6px 10px;
  font-size: 14px; outline: none;
  margin-bottom: 8px;
}
.tc-gif-search:focus { border-color: var(--tc-brand); }
.tc-gif-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 100px;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}
.tc-gif-thumb {
  width: 100%;
  height: 100%;
  min-width: 0;
  border-radius: 6px;
  cursor: pointer;
  border: 0;
  background: var(--tc-surface-alt);
  padding: 0;
  overflow: hidden;
  display: block;
}
.tc-gif-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tc-gif-thumb:hover { outline: 2px solid var(--tc-brand); }
.tc-gif-empty { grid-column: 1 / -1; text-align: center; color: var(--tc-text-muted); font-size: 13px; padding: 20px; }

/* ---- Attachment list ---- */
.tc-attachment-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 8px;
}
.tc-attachment-list[hidden] { display: none; }
.tc-attachment-item { position: relative; display: inline-block; max-width: 180px; }
.tc-attachment-item img {
  max-width: 180px; max-height: 140px;
  border-radius: 8px;
  border: 1px solid var(--tc-border-light);
  display: block;
}
.tc-attachment-item.is-video {
  padding: 8px 30px 8px 12px;
  background: var(--tc-surface-alt);
  border: 1px solid var(--tc-border-light);
  border-radius: 8px;
  font-size: 13px; color: var(--tc-text);
  max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-attachment-remove {
  position: absolute; top: -8px; right: -8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,0.75); color: #fff;
  border: 2px solid #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; font-size: 14px; line-height: 1;
}
.tc-attachment-remove:hover { background: rgba(0,0,0,0.9); }
.tc-attachment-item.is-pending {
  width: 140px; height: 100px;
  border-radius: 8px;
  border: 1px dashed var(--tc-border);
  background: var(--tc-surface-alt);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--tc-text-muted);
  position: relative;
}
.tc-attachment-spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--tc-border);
  border-top-color: var(--tc-brand);
  border-radius: 50%;
  animation: tc-spin 0.8s linear infinite;
}
@keyframes tc-spin { to { transform: rotate(360deg); } }

/* ---- Comment-system mobile tweaks ----
   The lone rule here used to be a third, conflicting `.tc-comment-replies`
   margin-left (16px at <=600px). It sat AFTER the 767px block at equal
   specificity, so it silently won on phones and broke the rail alignment the
   767px block sets up. Mobile indent is owned by the 767px block only. */
@media screen and (max-width: 767px) {
  /* Smaller comment avatars on phones — 40px next to 13px body copy ate the
     width the text needed. Scoped to .tc-comment-avatar so the global
     .tc-avatar-sm (used by rosters, drawers, pickers) is untouched. */
  .tc-comment-avatar .tc-avatar { width: 32px; height: 32px; }
  /* Tighter bubble + tighter stack: the defaults were tuned for the desktop
     column and read as sprawl in a 375px viewport. */
  .tc-comment { --tc-comment-gap: 10px; } /* margin + stem reach both follow */
  .tc-comment-body { padding: 8px 11px; }
}


/* ----------------------------------------------------------
   22. ALERT — inline banner for success / warning / danger / info
   ---------------------------------------------------------- */
.tc-alert {
  padding: var(--tc-space-md) var(--tc-space-lg);
  border-radius: var(--tc-radius);
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid transparent;
  margin-bottom: var(--tc-space-md);
  display: flex;
  align-items: flex-start;
  gap: var(--tc-space-sm);
}
.tc-alert--success { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tc-alert--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.tc-alert--danger  { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.tc-alert--info    { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.tc-alert--muted   { background: var(--tc-surface-alt); color: var(--tc-text-muted); border-color: var(--tc-border); }
.tc-alert .tc-alert-icon { flex: 0 0 auto; line-height: 1.5; }
.tc-alert .tc-alert-title { font-weight: 600; margin: 0 0 2px 0; }
.tc-alert .tc-alert-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: inherit;
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.tc-alert .tc-alert-close:hover { opacity: 1; }


/* ----------------------------------------------------------
   23. CHIP — selectable pill for filters, tags, multi-select values
   Distinct from .tc-badge (which is a status tag). Chips are
   user-facing, dismissible, and often interactive.
   ---------------------------------------------------------- */
.tc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tc-text);
  background: var(--tc-surface-alt);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-full);
  line-height: 1.2;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.tc-chip:hover { border-color: var(--tc-text-light); background: var(--tc-surface); }
.tc-chip:empty { display: none; }

.tc-chip--brand  { background: var(--tc-brand-subtle); color: var(--tc-brand-dark); border-color: var(--tc-brand-light); }
.tc-chip--solid  { background: var(--tc-text); color: #fff; border-color: var(--tc-text); }
.tc-chip--outline { background: transparent; border-color: var(--tc-border); }
.tc-chip--sm     { padding: 3px 8px; font-size: 11px; }
.tc-chip--lg     { padding: 7px 14px; font-size: 13px; }

/* Interactive / active chip (filter selected) */
.tc-chip.is-active {
  background: var(--tc-brand);
  color: #fff;
  border-color: var(--tc-brand);
}
.tc-chip.is-active:hover { background: var(--tc-brand-dark); border-color: var(--tc-brand-dark); }

/* Dismiss button inside a chip */
.tc-chip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  padding: 0;
  margin: 0 -4px 0 2px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.tc-chip-dismiss:hover { opacity: 1; }


/* ----------------------------------------------------------
   24. DROPDOWN — re-skins Bootstrap's dropdown plumbing
   Apply to any element. Bootstrap's JS `data-toggle="dropdown"`
   still handles open/close state; these rules handle visuals only.
   ---------------------------------------------------------- */
.tc-dropdown {
  position: relative;
  display: inline-block;
}
.tc-dropdown-menu {
  position: absolute;
  min-width: 180px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  padding: 6px 0;
  margin-top: 4px;
  list-style: none;
  z-index: 100;
}
.tc-dropdown-menu--right { right: 0; left: auto; }
.tc-dropdown-menu > li { list-style: none; margin: 0; padding: 0; }
.tc-dropdown-item {
  display: block;
  padding: 8px 14px;
  color: var(--tc-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
.tc-dropdown-item:hover,
.tc-dropdown-item:focus {
  background: var(--tc-surface-alt);
  color: var(--tc-text);
  text-decoration: none;
  outline: none;
}
.tc-dropdown-item.is-active,
.tc-dropdown-item.active {
  background: var(--tc-brand-subtle);
  color: var(--tc-brand-dark);
  font-weight: 600;
}
.tc-dropdown-item--danger { color: var(--tc-danger); }
.tc-dropdown-item--danger:hover { background: #fef2f2; color: #b91c1c; }

.tc-dropdown-divider {
  height: 1px;
  background: var(--tc-border-light);
  margin: 6px 0;
}
.tc-dropdown-header {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tc-text-muted);
}


/* ----------------------------------------------------------
   25. MEDIA CARD — card with aspect-ratio media on top + body
   Shared shape used by post tiles, member cards, feed cards.
   Compose: <a class="tc-media-card"> <div class="tc-media-card-media"></div>
            <div class="tc-media-card-body">...</div> </a>
   ---------------------------------------------------------- */
.tc-media-card {
  display: block;
  position: relative;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-light);
  border-radius: var(--tc-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
  color: var(--tc-text);
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tc-media-card:hover,
.tc-media-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.05);
  text-decoration: none !important;
}
.tc-media-card--flat {
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.tc-media-card--flat:hover { border-color: var(--tc-text-light); transform: none; box-shadow: none; }

.tc-media-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--tc-surface-alt) center/cover no-repeat;
  overflow: hidden;
}
/* Fill image for the tile (replaces the old inline background-image so it can be
   lazy-loaded + srcset-sized). Sits behind the gradient foot + badges, which are
   positioned later in the DOM. Container keeps its aspect-ratio, so no layout shift. */
.tc-media-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}
.tc-media-card-media--square { aspect-ratio: 1 / 1; }
.tc-media-card-media--wide   { aspect-ratio: 16 / 9; }
.tc-media-card-media--hero   { aspect-ratio: 32 / 10; }
@supports not (aspect-ratio: 4 / 3) {
  .tc-media-card-media              { height: 0; padding-bottom: 75%; }
  .tc-media-card-media--square      { height: 0; padding-bottom: 100%; }
  .tc-media-card-media--wide        { height: 0; padding-bottom: 56.25%; }
  .tc-media-card-media--hero        { height: 0; padding-bottom: 31.25%; }
}
.tc-media-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tc-media-card-body {
  padding: var(--tc-space-md) var(--tc-space-md) var(--tc-space-md);
}
.tc-media-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--tc-text);
  margin: 0 0 4px 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-media-card-meta {
  font-size: 12px;
  color: var(--tc-text-muted);
  line-height: 1.3;
}


/* ----------------------------------------------------------
   26. INPUT GROUP — input with trailing button/action
   Two flavors:
     --joined   : input + button share the pill, flush borders
     --floating : button floats absolutely inside a rounded input
   ---------------------------------------------------------- */
.tc-input-group {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
}
.tc-input-group > .tc-input,
.tc-input-group > .tc-select { flex: 1; min-width: 0; }

/* Joined variant — input and button sit side by side with flush edges */
.tc-input-group--joined > .tc-input,
.tc-input-group--joined > .tc-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.tc-input-group--joined > .tc-btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  flex-shrink: 0;
}

/* Floating variant — pill-shaped input with absolute-positioned action button inside */
.tc-input-group--floating { align-items: center; }
.tc-input-group--floating > .tc-input {
  padding-right: 44px;
  border-radius: var(--tc-radius-full);
}
.tc-input-group-action {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: var(--tc-text-muted);
  border-radius: var(--tc-radius-full);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color 0.15s ease, background 0.15s ease;
}
.tc-input-group-action:hover { color: var(--tc-brand); background: var(--tc-surface-alt); }
.tc-input-group-action svg { width: 18px; height: 18px; }

/* Clear / secondary action sits left of the main action */
.tc-input-group-clear {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tc-text-light);
  font-size: 1.25rem;
  text-decoration: none !important;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.tc-input-group-clear:hover { color: var(--tc-text); }


/* ============================================================
   27. UTILITIES
   One-off helper classes and global behaviors. Apply to any
   element as a modifier. Anything that isn't a standalone
   component belongs here.

     27.1 Focus reset (kill browser default outlines globally)
     27.2 Layout helpers (flex, alignment, gap)
     27.3 Spacing (margin / padding)
     27.4 Animations (keyframes + entrance classes)
     27.5 Hover lifts (opt-in shadow + translate)
     27.6 Divider (<hr> replacement)
     27.7 Responsive spacing (mobile-first overrides, max-width 768px)
   ============================================================ */

/* ---- 27.1 Focus reset ------------------------------------- */
/* Kill browser default focus outlines. Components that want a
   focus ring draw their own via :focus-visible (search the file
   for "focus-visible" to see / add one). */
a:focus, a:focus-visible,
button:focus, button:focus-visible,
input:focus, input:focus-visible,
select:focus, select:focus-visible,
textarea:focus, textarea:focus-visible,
[tabindex]:focus, [tabindex]:focus-visible,
.tc-btn:focus, .tc-btn:focus-visible,
.tc-icon-btn:focus, .tc-icon-btn:focus-visible,
.tc-back-link:focus, .tc-back-link:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ---- 27.2 Layout helpers ---------------------------------- */
.tc-flex             { display: flex; }
.tc-flex-col         { flex-direction: column; }
.tc-items-center     { align-items: center; }
.tc-justify-between  { justify-content: space-between; }
.tc-text-center      { text-align: center; }
.tc-gap-sm           { gap: var(--tc-space-sm); }
.tc-gap-md           { gap: var(--tc-space-md); }
.tc-gap-lg           { gap: var(--tc-space-lg); }
.tc-gap-xl           { gap: var(--tc-space-xl); }

/* ---- 27.3 Spacing ----------------------------------------- */
.tc-mt-sm            { margin-top: var(--tc-space-sm); }
.tc-mt-md            { margin-top: var(--tc-space-md); }
.tc-mt-lg            { margin-top: var(--tc-space-lg); }
.tc-mt-xl            { margin-top: var(--tc-space-xl); }
.tc-mb-md            { margin-bottom: var(--tc-space-md); }
.tc-mb-lg            { margin-bottom: var(--tc-space-lg); }
.tc-p-lg             { padding: var(--tc-space-lg); }
.tc-p-xl             { padding: var(--tc-space-xl); }

/* ---- 27.4 Animations -------------------------------------- */
@keyframes tc-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tc-slide-up {
  animation: tc-slide-up 0.3s ease-out both;
}

/* ---- 27.5 Hover lifts (opt-in shadow + translate) --------- */
.tc-hover-sm,
.tc-hover-md,
.tc-hover-lg {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.tc-hover-sm:hover { box-shadow: var(--tc-shadow); }
.tc-hover-md:hover {
  box-shadow: var(--tc-shadow-md);
  transform: translateY(-1px);
}
.tc-hover-lg:hover {
  box-shadow: var(--tc-shadow-lg);
  transform: translateY(-2px);
}

/* ---- 27.6 Divider ----------------------------------------- */
.tc-divider {
  border: none;
  border-top: 1px solid var(--tc-border-light);
  margin: var(--tc-space-lg) 0;
}

/* ---- 27.7 Responsive spacing (mobile-first overrides) ----- */
/* Pattern: .tc-{property}-mobile-{size}
   Sizes:   0, xs(4), sm(8), md(16), lg(24), xl(32), 2xl(48) */
@media (max-width: 768px) {

  /* Padding — all sides */
  .tc-p-mobile-0   { padding: 0 !important; }
  .tc-p-mobile-xs  { padding: var(--tc-space-xs) !important; }
  .tc-p-mobile-sm  { padding: var(--tc-space-sm) !important; }
  .tc-p-mobile-md  { padding: var(--tc-space-md) !important; }
  .tc-p-mobile-lg  { padding: var(--tc-space-lg) !important; }
  .tc-p-mobile-xl  { padding: var(--tc-space-xl) !important; }
  .tc-p-mobile-2xl { padding: var(--tc-space-2xl) !important; }

  /* Padding — horizontal */
  .tc-px-mobile-0   { padding-left: 0 !important; padding-right: 0 !important; }
  .tc-px-mobile-xs  { padding-left: var(--tc-space-xs) !important; padding-right: var(--tc-space-xs) !important; }
  .tc-px-mobile-sm  { padding-left: var(--tc-space-sm) !important; padding-right: var(--tc-space-sm) !important; }
  .tc-px-mobile-md  { padding-left: var(--tc-space-md) !important; padding-right: var(--tc-space-md) !important; }
  .tc-px-mobile-lg  { padding-left: var(--tc-space-lg) !important; padding-right: var(--tc-space-lg) !important; }
  .tc-px-mobile-xl  { padding-left: var(--tc-space-xl) !important; padding-right: var(--tc-space-xl) !important; }

  /* Padding — vertical */
  .tc-py-mobile-0   { padding-top: 0 !important; padding-bottom: 0 !important; }
  .tc-py-mobile-xs  { padding-top: var(--tc-space-xs) !important; padding-bottom: var(--tc-space-xs) !important; }
  .tc-py-mobile-sm  { padding-top: var(--tc-space-sm) !important; padding-bottom: var(--tc-space-sm) !important; }
  .tc-py-mobile-md  { padding-top: var(--tc-space-md) !important; padding-bottom: var(--tc-space-md) !important; }
  .tc-py-mobile-lg  { padding-top: var(--tc-space-lg) !important; padding-bottom: var(--tc-space-lg) !important; }
  .tc-py-mobile-xl  { padding-top: var(--tc-space-xl) !important; padding-bottom: var(--tc-space-xl) !important; }

  /* Padding — individual sides */
  .tc-pt-mobile-0  { padding-top: 0 !important; }
  .tc-pt-mobile-sm { padding-top: var(--tc-space-sm) !important; }
  .tc-pt-mobile-md { padding-top: var(--tc-space-md) !important; }
  .tc-pt-mobile-lg { padding-top: var(--tc-space-lg) !important; }

  .tc-pb-mobile-0  { padding-bottom: 0 !important; }
  .tc-pb-mobile-sm { padding-bottom: var(--tc-space-sm) !important; }
  .tc-pb-mobile-md { padding-bottom: var(--tc-space-md) !important; }
  .tc-pb-mobile-lg { padding-bottom: var(--tc-space-lg) !important; }

  .tc-pl-mobile-0  { padding-left: 0 !important; }
  .tc-pl-mobile-sm { padding-left: var(--tc-space-sm) !important; }
  .tc-pl-mobile-md { padding-left: var(--tc-space-md) !important; }

  .tc-pr-mobile-0  { padding-right: 0 !important; }
  .tc-pr-mobile-sm { padding-right: var(--tc-space-sm) !important; }
  .tc-pr-mobile-md { padding-right: var(--tc-space-md) !important; }

  /* Margin — all sides */
  .tc-m-mobile-0   { margin: 0 !important; }
  .tc-m-mobile-sm  { margin: var(--tc-space-sm) !important; }
  .tc-m-mobile-md  { margin: var(--tc-space-md) !important; }
  .tc-m-mobile-lg  { margin: var(--tc-space-lg) !important; }

  /* Margin — horizontal */
  .tc-mx-mobile-0    { margin-left: 0 !important; margin-right: 0 !important; }
  .tc-mx-mobile-auto { margin-left: auto !important; margin-right: auto !important; }
  .tc-mx-mobile-sm   { margin-left: var(--tc-space-sm) !important; margin-right: var(--tc-space-sm) !important; }
  .tc-mx-mobile-md   { margin-left: var(--tc-space-md) !important; margin-right: var(--tc-space-md) !important; }

  /* Margin — vertical */
  .tc-my-mobile-0   { margin-top: 0 !important; margin-bottom: 0 !important; }
  .tc-my-mobile-sm  { margin-top: var(--tc-space-sm) !important; margin-bottom: var(--tc-space-sm) !important; }
  .tc-my-mobile-md  { margin-top: var(--tc-space-md) !important; margin-bottom: var(--tc-space-md) !important; }
  .tc-my-mobile-lg  { margin-top: var(--tc-space-lg) !important; margin-bottom: var(--tc-space-lg) !important; }

  /* Margin — individual sides */
  .tc-mt-mobile-0   { margin-top: 0 !important; }
  .tc-mt-mobile-xs  { margin-top: var(--tc-space-xs) !important; }
  .tc-mt-mobile-sm  { margin-top: var(--tc-space-sm) !important; }
  .tc-mt-mobile-md  { margin-top: var(--tc-space-md) !important; }
  .tc-mt-mobile-lg  { margin-top: var(--tc-space-lg) !important; }
  .tc-mt-mobile-xl  { margin-top: var(--tc-space-xl) !important; }

  .tc-mb-mobile-0   { margin-bottom: 0 !important; }
  .tc-mb-mobile-xs  { margin-bottom: var(--tc-space-xs) !important; }
  .tc-mb-mobile-sm  { margin-bottom: var(--tc-space-sm) !important; }
  .tc-mb-mobile-md  { margin-bottom: var(--tc-space-md) !important; }
  .tc-mb-mobile-lg  { margin-bottom: var(--tc-space-lg) !important; }
  .tc-mb-mobile-xl  { margin-bottom: var(--tc-space-xl) !important; }

  .tc-ml-mobile-0   { margin-left: 0 !important; }
  .tc-ml-mobile-sm  { margin-left: var(--tc-space-sm) !important; }
  .tc-ml-mobile-md  { margin-left: var(--tc-space-md) !important; }

  .tc-mr-mobile-0   { margin-right: 0 !important; }
  .tc-mr-mobile-sm  { margin-right: var(--tc-space-sm) !important; }
  .tc-mr-mobile-md  { margin-right: var(--tc-space-md) !important; }

  /* Mobile display */
  .tc-hide-mobile         { display: none !important; }
  .tc-block-mobile        { display: block !important; }
  .tc-flex-mobile         { display: flex !important; }
  .tc-flex-col-mobile     { flex-direction: column !important; }
  .tc-text-center-mobile  { text-align: center !important; }
  .tc-w-full-mobile       { width: 100% !important; }

  /* Mobile gap */
  .tc-gap-mobile-0   { gap: 0 !important; }
  .tc-gap-mobile-sm  { gap: var(--tc-space-sm) !important; }
  .tc-gap-mobile-md  { gap: var(--tc-space-md) !important; }

  /* Mobile font size */
  .tc-text-mobile-sm  { font-size: 13px !important; }
  .tc-text-mobile-md  { font-size: 15px !important; }
  .tc-text-mobile-lg  { font-size: 18px !important; }
}


/* Mobile menu lives in its own stylesheet: tribecity-modern_mobilemenu.css
   Loaded by views/templates/layouts/head.tpl. Kept separate so this file
   stays focused on reusable primitives + globally-shared components. */

/* ============================================================
   Coin-earn badge — reusable pill rendered by coinEarnBadge.tpl.
   Two variants:
     .tc-coin-badge--tile     pinned top-right of an image (post tile)
     .tc-coin-badge--inline   chip you can drop into any flex row
   Both share the same visual: gold-tinted glass with the tribe coin
   icon and the +N amount.
   ============================================================ */
.tc-coin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #5a3a0c;
  background: linear-gradient(135deg, #fff5d4 0%, #f6d076 100%);
  border: 1px solid rgba(184, 132, 26, 0.35);
  box-shadow: 0 2px 6px rgba(120, 70, 0, 0.18);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  pointer-events: none;
  user-select: none;
}

/* Scoped with the parent class (specificity 0,2,0) so it beats the grid tile's
   `.tc-media-card-media img { width:100%; height:100%; object-fit:cover }`
   (0,1,1) — otherwise the coin icon balloons to the full tile on grid views
   while staying correct in the feed. Keeps the pill identical everywhere. */
.tc-coin-badge .tc-coin-badge__icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.tc-coin-badge__amount {
  display: inline-block;
}

/* Tile variant — absolute-positioned over a tile image. The parent
   (.tc-media-card-media) is already a positioning context with
   overflow:hidden, so the badge clips cleanly to the rounded corners.
   Pinned top-LEFT — the meatball menu button (.tc-post-meatball) lives
   at top:10px / right:10px on the same tile and was visually occluding
   the badge before this swap. */
.tc-coin-badge--tile {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;       /* sits above the tile gradient overlay */
}

/* On NEW posts the "NEW" badge occupies the top-left corner; shift the
   coin pill down so the two don't overlap (mirrors the old reward badge
   behaviour in tcPostTile.styles.tpl). */
.tc-media-card.is-new .tc-coin-badge--tile {
  top: 50px;
}

/* Inline variant — drops cleanly into a flex meta row alongside
   like counts, time-ago, etc. */
.tc-coin-badge--inline {
  vertical-align: middle;
}

@media (max-width: 575px) {
  .tc-coin-badge {
    font-size: 12px;
    padding: 3px 8px 3px 4px;
  }
  .tc-coin-badge .tc-coin-badge__icon {
    width: 16px;
    height: 16px;
  }
}


/* ----------------------------------------------------------
   28. MODAL SKIN (appearance only)
   A thin tc-* look layered on STOCK Bootstrap 3 modals. It
   touches ONLY appearance — never display / position / flex /
   transform / transition on the modal, dialog, or backdrop —
   so Bootstrap's smooth stock open + close animation stays
   fully intact (that lifecycle is exactly what earlier
   overrides broke). Mechanics (z-index elevation) live in
   html/scss/_modals.scss. Per-modal structure (standardized
   back / continue buttons, condensed layouts) is done one
   modal at a time in the individual modal templates.
   ---------------------------------------------------------- */
.modal-content {
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-light);
  border-radius: var(--tc-radius-lg);
  box-shadow: var(--tc-shadow-lg);
  overflow: hidden; /* clip children to the rounded corners */
}

.modal-header {
  min-height: 0;
  padding: 17px var(--tc-space-lg);
  background: var(--tc-surface);
  color: var(--tc-text);
  border-bottom: 1px solid var(--tc-border-light);
}
.modal-header .modal-title {
  font-family: var(--tc-font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--tc-text);
}
/* Clean close (x) — appearance only; keeps Bootstrap's default float:right. */
.modal-header .close {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
  color: var(--tc-text-muted);
  opacity: 0.6;
  text-shadow: none;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.modal-header .close:hover,
.modal-header .close:focus {
  color: var(--tc-text);
  opacity: 1;
}
/* Legacy (not-yet-migrated) modals put text-white on their header title;
   keep it readable on the white skin until each modal is migrated. */
.modal-header .text-white { color: var(--tc-text) !important; }

.modal-body {
  padding: var(--tc-space-lg);
  color: var(--tc-text);
}

.modal-footer {
  padding: var(--tc-space-md) var(--tc-space-lg);
  border-top: 1px solid var(--tc-border-light);
}

/* ── Turbo instant-nav progress bar ─────────────────────────────────────────
   Turbo Drive's built-in top loading bar (shown when a visit exceeds the
   150ms delay set in tc-turbo-init.js). Branded to the tribe color with a
   soft glow so navigation always has the X-style "something's happening"
   affordance. */
.turbo-progress-bar {
  height: 3px;
  background: var(--tc-brand, #e8a66d);
  box-shadow: 0 0 8px var(--tc-brand, #e8a66d);
}

/* ── Skeleton loading primitives (Stage F) ──────────────────────────────────
   Shimmer placeholders painted in the FIRST byte while Turbo Frames hydrate
   widgets asynchronously. Reusable shapes; dimensions are set per-use so the
   hydrated widget swaps in without layout shift. */
@keyframes tc-skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.tc-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--tc-surface-alt, #f2f3f5);
  background-image: linear-gradient(90deg,
    rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 50%, rgba(255,255,255,0) 100%);
  background-size: 400px 100%;
  background-repeat: no-repeat;
  animation: tc-skeleton-shimmer 1.3s ease-in-out infinite;
  border-radius: var(--tc-radius-sm, 6px);
}
.tc-skeleton-line   { height: 12px; margin: 8px 0; }
.tc-skeleton-line--w60 { width: 60%; }
.tc-skeleton-line--w80 { width: 80%; }
.tc-skeleton-circle { border-radius: 50%; width: 36px; height: 36px; }
.tc-skeleton-thumb  { width: 44px; height: 44px; }
.tc-skeleton-block  { height: 72px; margin: 10px 0; }
/* Frame wrapper: keep skeletons inside the widget's own box. */
turbo-frame { display: block; }


/* ============================================================
   HUT SETTINGS PAGES — /hut/profile and /hut/account

   Layout per the operator's reference (2026-08-06): a GRAY page
   canvas with the page title sitting outside any card, an
   identity hero card, underline tabs, then white content cards
   floating on the gray. This replaced an earlier model where one
   white card encompassed everything (tribe-admin style).
   ============================================================ */

/* Gray canvas. The shell's own padding is released on phones (below) so the
   cards can run closer to the edges.

   Scoped with :has(.hut-page), NOT html.hut — `htmlclass` carries "hut" on
   /hut/bank, /hut/grow, /hut/calendar, /hut/news, /hut/events, /hut/directory
   and the bare /hut fallback, none of which were redesigned and none of which
   have a .hut-page wrapper. Keying on the class stripped their column padding
   and painted the gray canvas over the tribe background. adminLayout.tpl
   already uses this :has() idiom for the feed pages. */
.tc-shell-main:has(.hut-page) {
  padding-top: 0;
  background: var(--tc-bg);
}

.hut-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 0 44px;
}

/* ---------- Page heading (outside every card) ---------- */
.hut-page-title {
  margin: 0;
  font-size: 25px;
  font-weight: 600;
  font-family: var(--tc-font);
  color: var(--tc-text);
  letter-spacing: -0.5px;
}

.hut-page-sub {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--tc-text-muted);
  line-height: 1.5;
}

/* ---------- Identity hero ---------- */
.hut-hero {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 24px;
  background: var(--tc-surface);
  border: 1px solid var(--tc-border-light);
  border-radius: 12px;
}

.hut-hero-body { flex: 1; min-width: 0; }

.hut-hero-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  font-family: var(--tc-font);
  color: var(--tc-text);
  letter-spacing: -0.3px;
}

.hut-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 13px;
  padding-top: 13px;
  border-top: 1px solid var(--tc-border-light);
  font-size: 13px;
  color: var(--tc-text-muted);
}

.hut-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.hut-hero-meta i { font-size: 13px; opacity: 0.75; }

/* ---------- Underline tabs ---------- */
.hut-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--tc-border-light);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.hut-tabs::-webkit-scrollbar { display: none; }

.hut-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 15px;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--tc-font);
  color: var(--tc-text-muted);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.hut-tab i { font-size: 14px; opacity: 0.8; }

.hut-tab:hover,
.hut-tab:focus {
  color: var(--tc-text);
  text-decoration: none;
}

.hut-tab.active {
  color: var(--tc-brand);
  font-weight: 600;
  border-bottom-color: var(--tc-brand);
}

.hut-tab.active i { opacity: 1; }

/* ---------- Panes + content cards ---------- */
.hut-panes > .tab-pane { display: none; }

.hut-panes > .tab-pane.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hut-panes form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Content cards float on the gray canvas. */
.hut-page .tc-card {
  margin: 0;
  border-color: var(--tc-border-light);
  background-color: var(--tc-surface);
  border-radius: 12px;
}

/* Card header band — title pulled to the card's top + side edges with a
   full-bleed divider, blurbs dropped. Same treatment as the admin console. */
.hut-page .tc-section-header {
  display: block;
  margin: calc(-1 * var(--tc-space-lg)) calc(-1 * var(--tc-space-lg)) var(--tc-space-md);
  padding: 14px var(--tc-space-lg);
  border-bottom: 1px solid var(--tc-border-light);
}

.hut-page .tc-section-header .tc-section-title {
  margin: 0;
  font-size: 16px;
}

.hut-page .tc-section-header .tc-section-help,
.hut-page .tc-section-header .tc-section-subtitle {
  display: none;
}

/* Smaller field labels + tighter form groups, matching the admin console. */
.hut-page .tc-label {
  font-size: 11px;
  margin-bottom: 5px;
}

.hut-page .tc-form-group { margin-bottom: 12px; }

/* Cards slide up on load. `backwards`, never `both` — a lingering transform
   turns the card into the containing block for position:fixed descendants,
   which would anchor modals to the card instead of the viewport. */
@keyframes hutCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hut-page .tc-card {
  animation: hutCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

@media (prefers-reduced-motion: reduce) {
  .hut-page .tc-card { animation: none; }
}

/* ---------- Danger card (leave tribe / deactivate) ---------- */
.hut-danger-card { border-color: #fecaca !important; }
.hut-danger-card .tc-section-title { color: var(--tc-danger); }

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  /* .tc-shell-main's 24px side padding inset the whole page and ate usable
     width; the cards' own padding is the only gutter we want. Same :has()
     scoping as above — html.hut here stripped every gutter from /hut/bank,
     /hut/calendar and friends, running their content flush to the viewport. */
  .tc-shell-main:has(.hut-page) {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .hut-page {
    padding: 16px 12px 40px;
    gap: 14px;
  }

  .hut-page-title { font-size: 21px; }
  .hut-page-sub { font-size: 13px; }

  .hut-hero {
    gap: 16px;
    padding: 18px 16px;
  }

  .hut-hero-name { font-size: 17px; }

  /* Tabs stay a horizontal scroller on phones, but NOT sticky — they scroll
     away with the rest of the page (operator, 2026-08-06). */
  .hut-tabs {
    margin: 0 -12px;
    padding: 0 12px;
  }

  .hut-tab {
    padding: 10px 12px;
    font-size: 13.5px;
  }
}