/* ============================================================
   INK WASH TABS (墨流し)
   Unified header + nav panel for grid mode
   Merges hero-top-bar + ink-wash-nav into one floating surface
   ============================================================ */

/* ============================================================
   DESIGN TOKENS (supplement base.css tokens)
   ============================================================ */
:root {
  --status-known: #7B8B6F;
  --status-learning: #A07850;
  --status-new: #5B7B8C;
  --text-tertiary: #8C8578;
  --radius-panel: 12px;
  --radius-pill: 999px;
  --shadow-rest: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-lifted: 0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ink-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-smooth: 280ms var(--ease-out);
  --transition-ink: 480ms var(--ink-ease);
  --transition-slow: 480ms var(--ease-out);
}

/* ============================================================
   NAV BAR CONTAINER
   Fixed at top, visible only in grid mode
   ============================================================ */
.ink-wash-nav {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 24px;
  pointer-events: none;
  transition: transform 250ms var(--ease-out),
              left 250ms cubic-bezier(0.16, 1, 0.3, 1),
              right 250ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Push entire nav right when browse sidebar is open (sidebar flush at left:0) */
body.browse-sidebar-open .ink-wash-nav {
  left: var(--sidebar-w, 260px);
  padding: 0 calc(40px + var(--grid-scrollbar-w, 0px)) 0 40px;
}

/* Fill nav width edge-to-edge — outer padding handles alignment */
body.browse-sidebar-open .nav-bar-inner,
body.settings-sidebar-open .nav-bar-inner {
  margin-left: 20px;
  margin-right: 20px;
  max-width: none;
}

.ink-wash-nav.nav-hidden {
  transform: translateY(-100%);
}

.nav-hover-zone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  z-index: 101;
  pointer-events: auto;
}

body.grid-mode .ink-wash-nav {
  display: block;
}

/* Hide old header + branding in grid mode — unified nav absorbs brand + settings */
body.grid-mode .hero-top-bar,
body.grid-mode .app-branding-topleft {
  display: none;
}

/* Hide when overlays are open */
body:has(.quiz-modal-overlay.active) .ink-wash-nav,
body:has(.vocab-panel.open) .ink-wash-nav,
body.focus-mode .ink-wash-nav,
body.video-mode .ink-wash-nav,
body.chat-mode .ink-wash-nav {
  display: none;
}

.nav-bar-inner {
  max-width: 1800px;
  margin: 12px auto 0;
  background: var(--card-surface, #FAFAF7);
  border-radius: var(--radius-panel);
  box-shadow: 0 1px 4px rgba(0,0,0,0.025), 0 0 1px rgba(0,0,0,0.03);
  overflow: visible;
  pointer-events: auto;
  position: relative;
  border-bottom: 1px solid rgba(0,0,0,0.02);
  /* Washi grain — warmer, slightly more visible (So) */
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
}

/* ============================================================
   GLOBAL RESET for ink-wash nav buttons
   Neutralizes leaking styles from components.css and standard-mode.css
   ============================================================ */
.ink-wash-nav button {
  background: transparent;
  box-shadow: none;
  transform: none;
  width: auto;
}

.ink-wash-nav button:hover {
  transform: none;
  box-shadow: none;
}

.ink-wash-nav button:active {
  transform: none;
}

/* ============================================================
   YOKOGA BRUSH STROKE — sweeps across header on mode switch
   横画 (horizontal stroke), 2px, semi-transparent, 600ms
   ============================================================ */
.ink-wash-nav .brush-stroke {
  position: absolute;
  top: 50%;
  left: -10%;
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(44, 44, 44, 0.08) 10%,
    rgba(44, 44, 44, 0.14) 40%,
    rgba(44, 44, 44, 0.14) 60%,
    rgba(44, 44, 44, 0.08) 90%,
    transparent 100%
  );
  transform: translateY(-50%);
  border-radius: 1px;
  z-index: 10;
  pointer-events: none;
}

.ink-wash-nav .brush-stroke.animate {
  animation: brushSweep 600ms var(--ink-ease) forwards;
}

@keyframes brushSweep {
  0% { width: 0; left: -10%; opacity: 0; }
  15% { opacity: 1; }
  50% { width: 120%; opacity: 0.8; }
  100% { width: 120%; left: 0%; opacity: 0; }
}

/* ============================================================
   HEADER ROW — brand + search icon + modes + utils
   ============================================================ */
.ink-wash-nav .header-row {
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 12px 0 18px;
  gap: 14px;
  position: relative;
  z-index: 2;
}

