/*
 * BASE STYLES FOR BENGOS PROJECT
 *
 * This CSS file provides:
 * - Responsive design for mobile, tablet, and desktop
 * - Mobile-first approach with progressive enhancement
 * - Bootstrap 5 integration and customizations
 * - Enhanced navigation with hamburger menu
 * - Bengos specific styling
 *
 * Author: Typing Speed Test App
 * Framework: Bootstrap 5 + Custom CSS
 * Mobile Breakpoints:
 *   - Small phones: 575.98px and below
 *   - Tablets: 767.98px and below
 *   - Small desktops: 991.98px and below
 */

/* ==========================================================================
   BASE LAYOUT & TYPOGRAPHY
   ========================================================================== */

body {
  min-height: 100vh;
  padding-top: 4.5rem;  /* Account for fixed navbar height */
  /* font-family / background / color come from tokens.css (loaded last) */
}

/* ==========================================================================
  BENGOS SPECIFIC STYLES
   ========================================================================== */

.constitution-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  border-left: 4px solid var(--brand);
}

.reference-text {
  font-family: 'Courier New', monospace;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Small hint shown above the passage when test is not running */
.type-hint{
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: 6px;
  opacity: 0;
  transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
  transform: translateY(-4px);
}
.type-hint.show{ opacity: 1; transform: translateY(0); }

#reference-text-container {
  font-size: 1.2rem;
  line-height: 1.8;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: clamp(240px, 40vh, 380px);
}

#reference-text {
  /* Preserve existing newlines and wrap only at word boundaries.
     Do not break words across lines; move the whole word to the next
     line instead. */
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

/* Passage display used on practice pages: avoid breaking words mid-line. */
.passage-block,
#passage-block {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  max-height: clamp(200px, 40vh, 420px);
  overflow-y: auto;
  font-family: var(--font-passage, 'Literata', Georgia, serif);
  font-size: 1.05rem;
  line-height: 2;
  letter-spacing: 0.01em;
}

#previous-comment-meta {
  font-size: 0.8rem;
}

.typing-progress-label {
  font-weight: 500;
}

.typing-progress {
  height: 12px;
}

#progress-bar {
  width: 0%;
}

.typing-area textarea {
  font-family: 'Courier New', monospace;
  border: 2px solid #dee2e6;
  font-size: 1.2rem;
  line-height: 1.8;
  resize: none;
  white-space: pre-wrap;
  overflow-x: hidden;
  transition: border-color 0.3s ease;
  /* Prevent splitting words across lines in the typing input */
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.typing-area textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 0.2rem rgba(30, 87, 65, 0.22);
}

/* Legacy .typed-char-* / .current-char / .typing-complete-indicator rules
   (old blue typing scheme) removed 2026-07-03 — unused; the live scheme is
   .char.correct/.incorrect/.current in minimal.css. */

.ai-chat-card-body {
  overflow: hidden;
}

#ai-chat-messages {
  overflow-y: auto;
  padding: 1rem;
  max-height: 500px;
}

.ai-chat-input-panel {
  background-color: #f8f9fa;
}

.ai-chat-input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

#ai-chat-input {
  resize: vertical;
  min-height: 120px;
  flex: 1;
}

/* ==========================================================================
   CARD ENHANCEMENTS
   ========================================================================== */

