/*
 * ui.css — Eigen-Rho modern polish layer.
 * Loaded LAST so it refines the existing editorial components (light, elegant)
 * with soft elevation, smooth micro-interactions, and modern focus states —
 * without restructuring any layout. No dark theme.
 */

:root{
  --ui-shadow-sm: 0 1px 2px rgba(13,13,13,.05), 0 1px 3px rgba(13,13,13,.06);
  --ui-shadow-md: 0 6px 18px rgba(13,13,13,.08), 0 2px 6px rgba(13,13,13,.05);
  --ui-shadow-lg: 0 16px 40px rgba(13,13,13,.12), 0 4px 10px rgba(13,13,13,.06);
  --ui-ease: cubic-bezier(.4, 0, .2, 1);
  --ui-accent: var(--accent, #c8402a);
}

/* crisper type + smooth anchored scrolling */
html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
::selection{ background: rgba(200,64,42,.16); }

/* refined, accessible focus ring */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline: 2px solid var(--ui-accent);
  outline-offset: 2px;
  border-radius: 5px;
}

/* CARDS — soft elevation; clickable cards lift on hover */
.card, .panel, .case-card{
  border-radius: 12px;
  box-shadow: var(--ui-shadow-sm);
  transition: box-shadow .2s var(--ui-ease), transform .2s var(--ui-ease), border-color .2s var(--ui-ease);
}
.card:hover, .panel:hover{ box-shadow: var(--ui-shadow-md); }
.case-card{ cursor:pointer; }
.case-card:hover{ box-shadow: var(--ui-shadow-md); transform: translateY(-2px); }

/* BUTTONS — consistent soft radius, smooth hover-lift, press feedback */
button, .btn, .btn-primary, .btn-ghost, .btn-accent, .btn-secondary, .nav-cta,
.btn-run, .btn-submit, .btn-join, .btn-confirm, .btn-clear, .btn-cancel, .welcome-btn{
  border-radius: 8px;
  transition: transform .15s var(--ui-ease), box-shadow .15s var(--ui-ease),
              background-color .15s var(--ui-ease), border-color .15s var(--ui-ease), color .15s var(--ui-ease);
}
button:hover, .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-accent:hover,
.btn-secondary:hover, .nav-cta:hover, .btn-run:hover, .btn-submit:hover,
.btn-join:hover, .btn-confirm:hover, .welcome-btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-md);
}
button:active, .btn:active, [class*="btn"]:active, .nav-cta:active, .welcome-btn:active{
  transform: translateY(0);
  box-shadow: var(--ui-shadow-sm);
}
button:disabled, .btn:disabled, [class*="btn"]:disabled{
  transform:none !important; box-shadow:none !important; opacity:.55; cursor:not-allowed;
}

/* INPUTS — modern subtle focus */
input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea{
  border-radius: 8px;
  transition: border-color .15s var(--ui-ease), box-shadow .15s var(--ui-ease);
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  border-color: var(--ui-accent);
  box-shadow: 0 0 0 3px rgba(200,64,42,.12);
  outline: none;
}

/* nav links — subtle underline grow on hover */
nav a:not(.nav-cta):not(.brand){
  transition: color .15s var(--ui-ease);
}

/* modern, subtle scrollbars (neutral grey reads on light + dark panes) */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{
  background: rgba(120,120,120,.4);
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover{ background: rgba(120,120,120,.6); background-clip: content-box; }
*::-webkit-scrollbar-track{ background: transparent; }

/* ============================================================
   Component refinements — tables, chips, modals, density
   ============================================================ */

/* TABLES — airier, lighter rules, hover rows (modern data tables) */
table{ border-collapse: collapse; }
table th{
  text-align: left;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border, #e5ddd0);
  font-weight: 600;
}
table td{
  padding: 13px 16px;
  border-bottom: 1px solid rgba(13,13,13,.05);
}
table tbody tr{ transition: background-color .12s var(--ui-ease); }
table tbody tr:hover{ background: rgba(200,64,42,.035); }
table tbody tr:last-child td{ border-bottom: none; }

/* CHIPS / PILLS — fully rounded soft tags */
.chip, .pill, .case-badge, .status{
  border-radius: 999px;
  transition: background-color .15s var(--ui-ease), color .15s var(--ui-ease), border-color .15s var(--ui-ease);
}

/* MODAL CARDS — softer corners + deeper elevation (small/centered modals only) */
.welcome-card{ border-radius: 18px; box-shadow: var(--ui-shadow-lg); }
.welcome-modal{ backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }

/* DENSITY — a touch more vertical breathing room in flowing content */
.problem-narrative, .hero-sub{ line-height: 1.7; }