:root{--cream:#f4eade;--card:#fcf7f0;--terracotta:#ba512e;--peach:#fae5d6;--text:#27251f;--muted:#77736e;--line:#e6d8c9;--radius:14px;--gap:9px;--sidebar:234px;--serif:Georgia,'Times New Roman',serif;--sans:Arial,Helvetica,sans-serif;--shadow:0 2px 10px #8a55300a}*{box-sizing:border-box}body{margin:0;background:var(--cream);color:var(--text);font:14px var(--sans)}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button{color:inherit}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--terracotta);outline-offset:3px}button:hover,a:hover{filter:brightness(.97)}svg{width:25px;height:25px;flex-shrink:0}h1,h2,p{margin:0}h2{font:22px var(--serif);letter-spacing:-.5px}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:25px 15px;background:linear-gradient(110deg,#f7ede3,#f3e9de);overflow-y:auto}.brand{display:block;width:129px;height:129px;margin:0 auto 10px}.brand img{width:100%;border-radius:50%}.nav-link{display:flex;align-items:center;gap:20px;padding:10px 14px;min-height:45px;border-radius:9px;margin-bottom:1px}.nav-link svg{color:var(--terracotta)}.nav-link.active{background:#bc6039;color:#fff}.nav-link.active svg{color:#fff}.nav-link small{border-radius:50%;padding:6px 9px;background:#c36740;color:#fff;font-size:12px;margin-left:auto}.nav-link.separated{border-top:1px solid var(--line);border-radius:0;margin-top:22px;padding-top:22px}.inspiration{width:100%;border-radius:12px;margin-top:12px;max-height:308px;object-fit:cover}main{margin-left:var(--sidebar)}.hero{height:373px;position:relative;overflow:hidden;border-radius:14px 0 0 14px;background:#b59172}.hero-art{position:absolute;inset:0}.hero-art picture,.hero-art img{display:block;height:100%;width:100%}.hero-art img{object-fit:cover;object-position:left center}.hero-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#c8987180 78%,#c5967780)}.toolbar{position:absolute;right:26px;top:28px;display:flex;align-items:center;gap:17px}.round,.avatar{height:48px;width:48px;border-radius:50%;display:grid;place-items:center;background:#fff5e9;color:var(--terracotta)}.round.search{background:#bc6039;color:white}.search:before{content:'';width:17px;height:17px;border:1.7px solid currentColor;border-radius:50%;transform:translate(-2px,-2px)}.search:after{content:'';width:10px;height:1.7px;background:currentColor;position:absolute;transform:translate(8px,8px) rotate(48deg)}.search{position:relative}.avatar{padding:0;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.quick{height:48px;padding:0 20px;border-radius:30px;background:#fff5e9;color:var(--terracotta);display:flex;align-items:center;gap:10px}.quick span{font-size:28px}.hero-widgets{position:absolute;right:10px;bottom:10px;width:43%;display:grid;grid-template-columns:1.04fr 1fr;gap:9px}.panel{background:#fdf8f2f5;border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow);min-width:0}.calendar header{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;white-space:nowrap}.calendar h2 span{color:var(--terracotta)}.calendar header button{font-size:25px;color:var(--terracotta);padding:0 9px}.calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center;row-gap:3px}.calendar-grid>*{display:grid;place-items:center;min-width:0;height:29px;font-size:12px}.calendar-grid .weekday{margin-bottom:5px}.day{position:relative;padding:0;border-radius:50%;justify-self:center;width:29px}.day.weekend{color:var(--terracotta)}.day.muted{color:#bab5af}.day.selected{background:var(--terracotta);color:#fff}.day.event:after{content:'';position:absolute;bottom:0;width:3px;height:3px;border-radius:50%;background:var(--terracotta)}.today .date,.priorities-label{color:var(--terracotta);line-height:1.8}.today ul{margin:6px 0 10px;padding:0;list-style:none}.today li button{padding:5px 0;display:flex;align-items:flex-start;gap:12px;text-align:left;font-size:12px;line-height:1.5;width:100%}.checkbox{width:17px;height:17px;border:1.5px solid var(--terracotta);border-radius:3px;flex-shrink:0;margin-top:2px}.chevron{margin-left:auto;color:var(--terracotta);font-size:24px;line-height:1}.all-tasks{color:var(--terracotta);background:var(--peach);border-radius:8px;padding:7px 10px;font-size:13px}.all-tasks span{padding-left:9px}.stats{display:grid;grid-template-columns:.9fr .9fr 1.05fr 1.05fr 1.1fr 1.45fr;gap:8px;padding:12px 10px}.stat{display:flex;gap:15px;align-items:center;background:#fcf7f0d9;border-radius:var(--radius);padding:9px 13px;text-align:left;min-width:0;min-height:67px}.stat-icon{display:grid;place-items:center;flex-shrink:0;width:49px;height:49px;border-radius:50%;background:var(--peach);color:var(--terracotta)}.stat-icon svg{width:28px;height:28px}.stat strong{display:block;font:20px var(--serif);font-weight:normal}.stat span span{display:block;color:var(--muted);font-size:12px;line-height:1.4}.stat em{font-style:normal;color:var(--terracotta);font-size:12px}.stat:nth-child(n+5) strong{font-size:16px}.directions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:0 12px}.direction{display:flex;align-items:center;gap:17px;background:#fcf7f0e6;border:1px solid #fff5e9;border-radius:var(--radius);padding:12px;min-height:175px;transition:box-shadow .15s,background .15s}.direction:hover{background:#fffaf5;box-shadow:0 3px 13px #a8682a15}.direction-icon{width:92px;height:92px;flex-shrink:0;border-radius:50%;object-fit:cover}.direction-copy{min-width:0}.number{font:25px var(--serif);color:var(--terracotta)}.direction h2{font-size:20px;line-height:1.12;margin:1px 0 8px}.direction ul{margin:0;padding-left:17px;color:var(--muted);font-size:12px;line-height:1.5}.direction li::marker{color:var(--terracotta);font-size:10px}.demo-note{text-align:center;padding:12px;color:#82766a;font-size:11px}.bottom-nav{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;top:-60px;left:10px;z-index:20;background:white;padding:12px}.skip:focus{top:10px}dialog{max-width:440px;width:calc(100% - 32px);padding:32px;border:1px solid var(--line);border-radius:var(--radius);color:var(--text);background:var(--card);box-shadow:0 15px 70px #36221830}dialog::backdrop{background:#37261966}dialog h2{font-size:27px;margin:16px 0}dialog p{line-height:1.6}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--terracotta)}.dialog-note{color:var(--muted);font-size:13px;margin:15px 0}.close{position:absolute;right:12px;top:10px;font-size:28px;color:var(--terracotta);width:36px;height:36px}.primary{background:var(--terracotta);color:white;padding:12px 16px;border-radius:8px;margin-top:10px}dialog label{display:block;font-size:14px;margin:16px 0 8px}dialog input{width:100%;padding:13px;border:1px solid var(--line);background:#fffaf5;border-radius:7px}

/* Keep the entire approved raster hero visible: its title and quote are part of the image. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(480px, 1fr);
  height: auto;
  overflow: visible;
  background: var(--cream);
  align-items: stretch;
}
.hero-art {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  aspect-ratio: 735 / 373;
  width: 100%;
  min-width: 0;
  align-self: center;
  overflow: hidden;
  border-radius: var(--radius);
}
.hero-art picture { display: grid; height: 100%; width: 100%; }
.hero-art img { width: 100%; height: 100%; object-fit: contain; }
.hero-art::after { display: none; }
.toolbar { top: 18px; right: 20px; gap: 12px; }
.hero-widgets {
  position: static;
  grid-column: 2;
  grid-row: 1;
  width: auto;
  height: auto;
  min-width: 0;
  padding: 86px 10px 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: start;
}
.panel { padding: 14px 12px; background: var(--card); }
.calendar header { gap: 4px; margin-bottom: 8px; flex-wrap: wrap; }
.calendar h2 { font-size: 20px; letter-spacing: -.6px; }
.calendar header > div { display: flex; margin-left: auto; }
.calendar header button { min-width: 32px; height: 36px; padding: 0; }
.calendar-grid { row-gap: 2px; }
.calendar-grid > * { height: 28px; }
.day { width: 28px; }
.today h2 { font-size: 22px; }
.today li button { min-height: 44px; }
.priorities-label { font-size: 12px; }
.stats .stat { gap: 10px; padding: 9px 10px; }
.stat span span { font-size: 11px; }
.direction h2 { font-size: 18px; overflow-wrap: break-word; }
.direction ul { font-size: 11.5px; }
.direction { min-width: 0; }
.direction-icon { align-self: center; width: clamp(68px, calc(10vw - 64px), 92px); height: clamp(68px, calc(10vw - 64px), 92px); }
.direction { gap: 12px; }
.data-notice { text-align: right; padding: 3px 12px 0; font-size: 10px; }
/* A press is visible even when a touchscreen has no hover state. */
.direction:active, .nav-link:active, .bottom-nav a:active, .stat:active {
  background: var(--peach);
  box-shadow: inset 0 0 0 1px var(--terracotta);
}
@media (hover: hover) and (pointer: fine) {
  .direction:hover { background: #fffaf5; box-shadow: 0 3px 13px #a8682a15; }
}
@media (hover: none) {
  .direction:hover { filter: none; background: #fcf7f0e6; box-shadow: none; }
  .direction:active { background: var(--peach); box-shadow: inset 0 0 0 1px var(--terracotta); }
}

/* iPad: a real content column beside the sidebar; widgets below the full photo. */
@media (min-width: 761px) and (max-width: 1279px) {
  :root { --sidebar: 190px; }
  .sidebar { padding: 20px 10px; }
  .nav-link { gap: 12px; padding-left: 10px; }
  .hero { display: flex; flex-direction: column; padding: 0 10px; gap: 10px; }
  .toolbar { position: static; justify-content: flex-end; padding: 12px 0 0; order: -1; }
  .hero-art { aspect-ratio: 735 / 373; flex: none; width: 100%; }
  .hero-widgets { padding: 0; width: 100%; flex: none; }
  .panel { padding: 16px; }
  .calendar h2 { font-size: 23px; }
  .calendar header { flex-wrap: nowrap; }
  .calendar header button { min-width: 40px; height: 44px; }
  .calendar-grid > * { height: 36px; font-size: 13px; }
  .day { width: 36px; }
  .today .date, .priorities-label { font-size: 13px; }
  .today li button { padding: 10px 0; font-size: 13px; }
  .all-tasks { min-height: 40px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat { min-height: 72px; }
  .directions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .direction { gap: 10px; padding: 12px 10px; min-height: 190px; }
  .direction-icon { width: 58px; height: 58px; }
  .direction h2 { font-size: 17px; }
  .direction ul { font-size: 11px; }
}
@media (min-width: 761px) and (max-width: 950px) {
  .directions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar h2 { font-size: 21px; }
  .calendar header { flex-wrap: wrap; }
  .calendar header button { min-width: 36px; }
  .calendar-grid > * { height: 30px; }
  .day { width: 30px; }
  .direction-icon { width: 64px; height: 64px; }
}

/* iPhone: retain the approved three-column directions and the bottom navigation. */
@media (max-width: 760px) {
  :root { --radius: 10px; --sidebar: 0px; }
  .sidebar { display: none; }
  main { margin: 0; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  /* Keep content in normal flow. Avoid Safari's cyclic percentage-height
     sizing of the picture inside an auto-height flex item. */
  .hero { display: block; border-radius: 0; }
  .hero-art { position: relative; aspect-ratio: auto; width: 100%; height: 0; padding-top: calc(100% * 335 / 707); border-radius: 0 0 10px 10px; }
  .hero-art picture { position: absolute; inset: 0; display: block; }
  .hero-art img { object-fit: contain; }
  /* The mobile reference contains the original toolbar artwork. Only its hit areas are overlaid. */
  .toolbar { position: absolute; inset: 0 0 auto; height: calc(100vw * 335 / 707); display: block; pointer-events: none; }
  .toolbar .round, .toolbar .avatar { position: absolute; top: calc(6vw - 22px); width: min(44px, 8.8vw); height: 44px; transform: translateX(-50%); background: transparent; pointer-events: auto; }
  .toolbar .search { left: 74%; }
  .toolbar .round:not(.search) { left: 83.3%; }
  .toolbar .avatar { left: 92.6%; }
  .toolbar svg, .toolbar .avatar img { visibility: hidden; }
  .toolbar .search::before, .toolbar .search::after { display: none; }
  .toolbar button:focus-visible { outline: 2px solid white; outline-offset: 0; }
  .toolbar .quick {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: flex;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    font-size: 0;
    background: var(--terracotta);
    color: #fff;
    box-shadow: 0 3px 12px #36221830;
    pointer-events: auto;
  }
  .hero-widgets { display: grid; grid-template-columns: 1.12fr 1fr; padding: 8px 9px 0; gap: 6px; width: auto; }
  .today { grid-column: 1; grid-row: 1; }
  .calendar { grid-column: 2; grid-row: 1; }
  .panel { padding: 10px; min-height: 220px; }
  .panel h2 { font-size: 19px; }
  .today .date, .priorities-label { font-size: 11px; line-height: 1.6; }
  .today li button { font-size: 10px; gap: 7px; line-height: 1.45; padding: 7px 0; border-bottom: 1px solid #e6d8c950; }
  .today ul { margin: 4px 0; }
  .checkbox { width: 14px; height: 14px; }
  .chevron { font-size: 21px; }
  .all-tasks { font-size: 10px; padding: 7px; white-space: normal; min-height: 36px; }
  .calendar header { margin-bottom: 8px; gap: 0; }
  .calendar header > div { width: 100%; justify-content: space-between; }
  .calendar header button { min-width: 44px; height: 36px; font-size: 23px; }
  .calendar h2 { font-size: 17px; letter-spacing: -.7px; }
  .calendar-grid { row-gap: 2px; }
  .calendar-grid > * { font-size: 10px; height: 24px; }
  .day { width: min(24px, 100%); height: auto; aspect-ratio: 1; }
  .calendar-grid .weekday { margin-bottom: 3px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 6px 9px 7px; }
  .stats .stat { gap: 6px; padding: 8px 6px; min-height: 60px; }
  .stat-icon { height: 30px; width: 30px; }
  .stat-icon svg { width: 22px; height: 22px; }
  .stat strong { font-size: 16px; }
  .stat span span, .stat em { font-size: 9px; }
  .directions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 0 9px; }
  .direction { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px; padding: 10px 4px; min-height: 220px; }
  .direction-icon { width: 24px; height: 24px; float: none; margin: 0; }
  .direction-copy { display: block; }
  .number { font-size: 19px; display: block; line-height: 1.1; }
  .direction h2 { font-size: 11px; letter-spacing: -.25px; line-height: 1.2; margin: 3px 0 8px; }
  .direction ul { font-size: 9px; line-height: 1.5; padding-left: 9px; overflow-wrap: break-word; hyphens: auto; }
  .direction li::marker { font-size: 7px; }
  .demo-note { font-size: 9px; }
  .data-notice { padding: 5px 9px 0; }
  .bottom-nav { position: fixed; z-index: 5; bottom: 0; left: 0; right: 0; background: #faf3eaf5; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 8px 4px max(10px, env(safe-area-inset-bottom, 0px)); }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 10px; color: #6e6256; min-height: 44px; }
  /* A fixed backdrop-filter can leave Safari's scrolling layer unpainted.
     Use the same opaque cream surface without a separate backdrop layer. */
  .bottom-nav { background: #faf3ea; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bottom-nav a[aria-current] { color: var(--terracotta); }
  .bottom-nav svg { width: 23px; height: 23px; }
}
@media (min-width: 540px) and (max-width: 760px) {
  .panel { padding: 16px; min-height: 260px; }
  .panel h2 { font-size: 23px; }
  .calendar header { flex-wrap: nowrap; }
  .calendar header > div { width: auto; }
  .today .date, .priorities-label { font-size: 13px; }
  .today li button { font-size: 13px; padding: 9px 0; }
  .calendar-grid > * { font-size: 12px; height: 30px; }
  .day { width: 30px; }
  .all-tasks { font-size: 13px; }
  .direction { grid-template-columns: 46px minmax(0, 1fr); gap: 9px; padding: 13px 10px; }
  .direction-icon { width: 46px; height: 46px; }
  .direction h2 { font-size: 16px; }
  .direction ul { font-size: 11px; }
  .stat strong { font-size: 19px; }
  .stat span span, .stat em { font-size: 11px; }
  .stat-icon { width: 45px; height: 45px; }
}
@media (prefers-reduced-motion: reduce) { .direction { transition: none; } }

/* The mobile reference contains raster toolbar artwork. Repaint only the search
   circle over the original 44px/707px reference diameter; keep its hit area intact. */
@media (max-width: 760px) {
  .toolbar .search::before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(100vw * 44 / 707);
    height: calc(100vw * 44 / 707);
    border: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #bc6039 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6.5'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E") center / 75% 75% no-repeat;
    pointer-events: none;
  }
}

.round.search:active { filter: brightness(.94); }

/* Quick capture only: leave the home page layout unchanged. */
#task-dialog { max-height: calc(100% - 32px); overflow-y: auto; }
#task-dialog textarea, #task-dialog select { width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #fffaf5; color: var(--text); font: inherit; }
#task-dialog textarea { resize: vertical; }
#task-dialog input, #task-dialog textarea, #task-dialog select { font-size: 16px; }
#task-dialog .capture-confirm { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; }
#task-dialog .capture-confirm input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--terracotta); }
#task-dialog .capture-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#task-dialog button:disabled { opacity: .55; cursor: default; }
#task-dialog [hidden] { display: none; }
#section-dialog .saved-records { padding-left: 20px; max-height: 45vh; overflow-y: auto; }
#section-dialog .saved-records li { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0; line-height: 1.5; }