/* calendarmirror.com — the home page's own rules, shared by every language's
 * copy of it (/, /de/). Tokens, type and the page column come from site.css;
 * this file is the hero, the live demo, the five faces and the two-column
 * blocks underneath. It lives beside site.css so /de/index.html can link it
 * with one ../ and nothing else has to be duplicated per language. */

  .hero{padding:clamp(2rem,6vw,4.5rem) 0 0;text-align:center}
  .hero h1{max-width:56rem;margin-left:auto;margin-right:auto}
  section > h2.centered{max-width:48rem}
  .hero .lede{max-width:34rem;margin-left:auto;margin-right:auto}
  /* The problem, then the one word that answers it, hand-written in the icon's colours. */
  .fixed{font:700 1.3em/1 "Caveat",cursive;letter-spacing:0;
    background:linear-gradient(120deg,var(--brand),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;
    display:inline-block;transform:rotate(-3deg);padding:0 .1em .05em}

  /* The demo: a Work calendar being copied into a Personal one, live. It sits
     on the one place the icon's gradient is allowed: a soft field behind it. */
  .field{margin:3.2rem auto 0;padding:clamp(14px,3vw,34px);border-radius:28px;
    background:linear-gradient(135deg, rgba(58,160,255,.16), rgba(40,200,182,.16))}
  @media (prefers-color-scheme: dark){ .field{background:linear-gradient(135deg, rgba(58,160,255,.14), rgba(40,200,182,.10))} }
  .demo{background:var(--paper)}
  .frame.mac{max-width:60rem}
  .frame.phone .demo-bar{padding:.6rem .7rem}
  .frame.phone .demo-face span{display:none}
  .frame.phone .modes button{padding:.5em .55em;font-size:12px}
  .frame.phone .cal{padding:.7rem .5rem .9rem}
  .frame.phone .cal-head span{display:none}
  .frame.phone .ev{left:1.9rem;right:.1rem;font-size:11.5px;padding:.2rem .4rem}
  .frame.phone .ev small{display:none}
  .frame.phone .tick{font-size:10px}
  .demo-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--rule)}
  .modes{display:flex;gap:.25rem;background:var(--soft);border-radius:10px;padding:.2rem}
  .modes button{font:600 14px/1 "Figtree",sans-serif;color:var(--muted);background:transparent;border:0;border-radius:8px;
    padding:.55em .9em;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
  .modes button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(15,26,43,.15)}
  .demo-face{display:flex;align-items:center;gap:.5rem;font-size:14px;color:var(--muted)}
  .face{display:inline-block;width:20px;height:20px;background:var(--ink);
    -webkit-mask:var(--face) center/contain no-repeat;mask:var(--face) center/contain no-repeat}
  .cals{display:grid;grid-template-columns:1fr 1fr;gap:0;position:relative}
  .cal{padding:.9rem 1rem 1.2rem;min-width:0}
  .cal + .cal{border-left:1px solid var(--rule)}
  .cal-head{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-bottom:.7rem}
  .cal-head b{font-size:15px}
  .cal-head span{font-size:13px;color:var(--muted);white-space:nowrap}
  .day{position:relative;height:416px}
  .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:top .7s cubic-bezier(.4,0,.2,1),opacity .5s,transform .6s cubic-bezier(.2,.8,.2,1)}
  .ev b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis}
  .ev small{display:block;color:inherit;opacity:.75;font-size:12px}
  .ev.work{background:#E9EEF5;color:#2C3A4F}
  .ev.own{background:#E3F7F3;color:#0E5C52}
  .ev.copy{background:var(--brand);color:#06121F}
  .ev.copy.busy{background:repeating-linear-gradient(135deg,var(--brand) 0 6px,#5DB3FF 6px 12px)}
  .ev.hidden{opacity:0;transform:translateX(-28px)}
  .ev.gone{opacity:0}
  .demo-note{padding:.8rem 1.1rem 1rem;font-size:14px;color:var(--muted);border-top:1px solid var(--rule)}
  @media (prefers-color-scheme: dark){
    .ev.work{background:#1E2A3D;color:#C9D6E8}
    .ev.own{background:#0F3B36;color:#9EE8DA}
    .modes button[aria-pressed="true"]{box-shadow:none}
  }
  @media (max-width:560px){
    .cal-head span{display:none}
    .ev{left:1.9rem;font-size:12px;padding:.3rem .45rem}
    .ev small{display:none}
    .demo-bar{flex-wrap:wrap}
    .modes button{padding:.5em .6em;font-size:13px}
  }

  /* The five faces of the menu-bar icon, from the app's own drawing code,
     coloured with the ink token through a mask so they invert with the page. */
  .faces{display:flex;justify-content:center;gap:clamp(1rem,4vw,2.6rem);margin:2.8rem 0 0;padding:0;list-style:none;flex-wrap:wrap}
  .faces li{display:flex;flex-direction:column;align-items:center;gap:.7rem;min-width:4rem}
  .faces i{display:block;width:clamp(3rem,7vw,4.5rem);height:clamp(3rem,7vw,4.5rem);background:var(--ink);
    -webkit-mask:var(--face) center/contain no-repeat;mask:var(--face) center/contain no-repeat}
  .faces span{font-size:15px;color:var(--muted);white-space:nowrap}

  .two{display:grid;grid-template-columns:1fr;gap:2.4rem 4rem;align-items:center;margin-top:2.6rem}
  @media (min-width:760px){ .two{grid-template-columns:1fr 1fr} }
  .two figure{margin:0}
  .phones{display:flex;justify-content:center;gap:1.4rem;flex-wrap:wrap}
  .phones img{width:min(16rem,44vw);border-radius:28px}
  .phones figcaption{flex-basis:100%;width:100%;max-width:none}
  .two .phones{justify-content:center}
  .two p{color:var(--muted)}

  .askwhen{display:flex;flex-direction:column;align-items:center;text-align:center}
  .askwhen img{width:64px;height:64px;border-radius:15px;margin-bottom:1.2rem}
  .askwhen a{color:#C7355F}
  @media (prefers-color-scheme: dark){ .askwhen a{color:#F0689A} }