/* ==========================================================
   Maglet — design tokens: "The Fridge Door"
   Mint enamel doors, paper notes, round plastic magnets, a steel trim.
   ========================================================== */
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/fonts/figtree-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Nunito Magnet";font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/nunito-900-latin.woff2) format("woff2")}

:root{
  /* the materials */
  --enamel:#A9DDC6;        /* mint fridge door (marketing pages) */
  --enamel-hi:#C4EAD8; --enamel-lo:#93D1B6;
  --freezer:#016A71;       /* the teal door */
  --freezer-hi:#06727A; --freezer-lo:#015A60;
  --paper:#FFFEFA;         /* notes */
  --magnet-red:#E8452C; --magnet-red-deep:#C4361E; --magnet-yellow:#F2C230; --magnet-cobalt:#2346C8; --magnet-teal:#016A71;
  --steel-a:#F3F5F4; --steel-b:#E2E7E5; --steel-line:#D2DAD7;

  /* semantic roles used by the pages */
  --bg:#E6F4ED;            /* the app: a pale enamel door */
  --surface:var(--paper);  /* notes, inputs */
  --sidebar:linear-gradient(90deg,var(--steel-a),var(--steel-b));
  --muted-fill:#EAF3EF;
  --border:#B9C7C2;
  --border-soft:#DCE6E2;
  --text:#15201C;
  --text-2:#4A6159;
  --text-3:#6E8079;
  --accent:#016A71;
  --on-accent:#ffffff;
  --on-ink:#ffffff;
  --logo-a:#016A71; --logo-b:#35B08E;
  --danger:#B3321C;
  --overlay:rgba(13,31,26,.4);
  --note-shadow:0 10px 22px rgba(13,31,26,.13),0 1px 2px rgba(13,31,26,.08);
  --note-shadow-lift:0 16px 32px rgba(13,31,26,.18),0 2px 4px rgba(13,31,26,.1);
  --magnet-shadow:0 3px 5px rgba(13,31,26,.35),inset 0 2px 2px rgba(255,255,255,.55);
  --glow:var(--note-shadow);
  --ring:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent);

  --font-sans:"Figtree",ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Sans","PingFang SC","Noto Sans JP","Noto Sans SC",sans-serif;
  --font-magnet:"Nunito Magnet","Arial Rounded MT Bold",var(--font-sans);

  --text-caption:11px; --text-body-sm:12px; --text-body:15px; --text-body-lg:17px;
  --text-title:21px; --text-heading:32px; --text-display:56px;
  --font-weight-regular:400; --font-weight-medium:600;

  --spacing-4:4px; --spacing-8:8px; --spacing-12:12px; --spacing-16:16px; --spacing-32:32px;

  --radius-md:6px; --radius-xl:10px; --radius-2xl:14px; --radius-full:9999px;
  --radius-cards:4px; --radius-chips:9999px; --radius-inputs:10px; --radius-buttons:9999px;

  --shadow-subtle:0 1px 2px rgba(13,31,26,.08);
  --page-max-width:960px; --sidebar-w:260px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0E1916; --paper:#18241F; --surface:#18241F;
  --sidebar:linear-gradient(90deg,#121E1A,#0F1A17); --steel-line:#25352F;
  --muted-fill:#1F2D28; --border:#33463F; --border-soft:#25352F;
  --text:#E6F0EB; --text-2:#A3B7AF; --text-3:#7F948C;
  --accent:#3AAFA4; --on-accent:#0E1916; --on-ink:#0E1916;
  --logo-a:#E9F7F2; --logo-b:#6FD3B1; --danger:#F08A74; --overlay:rgba(0,0,0,.6);
  --note-shadow:0 10px 24px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --note-shadow-lift:0 16px 32px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --shadow-subtle:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0E1916; --paper:#18241F; --surface:#18241F;
  --sidebar:linear-gradient(90deg,#121E1A,#0F1A17); --steel-line:#25352F;
  --muted-fill:#1F2D28; --border:#33463F; --border-soft:#25352F;
  --text:#E6F0EB; --text-2:#A3B7AF; --text-3:#7F948C;
  --accent:#3AAFA4; --on-accent:#0E1916; --on-ink:#0E1916;
  --logo-a:#E9F7F2; --logo-b:#6FD3B1; --danger:#F08A74; --overlay:rgba(0,0,0,.6);
  --note-shadow:0 10px 24px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.3);
  --note-shadow-lift:0 16px 32px rgba(0,0,0,.45),0 2px 4px rgba(0,0,0,.3);
  --shadow-subtle:0 1px 2px rgba(0,0,0,.3);
  color-scheme:dark;}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--text-body)/1.5 var(--font-sans);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-underline-offset:3px}
