/* ============================================================
   TenFour v2 — Design System (Warm + Teal)
   Bryckroad shared design system, re-pointed to TenFour's
   warm canvas + brand teal accent. See BRYCKROAD_DESIGN_SYSTEM.md.

   Colors are space-separated RGB triples. ALWAYS use slash alpha:
     rgb(var(--color-accent) / .4)      ✅
     rgba(var(--color-accent), .4)       ❌ silently drops the color
   ============================================================ */

:root {
  /* ── Surfaces (warm) ─────────────────────────────────────── */
  --color-canvas:         246 243 236;  /* app background — warm tan */
  --color-surface:        255 254 251;  /* cards, panels, sidebar — warm white */
  --color-surface-muted:  246 243 236;  /* sunken wells (equals canvas; see DS §9) */
  --color-surface-sunken: 239 234 224;  /* table headers, chips, section strips */
  --color-hover:          243 238 228;  /* gentle hover fill */
  --color-active:         233 226 212;  /* pressed fill */
  --color-selected:       228 240 237;  /* selected row / active nav (pale teal) */

  /* ── Text ────────────────────────────────────────────────── */
  --color-text:        32 33 36;
  --color-text-muted:  95 99 104;
  --color-text-subtle: 138 133 121;     /* warmed neutral */

  /* ── Lines ───────────────────────────────────────────────── */
  --color-border:        230 223 208;
  --color-border-subtle: 239 233 221;
  --color-border-strong: 216 205 184;

  /* ── Accent — brand teal. Used sparingly. ────────────────── */
  --color-accent:            47 143 134;   /* #2f8f86 */
  --color-accent-hover:      38 117 110;   /* #26756e */
  --color-accent-subtle:     228 240 237;  /* #e4f0ed */
  --color-accent-ink:        31 103 96;    /* #1f6760 — accent text on light */
  --color-accent-foreground: 255 254 251;  /* text/icon on a solid accent fill */

  /* ── Semantic states — base / subtle bg / ink text ───────── */
  --color-success: 30 142 62;   --color-success-subtle: 230 244 234; --color-success-ink: 19 115 51;
  --color-warning: 242 153 0;   --color-warning-subtle: 254 247 224; --color-warning-ink: 176 96 0;
  --color-danger:  217 48 37;   --color-danger-subtle:  252 232 230; --color-danger-ink:  197 34 31;
  --color-info:    26 115 232;  --color-info-subtle:    232 240 254; --color-info-ink:    23 100 204;

  /* ── Notification — amber (unread bar, likes) ────────────── */
  --color-notify-subtle: 253 243 218;  /* #fdf3da */
  --color-notify-ink:    138 90 0;     /* #8a5a00 */

  /* ── Radii ───────────────────────────────────────────────── */
  --radius-control: 12px;  /* buttons, inputs */
  --radius-card:    16px;  /* cards, panels */
  --radius-panel:   20px;  /* dialogs, sidebar, large surfaces */
  --radius-pill:    9999px;

  /* ── Shadows — soft, warm-tinted (#4a4136) ───────────────── */
  --shadow-ambient: 0 1px 2px 0 rgba(74,65,54,.08);
  --shadow-raised:  0 1px 3px 0 rgba(74,65,54,.12), 0 1px 2px -1px rgba(74,65,54,.08);
  --shadow-pop:     0 2px 6px 2px rgba(74,65,54,.12), 0 1px 2px 0 rgba(74,65,54,.10);
  --shadow-overlay: 0 8px 24px 0 rgba(74,65,54,.20);

  /* ── Motion ──────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 180ms;

  /* ── Theme-flippable values (restated in the dark block) ─── */
  --modal-backdrop: rgb(60 56 48 / .38);
  --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f6368' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* App container — scope the font + base canvas to TenFour's shell.
   Brand fonts match the rest of the Bryckroad suite (Worksite, Employee Portal):
   Epilogue for headings, Reddit Sans for body. Enqueue the Google Fonts CSS
   alongside this file. */
.tf-app {
  font-family: 'Reddit Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--color-text));
  background: rgb(var(--color-canvas));
}
.tf-app h1, .tf-app h2, .tf-app h3, .tf-app .tf-heading {
  font-family: 'Epilogue', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700; /* Epilogue Bold — lighter than ExtraBold for easier reading */
}
.tf-app { font-weight: 400; } /* Reddit Sans Regular — body */

/* ============================================================
   Dark mode (Warm + Teal) — one override block. DS §8.
   Activated by [data-theme="dark"] OR auto + OS preference.
   ============================================================ */
.tf-app[data-theme="dark"] {
  --color-canvas:         31 29 26;
  --color-surface:        42 39 35;
  --color-surface-muted:  36 34 30;
  --color-surface-sunken: 50 47 42;
  --color-hover:          54 51 45;
  --color-active:         62 59 52;
  --color-selected:       22 63 58;

  --color-text:        237 234 228;
  --color-text-muted:  171 166 156;
  --color-text-subtle: 138 132 121;

  --color-border:        62 59 52;
  --color-border-subtle: 54 51 45;
  --color-border-strong: 86 82 73;

  --color-accent:            93 202 165;   /* brightened teal for dark */
  --color-accent-hover:      159 225 203;
  --color-accent-subtle:     22 63 58;
  --color-accent-ink:        159 225 203;
  --color-accent-foreground: 18 30 27;

  --color-success: 129 201 149; --color-success-subtle: 30 60 38; --color-success-ink: 129 201 149;
  --color-warning: 252 184 87;  --color-warning-subtle: 72 50 12; --color-warning-ink: 252 184 87;
  --color-danger:  242 139 130; --color-danger-subtle:  72 28 28; --color-danger-ink:  242 139 130;
  --color-info:    138 180 248; --color-info-subtle:    30 53 91; --color-info-ink:    174 203 250;

  --color-notify-subtle: 64 50 18; --color-notify-ink: 252 184 87;

  --shadow-ambient: 0 1px 2px 0 rgba(0,0,0,.28);
  --shadow-raised:  0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.32);
  --shadow-pop:     0 4px 12px 0 rgba(0,0,0,.45), 0 2px 4px 0 rgba(0,0,0,.32);
  --shadow-overlay: 0 12px 32px 0 rgba(0,0,0,.6);

  --modal-backdrop: rgb(0 0 0 / .55);
  --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a6a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  .tf-app[data-theme="auto"] {
    /* Keep in sync with the [data-theme="dark"] block above (intentional
       duplication so an explicit user choice always wins over the OS). */
    --color-canvas: 31 29 26; --color-surface: 42 39 35; --color-surface-muted: 36 34 30;
    --color-surface-sunken: 50 47 42; --color-hover: 54 51 45; --color-active: 62 59 52;
    --color-selected: 22 63 58;
    --color-text: 237 234 228; --color-text-muted: 171 166 156; --color-text-subtle: 138 132 121;
    --color-border: 62 59 52; --color-border-subtle: 54 51 45; --color-border-strong: 86 82 73;
    --color-accent: 93 202 165; --color-accent-hover: 159 225 203; --color-accent-subtle: 22 63 58;
    --color-accent-ink: 159 225 203; --color-accent-foreground: 18 30 27;
    --color-success: 129 201 149; --color-success-subtle: 30 60 38; --color-success-ink: 129 201 149;
    --color-warning: 252 184 87; --color-warning-subtle: 72 50 12; --color-warning-ink: 252 184 87;
    --color-danger: 242 139 130; --color-danger-subtle: 72 28 28; --color-danger-ink: 242 139 130;
    --color-info: 138 180 248; --color-info-subtle: 30 53 91; --color-info-ink: 174 203 250;
    --color-notify-subtle: 64 50 18; --color-notify-ink: 252 184 87;
    --shadow-ambient: 0 1px 2px 0 rgba(0,0,0,.28);
    --shadow-raised: 0 1px 3px 0 rgba(0,0,0,.4), 0 1px 2px -1px rgba(0,0,0,.32);
    --shadow-pop: 0 4px 12px 0 rgba(0,0,0,.45), 0 2px 4px 0 rgba(0,0,0,.32);
    --shadow-overlay: 0 12px 32px 0 rgba(0,0,0,.6);
    --modal-backdrop: rgb(0 0 0 / .55);
    --chevron-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a1a6a0' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* ============================================================
   Recipe classes (Layer 3) — DS §3
   ============================================================ */

/* Surfaces */
.surface-card  { border-radius: var(--radius-card);  background: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.surface-panel { border-radius: var(--radius-panel); background: rgb(var(--color-surface)); box-shadow: var(--shadow-raised); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; font-weight: 500; font-family: inherit; border-radius: var(--radius-pill);
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast), color var(--dur-fast);
  height: 36px; padding: 0 16px; font-size: 14px;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgb(var(--color-accent) / .4); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:active { transform: scale(.98); }
.btn-sm { height: 28px; padding: 0 12px; font-size: 12px; }
.btn-lg { height: 40px; padding: 0 20px; }
.btn-primary { background: rgb(var(--color-accent)); color: rgb(var(--color-accent-foreground)); box-shadow: var(--shadow-ambient); }
.btn-primary:hover { background: rgb(var(--color-accent-hover)); box-shadow: var(--shadow-raised); }
.btn-soft    { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink)); }
.btn-soft:hover { background: rgb(var(--color-selected)); }
.btn-outline { background: rgb(var(--color-surface)); color: rgb(var(--color-text)); border: 1px solid rgb(var(--color-border)); }
.btn-outline:hover { background: rgb(var(--color-hover)); border-color: rgb(var(--color-border-strong)); }
.btn-ghost   { background: transparent; color: rgb(var(--color-text-muted)); }
.btn-ghost:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.btn-danger  { background: rgb(var(--color-danger)); color: rgb(var(--color-surface)); box-shadow: var(--shadow-ambient); }
.btn-danger:hover { filter: brightness(.95); }

/* Icon-only button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px; width: 32px; border: 0; cursor: pointer; background: transparent;
  border-radius: var(--radius-pill); color: rgb(var(--color-text-subtle));
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }

/* Chips / badges — combine with a tone */
.chip { display: inline-flex; align-items: center; gap: 4px; border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 500; }
.chip-default { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink)); }
.chip-success { background: rgb(var(--color-success-subtle)); color: rgb(var(--color-success-ink)); }
.chip-warning { background: rgb(var(--color-warning-subtle)); color: rgb(var(--color-warning-ink)); }
.chip-danger  { background: rgb(var(--color-danger-subtle));  color: rgb(var(--color-danger-ink)); }
.chip-muted   { background: rgb(var(--color-surface-sunken)); color: rgb(var(--color-text-muted)); }
.chip-outline { border: 1px solid rgb(var(--color-border)); color: rgb(var(--color-text-muted)); }

