/* Nanny App — Harbor & Coral + Bahnschrift (Barlow Semi Condensed). Light + dark. */ @font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400; font-display:swap;src:url("/static/fonts/BarlowSemiCondensed-400.woff2") format("woff2")} @font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500; font-display:swap;src:url("/static/fonts/BarlowSemiCondensed-500.woff2") format("woff2")} @font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600; font-display:swap;src:url("/static/fonts/BarlowSemiCondensed-600.woff2") format("woff2")} @font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700; font-display:swap;src:url("/static/fonts/BarlowSemiCondensed-700.woff2") format("woff2")} :root{ --ground:#f1f4f6; --surface:#ffffff; --surface-2:#eef1f4; --ink:#1e2a33; --muted:#5d6b75; --faint:#8b97a0; --primary:#35617d; --primary-deep:#2b5068; --primary-soft:#e2ecf1; --on-primary:#ffffff; --accent:#e8785b; --accent-soft:#f6e0d8; --ok:#3e8e6e; --low:#c9852f; --out:#c0492f; --line:#e1e7eb; --line-strong:#d3dbe1; --radius:14px; --maxw:960px; --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --display:"Barlow Semi Condensed","Bahnschrift","Segoe UI",sans-serif; } /* Dark mode is OPT-IN via the header toggle ([data-theme="dark"] on ), not the device setting, so it never surprises anyone as unexpected "blue and black". */ :root[data-theme="dark"]{ --ground:#0f1519; --surface:#182029; --surface-2:#1e2831; --ink:#e7edf1; --muted:#93a2ad; --faint:#6d7a83; --primary:#6ea3c4; --primary-deep:#558bb0; --primary-soft:#22303a; --on-primary:#0f1519; --accent:#f08a6e; --accent-soft:#33241f; --ok:#5fa27e; --low:#d59a4a; --out:#d0705a; --line:#26313a; --line-strong:#33404a; } *{box-sizing:border-box} html,body{margin:0} body{ font:16px/1.45 var(--font); color:var(--ink); background:var(--ground); padding-bottom:calc(64px + env(safe-area-inset-bottom)); } a{color:var(--primary);text-decoration:none} /* display type on headings, titles, numbers */ h1.page,h2.section,.card .num,.list .t,.panel h2,.brand,.tabbar a,.login h1{ font-family:var(--display);letter-spacing:.01em; } /* top bar — subtle header, not a bold bar (matches the mockup) */ .topbar{ position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center; gap:12px;padding:12px 16px;background:var(--ground);color:var(--ink); border-bottom:1px solid var(--line); padding-top:calc(12px + env(safe-area-inset-top)); } .topbar .brand{font-weight:600;font-size:20px;color:var(--ink)} .topbar .who{font-size:13px;color:var(--muted)} .topbar a{color:var(--primary);text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:16px} h1.page{font-size:26px;font-weight:600;margin:6px 0 14px} h2.section{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.09em;color:var(--faint);margin:22px 0 10px} .muted{color:var(--muted)} /* flashes */ .flash{padding:10px 12px;border-radius:10px;margin-bottom:12px;font-size:14px} .flash.ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)} .flash.error{background:color-mix(in srgb,var(--out) 15%,transparent);color:var(--out)} /* stat cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .cards.wide{grid-template-columns:repeat(4,1fr)} .card{background:var(--surface-2);border:1px solid var(--line);border-radius:16px; padding:14px;display:flex;flex-direction:column;align-items:flex-start;gap:2px} .card .num{font-size:28px;font-weight:600;font-variant-numeric:tabular-nums} .card .num.warn{color:var(--low)} .card .lbl{font-size:12px;color:var(--muted)} /* lists */ .list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .list.tight{gap:5px} .list li{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px 14px} .list .row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .list .t{font-size:18px;font-weight:600;line-height:1.15} .meta{display:block;color:var(--muted);font-size:12.5px;margin-top:3px} .sub{margin-top:4px;font-size:14px;color:var(--muted)} .note.done .body{text-decoration:line-through;color:var(--muted)} .actions{display:flex;gap:6px;align-items:center} /* pills + location dots + time chips (mockup helpers) */ .pill{font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase; padding:3px 9px;border-radius:999px;white-space:nowrap;display:inline-block} .pill.ok{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)} .pill.low{background:color-mix(in srgb,var(--low) 18%,transparent);color:var(--low)} .pill.out{background:color-mix(in srgb,var(--out) 16%,transparent);color:var(--out)} .loc{display:inline-flex;align-items:center;gap:4px} .loc::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)} .loc.loc0::before{background:#3f7fbf} .loc.loc1::before{background:#7a63c0} .loc.loc2::before{background:#c9852f} .loc.loc3::before{background:#2f9e8f} .loc.loc4::before{background:#c0567f} .loc.loc5::before{background:#5a9e4f} .loc.loc6::before{background:#6b7a8c} .loc.loc7::before{background:#b5623f} .time{background:var(--primary-soft);color:var(--primary-deep);font-weight:650; font-size:12px;padding:2px 8px;border-radius:7px;font-variant-numeric:tabular-nums} .feed .tag{background:var(--surface-2);border-radius:6px;padding:1px 6px;font-size:11px;text-transform:uppercase;color:var(--muted)} .thumb{width:46px;height:46px;flex:0 0 auto;border-radius:10px;object-fit:cover;border:1px solid var(--line)} .inline-edit .photoinput{width:auto;max-width:150px;font-size:12px;padding:4px} .status-low{border-left:3px solid var(--low)} .status-out{border-left:3px solid var(--out)} /* forms */ form.stack{display:flex;flex-direction:column;gap:8px} .addbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px;margin-bottom:14px} .addbox summary{font-weight:600;cursor:pointer;color:var(--primary)} .addbox.open{padding-top:12px} .addbox form.stack{margin-top:10px} input,select,textarea,button{font:inherit} input,select,textarea{width:100%;padding:10px;border:1px solid var(--line);border-radius:10px; background:var(--surface);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary)} .fld{display:flex;flex-direction:column;font-size:13px;color:var(--muted);gap:4px} .two{display:grid;grid-template-columns:1fr 1fr;gap:8px} button{cursor:pointer;border:none;border-radius:10px} button.primary{background:var(--primary);color:var(--on-primary);padding:11px 14px;font-weight:600} button.primary:active{background:var(--primary-deep)} button.link{background:none;color:var(--primary);padding:6px 8px;font-weight:600} button.link.danger{color:var(--out)} .inline-edit{display:flex;gap:6px;align-items:center;flex:1;flex-wrap:wrap} .inline-edit .grow{flex:1;min-width:120px} .inline-edit .qty{width:70px} .inline-edit select{width:auto} /* login */ .login{max-width:360px;margin:8vh auto 0;background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:24px} .login h1{margin:0 0 4px;font-size:28px;font-weight:600} .login form{display:flex;flex-direction:column;gap:12px;margin-top:14px} .login label{display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)} /* bottom tab bar (mobile-first) */ .tabbar{ position:fixed;left:0;right:0;bottom:0;z-index:6;display:flex; background:var(--surface);border-top:1px solid var(--line); padding-bottom:env(safe-area-inset-bottom); } .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px; padding:8px 2px;font-size:11px;color:var(--faint)} .tabbar a span{font-size:18px;line-height:1} .tabbar a.on{color:var(--primary);font-weight:600} /* dashboard grid (desktop) */ .grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:16px} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px} .panel h2{font-size:15px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);font-weight:600} /* calendar month grid */ .calbar{display:flex;justify-content:space-between;align-items:center;margin:6px 0 14px} .calbar .mo{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:.01em} .calbar button{background:var(--surface-2);border:1px solid var(--line);color:var(--muted); width:34px;height:34px;border-radius:9px;font-size:16px} .dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:5px} .dow span{text-align:center;font-size:11px;color:var(--faint);font-weight:700} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal .cell{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center; gap:3px;border-radius:11px;font-size:14px;color:var(--ink);cursor:pointer; font-variant-numeric:tabular-nums;border:1px solid transparent;background:none} .cal .cell.blank{visibility:hidden;cursor:default} .cal .cell:hover:not(.sel){background:var(--surface-2)} .cal .cell.today:not(.sel){border-color:var(--primary)} .cal .cell.sel{background:var(--primary);color:var(--on-primary);font-weight:700} .cal .cell .evdot{width:5px;height:5px;border-radius:50%;background:var(--accent)} .cal .cell.sel .evdot{background:var(--on-primary)} .calday{font-family:var(--display);font-size:18px;font-weight:600;margin:18px 0 10px} /* tracking check circle */ .check{appearance:none;-webkit-appearance:none;width:24px;height:24px;flex:0 0 auto; border:2px solid var(--line-strong);border-radius:8px;background:var(--surface);cursor:pointer;margin:0} .check.done{background:var(--ok);border-color:var(--ok)} .check.done::after{content:"✓";color:#fff;display:block;text-align:center;line-height:20px;font-size:14px} /* reference note cards */ .notecard{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:14px;margin-bottom:10px} .notecard .nt{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:.01em; margin:0 0 5px;display:flex;align-items:center;gap:7px} .notecard .pin{color:var(--accent)} .notecard .np{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 9px;white-space:pre-wrap} .notecard .nm{font-size:12px;color:var(--faint);display:flex;gap:8px;align-items:center;flex-wrap:wrap} .notecard .nm form{display:inline} .notecard details{margin-top:10px} .notecard details>summary{color:var(--primary);font-size:13px;font-weight:600;cursor:pointer} /* help button + onboarding overlay */ .iconbtn{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%; border:1px solid var(--line-strong);background:var(--surface);color:var(--muted); font-weight:700;font-size:13px;line-height:1;vertical-align:middle} .iconbtn:hover{color:var(--primary);border-color:var(--primary)} .overlay{position:fixed;inset:0;z-index:20;background:rgba(15,21,25,.55); display:flex;align-items:flex-end;justify-content:center;padding:0} .overlay[hidden]{display:none} .overlay .sheet{background:var(--surface);width:100%;max-width:480px;border-radius:20px 20px 0 0; padding:22px 22px calc(24px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto; border:1px solid var(--line)} .overlay .sheet h2{font-family:var(--display);font-size:24px;font-weight:600;margin:0 0 6px} .overlay .guide{list-style:none;padding:0;margin:14px 0;display:flex;flex-direction:column;gap:10px} .overlay .guide li{font-size:14.5px;color:var(--muted);line-height:1.4} .overlay .guide b{color:var(--ink);font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.01em} .overlay #install-row{margin:8px 0 4px} .overlay .primary{width:100%;margin-top:10px} @media(min-width:760px){ .overlay{align-items:center} .overlay .sheet{border-radius:20px} } /* desktop */ @media(min-width:760px){ body{padding-bottom:0} .tabbar{position:sticky;top:0;bottom:auto;border-top:none;border-bottom:1px solid var(--line);max-width:var(--maxw);margin:0 auto} .tabbar a{flex-direction:row;gap:6px;font-size:14px;padding:12px} .grid{grid-template-columns:1fr 1fr} }