/* ════════════════════════════════════════════════════════════════
 * TwoNests — base + components
 * ════════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--text-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font-family: inherit; cursor: pointer; }

input, textarea, select {
  font-family: inherit;
  font-size: var(--text-base);
  color: var(--text-primary);
}

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--neutral-300); }

/* ─── Layout primitives ───────────────────────────────────────── */
.tn-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.tn-container {
  width: 100%;
  max-width: var(--content-default);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.tn-container--narrow { max-width: var(--content-narrow); }
.tn-container--wide   { max-width: var(--content-wide); }

.tn-stack > * + * { margin-top: var(--space-4); }
.tn-stack-sm > * + * { margin-top: var(--space-2); }
.tn-stack-lg > * + * { margin-top: var(--space-6); }

/* ─── Typography ──────────────────────────────────────────────── */
.tn-h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.tn-h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
}
.tn-h3 {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.tn-h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
}
.tn-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tn-text-secondary { color: var(--text-secondary); }
.tn-text-tertiary  { color: var(--text-tertiary); }
.tn-text-muted     { color: var(--text-muted); }
.tn-text-brand     { color: var(--text-brand); }
.tn-text-sm        { font-size: var(--text-sm); }
.tn-text-xs        { font-size: var(--text-xs); }

/* ─── Buttons ─────────────────────────────────────────────────── */
.tn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: transparent;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.2;
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
  min-height: 44px;
}
.tn-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.tn-btn:active:not(:disabled) { transform: scale(0.98); }
.tn-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

.tn-btn--primary {
  background: var(--brand-500);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-sm);
}
.tn-btn--primary:hover:not(:disabled) { background: var(--brand-600); box-shadow: var(--shadow-md); }
.tn-btn--primary:active:not(:disabled) { background: var(--brand-700); }

.tn-btn--secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.tn-btn--secondary:hover:not(:disabled) { background: var(--bg-muted); }

.tn-btn--ghost {
  background: transparent;
  color: var(--text-secondary);
}
.tn-btn--ghost:hover:not(:disabled) { background: var(--bg-muted); color: var(--text-primary); }

.tn-btn--danger {
  background: var(--danger);
  color: var(--text-on-brand);
}
.tn-btn--danger:hover:not(:disabled) { background: var(--rose-600); }

.tn-btn--lg { padding: 14px 26px; font-size: var(--text-md); min-height: 50px; border-radius: var(--radius-md); }
.tn-btn--sm { padding: 8px 14px; font-size: var(--text-sm); min-height: 36px; border-radius: var(--radius-sm); }
.tn-btn--block { display: flex; width: 100%; }

.tn-btn--google {
  background: var(--neutral-0);
  color: var(--text-primary);
  border-color: var(--border-strong);
  padding: 14px 22px;
  font-size: var(--text-md);
  min-height: 52px;
  box-shadow: var(--shadow-xs);
}
.tn-btn--google:hover:not(:disabled) { background: var(--neutral-25); box-shadow: var(--shadow-sm); }

/* ─── Cards ───────────────────────────────────────────────────── */
.tn-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
}
.tn-card--padded-lg { padding: var(--space-8); }
.tn-card--flat { box-shadow: none; }

/* ─── Form fields ─────────────────────────────────────────────── */
.tn-field { display: flex; flex-direction: column; gap: var(--space-2); }
.tn-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.tn-label .tn-req { color: var(--danger); margin-left: 2px; }
.tn-label .tn-opt {
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  margin-left: var(--space-1);
}
.tn-input,
.tn-textarea,
.tn-select {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out);
  min-height: 44px;
}
.tn-input:focus,
.tn-textarea:focus,
.tn-select:focus {
  outline: none;
  border-color: var(--brand-400);
  box-shadow: var(--ring-focus);
}
.tn-textarea {
  resize: vertical;
  min-height: 88px;
  line-height: var(--leading-normal);
}
.tn-input::placeholder,
.tn-textarea::placeholder { color: var(--text-muted); }

.tn-help { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ─── Pills / chips ───────────────────────────────────────────── */
.tn-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--bg-muted);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
}
.tn-pill--brand { background: var(--bg-brand-soft); color: var(--text-brand); }

