/* The beta skin is packaged only by build-beta-assets.js. All existing forms,
   consent controls, auth flows, charts and privacy behavior remain functional. */
@media screen {
  :root {
    --bg: #f7f6f0; --paper: #fffef9; --ink: #213d34; --muted: #596b5c;
    --line: #dce2d3; --accent: #345b47; --accent-text: #fffef7;
    --soft: #e8eddc; --tint: #f0f2e7; --hero: #edf0e2; --lavender: #efebf4;
    --nav: #f0f2e8; --nav-text: #254735; --nav-muted: #5c6c59;
    --nav-width: 232px; --radius: 16px; --shadow: 0 5px 22px #29483205;
    --beta-banner-height: 48px; --ease: cubic-bezier(.2,.75,.2,1);
    scroll-padding-top: calc(var(--beta-banner-height) + 90px);
  }
  :root[data-theme=dark] {
    --bg: #14201a; --paper: #1b2a22; --ink: #eef3e8; --muted: #bdc9b5;
    --line: #3b4c3f; --accent: #c2d9ad; --accent-text: #192a1c;
    --soft: #2e4130; --tint: #233629; --hero: #293d2c; --lavender: #363346;
    --nav: #17271e; --nav-text: #eef3e8; --nav-muted: #bacab2; --shadow: none;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]):not([data-theme=dark]) {
      --bg: #14201a; --paper: #1b2a22; --ink: #eef3e8; --muted: #bdc9b5;
      --line: #3b4c3f; --accent: #c2d9ad; --accent-text: #192a1c;
      --soft: #2e4130; --tint: #233629; --hero: #293d2c; --lavender: #363346;
      --nav: #17271e; --nav-text: #eef3e8; --nav-muted: #bacab2; --shadow: none;
    }
  }
  body { background: var(--bg); padding-top: var(--beta-banner-height); }
  .beta-release {
    position: fixed; inset: 0 0 auto; z-index: 20; min-height: var(--beta-banner-height);
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 4px 24px; color: var(--ink); background: var(--soft); border-bottom: 1px solid var(--line);
    font: 500 .76rem/1.4 system-ui,sans-serif;
  }
  .beta-release strong { display: inline-block; margin-right: 10px; padding: 3px 9px; background: var(--accent); color: var(--accent-text); border-radius: 6px; }
  .beta-release a { color: var(--ink); min-height: 40px; display: inline-flex; align-items: center; gap: 5px; text-underline-offset: 4px; }
  .beta-new-tab { font-size: .68rem; }
  .skip { z-index: 40; }
  h1 { font-size: clamp(2.2rem,4.2vw,3.6rem); line-height: 1.08; letter-spacing: -.045em; }
  h2,h3 { font-family: Georgia,'Times New Roman',serif; font-weight: 400; }
  h2 { letter-spacing: -.025em; }
  p { line-height: 1.75; }
  button,.button { border-radius: 9px; transition: background 180ms var(--ease),border-color 180ms var(--ease),box-shadow 180ms var(--ease),transform 180ms var(--ease); }
  button.primary,.button.primary { background: var(--accent); color: var(--accent-text); box-shadow: 0 3px 8px #183b2710; }
  input,textarea,select { border-radius: 9px; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  .owner-workspace .owner-sidebar {
    top: var(--beta-banner-height); padding: 28px 18px 22px;
    background: var(--nav); color: var(--nav-text); border-right: 1px solid var(--line);
    flex-wrap: nowrap;
  }
  .owner-sidebar>* { flex-shrink: 0; }
  .owner-sidebar .wordmark { color: var(--nav-text); font: 1.4rem Georgia,serif; letter-spacing: -.04em; }
  .owner-sidebar .wordmark small { color: var(--nav-muted); letter-spacing: .025em; line-height: 2; }
  .owner-sidebar .brand-symbol { color: var(--accent); background: var(--soft); border: 1px solid var(--line); }
  .owner-sidebar nav { margin-top: 28px; }
  .owner-sidebar .nav-group { margin-bottom: 19px; }
  .nav-group-label { font-size: .61rem; letter-spacing: .15em; color: var(--nav-muted); }
  .owner-sidebar nav button { color: var(--nav-muted); border-radius: 9px; min-height: 44px; }
  .owner-sidebar nav button:hover { background: var(--soft); color: var(--ink); }
  .owner-sidebar nav button[aria-current=page] { background: var(--soft); color: var(--ink); font-weight: 650; }
  .owner-sidebar nav button[aria-current=page]::after { background: var(--accent); }
  .owner-sidebar .sidebar-pause { border: 1px solid var(--line); background: transparent; border-radius: 12px; }
  .sidebar-pause p { color: var(--nav-text); }
  .sidebar-pause .pause-symbol { color: var(--accent); }
  .sidebar-pause>span:not(.pause-symbol),.sidebar-private { color: var(--nav-muted); }
  .sidebar-pause button { background: var(--paper); color: var(--ink); border-color: var(--line); }
  .workspace-topbar { top: var(--beta-banner-height); background: var(--bg); padding-inline: 40px; height: 78px; }
  .owner-workspace>#main { padding: 40px 40px 64px; min-height: calc(100dvh - 126px); }
  .page-head,.care-heading { margin-bottom: 30px; }
  .timeline-heading { border: 0; padding: 0 0 8px; align-items: end; }
  .timeline-heading h1,.care-heading h1 { font-size: clamp(2.2rem,4.2vw,3.6rem); line-height: 1.08; }
  .timeline-heading .eyebrow,.care-heading .eyebrow { color: var(--muted); letter-spacing: .15em; font-weight: 500; }
  .timeline-heading p:not(.eyebrow),.care-heading p { max-width: 65ch; }
  .timeline-heading .actions { flex-shrink: 0; }
  .home-good { background: var(--hero); border: 1px solid var(--line); border-radius: 14px; }
  .filters { padding: 18px 0 10px; }
  .filter-primary { align-items: center; }
  .filters input { background: var(--paper); }
  .selection-bar { margin: 0 0 14px; }
  .timeline-section-label { display: flex; padding: 18px 0; }
  .timeline-section-label>span:first-child { font: 1.65rem Georgia,serif; color: var(--ink); }
  #timeline { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  #timeline>.empty { grid-column: 1 / -1; }
  /* Each card already includes its date. Keep the year headings available to
     assistive technology without leaving an empty grid cell after each year. */
  #timeline>.year-marker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; white-space: nowrap; }
  .year-marker::before,.memory-card::before { display: none; }
  #timeline .memory-card {
    margin: 0; min-width: 0; padding: 24px; border-radius: 14px;
    display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 16px;
    grid-template-areas: 'photo photo' 'body arrow' 'select select';
    transition: transform 280ms var(--ease),box-shadow 280ms var(--ease),border-color 280ms var(--ease);
  }
  #timeline .memory-card:hover { transform: translateY(-3px); box-shadow: 0 16px 28px #314c3010; border-color: var(--accent); }
  .memory-card .memory-open { grid-area: body; align-self: stretch; }
  .memory-card .memory-open h3 { font-size: 1.65rem; line-height: 1.18; margin: 12px 0; }
  .memory-card .memory-open p { font-size: .88rem; margin-bottom: 18px; }
  .memory-card .memory-chapter { color: var(--muted); }
  .memory-card .memory-arrow { grid-area: arrow; padding-top: 30px; }
  .memory-card .select-memory { grid-area: select; }
  .memory-card .memory-thumbnail { grid-area: photo; width: 100%; height: 190px; border-radius: 9px; object-fit: cover; }
  .memory-card.covered { background: var(--tint); border-style: dashed; }
  .memory-card.covered .memory-open { padding-block: 16px!important; }
  .chips span { background: var(--soft); border-radius: 5px; padding: 4px 8px; }
  .care-tabs,.portal-tabs { background: transparent; border-radius: 0; border-bottom: 1px solid var(--line); padding: 0 0 12px; gap: 6px; }
  .care-tabs button,.portal-tabs button { border-radius: 8px; padding: 10px 14px; }
  .care-tabs button[aria-current=page],.portal-tabs button[aria-current=page] { background: var(--soft); color: var(--ink); }
  .care-panel,.card,.access-actions .care-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
  .care-panel h2,.access-actions h2 { font-size: 1.65rem; }
  .access-primary { background: var(--hero)!important; }
  .care-consent { background: var(--tint); border-color: var(--line); border-radius: 10px; }
  .editor { border-radius: 16px; background: var(--paper); }
  .editor textarea[name=description] { font-size: 1.05rem; line-height: 1.85; }
  .editor .editor-footer { border-radius: 10px; }
  #dialog { border-radius: 18px; background: var(--paper); }
  #dialog[open] { animation: beta-dialog 240ms var(--ease); }
  #dialog.memory-reader { inset-block: calc(var(--beta-banner-height) + 12px) 12px; height: calc(100dvh - var(--beta-banner-height) - 24px); border-radius: 18px; padding: 30px 36px; }
  #dialog.memory-reader[open] { animation: beta-reader 320ms var(--ease); }
  #dialog.memory-reader .focused h1 { font-size: clamp(2rem,3.6vw,3.2rem); }
  .memory-ratings { border: 1px solid var(--line); border-radius: 12px; }
  .clinician-page>.site-header { background: var(--nav); color: var(--nav-text); border-bottom: 1px solid var(--line); }
  .clinician-page>.site-header .wordmark { color: var(--nav-text); font-family: Georgia,serif; }
  .clinician-page>.site-header .brand-symbol { background: var(--soft); color: var(--accent); border: 1px solid var(--line); }
  .clinician-portal { max-width: 1350px; padding-top: 40px; }
  .welcome { padding-top: 48px; }
  .welcome h1 { font-size: clamp(2.8rem,5vw,4.6rem); }
  /* No outgoing screenshots or retained DOM: privacy hiding stays immediate. */
  @keyframes beta-dialog { from { opacity: .5; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes beta-reader { from { opacity: .6; transform: translateX(24px); } to { opacity: 1; transform: none; } }
  @media (min-width: 1450px) { .owner-workspace>#main { padding-inline: clamp(40px,6vw,110px); } }
  @media (max-width: 1100px) and (min-width: 901px) {
    :root { --nav-width: 210px; }
    .owner-workspace>#main { padding-inline: 26px; }
    .workspace-topbar { padding-inline: 26px; }
    .timeline-heading { align-items: start; flex-direction: column; }
    .memory-card .memory-open h3 { font-size: 1.4rem; }
  }
  @media (max-width: 900px) {
    .owner-workspace .owner-sidebar { top: auto; padding: 18px 18px 0; border-right: 0; }
    .owner-sidebar .sidebar-pause { border: 0; padding: 0; }
    .owner-sidebar nav { margin-top: 12px; }
    .owner-sidebar .nav-group { margin-bottom: 12px; }
    .workspace-topbar { top: var(--beta-banner-height); padding-inline: 20px; }
    .owner-workspace>#main { padding: 28px 20px 100px; }
    .mobile-dock { background: var(--paper); border-color: var(--line); }
    .mobile-dock button[aria-current=page] { color: var(--accent); background: var(--soft); }
    .timeline-heading { align-items: start; flex-direction: column; gap: 16px; }
    .timeline-heading .actions { flex-wrap: wrap; }
    #dialog.memory-reader { width: calc(100vw - 24px); }
    .clinician-portal { padding: 28px 20px; }
  }
  @media (max-width: 600px) {
    :root { --beta-banner-height: 78px; }
    .beta-release { padding: 6px 16px; display: block; font-size: .7rem; }
    .beta-release>span { display: block; }
    .beta-release a { min-height: 38px; margin-left: 48px; }
    .beta-release strong { margin-right: 6px; }
    h1,.timeline-heading h1,.care-heading h1 { font-size: 2.5rem; }
    .workspace-topbar { padding-inline: 16px; }
    .owner-workspace>#main { padding-inline: 16px; }
    #timeline { grid-template-columns: minmax(0,1fr); gap: 16px; }
    #timeline .memory-card { padding: 22px; }
    .timeline-section-label>span:last-child { display: none; }
    .care-tabs { padding-bottom: 10px; }
    .care-tabs button { font-size: .79rem; }
    #dialog.memory-reader { inset: var(--beta-banner-height) 0 0; width: 100%; height: calc(100dvh - var(--beta-banner-height)); padding: 22px; border-radius: 16px 16px 0 0; }
    .clinician-portal { padding: 28px 16px; }
    .clinician-page>.site-header { flex-wrap: wrap; gap: 8px; }
  }
  @media (max-width: 360px) { :root { --beta-banner-height: 96px; } }
  @media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
    #timeline .memory-card:hover { transform: none; }
  }
}
@media print { .beta-release { display: none; } }