.card {
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   STATISTICS CARDS
   ========================================================================== */

.stats-card {
  background: linear-gradient(45deg, var(--brand), var(--brand-hover));
  border: none;
  color: white;
}

/* ==========================================================================
   AUTHENTICATION BUTTON STYLING
   ========================================================================== */

.logout-btn {
  color: rgba(255,255,255,.55) !important;
  padding: 0.5rem 1rem !important;
  background: none !important;
  border: none !important;
}

.logout-btn:hover {
  color: rgba(255,255,255,.75) !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE FIRST APPROACH
   ========================================================================== */

/* TABLET AND SMALLER (991.98px and below) */
@media (max-width: 991.98px) {
  /* Layout adjustments for smaller screens */
  body {
    padding-top: 3.5rem;  /* Reduced navbar height for mobile */
  }

  /* Navbar responsive adjustments */
  .navbar-brand {
    font-size: 1.1rem;   /* Slightly smaller brand text */
  }

  /* Navigation menu styling for collapsed state */
  .navbar-nav {
    text-align: center;  /* Center navigation items */
    padding: 1rem 0;    /* Add padding around menu items */
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.5rem;  /* Space between menu items */
  }

  /* Enhanced touch targets for mobile */
  .navbar-nav .nav-link {
    padding: 0.75rem 1rem;    /* Larger touch area */
    font-size: 1.1rem;        /* Larger text for readability */
    border-bottom: 1px solid rgba(255,255,255,0.1);  /* Visual separation */
  }

  /* Hover effect for mobile navigation */
  .navbar-nav .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    border-radius: 0.25rem;
  }

  /* Container padding adjustments */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Removed legacy book cover styles */
}

/* ==========================================================================
   NAVIGATION ENHANCEMENTS
   ========================================================================== */

/* Hamburger menu button styling */
.navbar-toggler {
  padding: 0.25rem 0.5rem;
  font-size: 1.1rem;
  border: none !important;  /* Remove default border */
}

.navbar-toggler:focus {
  box-shadow: none;  /* Remove focus outline for cleaner appearance */
}

/* Visual indicator for Enter/Return within passages - styled like a keyboard key */
.kbd{
  display: inline-block;
  padding: 0.12rem 0.5rem;
  margin: 0 0.12rem 0 0;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--paper-000), var(--paper-200));
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.04);
  color: var(--text-primary);
  font-weight: 600;
  font-family: var(--font-mono, "Courier New", monospace);
  line-height: 1;
  font-size: 0.92rem;
  vertical-align: middle;
  text-align: center;
  min-width: 1.1em;
}

/* More specific class for the Enter/Return key look */
.kbd.enter-key{
  /* Minimal appearance: show only the return icon without a border or cap */
  background: transparent;
  color: var(--cursor-bar, #b08d3e); /* matches the animated cursor bar */
  padding: 0 0.25rem;
  min-width: auto;
  border-radius: 0.25rem;
  font-weight: 600;
  box-shadow: none;
  position: relative;
}

/* Remove right-side cap used previously */
.kbd.enter-key::after{ display: none; }

/* Keep enter icon hidden until user presses Enter */
.enter-hidden{ visibility: hidden; }

/* Ensure the typed text inside the moving box inherits and displays inline */
#moving-box .mb-text {
  display: inline-block;
  white-space: nowrap;
}

/* Floating input box visual style lives in minimal.css (.passage-block #moving-box)
   — single definition; a conflicting duplicate here was removed 2026-07-03. */

/* When the current character is an Enter, make a pronounced underline */
/* Support both legacy `.enter-icon` and current `.enter-key` classes */
.char.current > .enter-icon,
.char.current > .enter-key { position: relative; text-decoration: none; }
/* Remove legacy/static underline pseudo-element — we use a single
   moving underline element (`#enter-underline`) instead for smooth
   transitions. Keeping the pseudo-element causes a second (upper)
   underline with mismatched animation. */
.char.current > .enter-icon::after,
.char.current > .enter-key::after { display: none !important; }

/* Shared moving underline (positioned absolutely inside passage block)
   This is the animated bar that slides between Enter positions. */
/* Tunable variables for the underline animation. Adjust these values
   to change motion timing, easing, color, and thickness without
   modifying the JS that positions the element. */
:root{
  --underline-duration: 200ms; /* animation duration */
  --underline-easing: cubic-bezier(.2,.9,.3,1);
  --underline-height: 3px;
  --underline-color: var(--cursor-bar, #b08d3e);
  --underline-offset: -4px; /* negative raises underline closer to the character */
}

/* Shared moving underline (positioned absolutely inside passage block)
   This is the animated bar that slides between character positions. */
#enter-underline{
  position: absolute;
  left: 0;
  top: 0;
  height: var(--underline-height);
  background: var(--underline-color);
  border-radius: 3px;
  pointer-events: none;
  transition: transform var(--underline-duration) var(--underline-easing), width var(--underline-duration) var(--underline-easing), top var(--underline-duration) var(--underline-easing), opacity calc(var(--underline-duration) * 0.8) ease;
  opacity: 0;
  will-change: transform, width, top, opacity;
  z-index: 2;
}

/* Slightly thinner underline variant */
#enter-underline.small{
  height: calc(var(--underline-height) * 0.75);
}