/* Form fields */
.field {
  display: flex; width: 100%; height: 36px; padding: 0 12px; font-size: 14px; font-family: inherit;
  color: rgb(var(--color-text)); background: rgb(var(--color-surface));
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control);
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.field[hidden] { display: none; }
.field::placeholder { color: rgb(var(--color-text-subtle)); }
.field:hover { border-color: rgb(var(--color-border-strong)); }
.field:focus { outline: none; border-color: rgb(var(--color-accent)); box-shadow: 0 0 0 2px rgb(var(--color-accent) / .3); }
textarea.field { height: auto; min-height: 80px; padding: 8px 12px; line-height: 1.6; resize: vertical; }
.field-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 500; color: rgb(var(--color-text-muted)); }

/* Navigation item */
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: var(--radius-pill); font-size: 14px; font-weight: 500;
  color: rgb(var(--color-text-muted)); text-decoration: none;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
.nav-item:hover { background: rgb(var(--color-hover)); color: rgb(var(--color-text)); }
.nav-item-active { background: rgb(var(--color-selected)); color: rgb(var(--color-accent-ink)); }

/* Clickable list rows */
.list-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; transition: background-color var(--dur-fast); }
.list-row:hover { background: rgb(var(--color-hover)); }

.section-title { font-size: 14px; font-weight: 600; color: rgb(var(--color-text)); }