/* Brand */
.ink-wash-nav .nav-brand {
  user-select: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ink-wash-nav .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.ink-wash-nav .brand-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary, #2C2C2C);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* Spacer */
.ink-wash-nav .header-spacer { flex: 1; }

/* ============================================================
   SEARCH — icon that expands into input
   Saves horizontal space. Subtraction principle.
   ============================================================ */
.ink-wash-nav .search-area {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}

.ink-wash-nav .search-trigger {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-tertiary, #8C8578);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-smooth);
  flex-shrink: 0;
}

.ink-wash-nav .search-trigger:hover {
  background: rgba(140,133,120,0.06);
  color: var(--text-secondary, #57534e);
}

.ink-wash-nav .search-trigger svg {
  width: 15px;
  min-width: 15px;
  height: 15px;
}

/* Hidden when expanded */
.ink-wash-nav .search-area.expanded .search-trigger {
  width: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.ink-wash-nav .search-field {
  width: 0;
  height: 34px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0;
  font-size: 13px;
  font-family: inherit;
  background: transparent;
  color: var(--text-primary, #2C2C2C);
  outline: none;
  transition: width 350ms var(--ink-ease),
              padding 350ms var(--ink-ease),
              border-color 300ms ease,
              background 300ms ease;
}

.ink-wash-nav .search-field::placeholder {
  color: var(--text-tertiary, #8C8578);
}

.ink-wash-nav .search-area.expanded .search-field {
  width: 220px;
  padding: 0 34px 0 14px;
  border-color: rgba(0,0,0,0.08);
  background: var(--body-bg, #F0EDE8);
}

.ink-wash-nav .search-area.expanded .search-field:focus {
  border-color: rgba(0,0,0,0.14);
}

/* Clear button inside search */
.ink-wash-nav .search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-tertiary, #8C8578);
  font-size: 13px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-smooth);
}

.ink-wash-nav .search-clear:hover {
  background: rgba(0,0,0,0.06);
  color: var(--text-secondary, #57534e);
  transform: translateY(-50%);
}

.ink-wash-nav .search-area.has-value .search-clear {
  display: flex;
}


/* ============================================================
   MODE SELECTOR — segmented control with sliding indicator
   ============================================================ */
.ink-wash-nav .mode-selector {
  display: flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border-radius: var(--radius-pill);
  padding: 0;
  position: relative;
  flex-shrink: 0;
}

/* Sliding indicator — moves behind the active button */
.ink-wash-nav .mode-indicator {
  position: absolute;
  top: 0;
  left: 0;
  height: 34px;
  background: rgba(0,0,0,0.035);
  border-radius: 10px;
  box-shadow: none;
  transition: all 380ms cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}

/* Ink bleed — sumi ink bleeding at edges during transition */
.ink-wash-nav .mode-indicator::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(
    ellipse 120% 100% at 50% 100%,
    rgba(44, 44, 44, 0.04) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 500ms ease;
}

.ink-wash-nav .mode-selector.transitioning .mode-indicator::before {
  opacity: 1;
}

.ink-wash-nav .mode-btn {
  position: relative;
  z-index: 1;
  height: 34px;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  transition: color 350ms var(--ink-ease);
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.ink-wash-nav .mode-btn .mode-label {
  line-height: 1;
}

.ink-wash-nav .mode-btn.active {
  color: var(--text-primary, #2C2C2C);
}

.ink-wash-nav .mode-btn:hover:not(.active) {
  color: var(--text-primary, #2C2C2C);
}

/* Keyboard shortcut hint */
.ink-wash-nav .mode-key {
  font-size: 9px;
  font-weight: 400;
  color: var(--text-tertiary, #8C8578);
  opacity: 0;
  transition: opacity var(--transition-smooth);
  margin-left: 2px;
  position: absolute;
  right: 4px;
  top: 3px;
}

.ink-wash-nav .mode-btn:hover .mode-key {
  opacity: 1;
}

/* Play sub-mode dot */
.ink-wash-nav .mode-btn .sub-indicator {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent, #3D5A80);
  opacity: 0;
  position: absolute;
  right: 6px;
  bottom: 4px;
  transition: opacity var(--transition-smooth);
}

.ink-wash-nav .mode-btn.has-sub .sub-indicator {
  display: none;
}

/* Play sub-mode popover — anchored to .mode-btn[data-view="video"] (already position:relative) */
.play-mode-popover {
  position: fixed;
  background: var(--card-surface, #FAFAF7);
  background-image: url("data:image/svg+xml,%3Csvg width='200' height='200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  padding: 5px;
  z-index: 9999;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 160px;
}
.play-mode-popover.popover-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Suspended session progress bar inside Play button */
.ink-wash-nav .play-progress-bar {
  position: absolute;
  bottom: 0;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 1px;
  background: rgba(0,0,0,0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
.ink-wash-nav .play-progress-bar.visible {
  opacity: 1;
}
.ink-wash-nav .play-progress-fill {
  height: 100%;
  border-radius: 1px;
  background: var(--kintsugi-gold, #C9A96E);
  transition: width 300ms ease;
}
.ink-wash-nav .play-progress-fill.paused {
  animation: pause-breath 3s ease-in-out infinite;
}

/* Paused session — label transitions smoothly between Play/Resume */
.ink-wash-nav .mode-btn .mode-label {
  transition: opacity 150ms ease;
}
@keyframes pause-breath {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ink-wash-nav .play-progress-fill.paused { animation: none; opacity: 0.85; }
}

.play-mode-popover .popover-item {
  display: block;
  width: 100%;
  padding: 7px 12px;
  margin: 0;
  border: none;
  border-radius: 7px;
  background: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border-left: 3px solid transparent;
  transition: background 140ms ease, color 140ms ease;
}

.play-mode-popover .popover-item:hover {
  color: var(--accent, #3D5A80);
  background: rgba(61, 90, 128, 0.06);
}
.play-mode-popover .popover-item:focus,
.play-mode-popover .popover-item:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Current selection — gold accent (scarcity: only gold in the toolbar) */
.play-mode-popover .popover-item.current {
  border-left-color: var(--kintsugi-gold, #C9A96E);
  color: #A6883A;
  background: rgba(201, 169, 110, 0.08);
  font-weight: 600;
}
.play-mode-popover .popover-item.current:hover {
  background: rgba(201, 169, 110, 0.13);
}

/* Divider between Learn and Revise */
.play-mode-popover .popover-divider {
  height: 1px;
  background: rgba(0,0,0,0.05);
  margin: 3px 8px;
}

/* Revise parent — chevron hint */
.play-mode-popover .popover-parent::after {
  content: '\203A';
  float: right;
  margin-left: 8px;
  color: var(--text-tertiary, #8C8578);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), color 140ms ease;
}
.play-mode-popover .popover-parent:hover::after {
  color: var(--accent, #3D5A80);
}
.play-mode-popover .popover-parent.expanded::after {
  transform: rotate(90deg);
}

/* Collapsible sub-menu */
.play-mode-popover .popover-sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms ease;
  opacity: 0;
  border: none;
  margin: 0;
  padding: 0;
}
.play-mode-popover .popover-sub.expanded {
  max-height: 80px;
  opacity: 1;
}
.play-mode-popover .popover-sub-item {
  padding-left: 24px;
  font-size: 11.5px;
  font-weight: 400;
}
.play-mode-popover .popover-sub-item.current {
  font-weight: 500;
}

/* Gold flash on selection */
@keyframes popover-gold-flash {
  0%   { background: rgba(201, 169, 110, 0.25); }
  100% { background: rgba(201, 169, 110, 0.08); }
}
.play-mode-popover .popover-item.flash {
  animation: popover-gold-flash 150ms ease-out;
}

.play-mode-popover .popover-session-info {
  padding: 6px 16px 2px;
  font-size: 11px;
  color: var(--text-tertiary, #8C8578);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.play-mode-popover .popover-end-session {
  font-size: 11.5px;
  color: var(--text-tertiary, #8C8578);
  border-top: 1px solid rgba(0,0,0,0.04);
  margin-top: 2px;
  padding-top: 6px;
}

@keyframes popoverIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ============================================================
   UTILITY BUTTONS — ghost buttons, nearly invisible
   ============================================================ */
.ink-wash-nav .nav-utils {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.ink-wash-nav .util-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary, #8C8578);
  font-size: 14px;
  cursor: pointer;
  transition: all 350ms var(--ink-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ink-wash-nav .util-btn:hover {
  background: rgba(140,133,120,0.06);
  color: var(--text-secondary, #57534e);
}

.ink-wash-nav .util-btn svg {
  width: 16px;
  min-width: 16px;
  height: 16px;
}

/* ============================================================
   TOOL STRIP — contextual actions, browse-mode only
   ============================================================ */
.ink-wash-nav .tool-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  height: 0;
  overflow: hidden;
  opacity: 0;
  border-top: none;
  transition: height var(--transition-slow), opacity var(--transition-smooth);
  position: relative;
  z-index: 2;
}

.ink-wash-nav .tool-strip::before {
  display: none;
}

.ink-wash-nav .tool-strip.visible {
  height: 42px;
  opacity: 1;
}

/* Tablet scroll: collapse tool strip, keep header row visible */
.ink-wash-nav .tool-strip.visible.scroll-collapsed {
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height 120ms var(--ease-out), opacity 100ms ease;
}

.ink-wash-nav .tool-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ink-wash-nav .tool-group + .tool-group {
  margin-left: 0;
  padding-left: 0;
  border-left: none;
}

.ink-wash-nav .tool-spacer { flex: 1; }

.ink-wash-nav .tool-btn {
  height: 28px;
  padding: 0 16px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  transition: color 350ms var(--ink-ease), font-weight 200ms ease;
  white-space: nowrap;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Inline SVG icons inside toolbar buttons */
.ink-wash-nav .tool-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ink-wash-nav .tool-btn .btn-icon svg {
  width: 13px;
  height: 13px;
}
.ink-wash-nav .segment-pair .tool-btn .btn-icon svg {
  width: 11px;
  height: 11px;
}

/* Ink underline — grows from center on hover */
.ink-wash-nav .tool-btn::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 50%;
  width: 60%;
  height: 1.5px;
  background: var(--text-secondary, #57534e);
  border-radius: 1px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 350ms var(--ink-ease);
}

.ink-wash-nav .tool-btn:hover {
  color: var(--text-primary, #2C2C2C);
}

.ink-wash-nav .tool-btn:hover::after {
  transform: translateX(-50%) scaleX(1);
}

.ink-wash-nav .tool-btn:active {
  transform: scale(0.96) translateY(1px);
}

.ink-wash-nav .tool-btn.active {
  font-weight: 500;
  color: var(--accent, #3D5A80);
  background: rgba(61,90,128,0.08);
}

.ink-wash-nav .tool-btn.active::after {
  transform: translateX(-50%) scaleX(0);
}

.ink-wash-nav .tool-btn.active:hover {
  color: var(--text-primary, #2C2C2C);
}

/* Play button — ghost with chevron (和の感性: subtraction before addition) */
.ink-wash-nav .tool-btn-play {
  gap: 2px;
  display: inline-flex;
  align-items: center;
}
.ink-wash-nav .tool-btn-play .play-chevron {
  font-size: 8px;
  line-height: 1;
  opacity: 0.4;
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), opacity 180ms ease;
  display: inline-block;
}
.ink-wash-nav .tool-btn-play:hover .play-chevron {
  opacity: 0.7;
}
.ink-wash-nav .tool-btn-play.dropdown-open {
  font-weight: 500;
  color: var(--text-primary, #2C2C2C);
}
.ink-wash-nav .tool-btn-play.dropdown-open .play-chevron {
  transform: rotate(180deg);
  opacity: 0.7;
}

/* Flip EN/JP — hidden until cards are revealed */
.ink-wash-nav .tool-btn.flip-btn-hidden {
  display: none;
}

/* Filter dot on filter button */
.ink-wash-nav .tool-btn .filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent, #3D5A80);
  display: inline-block;
  margin-left: 4px;
  opacity: 0;
  transition: opacity var(--transition-smooth), box-shadow var(--transition-smooth);
}

.ink-wash-nav .tool-btn.has-filters .filter-dot {
  opacity: 0.85;
  box-shadow: 0 0 6px rgba(61, 90, 128, 0.25);
}

/* Progress micro bar (gold kintsugi) */
.ink-wash-nav .progress-micro-bar {
  display: flex;
  width: 80px;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(0,0,0,0.04);
  overflow: hidden;
  flex-shrink: 0;
}

.ink-wash-nav .micro-seg {
  height: 100%;
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ink-wash-nav .micro-seg-mastered {
  background: var(--kintsugi-gold, #C9A96E);
  opacity: 0.65;
  border-radius: 1.5px 0 0 1.5px;
}

.ink-wash-nav .micro-seg-practicing {
  background: var(--text-tertiary, #8C8578);
  opacity: 0.2;
}

/* Toolbar stats counts — dot + number + label */
.ink-wash-nav .stats-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 3px;
}
.ink-wash-nav .stats-dot-known { background: var(--progress-green, #6B7F5C); opacity: 0.7; }
.ink-wash-nav .stats-dot-learning { background: var(--kintsugi-gold, #C9A96E); opacity: 0.7; }
.ink-wash-nav .stats-dot-new { background: var(--text-tertiary, #8C8578); opacity: 0.3; }

.ink-wash-nav .stats-num {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary, #57534e);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}
.ink-wash-nav .stats-label {
  font-size: 10px;
  font-weight: 400;
  color: var(--text-tertiary, #8C8578);
  margin-right: 8px;
}

/* Segment pair — two or three mutually exclusive buttons */
.ink-wash-nav .segment-pair {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(0,0,0,0.025);
  border-radius: 8px;
  padding: 2px;
}

.ink-wash-nav .segment-pair .tool-btn {
  height: 24px;
  padding: 0 12px;
  font-size: 11px;
  border-radius: 6px;
  transition: color 250ms var(--ink-ease), background 250ms var(--ink-ease), font-weight 200ms ease, box-shadow 250ms ease;
}

.ink-wash-nav .segment-pair .tool-btn::after {
  display: none;
}

.ink-wash-nav .segment-pair .tool-btn.active {
  background: var(--card-surface, #FAFAF7);
  color: var(--text-primary, #2C2C2C);
  font-weight: 500;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ink-wash-nav .segment-pair .tool-btn:not(.active):hover {
  color: var(--text-primary, #2C2C2C);
  background: rgba(0,0,0,0.02);
}

/* Tool divider — vertical separator between groups */
.ink-wash-nav .tool-divider {
  width: 1px;
  height: 18px;
  background: rgba(0,0,0,0.06);
  margin: 0 8px;
  flex-shrink: 0;
}

/* Direction toggle — appears next to Revise */
.ink-wash-nav .direction-toggle {
  height: 24px;
  padding: 0 10px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  white-space: nowrap;
  margin-left: 6px;
  transition: color 250ms ease, border-color 250ms ease, background 250ms ease, opacity 250ms ease;
}

.ink-wash-nav .direction-toggle:hover {
  color: var(--text-primary, #2C2C2C);
  border-color: rgba(0,0,0,0.15);
  background: rgba(0,0,0,0.02);
}

/* Word count in tool strip */
.ink-wash-nav .tool-word-count {
  font-size: 11px;
  color: var(--text-tertiary, #8C8578);
}

.ink-wash-nav .wc-number {
  font-family: 'Klee One', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary, #57534e);
}

.ink-wash-nav .wc-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-tertiary, #8C8578);
}

/* ============================================================
   FLOWING TAB BAR (Ink Wash Strip)
   Hidden by default, revealed via Filter toggle button
   ============================================================ */
.ink-wash-nav .filter-strip {
  display: flex;
  align-items: stretch;
  padding: 0;
  position: relative;
  max-height: 0;
  overflow: hidden;
  border-top: none;
  transition: max-height var(--transition-ink);
}

.ink-wash-nav .filter-strip::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.04) 70%, transparent);
  z-index: 1;
}

/* Visible when toggled */
.nav-bar-inner.filters-visible .filter-strip {
  max-height: 60px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ink-wash-nav .filter-strip::-webkit-scrollbar {
  display: none;
}

.ink-wash-nav .filter-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 20px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  white-space: nowrap;
  transition: color 350ms var(--ink-ease);
  flex-shrink: 0;
}

/* Ink underline */
.ink-wash-nav .filter-tab::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 1.5px;
  border-radius: 1px;
  transition: transform var(--transition-ink), opacity var(--transition-ink);
  opacity: 0;
}

/* Status-specific ink colors */
.ink-wash-nav .filter-tab[data-status="new"]::after {
  background: var(--status-new);
}

.ink-wash-nav .filter-tab[data-status="learning"]::after {
  background: var(--status-learning);
}

.ink-wash-nav .filter-tab[data-status="known"]::after {
  background: var(--status-known);
}

/* Content filter ink */
.ink-wash-nav .filter-tab[data-content]::after {
  background: var(--accent, #3D5A80);
}

/* Active state — dot-only indicator, no underline or wash */
.ink-wash-nav .filter-tab.active::after {
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
}

/* Hover states */
.ink-wash-nav .filter-tab:hover:not(.active) {
  color: var(--text-primary, #2C2C2C);
}

.ink-wash-nav .filter-tab:hover:not(.active)::after {
  transform: translateX(-50%) scaleX(0);
  opacity: 0;
}

/* Count badges */
.ink-wash-nav .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transition-smooth);
}

.ink-wash-nav .filter-tab[data-status="new"] .tab-count {
  background: rgba(91,123,140,0.08);
  color: var(--status-new);
}
.ink-wash-nav .filter-tab[data-status="new"].active .tab-count {
  background: rgba(91,123,140,0.08);
}

.ink-wash-nav .filter-tab[data-status="learning"] .tab-count {
  background: rgba(160,120,80,0.08);
  color: var(--status-learning);
}
.ink-wash-nav .filter-tab[data-status="learning"].active .tab-count {
  background: rgba(160,120,80,0.08);
}

.ink-wash-nav .filter-tab[data-status="known"] .tab-count {
  background: rgba(123,139,111,0.08);
  color: var(--status-known);
}
.ink-wash-nav .filter-tab[data-status="known"].active .tab-count {
  background: rgba(123,139,111,0.08);
}

/* Divider */
.ink-wash-nav .filter-divider {
  width: 1px;
  align-self: stretch;
  margin: 6px 4px;
  background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.05) 60%, transparent 90%);
  flex-shrink: 0;
}

/* Chevron on content tabs */
.ink-wash-nav .tab-chevron {
  width: 14px;
  height: 14px;
  color: var(--text-secondary, #57534e);
  opacity: 0.4;
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
  flex-shrink: 0;
}

.ink-wash-nav .filter-tab.active .tab-chevron,
.ink-wash-nav .filter-tab.expanded .tab-chevron {
  opacity: 0.7;
}

.ink-wash-nav .filter-tab.expanded .tab-chevron {
  transform: rotate(180deg);
}

/* Active filter dots — sole indicator for active state */
.ink-wash-nav .content-active-dot,
.ink-wash-nav .status-active-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--transition-smooth), box-shadow var(--transition-smooth);
  flex-shrink: 0;
}

.ink-wash-nav .content-active-dot {
  background: var(--accent, #3D5A80);
}

.ink-wash-nav .filter-tab[data-content].has-selection .content-active-dot {
  opacity: 0.8;
  box-shadow: 0 0 6px rgba(61, 90, 128, 0.25);
}

/* Status dots — colored per mastery level */
.ink-wash-nav .filter-tab[data-status="new"] .status-active-dot {
  background: var(--status-new);
}
.ink-wash-nav .filter-tab[data-status="learning"] .status-active-dot {
  background: var(--status-learning);
}
.ink-wash-nav .filter-tab[data-status="known"] .status-active-dot {
  background: var(--status-known);
}

.ink-wash-nav .filter-tab[data-status].active .status-active-dot {
  opacity: 0.85;
}
.ink-wash-nav .filter-tab[data-status="new"].active .status-active-dot {
  box-shadow: 0 0 6px rgba(91, 123, 140, 0.3);
}
.ink-wash-nav .filter-tab[data-status="learning"].active .status-active-dot {
  box-shadow: 0 0 6px rgba(160, 120, 80, 0.3);
}
.ink-wash-nav .filter-tab[data-status="known"].active .status-active-dot {
  box-shadow: 0 0 6px rgba(123, 139, 111, 0.3);
}

/* ============================================================
   EXPANDING PANELS
   ============================================================ */
.ink-wash-nav .expand-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-ink), padding var(--transition-ink);
  border-top: none;
  position: relative;
}

.ink-wash-nav .expand-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.04) 70%, transparent);
}

.ink-wash-nav .expand-panel.open {
  max-height: 200px;
}

/* Panels with grid content need more height */
.ink-wash-nav .expand-panel.open:has(.tier1-grid-mode) {
  max-height: 420px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.06) transparent;
}

.ink-wash-nav .expand-panel.open:has(.tier1-grid-mode)::-webkit-scrollbar { width: 3px; }
.ink-wash-nav .expand-panel.open:has(.tier1-grid-mode)::-webkit-scrollbar-track { background: transparent; }
.ink-wash-nav .expand-panel.open:has(.tier1-grid-mode)::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius: 2px; }

.ink-wash-nav .expand-panel-inner {
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}

.ink-wash-nav .expand-panel-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #57534e);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
  flex-shrink: 0;
  transition: all var(--transition-smooth);
}

/* ============================================================
   CATEGORY GRID — multi-column tier1 layout (一覧 ichiran)
   All 23 categories visible at a glance, bento box model
   ============================================================ */
.ink-wash-nav .pill-scroll.tier1-grid-mode {
  display: block;
  overflow: visible;
}

.ink-wash-nav .tier1-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 4), 1fr);
  grid-template-rows: repeat(var(--grid-rows, 6), auto);
  grid-auto-flow: column;
  gap: 2px;
  padding: 2px 0;
}

.ink-wash-nav .tier1-cell {
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 350ms var(--ink-ease);
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  font-family: inherit;
  text-align: left;
  width: 100%;
  color: var(--text-secondary, #57534e);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.ink-wash-nav .tier1-cell:hover {
  background: rgba(140,133,120,0.06);
  color: var(--text-primary, #2C2C2C);
}

.ink-wash-nav .tier1-cell.selected {
  background: rgba(61,90,128,0.06);
  color: var(--accent, #3D5A80);
}

.ink-wash-nav .tier1-cell .cell-name {
  flex: 1;
}

.ink-wash-nav .tier1-cell .cell-count {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary, #8C8578);
  opacity: 0.6;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: rgba(140,133,120,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
}

/* When in grid mode, expand-panel-inner becomes block layout */
.ink-wash-nav .expand-panel-inner:has(.tier1-grid-mode) {
  display: block;
  padding: 8px 10px;
}

.ink-wash-nav .expand-panel-inner:has(.tier1-grid-mode) .expand-panel-label {
  display: block;
  margin-bottom: 6px;
  padding: 0 4px;
}

/* ============================================================
   PILLS (filter options inside panels)
   ============================================================ */
.ink-wash-nav .pill-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
  padding: 2px 0;
  position: relative;
}

.ink-wash-nav .pill-scroll::-webkit-scrollbar {
  display: none;
}

.ink-wash-nav .pill {
  height: 30px;
  padding: 0 14px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: var(--radius-pill);
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  transition: all var(--transition-smooth);
  white-space: nowrap;
  flex-shrink: 0;
}

.ink-wash-nav .pill:hover {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.12);
  color: var(--text-primary, #2C2C2C);
}

.ink-wash-nav .pill.selected {
  background: var(--accent, #3D5A80);
  border-color: var(--accent, #3D5A80);
  color: white;
}

.ink-wash-nav .pill.selected:hover {
  background: #34506f;
  border-color: #34506f;
  color: white;
}

/* Back button pill (drill-down level 2) */
.ink-wash-nav .pill.pill-back {
  border-color: var(--accent, #3D5A80);
  color: var(--accent, #3D5A80);
  font-weight: 600;
  padding: 0 12px;
}

.ink-wash-nav .pill.pill-back:hover {
  background: rgba(61,90,128,0.06);
}

/* ============================================================
   DRILL-DOWN TRANSITION
   Level 1 ↔ Level 2 crossfade within pill-scroll
   ============================================================ */
.ink-wash-nav .pill-level {
  display: flex;
  gap: 8px;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ink-wash-nav .pill-level.leaving {
  opacity: 0;
  transform: translateX(-12px);
  position: absolute;
  pointer-events: none;
}

.ink-wash-nav .pill-level.entering {
  animation: pillLevelEnter 250ms ease forwards;
}

@keyframes pillLevelEnter {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================================
   FILTER ACTIVE CHIPS (below nav bar)
   ============================================================ */
.ink-wash-nav .filter-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 18px 12px;
  border-top: none;
  align-items: center;
  position: relative;
}

/* When chips are inline in the toolbar */
.ink-wash-nav .filter-active-chips.toolbar-chips {
  flex: 1;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 0 12px;
  gap: 5px;
  min-width: 0;
  scrollbar-width: none;  /* Firefox */
}
.ink-wash-nav .filter-active-chips.toolbar-chips::-webkit-scrollbar {
  display: none;
}

.ink-wash-nav .filter-active-chips::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.04) 70%, transparent);
}
.ink-wash-nav .filter-active-chips.toolbar-chips::before {
  display: none;
}

.ink-wash-nav .filter-active-chips:empty {
  display: none;
}
/* Toolbar chips: stay visible as spacer even when empty */
.ink-wash-nav .filter-active-chips.toolbar-chips:empty {
  display: block;
}

/* Ink-wash chip style (simpler than frosted glass) */
.ink-wash-nav .filter-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 10px;
  border: none;
  border-radius: 6px;
  background: rgba(61,90,128,0.05);
  font-family: inherit;
  font-size: 10.5px;
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 500;
  color: var(--text-secondary, #57534e);
  cursor: default;
  transition: all 350ms var(--ink-ease);
  animation: chipSlideIn 250ms ease;
}

.ink-wash-nav .filter-active-chip:hover {
  background: rgba(61,90,128,0.09);
}

.ink-wash-nav .filter-active-chip .chip-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary, #57534e);
  opacity: 0;
  font-size: 11px;
  cursor: pointer;
  transition: all var(--transition-smooth);
  padding: 0;
  line-height: 1;
}

.ink-wash-nav .filter-active-chip:hover .chip-remove {
  opacity: 0.5;
}

.ink-wash-nav .filter-active-chip .chip-remove:hover {
  opacity: 1;
  background: rgba(0,0,0,0.08);
}

/* Textbook chips — default gold tint */
.ink-wash-nav .filter-active-chip.chip-textbook {
  background: rgba(201,169,110,0.15);
  color: #8B7340;
}
/* Ippo — warm earth */
.ink-wash-nav .filter-active-chip.chip-tb-ippo {
  background: rgba(180,120,80,0.14);
  color: #7A5030;
}
/* Genki 1 — indigo */
.ink-wash-nav .filter-active-chip.chip-tb-genki1 {
  background: rgba(61,90,128,0.12);
  color: #3D5A80;
}
/* Genki 2 — sage green */
.ink-wash-nav .filter-active-chip.chip-tb-genki2 {
  background: rgba(100,140,100,0.12);
  color: #4A6B48;
}

/* Status chips — natural dye palette */
.ink-wash-nav .filter-active-chip.chip-status-new {
  background: rgba(91,123,140,0.12);
  color: #4A6B7A;
}
.ink-wash-nav .filter-active-chip.chip-status-learning {
  background: rgba(160,120,80,0.12);
  color: #7A5C30;
}
.ink-wash-nav .filter-active-chip.chip-status-known {
  background: rgba(123,139,111,0.12);
  color: #556B48;
}

/* Category chips — gold-amber tint */
.ink-wash-nav .filter-active-chip.chip-category {
  background: rgba(201,169,110,0.12);
  color: #8B7340;
}

/* POS chips — warm neutral */
.ink-wash-nav .filter-active-chip.chip-pos {
  background: rgba(140,133,120,0.12);
  color: #5C564E;
}

/* Excluded chips — hollow with bold left-border accent + brush batsu icon */
.ink-wash-nav .filter-active-chip.chip-excluded {
  background: transparent;
  border: 1px solid rgba(0,0,0,0.12);
  opacity: 0.72;
  transition: opacity 200ms ease;
}
.ink-wash-nav .filter-active-chip.chip-excluded:hover {
  opacity: 0.9;
}
/* Per-type border tint for excluded chips */
.ink-wash-nav .filter-active-chip.chip-excluded.chip-category {
  border-color: rgba(201,169,110,0.18);
}
.ink-wash-nav .filter-active-chip.chip-excluded.chip-textbook {
  border-color: rgba(201,169,110,0.18);
}
.ink-wash-nav .filter-active-chip.chip-excluded.chip-pos {
  border-color: rgba(140,133,120,0.18);
}
.ink-wash-nav .filter-active-chip.chip-excluded.chip-status-new {
  border-color: rgba(91,123,140,0.18);
}
.ink-wash-nav .filter-active-chip.chip-excluded.chip-status-learning {
  border-color: rgba(160,120,80,0.18);
}
.ink-wash-nav .filter-active-chip.chip-excluded.chip-status-known {
  border-color: rgba(123,139,111,0.18);
}
/* Brush batsu icon */
.ink-wash-nav .filter-active-chip.chip-excluded .chip-text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ink-wash-nav .filter-active-chip.chip-excluded .chip-exclude-icon {
  display: block;
  flex-shrink: 0;
  color: #c45c3e;
}

/* Chip text — clickable to toggle include/exclude */
.ink-wash-nav .filter-active-chip .chip-text {
  cursor: pointer;
}

/* Clear all chips */
.ink-wash-nav .chip-clear-all {
  height: 26px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #8C8578);
  cursor: pointer;
  transition: all 350ms var(--ink-ease);
  margin-left: auto;
}

.ink-wash-nav .chip-clear-all:hover {
  background: rgba(140,133,120,0.06);
  color: var(--text-secondary, #57534e);
}

@keyframes chipSlideIn {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.ink-wash-nav .filter-active-chip.removing {
  animation: chipSlideOut 200ms ease forwards;
}

@keyframes chipSlideOut {
  to {
    opacity: 0;
    transform: scale(0.85) translateY(-4px);
  }
}

/* Short tab labels (480px and below) */
.ink-wash-nav .filter-tab .tab-label-short {
  display: none;
}

/* ============================================================
   NAV COLLAPSED — filter strip + expand panels auto-hide
   after filter selection. Header + tool strip + chips stay.
   ============================================================ */
.ink-wash-nav .nav-summary-pill { display: none; }

.ink-wash-nav.nav-collapsed .filter-strip {
  max-height: 0 !important;
  border-top-width: 0 !important;
  overflow: hidden;
  transition: max-height 400ms var(--ease-out), border-top-width 400ms var(--ease-out);
}

.ink-wash-nav.nav-collapsed .expand-panel {
  max-height: 0 !important;
  border-top-width: 0 !important;
  overflow: hidden;
}

/* ============================================================
   GRID MARGIN — spacing below unified fixed header
   Driven by --nav-bar-total-height CSS variable set from JS
   ============================================================ */
body.grid-mode .grid-container {
  margin-top: calc(var(--nav-bar-total-height, 80px) + 24px);
  transition: margin-top 250ms var(--ease-out);
}

/* Desktop only: reclaim nav space when hidden (transform-based, no reflow issues).
   Mobile keeps constant margin — nav hides via top offset, no margin change needed. */
@media (min-width: 769px) {
  body.grid-mode.nav-is-hidden .grid-container {
    margin-top: 24px;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
.ink-wash-nav .filter-tab:focus-visible {
  outline: 2px solid var(--accent, #3D5A80);
  outline-offset: -2px;
  border-radius: 8px;
}

.ink-wash-nav .pill:focus-visible {
  outline: 2px solid var(--accent, #3D5A80);
  outline-offset: 2px;
}

.ink-wash-nav .tool-btn:focus-visible,
.ink-wash-nav .mode-btn:focus-visible,
.ink-wash-nav .util-btn:focus-visible {
  outline: 2px solid var(--accent, #3D5A80);
  outline-offset: 2px;
}

/* ============================================================
   DESKTOP SIDEBAR REDESIGN — hide filter strip on desktop
   Filter strip + expand panels replaced by browse sidebar
   ============================================================ */
@media (min-width: 769px) {
  /* Hide filter strip on desktop — replaced by browse sidebar */
  .ink-wash-nav .filter-strip {
    display: none !important;
  }

  /* Hide expand panels on desktop — replaced by browse sidebar */
  .ink-wash-nav .expand-panel {
    display: none !important;
  }

  /* Hide standalone filter chips row on desktop — but keep toolbar-inline chips */
  .ink-wash-nav .filter-active-chips:not(.toolbar-chips) {
    display: none !important;
  }

  /* Hide mode-selector on desktop (mobile-only class) */
  .ink-wash-nav .mode-selector.mobile-only {
    display: none;
  }

  /* Position relative for popup children */
  .nav-bar-inner {
    position: relative;
  }
}

/* ============================================================
   RESPONSIVE: MOBILE (<= 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* ============================================================
     MOBILE NAV — Bottom Sheet Pattern
     Fixed header + action strip + filter strip always visible.
     Content filters (Textbook/Category/POS) open in bottom sheet.
     ============================================================ */

  /* --- Nav container --- */
  .ink-wash-nav {
    padding: 0 8px;
  }

  /* Mobile scroll-hide: use top (not transform) so position:fixed children
     (filter sheet, backdrop, search overlay) stay viewport-anchored.
     transform creates a containing block per CSS spec, breaking position:fixed
     on children. top offset does not. */
  .ink-wash-nav {
    transition: none; /* Instant — animating top triggers layout per frame */
  }
  .ink-wash-nav.nav-hidden {
    transform: none; /* Override desktop translateY; top set by JS */
  }

  .nav-bar-inner {
    margin: 6px auto 0;
    border-radius: var(--radius-panel);
    max-width: 100%;
    border: none;
    overflow: visible;
    transition: box-shadow 300ms ease;
  }

  /* Paper-resting-on-content bottom edge */
  .nav-bar-inner::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(180deg, rgba(0,0,0,0.04) 0%, rgba(0,0,0,0.015) 40%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  /* Header shadow on scroll */
  .ink-wash-nav.has-shadow .nav-bar-inner {
    box-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  }

  /* --- Header row: ~48px, always visible --- */
  .ink-wash-nav .header-row {
    height: 48px;
    padding: 0 16px;
    gap: 10px;
    flex-wrap: nowrap;
    align-items: center;
    position: relative;
    z-index: 5;
  }

  /* Brand: logo + KOTOBA text (no toggle chevron) */
  .ink-wash-nav .nav-brand {
    order: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .nav-brand::after { display: none; }
  .ink-wash-nav .brand-text {
    display: inline;
    font-family: 'Inter', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-primary, #2C2C2C);
  }
  .ink-wash-nav .brand-logo { width: 26px; height: 26px; border-radius: 50%; }
  .ink-wash-nav .header-spacer { display: block; flex: 1; order: 2; }

  /* Mobile word count in header */
  .ink-wash-nav .mobile-word-count {
    order: 3;
    font-size: 11px;
    color: var(--text-tertiary, #8C8578);
    white-space: nowrap;
  }
  .ink-wash-nav .mobile-word-count .wc-number {
    font-family: 'Klee One', serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary, #57534e);
  }

  /* Hide desktop search expand — mobile uses overlay */
  .ink-wash-nav .search-area { order: 4; }
  .ink-wash-nav .search-area .search-field,
  .ink-wash-nav .search-area .search-clear { display: none; }
  .ink-wash-nav .search-area.expanded { flex-basis: auto; }
  .ink-wash-nav .search-area.expanded .search-field { display: none; }
  .ink-wash-nav .search-trigger { width: 34px; height: 34px; border-radius: 10px; }

  /* Nav utils */
  .ink-wash-nav .nav-utils { order: 6; margin-left: 0; }
  .ink-wash-nav .nav-utils .util-btn.hide-mobile { display: none; }

  /* --- Hide mode selector on mobile (no Browse/Focus/Video/Voice/Quiz buttons) --- */
  .ink-wash-nav .mode-selector { display: none !important; }

  /* --- Expand zone: collapses as single unit on scroll --- */
  .ink-wash-nav .nav-expand-zone {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: 86px; /* tool-strip 36px + status-row ~50px */
    opacity: 1;
    transition: max-height 100ms ease-out, opacity 100ms ease-out;
  }
  .ink-wash-nav .nav-expand-zone.scroll-hidden {
    max-height: 0;
    opacity: 0;
  }

  /* --- Override desktop nav-collapsed on mobile --- */
  .ink-wash-nav.nav-collapsed .nav-bar-inner .filter-strip {
    max-height: none;
  }
  .ink-wash-nav.nav-collapsed .filter-active-chips {
    display: flex;
  }

  /* --- Hide inline expand panels on mobile (content is in bottom sheet) --- */
  .ink-wash-nav .expand-panel {
    display: none !important;
  }

  /* --- Action strip (tool-strip): ~36px, always visible --- */
  .ink-wash-nav .tool-strip {
    height: 36px !important;
    padding: 0 16px !important;
    gap: 4px;
  }
  .ink-wash-nav .tool-strip .tool-btn {
    font-size: 12px;
    padding: 0 12px;
    height: 26px;
  }
  .ink-wash-nav .tool-strip .tool-word-count { display: none; }
  .ink-wash-nav .tool-strip .progress-micro-bar { display: none; }
  .ink-wash-nav .tool-strip .deck-bar-group { display: none; }
  .ink-wash-nav .tool-strip .session-dots-container { display: none; }
  .ink-wash-nav .tool-strip .tool-spacer { display: block; flex: 1; }
  .ink-wash-nav .tool-btn-play { display: none !important; }
  .ink-wash-nav .filter-pill-row { display: none !important; }

  /* Quiz button: push to right edge */
  .ink-wash-nav .tool-group-meta {
    margin-left: auto;
  }
  .ink-wash-nav .quiz-action-btn {
    display: inline-flex !important;
  }

  /* --- Mobile status pills + filter chips row --- */
  .ink-wash-nav .mobile-status-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 16px 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .ink-wash-nav .mobile-status-row::-webkit-scrollbar { display: none; }
  /* Scroll-hide is now on .nav-expand-zone wrapper (single-unit collapse) */

  .ink-wash-nav .status-pill {
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    background: transparent;
    color: var(--text-secondary, #57534e);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'Inter', -apple-system, sans-serif;
    -webkit-tap-highlight-color: transparent;
    transition: all 200ms ease;
    cursor: pointer;
  }
  .ink-wash-nav .status-pill:active { transform: scale(0.96); }
  .ink-wash-nav .status-pill[data-status="new"].active {
    background: rgba(91,123,140,0.1);
    color: #5B7B8C;
    border-color: rgba(91,123,140,0.25);
    font-weight: 600;
  }
  .ink-wash-nav .status-pill[data-status="learning"].active {
    background: rgba(160,120,80,0.1);
    color: #A07850;
    border-color: rgba(160,120,80,0.25);
    font-weight: 600;
  }
  .ink-wash-nav .status-pill[data-status="known"].active {
    background: rgba(123,139,111,0.1);
    color: #7B8B6F;
    border-color: rgba(123,139,111,0.25);
    font-weight: 600;
  }

  .ink-wash-nav .mobile-filter-chips {
    display: none;
  }

  /* --- Filter strip: hidden on mobile (status in mobile-status-row, content in sheet menu) --- */
  .ink-wash-nav .filter-strip {
    display: none !important;
  }
  .ink-wash-nav .filter-strip::-webkit-scrollbar { display: none; }

  /* Gradient separator above filter pills */
  .ink-wash-nav .filter-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,0.04) 30%, rgba(0,0,0,0.04) 70%, transparent);
  }
  .ink-wash-nav .filter-strip > * { margin-top: 6px; }

  /* Filter tabs as pills */
  .ink-wash-nav .filter-tab {
    height: 30px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    gap: 4px;
    background: transparent;
    color: var(--text-secondary, #57534e);
    -webkit-tap-highlight-color: transparent;
    transition: all 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
    scroll-snap-align: center;
  }
  .ink-wash-nav .filter-tab:active { transform: scale(0.96); }

  /* Status pills active states */
  .ink-wash-nav .filter-tab[data-status].active {
    border-color: transparent;
    font-weight: 600;
  }
  .ink-wash-nav .filter-tab[data-status="new"].active {
    background: rgba(91,123,140,0.07);
    color: var(--status-new, #5B7B8C);
  }
  .ink-wash-nav .filter-tab[data-status="learning"].active {
    background: rgba(160,120,80,0.07);
    color: var(--status-learning, #A07850);
  }
  .ink-wash-nav .filter-tab[data-status="known"].active {
    background: rgba(123,139,111,0.07);
    color: var(--status-known, #7B8B6F);
  }

  /* Content filter pills: accent highlight when expanded/has-selection */
  .ink-wash-nav .filter-tab[data-content].expanded {
    border-color: var(--accent, #3D5A80);
    color: var(--accent, #3D5A80);
    background: rgba(61,90,128,0.06);
  }
  .ink-wash-nav .filter-tab[data-content].has-selection {
    border-color: var(--accent, #3D5A80);
    color: var(--accent, #3D5A80);
    background: rgba(61,90,128,0.04);
  }
  .ink-wash-nav .filter-tab[data-content] .content-active-dot { top: auto; }
  .ink-wash-nav .filter-tab[data-content] { padding-right: 8px; }

  /* Chevron rotation when expanded */
  .ink-wash-nav .filter-tab .tab-chevron {
    width: 12px;
    height: 12px;
    opacity: 0.5;
    transition: transform 200ms ease;
  }
  .ink-wash-nav .filter-tab.expanded .tab-chevron {
    transform: rotate(180deg);
  }

  /* Filter divider */
  .ink-wash-nav .filter-divider {
    width: 1px;
    height: 20px;
    background: linear-gradient(180deg, transparent 10%, rgba(0,0,0,0.06) 50%, transparent 90%);
    flex-shrink: 0;
    align-self: center;
    margin: 0;
  }

  /* --- Mobile inline expand row: hidden (content filters moved to sheet menu) --- */
  .ink-wash-nav .mobile-inline-filters {
    display: none !important;
  }
  /* Hide inline row when filters are collapsed (scroll auto-hide) */
  .nav-bar-inner:not(.filters-visible) .mobile-inline-filters {
    display: none !important;
  }
  .ink-wash-nav .mobile-inline-filters .pill {
    height: 28px;
    padding: 0 12px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    font-family: 'Inter', -apple-system, sans-serif;
    background: transparent;
    color: var(--text-secondary, #57534e);
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 200ms ease;
  }
  .ink-wash-nav .mobile-inline-filters .pill:active {
    transform: scale(0.96);
  }
  .ink-wash-nav .mobile-inline-filters .pill.selected {
    background: var(--accent, #3D5A80);
    color: white;
    border-color: var(--accent, #3D5A80);
  }

  /* Tab count badge */
  .ink-wash-nav .tab-count {
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 500;
    opacity: 0.6;
    padding: 0 4px;
    border-radius: 999px;
    background: rgba(0,0,0,0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .ink-wash-nav .filter-tab.active .tab-count {
    background: rgba(0,0,0,0.06);
    opacity: 1;
  }

  /* --- Toolbar chips: hidden on mobile (mirrored in mobile-status-row) --- */
  .ink-wash-nav .filter-active-chips.toolbar-chips {
    display: none !important;
  }

  /* --- Chips: horizontal scroll row (always visible when active) --- */
  .ink-wash-nav .filter-active-chips {
    padding: 6px 16px 6px;
    position: relative;
    display: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    align-items: center;
  }
  .ink-wash-nav .filter-active-chips::before {
    display: none;
  }
  .ink-wash-nav .filter-active-chips::-webkit-scrollbar { display: none; }
  .ink-wash-nav .filter-active-chips.visible,
  .ink-wash-nav .filter-active-chips:not(:empty) {
    display: flex;
  }

  .ink-wash-nav .filter-active-chip {
    white-space: nowrap;
    flex-shrink: 0;
    animation: chipSlideIn 250ms ease;
  }
  .ink-wash-nav .filter-active-chip.just-added {
    animation: mobileChipFlashIn 600ms ease;
  }
  .ink-wash-nav .filter-active-chip.chip-excluded {
    border: 1px solid rgba(0,0,0,0.12);
  }
  .ink-wash-nav .filter-active-chip .chip-text {
    -webkit-tap-highlight-color: transparent;
  }

  /* Touch-friendly chip remove */
  .ink-wash-nav .filter-active-chip .chip-remove {
    opacity: 0.45;
    min-width: 44px;
    min-height: 44px;
    padding: 14px;
    margin: -14px -10px -14px -4px;
    position: relative;
    background: transparent !important;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .filter-active-chip .chip-remove:active { opacity: 0.8; }

  .ink-wash-nav .chip-clear-all {
    white-space: nowrap;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .chip-clear-all.confirming {
    animation: mobileClearShake 300ms ease;
    color: #B85C3B;
  }

  /* --- Bottom sheet backdrop --- */
  .ink-wash-nav .mobile-sheet-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    background: rgba(0,0,0,0.15);
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }
  .ink-wash-nav .mobile-sheet-backdrop.active {
    opacity: 1;
    pointer-events: auto;
  }

  /* --- Bottom sheet --- */
  .ink-wash-nav .mobile-filter-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    height: 65vh;
    background: var(--card-surface, #FAFAF7);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
  }
  .ink-wash-nav .mobile-filter-sheet.open {
    transform: translateY(0);
    transition-duration: 350ms;
  }

  /* Drag handle — ceramic feel */
  .ink-wash-nav .sheet-drag-handle {
    display: flex;
    justify-content: center;
    padding: 14px 0 10px;
    flex-shrink: 0;
    cursor: grab;
  }
  .ink-wash-nav .sheet-handle-pill {
    width: 32px;
    height: 3.5px;
    background: rgba(140,133,120,0.18);
    border-radius: 2px;
  }

  /* Sheet content (scrollable) */
  .ink-wash-nav .sheet-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* Sheet section label — carved seal inscription, not screaming header */
  .ink-wash-nav .sheet-content .expand-panel-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #8C8578);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
    display: block;
  }

  /* Sheet pills — same tokens as desktop expand panels */
  .ink-wash-nav .sheet-content .pill-scroll {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    position: relative;
  }
  .ink-wash-nav .sheet-content .pill {
    height: 32px;
    padding: 0 14px;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary, #57534e);
    white-space: nowrap;
    transition: all 200ms ease;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: transparent;
  }
  .ink-wash-nav .sheet-content .pill:active { transform: scale(0.96); }
  .ink-wash-nav .sheet-content .pill.selected {
    background: var(--accent, #3D5A80);
    border-color: var(--accent, #3D5A80);
    color: white;
  }
  .ink-wash-nav .sheet-content .pill .pill-count {
    font-size: 10px;
    opacity: 0.6;
  }
  .ink-wash-nav .sheet-content .pill.selected .pill-count { opacity: 0.8; }

  /* Back pill in sheet */
  .ink-wash-nav .sheet-content .pill.pill-back {
    border-color: var(--accent, #3D5A80);
    color: var(--accent, #3D5A80);
    font-weight: 600;
  }
  .ink-wash-nav .sheet-content .pill.pill-back:active {
    background: rgba(61,90,128,0.06);
  }

  /* Grid cells in sheet (category tier1, textbook lessons) */
  .ink-wash-nav .sheet-content .tier1-grid {
    --grid-cols: 2 !important;
    grid-auto-flow: row;
    grid-template-rows: auto;
  }

  /* Textbook lessons: 1-column full-width rows */
  .ink-wash-nav .sheet-content .tier1-grid[style*="--grid-cols: 1"] {
    --grid-cols: 1 !important;
  }
  .ink-wash-nav .sheet-content .tier1-grid[style*="--grid-cols: 1"] .tier1-cell {
    width: 100%;
  }

  /* --- Sheet menu rows (Browse entry point) --- */
  .ink-wash-nav .sheet-content .sheet-menu-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 6px;
    border: none;
    background: transparent;
    position: relative;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--text-primary, #2C2C2C);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 350ms ease-out;
  }
  /* Organic separator — ink wash, not ruled line */
  .ink-wash-nav .sheet-content .sheet-menu-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140,133,120,0.16) 0%, transparent 70%);
  }
  .ink-wash-nav .sheet-content .sheet-menu-row:last-child::after {
    display: none;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row:active {
    background-color: rgba(61,90,128,0.05);
    transition: background-color 0ms;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row.has-selection .menu-row-label {
    color: var(--text-primary, #2C2C2C);
    font-weight: 500;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row .menu-row-label {
    flex: 1;
    text-align: left;
  }
  /* Active filter count — gold wash chip, not loud accent badge */
  .ink-wash-nav .sheet-content .sheet-menu-row .menu-row-count {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-primary, #2C2C2C);
    background: rgba(201,169,110,0.18);
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    margin-right: 8px;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row .menu-row-chevron {
    opacity: 0.25;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: transform 150ms ease;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row .menu-row-chevron svg {
    width: 14px;
    height: 14px;
  }
  .ink-wash-nav .sheet-content .sheet-menu-row:active .menu-row-chevron {
    transform: translateX(2px);
  }
  .ink-wash-nav .sheet-content .sheet-menu-row.has-selection .menu-row-chevron {
    opacity: 0.4;
  }

  /* Level 1 drill-down rows: lighter than top menu (hierarchy through weight) */
  .ink-wash-nav .mobile-filter-sheet:not([data-section="menu"]) .sheet-content .sheet-menu-row {
    font-size: 13px;
    font-weight: 400;
    padding: 13px 6px;
  }
  .ink-wash-nav .mobile-filter-sheet:not([data-section="menu"]) .sheet-content .sheet-menu-row.has-selection .menu-row-label {
    font-weight: 500;
  }

  /* --- Active filter chips inside Browse sheet --- */
  .ink-wash-nav .sheet-content .sheet-active-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 0 14px;
    border-bottom: 1px solid rgba(201,169,110,0.08);
    margin-bottom: 4px;
  }
  .ink-wash-nav .sheet-content .sheet-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 5px 10px;
    border: 1px solid rgba(201,169,110,0.2);
    border-radius: 999px;
    background: rgba(201,169,110,0.06);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #57534e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 150ms ease;
  }
  .ink-wash-nav .sheet-content .sheet-chip:active {
    background: rgba(201,169,110,0.12);
  }
  .ink-wash-nav .sheet-content .sheet-chip .sheet-chip-x {
    font-size: 13px;
    line-height: 1;
    opacity: 0.4;
    margin-left: 2px;
  }
  /* Textbook chips — indigo tint */
  .ink-wash-nav .sheet-content .sheet-chip-textbook {
    background: rgba(61,90,128,0.06);
    border-color: rgba(61,90,128,0.15);
    color: #3D5A80;
  }
  /* Category chips — warm gold tint (default) */
  .ink-wash-nav .sheet-content .sheet-chip-category {
    background: rgba(201,169,110,0.06);
    border-color: rgba(201,169,110,0.2);
    color: var(--text-secondary, #57534e);
  }
  /* POS chips — muted green tint */
  .ink-wash-nav .sheet-content .sheet-chip-pos {
    background: rgba(123,139,111,0.07);
    border-color: rgba(123,139,111,0.18);
    color: #5a6b50;
  }

  /* Sheet auto-height for menu layer */
  .ink-wash-nav .mobile-filter-sheet[data-section="menu"] {
    height: auto;
    min-height: 180px;
    max-height: 65vh;
  }

  /* --- Sheet back row — quiet wayfinding, not a button --- */
  .ink-wash-nav .sheet-content .sheet-back-row {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 100%;
    padding: 12px 4px;
    border: none;
    background: transparent;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--text-secondary, #57534e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(201,169,110,0.08);
    transition: background-color 350ms ease-out;
  }
  .ink-wash-nav .sheet-content .sheet-back-row:active {
    background-color: rgba(61,90,128,0.05);
    transition: background-color 0ms;
  }
  .ink-wash-nav .sheet-content .sheet-back-row svg {
    opacity: 0.45;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    transition: transform 150ms ease;
  }
  .ink-wash-nav .sheet-content .sheet-back-row:active svg {
    transform: translateX(-2px);
  }

  /* --- Sheet toggle row — selectable items --- */
  .ink-wash-nav .sheet-content .sheet-toggle-row {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 11px 6px 11px 10px;
    border: none;
    background: transparent;
    position: relative;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary, #57534e);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 350ms ease-out;
  }
  /* Organic separator */
  .ink-wash-nav .sheet-content .sheet-toggle-row::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 6%;
    right: 6%;
    height: 1px;
    background: radial-gradient(ellipse at center, rgba(140,133,120,0.10) 0%, transparent 75%);
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row:last-child::after {
    display: none;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row:active {
    background-color: rgba(61,90,128,0.05);
    transition: background-color 0ms;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row .toggle-row-label {
    flex: 1;
    text-align: left;
    transition: color 200ms ease, font-weight 200ms ease;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row .toggle-row-meta {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-tertiary, #8C8578);
    margin-right: 4px;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row .toggle-row-check {
    display: none;
  }
  /* Selected state: ink-dark label + gold left bar + gold checkmark */
  .ink-wash-nav .sheet-content .sheet-toggle-row.selected {
    color: var(--text-primary, #2C2C2C);
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row.selected::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2.5px;
    border-radius: 2px;
    background: var(--gold, #C9A96E);
    opacity: 0.7;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row.selected .toggle-row-label {
    color: var(--text-primary, #2C2C2C);
    font-weight: 600;
  }
  .ink-wash-nav .sheet-content .sheet-toggle-row.selected .toggle-row-check {
    display: none;
  }

  /* --- Menu row meta (word count) --- */
  .ink-wash-nav .sheet-content .sheet-menu-row .menu-row-meta {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-tertiary, #8C8578);
    margin-right: 8px;
  }

  /* --- Mobile search overlay --- */
  .ink-wash-nav .mobile-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background: rgba(240,237,232,0.97);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 52px 16px 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 250ms ease;
  }
  .ink-wash-nav .mobile-search-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }
  .ink-wash-nav .mobile-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 16px;
    background: var(--card-surface, #FAFAF7);
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.06);
  }
  .ink-wash-nav .mobile-search-bar svg {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary, #8C8578);
    flex-shrink: 0;
  }
  .ink-wash-nav .mobile-search-input {
    flex: 1;
    height: 100%;
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text-primary, #2C2C2C);
    outline: none;
  }
  .ink-wash-nav .mobile-search-input::placeholder {
    color: var(--text-tertiary, #8C8578);
  }
  .ink-wash-nav .mobile-search-cancel {
    border: none;
    background: transparent;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--accent, #3D5A80);
    cursor: pointer;
    padding: 8px 4px;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .mobile-search-hint {
    padding: 20px 4px;
    font-size: 13px;
    color: var(--text-tertiary, #8C8578);
    text-align: center;
  }
  .ink-wash-nav .mobile-search-results {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(100dvh - 140px);
    padding: 4px 0;
  }
  .ink-wash-nav .mobile-search-result-item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    border-bottom: 1px solid rgba(0,0,0,0.04);
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .mobile-search-result-item:active {
    background: rgba(0,0,0,0.04);
  }
  .ink-wash-nav .msr-japanese {
    font-family: 'Klee One', serif;
    font-size: 18px;
    color: var(--text-primary, #2C2C2C);
    flex-shrink: 0;
  }
  .ink-wash-nav .msr-kanji {
    font-family: 'Klee One', serif;
    font-size: 14px;
    color: var(--text-secondary, #57534e);
    flex-shrink: 0;
  }
  .ink-wash-nav .msr-english {
    font-size: 13px;
    color: var(--text-secondary, #57534e);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ink-wash-nav .msr-pos {
    font-size: 10px;
    color: var(--text-tertiary, #8C8578);
    background: rgba(0,0,0,0.04);
    padding: 2px 6px;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .ink-wash-nav .mobile-search-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 14px;
    color: var(--text-tertiary, #8C8578);
  }

  /* --- Hide desktop-only elements --- */
  .ink-wash-nav .tool-btn.hide-mobile,
  .ink-wash-nav .util-btn.hide-mobile,
  .ink-wash-nav .dest-buttons.hide-mobile,
  .ink-wash-nav .hide-mobile {
    display: none !important;
  }

  /* --- Hide legacy elements --- */
  .ink-wash-nav .compact-btn,
  .ink-wash-nav .mobile-filter-dot,
  .ink-wash-nav .nav-summary-pill {
    display: none;
  }

  /* --- Grid margin adjustment --- */
  body.grid-mode .grid-container {
    margin-top: calc(var(--nav-bar-total-height, 120px) + 16px);
    /* Margin stays constant on mobile — nav hides via top offset,
       no margin change, no scroll compensation needed. */
  }

  /* --- Mobile-only keyframes --- */
  @keyframes mobileChipFlashIn {
    0% { opacity: 0; transform: scale(0.85) translateY(-4px); }
    30% { opacity: 1; transform: scale(1.05) translateY(0); }
    50% { opacity: 0.7; }
    70% { opacity: 1; }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }

  @keyframes mobileClearShake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-3px); }
    30% { transform: translateX(3px); }
    45% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    75% { transform: translateX(-1px); }
    90% { transform: translateX(1px); }
  }

  /* ============================================================
     MOBILE SETTINGS SHEET — bottom sheet for settings on mobile
     ============================================================ */
  .ink-wash-nav .mobile-settings-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 101;
    background: var(--card-surface, #FAFAF7);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
    transform: translateY(100%);
    transition: transform 250ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
  }
  .ink-wash-nav .mobile-settings-sheet.open {
    transform: translateY(0);
    transition-duration: 350ms;
  }

  .ink-wash-nav .mobile-settings-sheet .sheet-content {
    padding: 0 20px 24px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* Section spacing */
  .ink-wash-nav .mobile-settings-section {
    padding: 16px 0;
  }
  .ink-wash-nav .mobile-settings-section + .mobile-settings-section {
    border-top: 1px solid rgba(140,133,120,0.08);
  }

  /* Section labels — carved seal inscription */
  .ink-wash-nav .mobile-settings-label {
    display: block;
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary, #8C8578);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 14px;
  }

  /* Display mode — segmented control */
  .ink-wash-nav .mobile-settings-display-mode {
    display: flex;
    gap: 0;
    background: rgba(0,0,0,0.03);
    border-radius: 10px;
    padding: 3px;
  }
  .ink-wash-nav .mobile-settings-display-mode .segment-btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-tertiary, #8C8578);
    cursor: pointer;
    transition: all 200ms ease;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ink-wash-nav .mobile-settings-display-mode .segment-btn.active {
    background: var(--card-surface, #FAFAF7);
    color: var(--text-primary, #2C2C2C);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  }
  .ink-wash-nav .mobile-settings-display-mode .segment-btn:active {
    transform: scale(0.97);
  }

  /* Reset progress */
  .ink-wash-nav .mobile-settings-reset-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 4px;
    font-size: 15px;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-secondary, #57534e);
    background: none;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .mobile-settings-reset-btn:active {
    opacity: 0.7;
  }
  .ink-wash-nav .mobile-settings-reset-icon {
    font-size: 16px;
    color: var(--text-tertiary, #8C8578);
  }

  /* Two-step confirm */
  .ink-wash-nav .mobile-settings-reset-confirm {
    display: none;
    padding: 4px 0;
  }
  .ink-wash-nav .mobile-settings-reset-group.confirming .mobile-settings-reset-btn {
    display: none;
  }
  .ink-wash-nav .mobile-settings-reset-group.confirming .mobile-settings-reset-confirm {
    display: block;
  }
  .ink-wash-nav .mobile-settings-reset-label {
    display: block;
    font-size: 14px;
    color: var(--text-secondary, #57534e);
    text-align: center;
    margin-bottom: 12px;
  }
  .ink-wash-nav .mobile-settings-reset-buttons {
    display: flex;
    gap: 10px;
  }
  .ink-wash-nav .mobile-settings-reset-yes,
  .ink-wash-nav .mobile-settings-reset-no {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    background: none;
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .ink-wash-nav .mobile-settings-reset-yes {
    border: 1px solid #b45309;
    color: #b45309;
  }
  .ink-wash-nav .mobile-settings-reset-yes:active {
    background: rgba(180, 83, 9, 0.08);
  }
  .ink-wash-nav .mobile-settings-reset-no {
    border: 1px solid rgba(0,0,0,0.10);
    color: var(--text-secondary, #57534e);
  }
  .ink-wash-nav .mobile-settings-reset-no:active {
    background: rgba(0,0,0,0.04);
  }

  /* Done state */
  .ink-wash-nav .mobile-settings-reset-group.done .mobile-settings-reset-btn,
  .ink-wash-nav .mobile-settings-reset-group.done .mobile-settings-reset-confirm {
    display: none;
  }
  .ink-wash-nav .mobile-settings-reset-group.done::after {
    content: 'Done';
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    color: var(--status-mastered-vivid, #5B9A6F);
    font-weight: 600;
  }
}

/* Desktop: hide mobile-only elements */
@media (min-width: 769px) {
  .ink-wash-nav .mobile-only,
  .ink-wash-nav .mobile-word-count,
  .ink-wash-nav .compact-btn,
  .ink-wash-nav .mobile-filter-dot,
  .ink-wash-nav .mobile-search-overlay,
  .ink-wash-nav .mobile-filter-sheet,
  .ink-wash-nav .mobile-sheet-backdrop,
  .ink-wash-nav .mobile-settings-sheet,
  .ink-wash-nav .mobile-inline-filters,
  .ink-wash-nav .quiz-action-btn {
    display: none !important;
  }

  /* Expand zone is transparent passthrough on desktop */
  .ink-wash-nav .nav-expand-zone {
    display: contents;
  }
}

/* Category grid: 3 columns on narrow desktops */
@media (min-width: 769px) and (max-width: 1100px) {
  .ink-wash-nav .tier1-grid {
    --grid-cols: 3 !important;
  }
}

/* No 480px breakpoint — filter strip scrolls horizontally,
   so full labels work at all mobile widths. */


/* ============================================================
   FILTER PILL ROW (Row 3)
   Shows active filter pills + "Add filter" button on desktop
   ============================================================ */
.ink-wash-nav .filter-pill-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 20px 8px;
  min-height: 32px;
}

.ink-wash-nav .filter-pills-scroll {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  flex-shrink: 1;
  min-width: 0;
}

.ink-wash-nav .filter-pills-scroll::-webkit-scrollbar { display: none; }

.ink-wash-nav .filter-pills-scroll .filter-active-chip {
  white-space: nowrap;
  flex-shrink: 0;
}

.ink-wash-nav .filter-add-btn {
  flex-shrink: 0;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  background: rgba(0,0,0,0.03);
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text-tertiary, #8C8578);
  cursor: pointer;
  transition: color 350ms var(--ink-ease), background 200ms ease;
  white-space: nowrap;
}

.ink-wash-nav .filter-add-btn:hover {
  color: var(--text-secondary, #57534e);
  background: rgba(0,0,0,0.05);
}

.ink-wash-nav .filter-add-btn.has-filters {
  color: var(--text-secondary, #57534e);
}


/* ============================================================
   DECK BUTTONS (Learn / Review — quiet pills)
   ============================================================ */
.ink-wash-nav .deck-btn {
  height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary, #57534e);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s;
  white-space: nowrap;
}

.ink-wash-nav .deck-btn .btn-icon,
.ink-wash-nav .dest-btn .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ink-wash-nav .deck-btn::after { display: none; }

.ink-wash-nav .deck-btn:hover {
  background: rgba(0,0,0,0.03);
}

.ink-wash-nav .deck-btn.active {
  background: rgba(0,0,0,0.04);
  color: var(--text-primary, #2C2C2C);
  font-weight: 500;
}

.ink-wash-nav .deck-label {
  font-weight: 500;
}

.ink-wash-nav .deck-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.ink-wash-nav .deck-pill.quiet {
  background: rgba(0,0,0,0.04);
  color: var(--text-tertiary, #8C8578);
}

.ink-wash-nav .deck-pill.quiet-warm {
  background: rgba(140,133,120,0.08);
  color: var(--text-tertiary, #8C8578);
}

.ink-wash-nav .deck-btn.active .deck-pill.quiet,
.ink-wash-nav .deck-btn.active .deck-pill.quiet-warm {
  color: var(--text-secondary, #57534e);
  background: transparent;
}

.ink-wash-nav .deck-sub {
  font-size: 9px;
  color: var(--text-tertiary, #8C8578);
  opacity: 0.7;
}


/* ============================================================
   DECK BAR (three-segment breakdown: resting / ready / new)
   ============================================================ */
.ink-wash-nav .deck-bar-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ink-wash-nav .deck-bar {
  width: 100px;
  height: 4px;
  border-radius: 2px;
  background: rgba(0,0,0,0.03);
  display: flex;
  overflow: hidden;
}

.ink-wash-nav .deck-bar-seg {
  height: 100%;
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ink-wash-nav .deck-bar-seg.seg-new {
  background: var(--text-tertiary, #8C8578);
  opacity: 0.18;
}

.ink-wash-nav .deck-bar-seg.seg-ready {
  background: #C9A96E;
  opacity: 0.55;
}

.ink-wash-nav .deck-bar-seg.seg-resting {
  background: #6B7F5C;
  opacity: 0.45;
}

.ink-wash-nav .deck-bar-label {
  font-size: 10px;
  color: var(--text-tertiary, #8C8578);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}


/* ============================================================
   SESSION DOTS (progress during Learn / Review sessions)
   ============================================================ */
.ink-wash-nav .session-dots-container {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ink-wash-nav .session-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ink-wash-nav .session-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  transition: background 300ms var(--ink-ease, ease);
}

.ink-wash-nav .session-dot.filled.new {
  background: var(--status-new, #5B7B8C);
  opacity: 0.7;
}

.ink-wash-nav .session-dot.filled.ready {
  background: var(--status-learning, #A07850);
  opacity: 0.7;
}

.ink-wash-nav .session-counter {
  font-size: 11px;
  color: var(--text-secondary, #57534e);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}


/* ============================================================
   SESSION COMPLETE OVERLAY
   ============================================================ */
.session-complete-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(240, 237, 232, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.4s var(--ink-ease, ease);
}

.session-complete-overlay.visible {
  opacity: 1;
}

.session-complete-card {
  background: #FAFAF7;
  border-radius: 16px;
  padding: 40px 48px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.04);
  transform: translateY(12px);
  transition: transform 0.4s var(--ease-out, ease);
}

.session-complete-overlay.visible .session-complete-card {
  transform: translateY(0);
}

.sc-heading {
  font-family: 'Klee One', serif;
  font-size: 24px;
  color: #2C2C2C;
  margin-bottom: 4px;
}

.sc-subheading {
  font-size: 13px;
  color: #8C8578;
  margin-bottom: 28px;
}

.sc-stats {
  background: rgba(0,0,0,0.02);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 28px;
}

.sc-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.sc-stat-row.sc-stat-border {
  border-top: 1px solid rgba(0,0,0,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.sc-stat-label { font-size: 14px; }
.sc-stat-label.sc-known { color: #6B7F5C; }
.sc-stat-label.sc-learning { color: #3D5A80; }
.sc-stat-label.sc-seen { color: #8C8578; }

.sc-stat-value {
  font-size: 20px;
  font-weight: 600;
  color: #2C2C2C;
}

.sc-btn {
  display: block;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-family: 'Klee One', serif;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 8px;
}

.sc-btn-sub {
  display: block;
  font-size: 12px;
  font-family: Inter, sans-serif;
  opacity: 0.7;
  margin-top: 2px;
}

.sc-btn-primary {
  background: #3D5A80;
  color: white;
}

.sc-btn-primary:hover { background: #34506F; }

.sc-btn-secondary {
  background: rgba(0,0,0,0.04);
  color: #2C2C2C;
}

.sc-btn-secondary:hover { background: rgba(0,0,0,0.07); }

.sc-btn-ghost {
  background: transparent;
  color: #8C8578;
  margin-bottom: 0;
}

.sc-btn-ghost:hover { color: #2C2C2C; }


/* ============================================================
   HIDE/SHOW + LANGUAGE TOGGLE BUTTON OVERRIDES
   ============================================================ */
.ink-wash-nav .tool-group-hide {
  display: flex;
  align-items: center;
  gap: 2px;
}

#hideToggleBtn,
#langToggleBtn {
  font-size: 12px;
  min-width: auto;
  padding: 3px 8px;
}

#langToggleBtn {
  font-weight: 600;
  color: #3D5A80;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .ink-wash-nav,
  .ink-wash-nav *,
  .ink-wash-nav *::before,
  .ink-wash-nav *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .ink-wash-nav .brush-stroke { display: none; }
}