/* Moving box hint style when Enter required — brass, matching the cursor bar */
#moving-box.needs-enter {
  outline: 2px solid color-mix(in srgb, var(--cursor-bar, #b08d3e) 24%, transparent);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--cursor-bar, #b08d3e) 12%, transparent);
}
#moving-box.needs-enter .hint{
  font-style: italic;
  opacity: 0.95;
}

/* Custom hamburger icon with better contrast */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Smooth animation for navbar collapse */
.navbar-collapse {
  transition: all 0.3s ease-in-out;
}

/* ==========================================================================
   SEARCH FORM RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 991.98px) {
  .d-flex {
    margin-top: 1rem;          /* Add space above search form */
    justify-content: center;   /* Center the search form */
  }

  .form-control {
    margin-bottom: 0.5rem;     /* Space between input and button */
    margin-right: 0 !important; /* Remove Bootstrap's margin */
  }

  .btn {
    width: 100%;               /* Full-width button on mobile */
  }
}

/* ==========================================================================
   TOUCH-FRIENDLY INTERACTIONS
   ========================================================================== */

/* Ensure minimum touch target size of 44px (recommended by Apple/Google) */
@media (max-width: 767.98px) {
  .nav-link, .btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ==========================================================================
   SMALL MOBILE DEVICES (575.98px and below)
   ========================================================================== */

@media (max-width: 575.98px) {
  /* Ultra-compact layout for small phones */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  body {
    padding-top: 3rem;  /* Even smaller navbar padding */
  }

  /* Removed legacy book cover styles */
}

/* Toast/notice for practice page (transient messages) */
.toast-notice {
  position: fixed;
  top: 4.75rem;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  z-index: 1600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 220ms ease;
  font-size: 0.95rem;
}
.toast-notice.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Practice workspace (VS Code-like panel layout) ──────────────────────── */

#type-ws {
  display: flex;
  flex-direction: row;
  /* fill viewport below the fixed navbar (body has padding-top: 4.5rem) */
  height: calc(100vh - 4.5rem);
  overflow: hidden;
  background: var(--bg-page);
}

/* Center+bottom column — grows to fill space between left and right panels */
#ws-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

#ws-row {
  display: flex;
  flex: 1;
  min-height: 0; /* let children shrink/scroll inside flex */
  overflow: hidden;
}

.ws-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-surface);
}

.panel-title {
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border-default);
  text-align: center;
}

.panel-inner {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
}

#panel-left {
  width: 280px;
  min-width: 140px;
  flex-shrink: 0;
  border-right: 1px solid var(--border-default);
}

#panel-center {
  flex: 1;
  min-width: 320px;
}

#panel-right {
  width: 280px;
  min-width: 160px;
  flex-shrink: 0;
  border-left: 1px solid var(--border-default);
}

#panel-bottom {
  height: 150px;
  min-height: 60px;
  flex-shrink: 0;
  border-top: 1px solid var(--border-default);
}

/* Vertical drag handle (between columns) */
.ws-divider-v {
  width: 5px;
  cursor: col-resize;
  background: var(--border-default);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  transition: background 0.12s;
}
.ws-divider-v:hover,
.ws-divider-v.dragging { background: var(--brand); }

/* Horizontal drag handle (above bottom panel) */
.ws-divider-h {
  height: 5px;
  cursor: row-resize;
  background: var(--border-default);
  flex-shrink: 0;
  position: relative;
  z-index: 20;
  transition: background 0.12s;
}
.ws-divider-h:hover,
.ws-divider-h.dragging { background: var(--brand); }

/* Hidden state */
.ws-hidden { display: none !important; }

