/* The date converter page. The top menu, footer and tokens come from page.css; this is only the page itself.
   Built from the approved mockup (outputs/2026-10-06-מוקאפ-המרת-תאריך.html). */
html{overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ---------- rolling characters (the site's digit roll, also for Hebrew letters) ---------- */
.dgs{display:inline-block;direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.dgs.he{direction:rtl}
.dg{position:relative;display:inline-block;overflow:hidden;vertical-align:baseline;height:1.08em;line-height:1.08}
.dg>span{display:inline-block}
.dg>span.out{position:absolute;inset:0}

/* ---------- the converter: a full-bleed ערב field; the fields on 5 columns, the double tile leads on 7 ---------- */
.c-hero{--gut:clamp(16px,4vw,48px);margin-top:8px;background:var(--erev);color:var(--yareach);
  padding-block:clamp(24px,2.6vw,36px);padding-inline:max(var(--gut),calc((100% - 1400px)/2));
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:24px;align-items:center}
.c-side{grid-column:1/span 5;padding-inline-end:clamp(0px,1.6vw,24px)}
.c-board{grid-column:6/span 7}
.c-hero h1{font-family:var(--f-display);font-weight:900;font-size:clamp(32px,3.6vw,48px);line-height:1.06;color:#fff;text-wrap:balance}
.c-lead{color:var(--yareach-soft);margin-top:10px;max-width:42ch;text-wrap:pretty}

/* the direction: one button; the two words trade places */
.c-dir{display:inline-flex;align-items:center;gap:12px;margin-top:24px;min-height:52px;padding:4px 8px 4px 20px;border-radius:999px;
  background:rgba(238,240,247,.08);border:1px solid rgba(238,240,247,.18);color:#fff;font-weight:700;font-size:19px;
  transition:background-color .15s,border-color .15s}
.c-dir .w{display:inline-block;min-width:3.4em;text-align:center}
.c-dir .ar{width:22px;height:22px;color:var(--yareach-soft)}
.c-dir .sw{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:999px;background:var(--yareach);color:var(--erev);font-size:16px}
.c-dir .sw svg{width:18px;height:18px;transition:transform .32s var(--ease)}
.c-dir.flip .sw svg{transform:rotate(180deg)}
.c-dir:active{scale:.98}
.c-dir:focus-visible{outline:3px solid var(--ner);outline-offset:3px;border-radius:999px}

.c-fx{margin-top:20px}
.f-lab{display:block;font-size:16px;font-weight:600;color:var(--yareach-soft);margin-bottom:8px}
.f-date,.f-sel{width:100%;min-height:64px;padding:8px 18px;border-radius:18px;border:2px solid transparent;background:var(--yareach);color:var(--dyo);
  font:700 clamp(22px,2.2vw,28px)/1.2 var(--f-util);font-variant-numeric:tabular-nums;color-scheme:light;
  transition:border-color .15s,background-color .15s}
.f-date:focus-visible,.f-sel:focus-visible{outline:none;border-color:var(--ner);background:#fff}
.f-date:active,.f-sel:active{background:#fff}
.f-sel{appearance:none;-webkit-appearance:none;cursor:pointer;padding-inline-end:44px;font-family:var(--f-display);font-weight:700;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2A5C' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:20px;background-position:left 14px center}
.f-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr) minmax(0,1.5fr);gap:10px}

/* the sunset box: the whole line is the target */
.chk{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;margin-top:12px;padding:4px 12px;margin-inline-start:-12px;border-radius:14px;cursor:pointer;
  transition:background-color .15s}
.chk input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chk .bx{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--yareach-soft);display:grid;place-items:center;transition:background-color .15s,border-color .15s}
.chk .bx svg{width:16px;height:16px;opacity:0;transform:scale(.6);transition:opacity .15s,transform .2s var(--ease)}
.chk input:checked+.bx{background:var(--ner);border-color:var(--ner)}
.chk input:checked+.bx svg{opacity:1;transform:none}
.chk input:focus-visible+.bx{outline:3px solid var(--ner);outline-offset:3px}
.chk:active .bx{scale:.9}
.chk b{font-weight:700;color:#fff}
.chk small{display:block;font-size:15px;color:var(--yareach-soft);line-height:1.3}

/* the equation, as the genre writes it */
.c-ans{margin-top:24px;padding-top:20px;border-top:1px solid rgba(238,240,247,.14)}
.eq-line{font:600 clamp(18px,1.6vw,21px)/1.4 var(--f-body);color:#fff;text-wrap:balance}
.eq-line .is{color:var(--yareach-soft);font-family:var(--f-util);font-weight:500;padding-inline:6px}
.eq-line .an{font-family:var(--f-display);font-weight:900;font-size:clamp(26px,2.4vw,32px);color:var(--ner-soft);white-space:nowrap}
.c-copy{display:inline-flex;align-items:center;gap:8px;margin-top:14px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid rgba(238,240,247,.4);
  color:var(--yareach);font-weight:700;font-size:16px;transition:background-color .15s,border-color .15s,color .15s}
.c-copy svg{width:18px;height:18px}
.c-copy:active{scale:.97}
.c-copy.ok{background:var(--yareach);border-color:var(--yareach);color:var(--erev-night)}

/* the double tile: a wall-calendar day, the Gregorian number in the corner and the Hebrew letters in the middle */
.tile{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:clamp(300px,28vw,420px);padding:clamp(18px,2.2vw,30px);
  border-radius:clamp(20px,2vw,30px);background:var(--erev-night);border:1px solid rgba(238,240,247,.1);
  box-shadow:inset 0 4px 0 var(--ner),0 30px 60px -30px rgba(6,8,22,.9)}
.tile::before,.tile::after{content:"";position:absolute;top:-9px;width:14px;height:22px;border-radius:7px;background:var(--erev);border:2px solid rgba(238,240,247,.25)}
.tile::before{right:28%}
.tile::after{left:28%}
.t-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.t-wd{font:700 clamp(19px,1.7vw,24px)/1.2 var(--f-body);color:var(--yareach);padding-top:6px}
.t-eve[hidden]{display:none}
.t-eve{display:block;margin-top:8px;font-size:15px;font-weight:700;color:var(--yareach-soft)}
.t-g{font-family:var(--f-util);font-variant-numeric:tabular-nums;font-weight:700;font-size:clamp(48px,5vw,72px);line-height:1;color:var(--ner)}
.t-g .dg{height:1em;line-height:1}
.t-h{align-self:center;justify-self:center;font-family:var(--f-display);font-weight:900;font-size:clamp(140px,16vw,250px);line-height:1;color:#fff;margin-block:-8px}
.t-h .dg{height:1.1em;line-height:1.1}
.t-foot{display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.t-hm{font:700 clamp(26px,2.8vw,40px)/1.15 var(--f-display);color:var(--yareach)}
.t-gm{font:600 clamp(18px,1.6vw,22px)/1.2 var(--f-body);color:var(--yareach-soft)}

/* the strip under the tile: days in both calendars; the chosen day lands under the gold marker */
.strip-w{position:relative;margin-top:26px}
.strip-w::before{content:"";position:absolute;top:-14px;left:50%;translate:-50% 0;border:9px solid transparent;border-top-color:var(--ner);border-bottom:0;z-index:1}
.strip{--cw:56px;--sg:8px;position:relative;height:80px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to left,transparent 0,#000 7%,#000 93%,transparent 100%)}
.track{position:absolute;top:2px;right:0;display:flex;direction:rtl;gap:var(--sg);will-change:transform}
.sc{flex:none;width:var(--cw);height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;
  background:rgba(18,24,58,.9);color:var(--yareach);border:1px solid rgba(238,240,247,.1);
  transition:background-color .2s var(--ease),color .2s,border-color .2s,box-shadow .2s}
.sc b{font:700 20px/1 var(--f-util);font-variant-numeric:tabular-nums}
.sc i{font-style:normal;font:700 17px/1.1 var(--f-display);color:var(--yareach-soft)}
/* Shabbat: a darker cell with a thin light rim, no gold */
.sc.sat{background:#0A0E26;border-color:rgba(238,240,247,.34)}
.sc.on{background:var(--ner);color:var(--erev-night);border-color:var(--ner-soft);box-shadow:inset 0 3px 0 rgba(255,236,200,.55)}
.sc.on i{color:var(--erev-night)}
.sc.eve{border:2px dashed var(--ner-soft)}
.sc:active{scale:.94}
.sc:focus-visible{outline:3px solid var(--ner-soft);outline-offset:-3px}
.sc.gone{visibility:hidden}

/* the quiet letter values under the tile: the day and the year as letters, each with its value, and the two sums */
.lv{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 32px}
.lv-g{display:flex;align-items:center;gap:8px}
.lv-ts{display:flex;align-items:center;gap:6px}
.lv-t{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:auto;height:auto;padding:0 2px;border:0}
.lv-t b{font:900 24px/1 var(--f-display);color:var(--yareach)}
.lv-t i{font-style:normal;font:700 14px/1 var(--f-util);font-variant-numeric:tabular-nums;color:var(--ner-soft);margin-top:4px}
.lv .op{font:500 16px/1 var(--f-util);color:var(--yareach-soft);opacity:.6}
.lv .eq{font:500 22px/1 var(--f-util);color:var(--yareach-soft);margin-inline:2px}
.lv-s{font:700 28px/1 var(--f-util);font-variant-numeric:tabular-nums;color:var(--yareach)}
.lv-s .dg{height:1em;line-height:1}
.lv-cap{margin-top:12px;text-align:center;font-size:15px;line-height:1.5;color:var(--yareach-soft);text-wrap:balance}
.lv-cap a{color:var(--yareach);font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(238,240,247,.4);border-radius:6px;transition:text-decoration-color .15s,color .15s}
.lv-cap a:active{opacity:.75}

@media (hover:hover){
  .c-dir:hover{background:rgba(238,240,247,.16);border-color:rgba(238,240,247,.4)}
  .f-date:hover,.f-sel:hover{border-color:rgba(232,163,61,.6)}
  .chk:hover{background:rgba(238,240,247,.06)}
  .chk:hover .bx{border-color:var(--ner-soft)}
  .c-copy:hover{background:rgba(238,240,247,.1);border-color:var(--yareach)}
  .c-copy.ok:hover{background:#fff;color:var(--erev-night)}
  .sc:hover{background:#1B2452;border-color:rgba(238,240,247,.5)}
  .sc.on:hover{background:var(--ner-soft);border-color:#fff}
  .lv-cap a:hover{color:#fff;text-decoration-color:var(--yareach)}
}

/* ---------- below the hero ---------- */
.sec{--gut:clamp(16px,4vw,48px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.4vw,32px);row-gap:20px;
  padding-inline:max(var(--gut),calc((100% - 1304px)/2));padding-block:clamp(48px,6vw,88px);align-items:start}
.sec h2{font-family:var(--f-display);font-weight:900;font-size:clamp(28px,3vw,42px);line-height:1.1;text-wrap:balance}

/* the Hebrew birthday: the birth date on 4 columns, five small double tiles and the civil-year axis on 8 */
.s-bday{padding-block-start:clamp(48px,6vw,88px)}
.b-h{grid-column:1/span 4}
.b-h>p{margin-top:10px;font-size:17px;text-wrap:balance}
.b-f{margin-top:20px}
.b-f .f-lab{color:var(--dyo-rach)}
.b-f .f-date{background:var(--card);border-color:var(--line)}
.b-f .f-date:focus-visible{border-color:var(--ner)}
.b-f .chk b{color:var(--dyo)}
.b-f .chk .bx{border-color:var(--dyo-rach)}
.b-born{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:18px}
.b-born .an{font-family:var(--f-display);font-weight:900;font-size:24px;color:var(--erev)}
.b-born .is{color:var(--dyo-rach);font-family:var(--f-util)}
.ex{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:999px;background:#E6E9F2;color:var(--erev);font-size:15px;font-weight:700}

.b-b{grid-column:5/span 8}
.b-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.bw{display:flex;flex-direction:column;gap:8px}
.bt{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:10px;min-height:180px;padding:14px 14px 16px;border-radius:16px;
  background:var(--erev-night);color:var(--yareach);border:1px solid rgba(238,240,247,.08);box-shadow:0 14px 26px -18px rgba(23,27,48,.7);
  transition:background-color .2s var(--ease),translate .2s var(--ease)}
.bt .gn{font:700 clamp(19px,1.6vw,22px)/1.15 var(--f-util);font-variant-numeric:tabular-nums;color:var(--ner)}
.bt .hd{align-self:center;font:900 clamp(22px,2vw,28px)/1.15 var(--f-display);color:#fff}
.bt .gm{display:block;font-size:17px;font-weight:600;line-height:1.3;color:var(--yareach)}
.bt .y{display:block;font:500 15px/1.3 var(--f-util);font-variant-numeric:tabular-nums;color:var(--yareach-soft)}
.bt.on{background:var(--ner);border-color:var(--ner-soft);translate:0 -4px;box-shadow:inset 0 3px 0 rgba(255,236,200,.6),0 16px 26px -16px rgba(23,27,48,.45)}
.bt.on .y,.bt.on .gn,.bt.on .hd,.bt.on .gm{color:var(--erev-night)}
.dr{font-size:15px;line-height:1.3;color:var(--dyo-rach)}
.dr b{font-weight:700;color:var(--erev)}

/* the civil year, January on the right: one lane per year, the dot where the birthday falls */
.ax{margin-top:32px}
.ax-l{position:relative;height:150px;overflow:hidden;border-bottom:1px solid #C9CEDF}
.ax-in{position:absolute;inset:0 12px}
.ax-k{position:absolute;inset:0}
.ax-m{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.ax-m.mo{background:#B3BAD2}
.ax-d{position:absolute;right:0;width:100%;height:30px;transform:translateX(calc(var(--f,0) * -100%));transition:transform .6s var(--ease)}
.ax-p{position:absolute;right:-7px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--erev);border:2px solid var(--card)}
.ax-d.on .ax-p{background:var(--ner);box-shadow:0 0 0 2px var(--erev-night)}
.ax-t{position:absolute;top:4px;right:14px;padding-inline:4px;background:var(--neyar);font:700 15px/1.4 var(--f-display);color:var(--erev);white-space:nowrap}
.ax-d.end .ax-t{right:auto;left:calc(100% + 14px)}
.ax-n{position:relative;height:28px;margin-inline:12px;overflow:hidden}
.ax-n span{position:absolute;top:4px;padding-inline:4px;font-size:15px;font-weight:600;color:var(--dyo);white-space:nowrap}
.ax-cap{margin-top:12px;font-size:16px;color:var(--dyo);max-width:64ch;text-wrap:pretty}
.b-note{grid-column:5/span 8;font-size:16px;color:var(--dyo-rach);max-width:70ch}
.b-note[hidden]{display:none}
.b-note a,.a-q a{color:var(--erev);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line);border-radius:6px;transition:text-decoration-color .15s}
.b-note a:active{opacity:.75}

/* questions: quiet, on white */
.s-faq{background:var(--card)}
.sec-h{grid-column:1/span 4}
.sec-b{grid-column:5/span 8}
.faq{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;max-width:56ch}
.a-q b{display:block;font-family:var(--f-display);font-weight:700;font-size:21px;line-height:1.3;color:var(--erev)}
.a-q p{margin-top:8px;color:var(--dyo);max-width:56ch;text-wrap:pretty}

/* the rest of the site, like the holiday pages */
.s-more{--gut:clamp(16px,4vw,48px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;
  padding-inline:max(var(--gut),calc((100% - 1304px)/2));padding-block:clamp(36px,4vw,56px) 0}
.s-more h2{font-family:var(--f-display);font-weight:900;font-size:clamp(24px,2.4vw,30px)}
.a-more{display:flex;flex-wrap:wrap;gap:12px}
.a-more a{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid var(--erev);
  color:var(--erev);font-weight:700;text-decoration:none;transition:background-color .15s,color .15s}
.a-more a:active{scale:.97}
.a-more a.go{background:var(--ner);border-color:var(--ner);color:var(--dyo)}
.a-more a:focus-visible{outline:3px solid var(--ner);outline-offset:3px}
@media (hover:hover){
  .a-more a:hover{background:var(--erev);color:var(--yareach)}
  .a-more a.go:hover{background:var(--ner-soft);color:var(--dyo)}
  .b-f .f-date:hover{border-color:var(--ner)}
  .b-f .chk:hover{background:#EEF0F7}
  .b-note a:hover{text-decoration-color:var(--ner)}
}

/* ---------- tablet and phone: title, the answer tile, the strip, the equation, the field, then the rest ---------- */
@media (max-width:900px){
  .c-hero{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:20px 32px}
  .c-side,.c-board{display:contents}
  .c-hero h1{order:1}
  .c-lead{order:2;margin-top:-8px}
  .tile{order:3}
  .strip-w{order:4;margin-top:4px}
  .c-ans{order:5;margin-top:0;padding-top:0;border-top:0}
  .c-fx{order:6;margin-top:0}
  .c-dir{order:7;margin-top:4px;justify-self:start}
  .c-copy{order:8;margin-top:0;justify-self:start}
  .lv{order:9;margin-top:8px;padding-top:20px;border-top:1px solid rgba(238,240,247,.14)}
  .lv-cap{order:10;margin-top:-4px}
  .b-h,.b-b,.b-note,.sec-h,.sec-b{grid-column:1/-1}
  .b-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .b-row .bw:first-child{grid-column:1/-1}
  .faq{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .c-hero{gap:12px}
  .c-hero h1{font-size:30px}
  .c-lead{font-size:17px;margin-top:-6px}
  .eq-line{font-size:17px}
  .eq-line .an{display:block;font-size:26px}
  .eq-line .is{padding-inline:6px 0}
  .tile{min-height:220px;padding:14px 18px;border-radius:20px}
  .t-wd{font-size:17px;padding-top:2px}
  .t-g{font-size:40px}
  .t-h{font-size:104px;margin-block:-6px}
  .t-hm{font-size:22px}
  .t-gm{font-size:16px}
  .strip{height:70px}
  .sc{height:64px;border-radius:10px}
  .sc b{font-size:18px}
  .sc i{font-size:15px}
  .f-lab{margin-bottom:6px}
  .f-date{min-height:58px}
  .chk{margin-top:4px}
  .c-dir{font-size:17px;padding-inline-start:14px;gap:8px}
  .c-dir .w{min-width:3em}
  .f-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr) minmax(0,1.25fr);gap:8px}
  .f-sel{padding-inline:12px 30px;background-position:left 8px center;background-size:16px;font-size:20px}
  .lv{gap:12px 20px}
  .lv-t b{font-size:21px}
  .bt{min-height:150px}
  .bt .hd{font-size:26px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important}
}
/* page.css gives .a-q a top rule and a margin for stacked cards, and .a-more a margin; here they sit in their own sections */
.faq .a-q{margin:0;padding:0;border:0}
.s-more .a-more{margin-top:0}