/* Service pages: day without / with. Site color tokens, light and dark. */
.sd{margin-top:6rem;padding:clamp(1.5rem,4vw,3rem);border-radius:28px;border:1px solid var(--color-line);background:var(--color-ink-2);position:relative;overflow:hidden}
.sd::before{content:"";position:absolute;inset:auto -20% -60% 40%;height:120%;background:radial-gradient(closest-side,#3b7fe333,#0000);opacity:0;transition:opacity .8s;pointer-events:none}
.sd.sd-on::before{opacity:1}
.sd-head{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.25rem 2rem}

/* Switch: one button, role=switch, 44px target */
.sd-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;padding:5px;min-height:54px;border-radius:9999px;background:var(--color-ink);border:1px solid var(--color-line-strong);cursor:pointer;font:inherit;color:inherit}
.sd-switch:focus-visible{outline:2px solid var(--color-link);outline-offset:2px}
.sd-opt{position:relative;z-index:1;display:grid;place-items:center;min-height:44px;padding:0 1.25rem;border-radius:9999px;color:var(--color-mute);font-size:.9375rem;font-weight:600;white-space:nowrap;transition:color .25s;pointer-events:none}
.sd-opt-on{color:#fff}
.sd-knob{position:absolute;z-index:0;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:9999px;background:#5b6474;transition:transform .35s cubic-bezier(.3,.9,.3,1),background-color .35s}
.sd-on .sd-knob{transform:translateX(100%);background:#2b61df}

/* Timeline */
.sd-list{position:relative;list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:14px}
.sd-list::before{content:"";position:absolute;left:5.25rem;top:8px;bottom:8px;width:2px;background:#808998}
.sd-item{position:relative;display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;align-items:start}
.sd-item::before{content:"";position:absolute;left:calc(5.25rem - 5px);top:22px;width:12px;height:12px;border-radius:9999px;background:var(--color-ink);border:2px solid #5f6878;transition:border-color .3s,background-color .3s}
.sd-on .sd-item::before{border-color:#2b61df;background:#2b61df}
.sd-time{padding-top:15px;text-align:right;font-weight:700;font-size:.8125rem;color:var(--color-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.sd-card{margin-left:1.25rem;padding:16px 20px;border-radius:18px;background:var(--color-ink);border:1px solid var(--color-line)}
.sd-moment{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;color:var(--color-paper)}

/* Flip */
.sd-faces{display:grid;margin-top:8px;perspective:900px}
.sd-face{grid-area:1/1;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .6s cubic-bezier(.3,.8,.3,1),opacity .4s;transform-origin:50% 50%}
.sd-after{transform:rotateX(-180deg);opacity:0}
.sd-on .sd-before{transform:rotateX(180deg);opacity:0}
.sd-on .sd-after{transform:none;opacity:1}
.sd-item:nth-child(2) .sd-face{transition-delay:.12s}
.sd-item:nth-child(3) .sd-face{transition-delay:.24s}
.sd-item:nth-child(4) .sd-face{transition-delay:.36s}
.sd-txt{flex:1 1 16rem;font-size:.9875rem;line-height:1.55;color:var(--color-mute)}
.sd-on .sd-txt{color:var(--color-paper)}
.sd-tag{flex:none;padding:2px 9px;border-radius:9999px;font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sd-tag-b{background:#f3e3e1;color:#9a3a2f}
.sd-tag-a{background:#e6f4ec;color:#1e6b3e}

.sd-foot{position:relative;margin-top:2.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.sd-go{min-height:50px}
.sd-note{font-size:.875rem;color:var(--color-mute)}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .sd-tag-b{background:#4a2420;color:#ffb4a8}
  :root:not([data-theme=light]) .sd-tag-a{background:#173c2b;color:#9fe0b8}
  :root:not([data-theme=light]) .sd-card{background:var(--color-ink-3)}
  :root:not([data-theme=light]) .sd-switch{background:#0A1630}
  :root:not([data-theme=light]) .sd-list::before{background:var(--color-line-strong)}
  :root:not([data-theme=light]) .sd-item::before{border-color:#8a93a3}
  :root:not([data-theme=light]) .sd-on .sd-item::before{border-color:#6FA3F0;background:#6FA3F0}
}
:root[data-theme=dark] .sd-tag-b{background:#4a2420;color:#ffb4a8}
:root[data-theme=dark] .sd-tag-a{background:#173c2b;color:#9fe0b8}
:root[data-theme=dark] .sd-card{background:var(--color-ink-3)}
:root[data-theme=dark] .sd-switch{background:#0A1630}
:root[data-theme=dark] .sd-list::before{background:var(--color-line-strong)}
:root[data-theme=dark] .sd-item::before{border-color:#8a93a3}
:root[data-theme=dark] .sd-on .sd-item::before{border-color:#6FA3F0;background:#6FA3F0}

@media (max-width:640px){
  .sd{margin-top:4rem;border-radius:22px}
  .sd-switch{width:100%}
  .sd-opt{padding:0 .5rem}
  .sd-list::before{left:6px}
  .sd-item{grid-template-columns:1fr;gap:4px;padding-left:24px}
  .sd-item::before{left:1px;top:3px}
  .sd-time{padding-top:0;text-align:left}
  .sd-card{margin-left:0;padding:14px 16px}
  .sd-go{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .sd-face,.sd-knob,.sd::before{transition:none}
  .sd-item:nth-child(2) .sd-face,
  .sd-item:nth-child(3) .sd-face,
  .sd-item:nth-child(4) .sd-face{transition-delay:0s}
}