/* Navbar toggle buttons for panels */
.ws-toggle-btn {
  color: rgba(255,255,255,0.6);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 4px 7px;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s, background 0.12s;
}
.ws-toggle-btn:hover { color: #fff; background: rgba(255,255,255,0.12); }
.ws-toggle-btn.active { color: #fff; background: rgba(255,255,255,0.18); }
/* Reset is an action, not a toggle — set it apart from the panel toggles with a
   thin separator so it doesn't read as a fourth on/off state. */
.ws-toggle-action { margin-left: 8px; padding-left: 12px; border-left: 1px solid rgba(255,255,255,0.18); }

/* Inside workspace: passage fills center naturally (no viewport-clamped max-height) */
#panel-center .passage-block,
#panel-center #passage-block {
  max-height: none !important;
  overflow-y: visible !important;
}

/* Prevent the overall body gradient from showing through panels */
#type-ws .ws-panel { box-shadow: none; }

/* ── Type page — reading column + passage card ──────────────────────────────
   Constrain the passage to a comfortable reading measure (~65 chars) so the
   end of each line is easy to track, and float it as a paper card on a calm
   page-ground. Scoped to #type-ws so the shared #panel-center used by the
   library builder is untouched. All cursor / floating-box measurement in
   type.js is relative to #passage-block's own rect, so narrowing the column
   does not affect it. */
#type-ws #panel-center {
  --passage-measure: 42rem;   /* ~672px → ~65 chars at the passage font/spacing */
}
#type-ws #panel-center .panel-inner {
  background: var(--bg-page);
  padding: 22px 20px 30px;
}
/* Align the context strip and action bar to the same reading column as the
   passage card, so the chrome and the passage read as one centered document.
   Both keep their full-width background + border; only content is constrained. */
#type-ws #type-header > *,
#type-ws #type-actionbar > * {
  width: 100%;
  max-width: var(--passage-measure);
  margin-left: auto;
  margin-right: auto;
}
/* Center the passage card, word corrections, and rating panel as one column */
#type-ws #center-passage-content {
  width: 100%;
  max-width: var(--passage-measure);
  margin-left: auto;
  margin-right: auto;
}
/* The card surface lives on .passage-card; the passage block inside is a bare
   typing surface. Tall bottom padding keeps clear room for the floating input
   box overlaid inside (absolute-positioned relative to #passage-block itself,
   so the wrapper card does not affect cursor/box measurement). */
#type-ws #panel-center .passage-block {
  background: transparent;
  color: var(--text-primary);
  border: 0;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: none;
  padding: 1.35rem 1.9rem 4.25rem;
}

/* ── Animated panel collapse ────────────────────────────────────────────────
   Side panels slide in/out by animating width + opacity to zero rather than
   display:none (which cannot transition). The center panel is flex:1 and simply
   reflows to follow. Transitions are gated behind .ws-animate — added by JS after
   the first layout is applied — so a panel that starts collapsed doesn't animate
   on page load. .ws-dragging suppresses the transition so divider drags stay 1:1. */
#type-ws.ws-animate:not(.ws-dragging) #panel-left,
#type-ws.ws-animate:not(.ws-dragging) #panel-right,
#type-ws.ws-animate:not(.ws-dragging) .ws-divider-v {
  transition: width 0.24s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
}
#type-ws #panel-left.ws-collapsed,
#type-ws #panel-right.ws-collapsed {
  width: 0 !important;
  min-width: 0 !important;
  opacity: 0;
  border-width: 0 !important;
  overflow: hidden;
}
#type-ws .ws-divider-v.ws-collapsed { width: 0 !important; }
@media (prefers-reduced-motion: reduce) {
  #type-ws.ws-animate #panel-left,
  #type-ws.ws-animate #panel-right,
  #type-ws.ws-animate .ws-divider-v { transition: none; }
}

/* ── Type page — context strip (slim bar above the reading column) ── */
#type-header {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-hairline);
  padding: 7px 16px;
}
.hdr-context {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 24px;
}
.hdr-context-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hdr-mode-label {
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--bg-inset);
  color: var(--text-muted);
}
.hdr-mode-label.mode-learn  { background: var(--brand-soft);        color: var(--brand); }
.hdr-mode-label.mode-review { background: var(--accent-brass-soft); color: var(--accent-brass-deep); }
.hdr-mode-label.mode-recap  { background: var(--warning-soft);      color: var(--warning); }
.hdr-progress-track {
  width: 160px;
  height: 8px;
  border-radius: 4px;
  background: var(--bg-inset);
  overflow: hidden;
  flex-shrink: 0;
}
.hdr-progress-segs {
  display: flex;
  height: 100%;
  gap: 2px;                       /* gap = topic division line */
  background: var(--bg-surface);  /* divisions show as surface lines between topic segments */
}
.hdr-progress-seg {
  position: relative;
  overflow: hidden;
  background: var(--border-default);
  min-width: 2px;
}
.hdr-progress-seg-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 0%;
  transition: width 0.4s ease;
}
.hdr-progress-count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.type-breadcrumb {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}
.type-breadcrumb .bc-sep { margin: 0 4px; opacity: .5; }

