/* Shared visual system. Loaded after the legacy component styles so specialized
   timeline, map, encryption, and sharing controls keep their existing behavior. */
:root {
  color-scheme: dark;
  --bg: #101918;
  --panel: #192421;
  --panel-strong: #192421;
  --panel-border: #34423c;
  --panel-outline: #34423c;
  --text: #f2f0e8;
  --muted: #abb8af;
  --accent: #bdddac;
  --accent-2: #83baa5;
  --shadow: 0 8px 28px #00000014;
  --radius: 18px;
}
body { background: var(--bg); padding: 0; line-height: 1.5; }
.app-shell.has-sidebar { max-width: 1720px; width: 100%; padding: 26px 36px 32px 286px; }
.section-sidebar { top: 0; left: 0; bottom: 0; width: 250px; padding: 26px 16px; border-radius: 0; border: 0; border-right: 1px solid #2b3933; background: #131e1a; box-shadow: none; gap: 20px; }
.sidebar-brand { gap: 12px; padding: 0 4px 22px; }
.sidebar-logo { width: 42px; height: 42px; padding: 5px; border-radius: 12px; background: #23342a; }
.sidebar-title { font-size: 1.04rem; color: var(--text); letter-spacing: -.035em; }
.sidebar-subtitle { font-size: .72rem; margin-top: 3px; }
.sidebar-nav { gap: 4px; scrollbar-width: thin; scrollbar-color: #3f5246 transparent; }
.nav-group-label { color: #91a397; font-size: .64rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin: 16px 12px 5px; }
.nav-group-label:first-child { margin-top: 0; }
.sidebar-link { gap: 11px; padding: 9px 11px; min-height: 46px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #ced6cd; box-shadow: none; }
.sidebar-link-icon { flex: 0 0 25px; width: 25px; height: 25px; border: none; border-radius: 0; background: none; color: #9bac9c; }
.sidebar-link-icon svg { width: 20px; height: 20px; }
.sidebar-link-text>span { font-size: .81rem; font-weight: 500; letter-spacing: 0; }
.sidebar-link-text small { font-size: .65rem; color: #99aa9c; }
.sidebar-link:hover, .sidebar-link:focus-visible { transform: none; box-shadow: none; background: #223328; border-color: #3e5442; }
.sidebar-link.is-active { background: #c3dcab; border-color: #c3dcab; box-shadow: none; color: #17241a; }
.sidebar-link.is-active .sidebar-link-icon, .sidebar-link.is-active small { color: #304832; }
body.is-signed-out .sidebar-link { opacity: 1; }
.sidebar-count-badge { font-size: .64rem; min-width: 18px; padding: 1px 5px; }
.topbar { position: static; min-height: 52px; margin-bottom: 32px; padding: 0 0 18px; border: none; border-bottom: 1px solid #34423c; border-radius: 0; background: transparent; backdrop-filter: none; box-shadow: none; }
.topbar-logo { width: 32px; height: 32px; padding: 4px; background: #26352b; }
.topbar-brand .small { color: var(--muted); font-size: .72rem; }
.topbar-actions { gap: 8px; justify-content: flex-end; }
.topbar-actions .btn, .topbar-actions .chip, .session-pill { font-size: .72rem; padding: 7px 10px; border-radius: 8px; }
.session-pill { color: var(--text); font-weight: 500; }
.session-pill::before { width: 6px; height: 6px; box-shadow: none; }
.hero-auth-main { padding: 42px; border: 1px solid #405444; border-radius: 20px; background: radial-gradient(ellipse at 100% 0%,#35523a 0%,transparent 65%),#1d2d23; box-shadow: none; }
.eyebrow { font-size: .7rem; text-transform: uppercase; letter-spacing: .16em; color: #bdd3ac; }
.hero-auth-main h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; letter-spacing: -.045em; max-width: 14ch; font-size: clamp(2.6rem,5vw,4.8rem); line-height: 1.04; margin: 22px 0; }
.hero-auth-main .hero-copy { max-width: 53ch; line-height: 1.8; color: #c1cbbd; font-size: .95rem; }
.hero-actions { gap: 9px; margin-top: 26px; }
.hero-info-summary { font-size: .8rem; padding: 9px 12px; }
.hero-auth-only { margin-bottom: 30px; }
.view-heading { margin: 0 0 20px; align-items: center; flex-direction: row; }
.view-heading h2 { font-size: clamp(1.35rem,2.4vw,1.9rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.3; }
.view-heading-chip { background: #25332a; color: #bfd2b5; border: 1px solid #3a4b3c; border-radius: 7px; font-size: .63rem; padding: 5px 9px; }
.panel, .profile-panel, .capture-panel, .insights-panel, .connection-panel, .vault-panel, .ai-panel, #sharing-centre-panel, #workbench-panel { background: var(--panel); border: 1px solid var(--panel-border); border-radius: 18px; padding: 26px; backdrop-filter: none; box-shadow: var(--shadow); }
.panel::before, .capture-panel::after { content: none; }
.panel-header { padding: 0 0 16px; margin-bottom: 18px; border-bottom: 1px solid #34423c; }
.panel-title-row h2 { font-size: 1rem; font-weight: 600; }
.panel-body { padding: 0; }
.panel>p.muted { font-size: .88rem; max-width: 80ch; line-height: 1.8; }
.subpanel, .memory-card, .connection-card, .suggestion-card, .temporal-card { background: #1e2b25; border-color: #38483d; box-shadow: none; backdrop-filter: none; border-radius: 12px; }
.memory-card { transition: border-color .15s; }
.memory-card:hover { border-color: #718a6c; }
.memory-body, .memory-viewer-body { line-height: 1.85; }
.memory-viewer-body { background: #1c2923; border-radius: 12px; color: var(--text); }
input, select, textarea, code { background: #111e18; border-color: #455449; border-radius: 9px; color: var(--text); font-size: .88rem; padding: 12px 13px; }
input::placeholder, textarea::placeholder { color: #92a293; }
label>span, .stack-form label>span { font-size: .78rem; color: #c7d0c5; }
.grid-form label:not(.checkbox-row) { align-items: stretch; flex-direction: column; gap: 7px; }
.grid-form label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.btn { border-radius: 9px; font-size: .81rem; font-weight: 600; min-height: 40px; box-shadow: none; }
.btn-primary { color: #18251b; background: #c3dcab; border: 1px solid #c3dcab; }
.btn-primary:hover { background: #d4e9c1; }
.btn-secondary, .btn-ghost { background: #26352b; border: 1px solid #455649; color: #e4eadd; }
.btn-ghost { background: transparent; }
.btn:disabled { cursor: wait; opacity: .55; transform: none; }
.btn-danger { background: #482b2d; color: #ffd4d0; border-color: #865453; }
:where(button,a,input,textarea,select,summary,[tabindex]):focus-visible { outline: 2px solid #d0e7b7; outline-offset: 4px; }
.sidebar-link:focus-visible { outline: 2px solid #d0e7b7; outline-offset: -2px; }
.chip { font-size: .72rem; padding: 6px 10px; border-color: #465749; background: #283a2d; color: #d5e1cb; }
.info-btn { background: #2a3a2e; color: #d5e1cb; border-color: #4a5a4d; }
.ai-prompt-ideas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.ai-prompt-ideas>.small { flex-basis: 100%; margin-bottom: 2px; }
.ai-prompt-ideas .btn { border-radius: 99px; font-weight: 500; min-height: 34px; font-size: .75rem; }
#ai-prompt { min-height: 145px; line-height: 1.7; }
.ai-controls { align-items: end; display: grid; grid-template-columns: minmax(0,1fr) minmax(130px,.5fr) auto; gap: 14px; }
.ai-controls .btn { min-height: 46px; }
.ai-output { background: #142019; border-color: #394e3c; border-radius: 12px; padding: 24px; line-height: 1.85; }
.ai-output:empty::before { content: 'Your story will appear here, with references to the memories that inspired it.'; color: #a4b19f; font-size: .85rem; }
.notice:empty { display: none; }
.policy-footer-inner { border-radius: 12px; background: transparent; box-shadow: none; border-color: #34423c; }
.policy-footer-links a { background: #202d25; border-color: #3c4b40; color: #d7e0d0; border-radius: 7px; }
.policy-footer-links a span { color: #a6b3a0; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 200; background: #d4e9c1; color: #17241a; padding: 12px; border-radius: 8px; }
.skip-link:focus { top: 12px; }
@media (min-width:1100px) { .capture-panel .grid-form { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media (max-width:1100px) { .topbar { align-items: flex-start; flex-direction: column; gap: 12px; } .topbar-actions { justify-content: flex-start; } }
@media (max-width:980px) {
  .section-sidebar { position: sticky; top: 0; width: 100%; bottom: auto; padding: 12px 16px 10px; gap: 10px; border-radius: 0; border-right: 0; border-bottom: 1px solid #34423c; }
  .sidebar-brand { padding: 0; border: none; }
  .sidebar-logo { height: 30px; width: 30px; }
  .sidebar-subtitle { display: none; }
  .sidebar-nav { display: flex; overflow-x: auto; padding: 2px 0 6px; gap: 6px; }
  .nav-group-label { display: none; }
  .sidebar-link { flex: 0 0 auto; width: auto; min-height: 42px; padding: 8px 12px; gap: 7px; }
  .sidebar-link-text small { display: none; }
  .sidebar-link-icon { flex-basis: 18px; width: 18px; height: 18px; }
  .sidebar-link-icon svg { width: 18px; height: 18px; }
  .app-shell.has-sidebar { padding: 20px; }
  .topbar { margin: 0 0 24px; }
}
@media (max-width:600px) {
  .app-shell.has-sidebar { padding: 16px; }
  .hero-auth-main { padding: 26px; }
  .hero-auth-main h1 { font-size: 3.1rem; }
  .panel { padding: 18px; margin-bottom: 18px; }
  .ai-controls { grid-template-columns: 1fr; }
  .memory-list, .temporal-grid { grid-template-columns: minmax(0,1fr); }
  .hero-actions>.btn { width: 100%; text-align: center; }
  .topbar-actions { width: 100%; }
  .app-store-topbar-link { width: auto; }
  .view-heading-chip { flex-shrink: 0; }
  .view-heading h2 { font-size: 1.35rem; }
  .policy-footer-links a { width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (max-width:980px) {
  /* Comfortable touch targets and text sizing for phone browsers. */
  input, select, textarea { font-size: 16px; }
  .btn, .sidebar-link { min-height: 44px; }
  .ai-prompt-ideas .btn { min-height: 44px; }
  .section-sidebar { padding-top: max(12px, env(safe-area-inset-top)); }
  .app-shell.has-sidebar { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .sidebar-nav { scroll-padding-inline: 12px; overscroll-behavior-x: contain; }
}
@media (max-width:600px) {
  .topbar-brand { display: none; } /* Brand remains in the sticky navigation. */
  .panel-header { flex-wrap: wrap; gap: 14px; }
  .panel-header .panel-title-row { flex: 1 1 100%; }
  .panel-header-actions { width: 100%; }
  .panel-header-actions .btn { flex: 1 1 auto; }
  .panel-title-row h2 { line-height: 1.4; }
  .temporal-card-header { flex-wrap: wrap; }
}
.app-view-page, .panel, .subpanel, .grid-form, .stack-form, .two-col, .coverage-grid, .timeline-control-row { min-width: 0; }
input, select, textarea { min-width: 0; max-width: 100%; }
@media (max-width:600px) {
  .memory-space-toolbar-group, .memory-space-zoom-label { min-width: 0; max-width: 100%; }
  .memory-space-zoom-label { width: 100%; border-radius: 10px; }
  .memory-space-zoom-label input { width: 100%; min-width: 0; flex: 1; }
  .info-btn::after { position: fixed; left: 16px; right: 16px; bottom: 16px; width: auto; min-width: 0; max-width: none; transform: none; }
  .info-btn:hover::after, .info-btn:focus-visible::after { transform: none; }
  .hero-info-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}