/* calendarmirror.com — one stylesheet for every page.
 *
 * The app's icon is a blue→teal tile, and the site wears the same colours:
 * the blue for links and the one button, the pair together only as a soft
 * field behind the hero. Everything else is white space, a friendly sans,
 * and short lines. Tokens are re-chosen for dark mode, not filtered.
 *
 * Figtree is self-hosted (fonts/OFL.txt): the site's promise is that nothing
 * leaves your device, so the page cannot ship your IP address to a font host
 * on load. Latin subset, weights 400–700. */

@font-face{
  font-family:"Figtree";
  src:url("fonts/Figtree.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Figtree";
  src:url("fonts/Figtree-Italic.woff2") format("woff2");
  font-weight:400 700; font-style:italic; font-display:swap;
}
/* One word on the home page is hand-written. Bold only, ASCII only. */
@font-face{
  font-family:"Caveat";
  src:url("fonts/Caveat.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --paper:#FFFFFF;
  --ink:#0F1A2B;
  --muted:#5B6B7F;
  --rule:#E3E9F0;
  --soft:#F3F7FB;          /* a tinted surface: code, demo chrome */
  --brand:#3AA0FF;          /* the icon's blue, for fields and fills */
  --teal:#28C8B6;           /* the icon's teal, for the field only */
  --link:#1B78D1;           /* the blue, darkened until it passes AA on white */
  --button-fg:#FFFFFF;
  --measure:40rem;
  --wide:66rem;
  --gutter:clamp(18px, 5vw, 56px);
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0C1220;
    --ink:#EAF0F7;
    --muted:#93A3B8;
    --rule:#1F2A3B;
    --soft:#111A2B;
    --link:#6DB9FF;
    --button-fg:#0F1A2B;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 18px/1.6 "Figtree", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-kerning:normal;
  -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }

/* The page column. Prose sits in one measure; .wide (screenshots, the demo,
   column sets) may run to the wide width. */
.wrap{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter) 5rem}
.wrap > *:not(.wide):not(footer):not(section){max-width:var(--measure);margin-left:auto;margin-right:auto}
section{padding:clamp(4rem,9vw,7.5rem) 0 0}
section > *:not(.wide){max-width:var(--measure);margin-left:auto;margin-right:auto}
section > .wide{margin-top:2.6rem}

h1,h2,h3{font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.1}
h1{font-size:clamp(38px,6.2vw,64px);margin:0 0 .5em}
h2{font-size:clamp(30px,4.2vw,42px);margin:0 0 .5em}
h3{font-size:22px;line-height:1.3;margin:1.6rem 0 .4rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
.lede{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--muted)}
.centered{text-align:center}
ul,ol{margin:0 0 1.1em;padding-left:1.3em}
li{margin:.35em 0}
strong,b{font-weight:600}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,monospace}
small,.small{font-size:15px;line-height:1.5;color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:3rem 0}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:4px}

/* The button, filled in the icon's blue. */
.button{
  display:inline-block;padding:.75em 1.4em;border-radius:12px;
  background:var(--link);color:var(--button-fg);text-decoration:none;font-weight:600;line-height:1.2;
  transition:filter .15s ease;
}
@media (prefers-color-scheme: dark){ .button{background:var(--brand)} }
.button:hover{text-decoration:none;filter:brightness(1.08)}
.cta{display:flex;align-items:center;gap:1rem 1.6rem;flex-wrap:wrap;margin:2rem 0 0}
.cta.centered{justify-content:center}
.cta .small{margin:0}

/* Screenshots: a soft edge and a little lift, no chrome of their own. Every
   one is taken from a throwaway configuration with invented names. */
figure{margin:2rem auto}
figure img{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:14px;
  border:1px solid var(--rule);box-shadow:0 20px 50px -30px rgba(15,26,43,.35)}
figure img.plain{border:0;box-shadow:none;border-radius:0}
figcaption{margin:.9rem auto 0;font-size:15px;line-height:1.5;color:var(--muted);text-align:center;max-width:var(--measure)}

/* A set of genuinely parallel things: columns with room, no boxes. */
.columns{display:grid;grid-template-columns:1fr;gap:2rem 3rem;margin:2.6rem auto 0}
@media (min-width:640px){ .columns{grid-template-columns:repeat(3,1fr)} }
.columns h3{margin:0 0 .4rem;font-size:20px}
.columns p{margin:0;font-size:16.5px;line-height:1.55;color:var(--muted)}

