/* Dementia Diary — app styling in the "scrapbook" aesthetic.
   Keeps every existing class name so page markup is unchanged. */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root{
  --cork:#C9A26B; --cork-dark:#B48A50; --cork-shadow:rgba(120,80,40,.28);
  --paper:#FFFDF6; --paper-cream:#FBF3E2; --ink:#3A3228; --ink-soft:#6B5F4E;
  --pin-red:#D0533F; --pin-blue:#4A7BA6; --pin-green:#5C8A5A; --pin-yellow:#E0A73E;
  --note-yellow:#FFF3B0; --note-green:#D3EAC6; --note-pink:#FAD9D2; --note-blue:#CFE4F2;
  --tape:rgba(244,232,190,.72); --line:#E7DCC4;
  --teal:var(--pin-green); --teal-dark:#41633C;
  --sage:var(--note-green); --sand:var(--cork); --white:var(--paper);
  --blue:var(--pin-blue); --amber:var(--pin-yellow); --success:#2E7D5B; --alert:var(--pin-red);
}

*{ box-sizing:border-box; }
html{ font-size:18px; }
body{
  margin:0; color:var(--ink); font-family:Nunito,system-ui,sans-serif; line-height:1.6;
  background-color:#DFE6EC;
  background-attachment:fixed;
}
h1,h2,h3{ font-family:'Caveat',cursive; line-height:1.1; color:var(--ink); font-weight:700; }
h1{ font-size:2.6rem; margin:0 0 .2em; }
h2{ font-size:2rem; margin:1.4em 0 .4em; }
h3{ font-size:1.5rem; }
a{ color:var(--pin-blue); }

.skip{ position:absolute; left:-999px; top:auto; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; z-index:100; }
.skip:focus{ left:16px; top:16px; }

