/* Shared phone hit-area floor for the primary app rail and page controls. */
:root {
  /* Extended Semantic Colors */
  --color-berry: #B33F50;
  --color-violet: #7E52A0;
  --color-teal: #1E828A;
  --color-emerald: #238652;
  --color-amber: #C07722;
  --color-coral: #C84E38;
  --color-indigo: #3A5BA0;
  --color-sky: #2B7A9B;

  /* Elevated Surfaces & Shadows */
  --surface-elevated: #FFFFFF;
  --surface-hover: color-mix(in srgb, var(--paper-2) 65%, #FFFFFF);
  --shadow-card: 0 1px 3px rgba(39, 26, 38, 0.05), 0 6px 16px -2px rgba(39, 26, 38, 0.06);
  --shadow-card-hover: 0 4px 12px rgba(39, 26, 38, 0.08), 0 12px 28px -4px rgba(39, 26, 38, 0.10);
  --shadow-glow-primary: 0 0 16px color-mix(in srgb, var(--primary) 28%, transparent);
  --shadow-glow-violet: 0 0 16px color-mix(in srgb, var(--color-violet) 28%, transparent);
  --shadow-glow-teal: 0 0 16px color-mix(in srgb, var(--color-teal) 28%, transparent);
  --shadow-glow-emerald: 0 0 16px color-mix(in srgb, var(--color-emerald) 28%, transparent);
  --shadow-glow-amber: 0 0 16px color-mix(in srgb, var(--color-amber) 28%, transparent);

  /* Animation Easings */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"], .dark {
  --surface-elevated: #311B30;
  --surface-hover: #3D223B;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 6px 20px -2px rgba(0, 0, 0, 0.4);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4), 0 12px 28px -4px rgba(0, 0, 0, 0.5);
  --color-violet: #A272CE;
  --color-teal: #33A4AF;
  --color-emerald: #39A76E;
  --color-amber: #D6913E;
  --color-coral: #E3644F;
  --color-indigo: #628BE0;
}

/* Modern, clean sidebar styling */
.side-shell {
  background: var(--paper);
  transition: background 0.2s var(--ease-smooth);
}
.side-brand {
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.side-nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 8px;
}
.nav-link {
  border-top: 1px solid transparent !important;
  border-left: 0 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  padding: 10px 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.12em !important;
  color: var(--ink-2) !important;
  transition: all 0.18s var(--ease-spring) !important;
  position: relative;
}
/* Desktop sidebar only: on phone the rail is horizontal and the bottom border is the
   active-tab underline (and part of the 44px hit area), so the last link must keep it. */
@media (min-width: 721px) {
  .nav-link:last-child {
    border-bottom: 0 !important;
  }
}
.nav-link:hover {
  background: var(--paper-2) !important;
  color: var(--ink) !important;
  transform: translateX(2px);
}
.nav-link[aria-current="page"] {
  background: color-mix(in srgb, var(--primary) 12%, var(--paper)) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}
.nav-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 16px;
  border-radius: 99px;
  background: var(--primary);
  animation: barEnter 0.22s var(--ease-spring);
}
@keyframes barEnter {
  from { height: 0; opacity: 0; }
  to { height: 16px; opacity: 1; }
}

@media (max-width: 720px) {
  .nav-link {
    /* !important: page-level `.nav-link { min-height: 0 }` rules load later and won the cascade. */
    min-height: 44px !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body:has(#capability-toggle) :where(
    button:not([disabled]), a[href], summary,
    input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]),
    [role="button"]:not([aria-disabled="true"]), [tabindex]:not([tabindex="-1"])) {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  body:has(#assignment-flow) :where(
    button:not([disabled]), a[href], summary,
    input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled]),
    [role="button"]:not([aria-disabled="true"]), [tabindex]:not([tabindex="-1"])),
  #run-solve, .work-map-language summary,
  #shared-kind, #shared-title, #shared-categories,
  #shared-object-editor button, #document-title, #document-source,
  #document-retention, #document-keep-summary, #document-keep-source,
  #document-work-slot button {
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
  }
  body:has(#capability-toggle) a[href],
  body:has(#assignment-flow) a[href] {
    display: inline-flex;
    align-items: center;
  }
}

/* Smooth same-origin page changes (Start -> Workbench, nav links). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; animation-timing-function: ease-out; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* PROD-196 390px: phone nav is one compact row (was 3 wrapped rows, ~185px). */
@media (max-width: 720px) {
  .side-shell { flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 0 4px !important; padding: 4px 8px !important; width: 100% !important; box-sizing: border-box; }
  .side-brand { margin: 0 !important; width: auto !important; flex: none; font-size: 0 !important; }
  .side-nav { flex: 1 1 0 !important; min-width: 0; flex-direction: row !important; flex-wrap: nowrap !important; gap: 0 !important; padding: 0 !important; overflow-x: auto; scrollbar-width: none; }
  .side-nav .nav-link, .side-user-bar .nav-link { flex: 1 0 auto !important; padding: 0 6px !important; font-size: 10px !important; letter-spacing: 0 !important; transform: none !important; }
  .nav-link[aria-current="page"]::before { left: 25%; top: auto; bottom: 4px; transform: none; width: 50%; height: 2px; animation: none; }
  .side-user-bar { flex: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
  .side-foot { flex: 1 0 100% !important; margin: 0 !important; padding: 2px 0 !important; border: 0 !important; }
  .side-user-bar .user-avatar, .side-spacer { display: none !important; }
}