/* calendarmirror.com/askwhen — the AskWhen.me page's own rules, shared with
 * every language's copy of it (/askwhen.html, /de/askwhen.html). */

  /* AskWhen.me is a separate product with its own look (decisions.md,
     17 Sept 2026): the amber→rose gradient and its accent. On this page they
     carry the button, the links, the field behind the demo and the demo itself;
     the ground and the type stay Calendar Mirror's, so the two products read
     as related without being the same thing. Text on the gradient is ink. */
  :root{--link:#C7355F;--aw-amber:#FF9A3C;--aw-rose:#EE4380;--aw-ink:#06121F}
  @media (prefers-color-scheme: dark){ :root{--link:#F0689A} }
  .button{background:var(--aw-amber);color:var(--aw-ink);box-shadow:inset 0 0 0 1.5px #C7355F}
  @media (prefers-color-scheme: dark){ .button{background:var(--aw-amber);box-shadow:none} }
  .hero{text-align:center;padding-top:clamp(1rem,4vw,3rem)}
  .hero h1{max-width:52rem;margin-left:auto;margin-right:auto}
  .hero .lede{max-width:36rem;margin-left:auto;margin-right:auto}
  .mark{display:block;width:80px;height:80px;border-radius:18px;margin:0 auto 1.6rem}
  section > h2.centered{max-width:46rem}

  /* The demo: two devices and the traffic between them. Dana's device offers a
     few times; only those cross the wire to the page on Alex's device; the
     request comes back; Dana accepts; the answer goes out. Each device is a
     phone or a Mac window, following the switch above. */
  .field{margin:2.6rem auto 0;padding:clamp(14px,3vw,34px);border-radius:28px;
    background:linear-gradient(135deg, rgba(255,154,60,.20), rgba(238,67,128,.16))}
  @media (prefers-color-scheme: dark){ .field{background:linear-gradient(135deg, rgba(255,154,60,.16), rgba(238,67,128,.12))} }
  .demo{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
  .side{min-width:0;display:flex;flex-direction:column;align-items:center;gap:.8rem}
  .who{font-size:14px;color:var(--ink);font-weight:600;background:var(--paper);border-radius:999px;padding:.35em .9em;
    box-shadow:0 1px 3px rgba(15,26,43,.12)}
  .frame.mac{width:100%;max-width:27rem}
  .frame.mac .body,.frame.phone .body{padding:.9rem 1rem 1rem}
  .frame.phone .body{padding-top:.2rem}
  .wire{position:relative;width:clamp(3rem,8vw,7rem);height:2px;background:rgba(15,26,43,.18);border-radius:2px}
  @media (prefers-color-scheme: dark){ .wire{background:rgba(234,240,247,.22)} }
  .packet{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%);
    background:linear-gradient(135deg,var(--aw-amber),var(--aw-rose));box-shadow:0 0 0 5px rgba(238,67,128,.18);opacity:0;
    transition:left 1s cubic-bezier(.4,0,.2,1),opacity .25s}
  .packet.on{opacity:1}
  .wire-label{position:absolute;left:50%;top:-1.9rem;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--link);
    opacity:0;transition:opacity .3s}
  .wire-label.on{opacity:1}
  .day{position:relative;height:320px}
  .tick{position:absolute;left:0;right:0;border-top:1px solid var(--rule);font-size:11px;color:var(--muted);line-height:1;padding-top:3px}
  .ev{position:absolute;left:2.6rem;right:.2rem;border-radius:7px;padding:.25rem .6rem;font-size:13px;line-height:1.3;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1)}
  .ev.own{background:#E9EEF5;color:#2C3A4F}
  .ev.offer{border:1.5px dashed var(--link);color:var(--link);background:transparent;font-weight:600}
  .ev.booked{background:var(--aw-amber);color:var(--aw-ink);font-weight:600}
  .ev.hidden{opacity:0;transform:translateY(6px)}
  .request{position:absolute;left:.6rem;right:.6rem;bottom:.6rem;background:var(--paper);border:1px solid var(--rule);
    border-radius:12px;padding:.7rem .8rem;box-shadow:0 12px 30px -12px rgba(15,26,43,.35);font-size:13px;line-height:1.35;
    transition:opacity .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
  .request.hidden{opacity:0;transform:translateY(16px)}
  .request b{display:block;font-size:13.5px}
  .request .acts{display:flex;gap:.4rem;margin-top:.5rem}
  .request .acts span{border-radius:8px;padding:.35em .8em;font-weight:600;font-size:12.5px;border:1.5px solid var(--rule);color:var(--muted)}
  .request .acts .yes{background:var(--aw-amber);color:var(--aw-ink);border-color:transparent;transition:filter .2s}
  .request.pressed .acts .yes{filter:brightness(.85)}
  .page{min-height:320px;position:relative}
  .page .url{font:12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin-bottom:.8rem;background:var(--soft);border-radius:8px;padding:.4em .7em}
  .page h4{font-size:17px;font-weight:600;letter-spacing:-.01em;margin:0 0 .2rem;display:flex;align-items:center;gap:.5rem}
  .page h4 img{width:22px;height:22px;border-radius:6px}
  .page .sub{font-size:12.5px;color:var(--muted);margin:0 0 .9rem}
  .times{display:flex;flex-direction:column;gap:.4rem}
  .times span{display:block;border:1.5px solid var(--rule);background:var(--paper);border-radius:9px;padding:.45em .7em;font-size:13.5px;
    transition:opacity .5s,transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s}
  .times span.hidden{opacity:0;transform:translateX(-24px)}
  .times span.picked{border-color:var(--link);box-shadow:inset 0 0 0 1px var(--link)}
  .cursor{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--link);opacity:0;transform:translate(-50%,-50%);
    box-shadow:0 0 0 4px rgba(199,53,95,.25);transition:opacity .3s,left .8s cubic-bezier(.4,0,.2,1),top .8s cubic-bezier(.4,0,.2,1);left:60%;top:30%;z-index:2}
  .cursor.on{opacity:1}
  html[data-platform="mac"] .cursor{width:20px;height:24px;border-radius:0;background:none;box-shadow:none;transform:translate(-2px,-2px);
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 24'><path d='M3 2 L3 19 L7.5 15 L10.5 22 L13.5 20.7 L10.6 14 L16.5 14 Z' fill='black' stroke='white' stroke-width='1.6' stroke-linejoin='round'/></svg>") no-repeat}
  .status{margin-top:.8rem;border-radius:10px;padding:.6rem .8rem;font-size:13px;line-height:1.35;
    background:var(--paper);border:1px solid var(--rule);transition:opacity .4s,transform .4s}
  .status.hidden{opacity:0;transform:translateY(10px)}
  .status.ok{border-color:transparent;background:linear-gradient(135deg,var(--aw-amber),var(--aw-rose));color:var(--aw-ink)}
  .status b{display:block}
  .demo-note{text-align:center;font-size:14.5px;color:var(--muted);margin:1.4rem auto 0;max-width:36rem}
  @media (prefers-color-scheme: dark){ .ev.own{background:#1E2A3D;color:#C9D6E8} }
  @media (max-width:700px){
    .demo{grid-template-columns:1fr}
    .wire{width:2px;height:3.5rem;margin:0 auto}
    .packet{left:50% !important;top:0;transition:top 1s cubic-bezier(.4,0,.2,1),opacity .25s}
    .packet.to-b{top:100%}
    .wire-label{left:1.2rem;top:50%;transform:translateY(-50%)}
  }

  /* The four steps, as a strip. A genuine sequence, so the numbers are honest;
     they wear the gradient with ink on it. */
  .steps{display:grid;grid-template-columns:1fr;gap:1.6rem 2rem;margin:2.6rem auto 0;padding:0;list-style:none;counter-reset:step}
  @media (min-width:700px){ .steps{grid-template-columns:repeat(4,1fr)} }
  .steps li{margin:0;counter-increment:step}
  .steps li::before{content:counter(step);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;
    background:linear-gradient(135deg,var(--aw-amber),var(--aw-rose));color:var(--aw-ink);font-weight:700;font-size:15px;margin-bottom:.8rem}
  .steps b{display:block;font-size:17px;margin-bottom:.3rem}
  .steps p{margin:0;font-size:15.5px;line-height:1.5;color:var(--muted)}

  /* Rows of phone screens, and a grid of desktop ones. Both break the measure. */
  .phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1.6rem 1.4rem;margin:2.6rem 0 2.4rem}
  .phones figure{margin:0}
  .phones img{width:100%;max-width:18rem}
  .desk{display:grid;grid-template-columns:1fr;gap:1.6rem;margin:1.6rem 0 2.4rem}
  @media (min-width:720px){ .desk{grid-template-columns:1fr 1fr} }
  .desk figure{margin:0}
  .holds{display:grid;grid-template-columns:1fr;gap:1.4rem 2.4rem;margin:2.4rem auto 0}
  @media (min-width:600px){ .holds{grid-template-columns:1fr 1fr} }
  .holds > div{border-radius:16px;padding:1.2rem 1.4rem;background:var(--soft)}
  .holds h3{margin:0 0 .5rem;font-size:18px}
  .holds ul{font-size:15.5px;line-height:1.55;margin:0;color:var(--muted)}
  .tiers th:last-child,.tiers td:last-child{white-space:nowrap;text-align:right;padding-right:0}
  .flow{display:grid;grid-template-columns:1fr;gap:2rem 1.4rem;margin:2.6rem auto 0;padding:0;list-style:none;counter-reset:step}
  @media (min-width:700px){ html[data-platform="ios"] .flow{grid-template-columns:repeat(4,1fr)} html[data-platform="mac"] .flow{grid-template-columns:repeat(2,1fr)} }
  .flow li{margin:0;counter-increment:step;display:flex;flex-direction:column}
  .flow li::before{content:counter(step);display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
    background:linear-gradient(135deg,var(--aw-amber),var(--aw-rose));color:var(--aw-ink);font-weight:700;font-size:14px;margin-bottom:.6rem}
  .flow b{display:block;font-size:16px;margin-bottom:.2rem}
  .flow p{margin:0 0 1rem;font-size:14.5px;line-height:1.45;color:var(--muted)}
  .flow figure{margin:auto 0 0}
  .flow figure img{border-radius:22px}
  .flow figure img.desk{border-radius:10px}