.site-header{ background:#3E6B89; box-shadow:0 4px 14px rgba(40,50,60,.14); }
.site-header .inner{ max-width:960px; margin:0 auto; padding:16px clamp(16px,4vw,32px); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-header .brand{ font-family:'Caveat',cursive; font-weight:700; font-size:1.9rem; color:#fff; text-decoration:none; text-shadow:0 2px 4px rgba(0,0,0,.28); }
.mainnav{ display:flex; gap:6px; flex-wrap:wrap; }
.mainnav a{ color:#fff; text-decoration:none; font-weight:700; font-size:1rem; padding:8px 14px; border-radius:8px; display:inline-block; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.mainnav a:hover{ background:rgba(255,255,255,.16); }
.mainnav a.active{ background:var(--paper); color:var(--ink); text-shadow:none; box-shadow:0 3px 8px var(--cork-shadow); }
.userbar{ font-size:.95rem; color:#fff; display:flex; align-items:center; gap:12px; text-shadow:0 1px 2px rgba(0,0,0,.28); }
.userbar a{ color:#fff; }

.container{ max-width:960px; margin:0 auto; padding:clamp(20px,4vw,34px) clamp(16px,4vw,32px); }

.card{ background:var(--paper); border:none; border-radius:4px; padding:clamp(20px,3vw,30px); margin-bottom:26px; position:relative; box-shadow:0 8px 18px var(--cork-shadow); }
.card::before{ content:""; position:absolute; top:-10px; left:50%; transform:translateX(-50%); width:20px; height:20px; border-radius:50%; background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-red) 70%); box-shadow:0 3px 5px rgba(0,0,0,.3), inset 0 -2px 3px rgba(0,0,0,.2); }
.card h2:first-child, .card h3:first-child{ margin-top:0; }
.muted{ color:var(--ink-soft); }
.stack > * + *{ margin-top:14px; }

.recipient-bar{ background:var(--paper-cream); border:none; border-radius:3px; padding:14px 20px; margin-bottom:26px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; position:relative; box-shadow:0 6px 14px var(--cork-shadow); }
.recipient-bar::before{ content:""; position:absolute; top:-11px; left:50%; transform:translateX(-50%) rotate(-3deg); width:96px; height:26px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.recipient-bar .who{ font-family:'Caveat',cursive; font-weight:700; font-size:1.5rem; }

.btn{ display:inline-block; border:none; border-radius:9px; padding:13px 22px; font-size:1rem; font-weight:800; font-family:Nunito,sans-serif; cursor:pointer; text-decoration:none; text-align:center; line-height:1.2; box-shadow:0 3px 0 rgba(0,0,0,.16); transition:transform .12s ease, box-shadow .12s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 4px 0 rgba(0,0,0,.16); }
.btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.16); }
.btn-primary{ background:var(--pin-red); color:#fff; }
.btn-secondary{ background:var(--pin-blue); color:#fff; }
.btn-danger{ background:var(--paper); color:var(--pin-red); box-shadow:0 3px 0 rgba(0,0,0,.12); border:2px solid var(--pin-red); }
.btn:focus-visible, .input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--pin-yellow); outline-offset:2px; }
.btn-block{ display:block; width:100%; }

label{ display:block; font-weight:700; margin-bottom:6px; }
.field{ margin-bottom:18px; }
.input, select, textarea{ width:100%; padding:13px 14px; font-size:1rem; font-family:Nunito,sans-serif; border:2px solid var(--line); border-radius:9px; background:#fff; color:var(--ink); }
textarea{ resize:vertical; min-height:90px; }
.hint{ font-size:.9rem; color:var(--ink-soft); margin-top:4px; }
.form-error{ background:var(--note-pink); border:none; color:#8f2d1c; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-weight:700; box-shadow:0 4px 10px var(--cork-shadow); }
.form-success{ background:var(--note-green); border:none; color:#2b5c33; padding:12px 16px; border-radius:8px; margin-bottom:16px; font-weight:700; box-shadow:0 4px 10px var(--cork-shadow); }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:0 18px; }

.scale{ display:flex; gap:8px; flex-wrap:wrap; }
.scale label{ flex:1; min-width:92px; margin:0; }
.scale input{ position:absolute; opacity:0; width:0; height:0; }
.scale .opt{ display:block; text-align:center; padding:12px 8px; border:2px solid var(--line); border-radius:9px; cursor:pointer; font-weight:700; font-size:.95rem; background:#fff; }
.scale input:checked + .opt{ background:var(--pin-green); color:#fff; border-color:var(--pin-green); }
.scale input:focus-visible + .opt{ outline:3px solid var(--pin-yellow); outline-offset:2px; }

.entry{ border:none; border-radius:3px; padding:18px 20px; margin-bottom:16px; background:var(--paper); position:relative; box-shadow:0 6px 14px var(--cork-shadow); }
.entry:nth-child(even){ transform:rotate(-.4deg); }
.entry:nth-child(odd){ transform:rotate(.4deg); }
.entry .date{ font-family:'Caveat',cursive; font-weight:700; font-size:1.4rem; color:var(--ink); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0; }
.chip{ font-size:.85rem; font-weight:700; padding:4px 12px; border-radius:999px; background:var(--note-blue); color:#2d4a5e; }
.chip strong{ font-weight:800; }

.tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.tile{ background:#fff; border:none; border-radius:3px; padding:14px 14px 20px; text-decoration:none; color:var(--ink); display:block; position:relative; box-shadow:0 8px 18px var(--cork-shadow); }
.tile:nth-child(3n+1){ transform:rotate(-1.4deg); }
.tile:nth-child(3n+2){ transform:rotate(1.1deg); }
.tile:nth-child(3n+3){ transform:rotate(-.6deg); }
.tile::before{ content:""; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:18px; height:18px; border-radius:50%; background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-blue) 70%); box-shadow:0 2px 4px rgba(0,0,0,.3); }
.tile:nth-child(3n+2)::before{ background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-green) 70%); }
.tile:nth-child(3n+3)::before{ background:radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), var(--pin-yellow) 70%); }
.tile .tile-title{ font-family:'Caveat',cursive; font-weight:700; font-size:1.6rem; color:var(--ink); margin-bottom:2px; }
.tile .tile-desc{ color:var(--ink-soft); font-size:.95rem; }

.chart{ display:flex; align-items:flex-end; gap:6px; height:160px; padding-top:10px; border-bottom:2px solid var(--line); }
.chart .bar-wrap{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; }
.chart .bar{ width:100%; max-width:34px; background:var(--pin-green); border-radius:6px 6px 0 0; min-height:3px; }
.chart .bar.low{ background:var(--pin-yellow); }
.chart-labels{ display:flex; gap:6px; margin-top:6px; }
.chart-labels span{ flex:1; text-align:center; font-size:.75rem; color:var(--ink-soft); }
.legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:12px; font-size:.9rem; color:var(--ink-soft); }
.legend .key{ display:inline-block; width:14px; height:14px; border-radius:4px; vertical-align:middle; margin-right:6px; }

.list{ list-style:none; margin:0; padding:0; }
.list li{ border:none; border-radius:2px; padding:16px 18px; margin-bottom:14px; background:var(--note-yellow); box-shadow:0 5px 12px var(--cork-shadow); }
.list li:nth-child(even){ background:var(--note-green); transform:rotate(-.5deg); }
.list li:nth-child(odd){ transform:rotate(.5deg); }
.list .li-title{ font-weight:800; font-size:1.1rem; }
.list .li-meta{ color:var(--ink-soft); margin-top:2px; }
.row-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }

.resource{ border:none; border-radius:3px; padding:16px 18px; margin-bottom:14px; background:var(--paper); box-shadow:0 5px 12px var(--cork-shadow); }
.resource:nth-child(even){ transform:rotate(-.4deg); }
.resource a{ font-weight:800; font-size:1.05rem; }

.site-footer{ border-top:1px solid #C7D2DA; margin-top:40px; }
.site-footer .inner{ max-width:960px; margin:0 auto; padding:24px clamp(16px,4vw,32px); color:var(--ink-soft); font-size:.9rem; }
.site-footer .disclaimer{ margin-top:8px; opacity:.92; }

.auth-wrap{ min-height:100vh; display:grid; place-items:center; padding:24px; }
.auth-card{ width:100%; max-width:420px; background:var(--paper); border:none; border-radius:4px; padding:34px; position:relative; box-shadow:0 14px 34px rgba(0,0,0,.3); }
.auth-card::before{ content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%) rotate(-3deg); width:110px; height:30px; background:var(--tape); box-shadow:0 2px 4px rgba(0,0,0,.12); }
.auth-card h1{ font-size:2.1rem; }
.auth-alt{ margin-top:18px; font-size:.95rem; }

@media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }

/* Brand mark in header */
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand-mark{ display:block; width:34px; height:34px; flex:0 0 auto; }