pre{
  margin:1.2rem auto;padding:1rem 1.2rem;border-radius:12px;overflow:auto;
  font:15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink);
  background:var(--soft);
}

table{border-collapse:collapse;width:100%;margin:1.2rem 0;font-size:16.5px;line-height:1.5}
th,td{text-align:left;vertical-align:top;padding:.6em .8em .6em 0;border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
th{font-weight:600;color:var(--muted);font-size:15px}
.tw{overflow-x:auto}

cm-nav{display:block;margin-bottom:1.2rem}
html{scroll-padding-top:5rem}

/* Mac or iPhone, chosen with <cm-platform> (platform.js). */
html[data-platform="ios"] .mac-only, html[data-platform="mac"] .ios-only{display:none !important}
.platform{display:flex;justify-content:center;margin:2.2rem 0 0}

/* Device frames for demos and screenshots: a macOS window (Sequoia's chrome:
   traffic lights at the left, a centred title, a flat toolbar), or a phone. */
.frame{position:relative;margin:0 auto}
.frame.mac{border-radius:11px;border:1px solid rgba(0,0,0,.14);background:var(--paper);overflow:hidden;
  box-shadow:0 0 0 .5px rgba(0,0,0,.08),0 22px 60px -20px rgba(0,0,0,.45)}
.frame.mac .titlebar{position:relative;display:flex;align-items:center;justify-content:center;height:38px;padding:0 5rem;
  background:#ECECEC;border-bottom:1px solid #D2D2D2;
  font:600 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#4A4A4A;letter-spacing:0}
.frame.mac .titlebar .lights{position:absolute;left:12px;top:50%;transform:translateY(-50%);display:flex;gap:8px}
.frame.mac .titlebar .lights i{width:12px;height:12px;border-radius:50%;display:block;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.frame.mac .titlebar .lights i:nth-child(1){background:#FF5F57}.frame.mac .titlebar .lights i:nth-child(2){background:#FEBC2E}.frame.mac .titlebar .lights i:nth-child(3){background:#28C840}
.frame.mac .titlebar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Safari: the same lights, then the address field in the middle of the toolbar. */
.frame.mac .titlebar.safari{height:50px}
.frame.mac .titlebar.safari .address{display:flex;align-items:center;justify-content:center;gap:.4rem;width:min(72%,22rem);height:30px;border-radius:8px;padding:0 .8rem;overflow:hidden;white-space:nowrap;
  background:#FFFFFF;border:1px solid #D9D9D9;font:400 13px/1 -apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:#4A4A4A}
.frame.mac .titlebar.safari .address::before{content:"";width:10px;height:12px;border:1.5px solid #8A8A8A;border-radius:3px 3px 4px 4px;border-top-width:3px;opacity:.8}
@media (prefers-color-scheme: dark){
  .frame.mac{border-color:rgba(255,255,255,.14);box-shadow:0 0 0 .5px rgba(0,0,0,.6),0 22px 60px -20px rgba(0,0,0,.8)}
  .frame.mac .titlebar{background:#2B2B2D;border-bottom-color:#1A1A1C;color:#D8D8D8}
  .frame.mac .titlebar.safari .address{background:#3A3A3C;border-color:#4A4A4C;color:#E0E0E0}
  .frame.mac .titlebar.safari .address::before{border-color:#B0B0B0}
}
.frame.phone{width:min(100%,19rem);border-radius:40px;padding:10px;background:#0F1A2B;
  box-shadow:0 30px 80px -40px rgba(15,26,43,.6)}
.frame.phone .screen{border-radius:31px;background:var(--paper);overflow:hidden;position:relative;padding-top:2.6rem;min-height:30rem}
.frame.phone .notch{position:absolute;z-index:2;top:10px;left:50%;transform:translateX(-50%);width:34%;height:22px;border-radius:12px;background:#0F1A2B}
@media (prefers-color-scheme: dark){ .frame.phone{background:#2A3547} .frame.phone .notch{background:#2A3547} }

footer.site{
  border-top:1px solid var(--rule);margin-top:6rem;padding-top:1.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem;
  font-size:15px;line-height:1.6;color:var(--muted);
}
footer.site nav{display:flex;flex-wrap:wrap;gap:.2rem 1.4rem}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{color:var(--ink);text-decoration:underline}

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