b,strong{font-weight:700}
::selection{background:color-mix(in srgb,var(--magnet-yellow) 55%,transparent);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea{caret-color:var(--accent)}
html{scrollbar-color:color-mix(in srgb,var(--text-2) 45%,transparent) transparent}
.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.caption{font-size:var(--text-body-sm);line-height:1.33;font-weight:400;color:var(--text-2)}
.muted{color:var(--text-2)}
.num{font-variant-numeric:tabular-nums}

/* ---------- Buttons: pills, ink on paper ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-8);height:38px;padding:0 16px;
  border-radius:var(--radius-buttons);border:1.5px solid transparent;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .15s,color .15s,border-color .15s,transform .15s cubic-bezier(.2,.8,.2,1)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--text);color:var(--on-ink);font-weight:700}
.btn-primary:hover{background:color-mix(in srgb,var(--text) 86%,var(--accent))}
.btn:disabled{opacity:.5;cursor:default}
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
.btn-outline:hover{border-color:var(--text);background:var(--muted-fill)}
.btn-secondary{background:var(--muted-fill);color:var(--text)}
.btn-secondary:hover{background:var(--border-soft)}
.btn-ghost{background:transparent;color:var(--text-2)}
.btn-ghost:hover{background:var(--muted-fill);color:var(--text)}
.btn-destructive{background:transparent;color:var(--text-2);border-color:var(--border)}
.btn-destructive:hover{color:var(--danger);border-color:var(--danger)}
.btn-destructive.armed{background:var(--magnet-red-deep);color:#fff;border-color:var(--magnet-red-deep)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.btn-lg{height:46px;padding:0 22px;font-size:16px}
.icon-btn{width:32px;height:32px;display:inline-grid;place-items:center;border:none;background:none;border-radius:var(--radius-md);color:var(--text-2);cursor:pointer;flex:none}
.icon-btn:hover{background:var(--muted-fill);color:var(--text)}

/* ---------- Inputs ---------- */
.input{width:100%;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--radius-inputs);
  padding:8px 12px;font-size:15px;line-height:1.43;color:var(--text)}
.input::placeholder{color:var(--text-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
textarea.input{resize:vertical;min-height:72px}
select.input{appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234A6159' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
.field{display:flex;flex-direction:column;gap:6px}
.field > span{font-size:14px;font-weight:600}
.field small{color:var(--text-2);font-size:12px}

/* ---------- Notes, magnets, word magnets ---------- */
.card{background:var(--surface);border:none;border-radius:var(--radius-cards);box-shadow:var(--note-shadow)}
/* a round plastic magnet sitting on the top edge of whatever it pins */
.magnet{position:absolute;top:-11px;left:50%;width:24px;height:24px;margin-left:-12px;border-radius:50%;background:var(--magnet-red);box-shadow:var(--magnet-shadow);pointer-events:none}
.magnet.m-yellow{background:var(--magnet-yellow)} .magnet.m-cobalt{background:var(--magnet-cobalt)} .magnet.m-teal{background:var(--magnet-teal)}
/* fridge-poetry word tiles: short state words ("tomorrow", "waiting 3 weeks") */
.word{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:2px;background:#fff;color:#15201C;font-size:12.5px;font-weight:700;white-space:nowrap;
  box-shadow:0 2px 3px rgba(13,31,26,.22);border:none}
.word.w-red{background:var(--magnet-red-deep);color:#fff} .word.w-teal{background:var(--magnet-teal);color:#fff} .word.w-ink{background:#15201C;color:#fff}

.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:var(--radius-chips);font-size:12px;font-weight:600;white-space:nowrap;border:1.5px solid var(--border);color:var(--text-2)}
.badge .icon{width:12px;height:12px}
.badge-accent{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.badge-ink{background:var(--text);border-color:var(--text);color:var(--on-ink)}
.badge-soft{background:var(--muted-fill);border-color:transparent;color:var(--text)}
.badge-outline{background:transparent}
.badge-dashed{border-style:dashed;color:var(--text-2)}
.badge-warn{background:var(--magnet-red-deep);border-color:var(--magnet-red-deep);color:#fff;border-radius:2px}
.kbd{font:600 11px var(--font-sans);border:1px solid var(--border);border-bottom-width:2px;border-radius:var(--radius-md);padding:0 5px;color:var(--text-2);line-height:17px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;font-size:18px;letter-spacing:-.01em;text-decoration:none;color:var(--text)}

/* pill chips (segmented choices) — the chosen one turns ink */
.seg{display:inline-flex;gap:4px;flex-wrap:wrap}
.seg button{border:1.5px solid var(--border);background:transparent;height:30px;min-width:30px;padding:0 12px;border-radius:var(--radius-chips);font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.seg button:hover{border-color:var(--text)}
.seg button.on{background:var(--text);border-color:var(--text);color:var(--on-ink)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;
  background:var(--text);color:var(--on-ink);border-radius:var(--radius-xl);padding:11px 16px;font-size:14px;font-weight:600;max-width:min(480px,calc(100vw - 32px));
  display:flex;gap:12px;align-items:center;box-shadow:var(--note-shadow-lift)}
.toast button{background:none;border:none;color:inherit;font-weight:700;text-decoration:underline;cursor:pointer;padding:0;white-space:nowrap}

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

.brand-sprout,.brand-mark{display:block;flex:none}
.brand .brand-mark{width:36px;height:36px;margin:-4px -2px -2px -4px}
/* the wordmark: "maglet", lowercase, in the letter-magnet face */
.wordmark{font-family:var(--font-magnet);font-weight:900;font-size:1.28em;letter-spacing:-.015em;line-height:1;color:var(--text)}