/* ============================================================
   TenFour component layer — the comms-specific pieces designed
   in the v2 mockups. Built on the recipes above.
   ============================================================ */

/* App shell: floating sidebar + main on the canvas */
.tf-shell   { display: flex; gap: 8px; padding: 8px; min-height: 100vh; background: rgb(var(--color-canvas)); }
.tf-sidebar { width: 224px; flex-shrink: 0; display: flex; flex-direction: column;
              background: rgb(var(--color-surface)); border-radius: var(--radius-panel); box-shadow: var(--shadow-ambient); }
.tf-main    { flex: 1; min-width: 0; border-radius: var(--radius-panel); }

/* Avatar (initials circle). Background set inline per-user (deterministic palette). */
.tf-avatar { border-radius: 50%; display: flex; align-items: center; justify-content: center;
             font-weight: 500; color: #fff; flex-shrink: 0; width: 34px; height: 34px; font-size: 12px; }

/* Mention chip rendered inside comment text */
.tf-mention { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink));
              border-radius: var(--radius-pill); padding: 1px 7px; font-weight: 500; }

/* Comment bubble — unified work-thread layout (avatar-left) on ALL viewports.
   Decided 2026-06-15: one component for desktop + mobile. The author's own
   comments get a subtle teal tint (--own); everyone else's sit on the canvas.
   Authorship reads from avatar + name + color, not left/right alignment, so it
   scales to 3+ participants and suits rich content / attachments / pinned items. */