/* ─── Status messages ─────────────────────────────────────────── */
.tn-alert {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.tn-alert--info    { background: #eff6ff; color: #1e40af; }
.tn-alert--success { background: #ecfdf5; color: #065f46; }
.tn-alert--warning { background: #fffbeb; color: #92400e; }
.tn-alert--error   { background: #fef2f2; color: #991b1b; }

/* ─── Divider ─────────────────────────────────────────────────── */
.tn-divider {
  height: 1px;
  background: var(--border-subtle);
  border: none;
  margin: var(--space-6) 0;
}

/* ─── Loading ─────────────────────────────────────────────────── */
.tn-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--neutral-200);
  border-top-color: var(--brand-500);
  border-radius: 50%;
  animation: tn-spin 700ms linear infinite;
}
@keyframes tn-spin { to { transform: rotate(360deg); } }

/* ─── Avatar ──────────────────────────────────────────────────── */
.tn-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-brand-soft);
  color: var(--text-brand);
  font-weight: var(--weight-bold);
  width: 40px;
  height: 40px;
  font-size: var(--text-sm);
  overflow: hidden;
  flex-shrink: 0;
}
.tn-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tn-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.tn-avatar--lg { width: 56px; height: 56px; font-size: var(--text-md); }

/* ─── Tile (home grid) ───────────────────────────────────────── */
.tn-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-out),
              box-shadow var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out);
  text-decoration: none;
  color: var(--text-primary);
}
.tn-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-300); text-decoration: none; }
.tn-tile:active { transform: translateY(0); }
.tn-tile-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-brand-soft);
  color: var(--text-brand);
}
.tn-tile-icon svg { width: 28px; height: 28px; }
.tn-tile-label { font-size: var(--text-sm); font-weight: var(--weight-bold); line-height: var(--leading-snug); }
.tn-tile-sub   { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: -4px; }