/* ── Passage card head — title block above the typing surface ── */
.passage-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.passage-card-head {
  padding: 1.05rem 1.9rem 0.85rem;
  border-bottom: 1px solid var(--border-hairline);
}
.passage-title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.type-issue {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}
.passage-meta-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  padding-top: 3px;
}
.type-freq-label {
  font-size: 0.63rem;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.2;
  margin-top: 2px;
}
.passage-counts {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.68rem;
  color: var(--text-muted);
  margin-top: 6px;
}
.passage-type-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: .04em;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--bg-inset);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
  white-space: nowrap;
}
.type-flames { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.type-flames .bi-fire { font-size: 1.05rem; }
.flame-lit   { color: var(--flame-lit, var(--accent-brass)); }
.flame-unlit { color: var(--flame-unlit, var(--border-strong)); }

/* ── Action bar — docked at the bottom of the center panel ── */
#type-actionbar {
  flex-shrink: 0;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
  padding: 8px 16px;
}
.type-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.round-badge {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--brand-soft);
  color: var(--brand);
  white-space: nowrap;
}
.stat-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.stat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--text-secondary);
  background: var(--bg-inset);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}
.stat-chip .bi { font-size: 0.78rem; color: var(--text-muted); }
.stat-chip-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tag-chip { font-size: 0.75rem; user-select: none; }
.tag-remove:hover { opacity: 0.7; }

/* ── User passage annotations ────────────────────────────────────────────── */

/* Highlight colors applied to .char spans */
.passage-block .char.user-hl-yellow { background-color: #fff176; }
.passage-block .char.user-hl-green  { background-color: #b9f6ca; }
.passage-block .char.user-hl-pink   { background-color: #f8bbd0; }

/* User formatting overlays */
.passage-block .char.user-fmt-bold   { font-weight: 700; }
.passage-block .char.user-fmt-italic { font-style: italic; }
/* Underline drawn by .user-ul-wrap wrapper, not per-char, to avoid letter-spacing gaps */
.passage-block .char.user-fmt-under  { text-decoration: none; }
.passage-block .user-ul-wrap {
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.passage-block .user-ul-wrap > .char { padding: 0; }

/* .char.current always wins over user highlights */
.passage-block .char.current {
  background: var(--cursor-char-bg, #adb8b0) !important;
}

/* Annotation toolbar */
.annotation-toolbar {
  padding: 6px 8px;
  background: var(--bg-inset);
  border: 1px solid var(--border-default);
  border-radius: var(--radius);
}
.ann-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.ann-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 0.8rem;
  transition: background 0.1s, border-color 0.1s;
}
.ann-btn:hover  { background: var(--bg-inset); border-color: var(--border-strong); }
.ann-btn.active { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.ann-btn.active strong, .ann-btn.active em, .ann-btn.active u { color: var(--brand-contrast); }
.ann-swatch {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.15);
}
.ann-sep {
  display: inline-block;
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 2px;
}

/* Suppress all user annotations when show/hide is toggled off */
#passage-block.annotations-hidden .char.user-hl-yellow,
#passage-block.annotations-hidden .char.user-hl-green,
#passage-block.annotations-hidden .char.user-hl-pink   { background-color: transparent; }
#passage-block.annotations-hidden .char.user-fmt-bold   { font-weight: inherit; }
#passage-block.annotations-hidden .char.user-fmt-italic { font-style: inherit; }
#passage-block.annotations-hidden .char.user-fmt-under  { text-decoration: none; }
#passage-block.annotations-hidden .user-ul-wrap          { text-decoration: none; }

/* Gray out the entire annotations section during a typing session */
#annotation-section.annotations-disabled {
  opacity: 0.4;
  pointer-events: none;
  user-select: none;
}

/* Toolbar buttons disabled (not hidden) during a typing session — see type.js */

/* Site-wide footer — copyright, Terms, Privacy, patent-pending notice (base.html {% block site_footer %}).
   Suppressed on the full-viewport workspace pages (type / library builder). */
.site-footer {
  padding: 0.9rem 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-surface);
  border-top: 1px solid var(--border-hairline);
}
.site-footer a { color: var(--text-muted); text-decoration: none; }
.site-footer a:hover { color: var(--text-primary); text-decoration: underline; }
.site-footer-patent { color: var(--text-muted); }