.tf-comment { display: flex; gap: 11px; }
.tf-bubble  { background: rgb(var(--color-canvas)); border-radius: var(--radius-control);
              padding: 10px 13px; font-size: .875rem; color: rgb(var(--color-text)); line-height: 1.55; }
.tf-bubble--own { background: rgb(var(--color-accent-subtle)); }

/* Attachment card */
.tf-attach { display: inline-flex; align-items: center; gap: 9px; max-width: 240px;
             background: rgb(var(--color-surface)); border: 1px solid rgb(var(--color-border));
             border-radius: var(--radius-control); padding: 7px 11px; }

/* Unread badge on project cards */
.tf-unread { background: rgb(var(--color-accent-subtle)); color: rgb(var(--color-accent-ink));
             border-radius: var(--radius-pill); padding: 2px 10px; font-size: 12px; font-weight: 500;
             white-space: nowrap; flex: none; }

/* Notification bar (unread comments / likes) */
.tf-notify-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px;
                 background: rgb(var(--color-notify-subtle)); color: rgb(var(--color-notify-ink));
                 border: 1px solid rgb(var(--color-notify-ink) / 0.3);
                 border-radius: var(--radius-card); padding: 11px 15px; font-size: 13px; font-weight: 500; }

/* Presence / typing indicator */
.tf-typing { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: rgb(var(--color-text-subtle)); }
.tf-presence-dot { width: 6px; height: 6px; border-radius: 50%; background: rgb(var(--color-success)); }

/* Composer (toolbar + editor + send) */
.tf-composer        { border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control); overflow: hidden; }
.tf-composer-toolbar{ display: flex; align-items: center; gap: 2px; padding: 6px 8px;
                      border-bottom: 1px solid rgb(var(--color-border-subtle)); background: rgb(var(--color-canvas)); }
.tf-composer-toolbar[hidden] { display: none; }

/* Project card (archive grid) */
.tf-project-card { background: rgb(var(--color-surface)); border-radius: var(--radius-card); box-shadow: var(--shadow-ambient);
                   padding: 15px 16px; display: flex; flex-direction: column; gap: 10px; cursor: pointer;
                   transition: box-shadow var(--dur-base), transform var(--dur-base); }
.tf-project-card:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.tf-project-card--unread { outline: 1.5px solid rgb(var(--color-accent)); outline-offset: -1px; }

/* Tab bar (project view) */
.tf-tab { border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500;
          color: rgb(var(--color-text-muted)); padding: 8px 4px; border-bottom: 2px solid transparent;
          display: inline-flex; align-items: center; gap: 6px; }
.tf-tab-active { color: rgb(var(--color-accent-ink)); border-bottom-color: rgb(var(--color-accent)); }

/* Mobile: collapse the sidebar below 768px (DS §5) */
@media (max-width: 767px) {
  .tf-sidebar { position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; transform: translateX(-100%);
                transition: transform var(--dur-base) var(--ease-standard); border-radius: 0 var(--radius-panel) var(--radius-panel) 0; }
  .tf-sidebar.is-open { transform: translateX(0); }
  .tf-shell { padding: 0; }
}