/* Tile colour variants */
.tn-tile--green  .tn-tile-icon { background: #ecfdf5; color: #065f46; }
.tn-tile--blue   .tn-tile-icon { background: #eff6ff; color: #1e40af; }
.tn-tile--purple .tn-tile-icon { background: #f5f3ff; color: #6d28d9; }
.tn-tile--amber  .tn-tile-icon { background: #fffbeb; color: #b45309; }
.tn-tile--rose   .tn-tile-icon { background: #fff1f2; color: #be123c; }
.tn-tile--teal   .tn-tile-icon { background: #f0fdfa; color: #0f766e; }
.tn-tile--indigo .tn-tile-icon { background: #eef2ff; color: #4338ca; }
.tn-tile--orange .tn-tile-icon { background: #fff7ed; color: #c2410c; }
.tn-tile--slate  .tn-tile-icon { background: #f1f5f9; color: #334155; }
.tn-tile--emerald .tn-tile-icon { background: #d1fae5; color: #047857; }

/* ─── Grid ────────────────────────────────────────────────────── */
.tn-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) {
  .tn-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
}
@media (min-width: 900px) {
  .tn-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ─── Header bar ──────────────────────────────────────────────── */
.tn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: calc(var(--safe-top) + var(--space-3)) var(--space-5) var(--space-3);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  min-height: var(--header-height);
}
.tn-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}
.tn-logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: inline-block;
  flex-shrink: 0;
  background: var(--brand-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 19 C6 13.5 9 10.5 12.5 10.5 C16 10.5 19 13.5 19 19'/%3E%3Cpath d='M13 22 C13 16.5 16 13.5 19.5 13.5 C23 13.5 26 16.5 26 22'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  font-size: 0;
  color: transparent;
  vertical-align: middle;
}

/* ─── Wizard / steps ──────────────────────────────────────────── */
.tn-stepper {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.tn-stepper-dot {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--neutral-200);
  transition: background var(--motion-base) var(--ease-out);
}
.tn-stepper-dot.is-done,
.tn-stepper-dot.is-active { background: var(--brand-500); }

/* ─── Child row (used in onboarding) ──────────────────────────── */
.tn-child-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.tn-child-row .tn-input { flex: 1; }
.tn-child-row .tn-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
}
.tn-child-row .tn-icon-btn:hover { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
.tn-child-row .tn-icon-btn svg { width: 18px; height: 18px; }

/* ─── Centered single-column layouts (login, onboarding) ──────── */
.tn-centered {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-5);
  min-height: calc(100vh - var(--header-height));
}

/* ─── Splash / hero panel ─────────────────────────────────────── */
.tn-hero {
  text-align: center;
  padding: var(--space-8) 0;
}
.tn-hero h1 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}
.tn-hero p {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  max-width: 480px;
  margin: 0 auto;
}

/* ─── Voice / mic button ──────────────────────────────────────── */
.tn-mic-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
}
.tn-mic-btn:hover:not(:disabled) {
  background: var(--bg-brand-soft);
  color: var(--text-brand);
  border-color: var(--brand-300);
}
.tn-mic-btn:disabled { opacity: 0.5; cursor: wait; }
.tn-mic-btn.is-recording {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
  animation: tn-pulse 1.2s ease-in-out infinite;
}
@keyframes tn-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.4); }
  50%      { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
}

/* Input + mic group */
.tn-input-group {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.tn-input-group > .tn-input,
.tn-input-group > .tn-textarea { flex: 1; }

/* ─── Selectable pill (kid selector, mood) ────────────────────── */
.tn-selectable {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 10px 16px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  user-select: none;
  min-height: 44px;
}
.tn-selectable:hover { border-color: var(--brand-300); }
.tn-selectable.is-on {
  background: var(--bg-brand-soft);
  border-color: var(--brand-500);
  color: var(--text-brand);
}
.tn-selectable--lg { padding: 12px 20px; font-size: var(--text-base); }

/* Mood button (icon + label stacked) */
.tn-mood {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 12px;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  min-height: 56px;
}
.tn-mood-emoji { font-size: 20px; line-height: 1; }
.tn-mood:hover { border-color: var(--brand-300); }
.tn-mood.is-on {
  background: var(--bg-brand-soft);
  border-color: var(--brand-500);
  color: var(--text-brand);
}

/* ─── Subnav / page header for inner pages ────────────────────── */
.tn-subhead {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
}
.tn-back-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: none;
  border: none;
  color: var(--text-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  padding: 8px 4px;
}
.tn-back-btn:hover { text-decoration: underline; }

/* ─── Section header ──────────────────────────────────────────── */
.tn-section-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  margin: var(--space-6) 0 var(--space-3);
}

/* ─── Log entry card ──────────────────────────────────────────── */
.tn-entry {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--neutral-300);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
.tn-entry:hover { box-shadow: var(--shadow-sm); }
.tn-entry--own { border-left-color: var(--brand-500); }
.tn-entry-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.tn-entry-date { font-weight: var(--weight-bold); }
.tn-entry-meta { font-size: var(--text-xs); color: var(--text-tertiary); }
.tn-entry-body { color: var(--text-secondary); line-height: var(--leading-normal); font-size: var(--text-sm); }
.tn-entry-body strong { color: var(--text-primary); }
.tn-entry-wins {
  margin-top: var(--space-2);
  background: #ecfdf5;
  color: #065f46;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.tn-entry-flag {
  margin-top: var(--space-2);
  background: #fffbeb;
  color: #92400e;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
}
.tn-entry-flag--urgent { background: #fef2f2; color: #991b1b; }

/* AI confirmation card (after voice dump) */
.tn-ai-confirm {
  background: linear-gradient(180deg, var(--brand-50) 0%, #ffffff 100%);
  border: 1.5px solid var(--brand-300);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
}
.tn-ai-transcript {
  font-style: italic;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  border-top: 1px dashed var(--brand-200);
  padding-top: var(--space-3);
  margin-top: var(--space-3);
}

/* ─── Calendar grid ───────────────────────────────────────────── */
.tn-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.tn-cal-month-label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}
.tn-cal-arrow {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
}
.tn-cal-arrow:hover { background: var(--bg-brand-soft); color: var(--text-brand); border-color: var(--brand-300); }

.tn-cal-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}
.tn-cal-dow-cell {
  text-align: center;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  padding: 6px 0;
}

.tn-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.tn-cal-day {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  padding: 6px;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.tn-cal-day:hover { border-color: var(--brand-300); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.tn-cal-day--other-month { opacity: 0.35; cursor: default; }
.tn-cal-day--other-month:hover { transform: none; box-shadow: none; border-color: var(--border-subtle); }
.tn-cal-day--today {
  border-color: var(--brand-500);
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.1);
}
/* Days using the default pattern (not explicitly set) — slightly muted */
.tn-cal-day--default {
  background-image: linear-gradient(to bottom, transparent 60%, rgba(255,255,255,0.55));
}
.tn-cal-day--default .tn-cal-day-label {
  font-weight: var(--weight-semibold);
  opacity: 0.75;
}
.tn-cal-day-num {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  line-height: 1;
}
.tn-cal-day-label {
  margin-top: auto;
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.tn-cal-day-note-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--amber-500);
  border: 1.5px solid var(--bg-surface);
  box-shadow: 0 0 0 1px var(--amber-400);
}

/* Flag indicator: top-right corner. Stacks below note dot if both present. */
.tn-cal-day-signal {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--neutral-400);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--bg-surface);
  font-size: 9px;
  line-height: 1;
}
.tn-cal-day-signal svg { width: 8px; height: 8px; }
.tn-cal-day-signal--urgent   { background: var(--rose-500); }
.tn-cal-day-signal--question { background: var(--blue-500); }
.tn-cal-day-signal--fyi      { background: var(--amber-500); }
.tn-cal-day-signal--logged   { background: var(--brand-400); }
/* When both signal and note dot are present, push note dot left */
.tn-cal-day-signal + .tn-cal-day-note-dot { right: 22px; }

/* Tag pip — icon in bottom-left corner of day cell showing category */
.tn-cal-day-tag {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 12px;
  line-height: 1;
  opacity: 0.85;
}

/* Custody background tints */
.tn-cal-day--p1     { background: #ecfdf5; }
.tn-cal-day--p1 .tn-cal-day-label { color: #047857; }
.tn-cal-day--p2     { background: #eff6ff; }
.tn-cal-day--p2 .tn-cal-day-label { color: #1e40af; }
.tn-cal-day--shared { background: #fffbeb; }
.tn-cal-day--shared .tn-cal-day-label { color: #92400e; }
.tn-cal-day--tbd    { background: var(--neutral-100); }
.tn-cal-day--tbd .tn-cal-day-label { color: var(--text-tertiary); }

.tn-cal-legend {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-top: var(--space-4);
}
.tn-cal-legend-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tn-cal-legend-swatch::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0.5;
}

/* ─── Modal ───────────────────────────────────────────────────── */
.tn-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 23, 0.55);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
  padding: 0;
  animation: tn-fade-in 200ms var(--ease-out);
}
@media (min-width: 600px) {
  .tn-modal-backdrop { align-items: center; padding: var(--space-4); }
}
.tn-modal {
  background: var(--bg-surface);
  border-radius: 20px 20px 0 0;
  width: 100%;
  max-width: 500px;
  padding: var(--space-6);
  padding-bottom: calc(var(--space-6) + var(--safe-bottom));
  max-height: 88vh;
  overflow-y: auto;
  animation: tn-slide-up 280ms var(--ease-out);
}
@media (min-width: 600px) {
  .tn-modal { border-radius: var(--radius-lg); }
}
.tn-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.tn-modal-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.tn-modal-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-muted);
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease-out);
}
.tn-modal-close:hover { background: var(--neutral-200); color: var(--text-primary); }
@keyframes tn-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tn-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ─── Photo gallery ───────────────────────────────────────────── */
.tn-photo-date-header {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  margin: var(--space-5) 0 var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}
.tn-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (min-width: 600px) {
  .tn-photo-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}
@media (min-width: 900px) {
  .tn-photo-grid { grid-template-columns: repeat(5, 1fr); }
}
.tn-photo-tile {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  padding: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: var(--bg-muted);
  transition: transform var(--motion-fast) var(--ease-out);
}
.tn-photo-tile:hover { transform: scale(1.02); }
.tn-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tn-photo-caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: white;
  font-size: 10px;
  padding: 14px 6px 4px;
  line-height: 1.3;
  text-align: left;
}

/* ─── Utility ─────────────────────────────────────────────────── */
.tn-hidden { display: none !important; }
.tn-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tn-flex { display: flex; }
.tn-flex-col { display: flex; flex-direction: column; }
.tn-items-center { align-items: center; }
.tn-justify-between { justify-content: space-between; }
.tn-gap-2 { gap: var(--space-2); }
.tn-gap-3 { gap: var(--space-3); }
.tn-gap-4 { gap: var(--space-4); }
.tn-mt-4 { margin-top: var(--space-4); }
.tn-mt-6 { margin-top: var(--space-6); }
.tn-mt-8 { margin-top: var(--space-8); }
.tn-text-center { text-align: center; }