/* محوّل التاريخ — /date/. A quiet column like the GIF maker's empty state: grey tiles, paper cards, ink controls, one
   warm accent of its own (the crescent's gold) for «اليوم» and the nearest day. garden.css zeroes corners at zero
   specificity, so every corner here carries !important. Light only. */
.date-page{
  --dt-acc:#A67C2A; --dt-acc-ink:#5C4211;
  --dt-wash:color-mix(in srgb,var(--dt-acc) 11%,var(--paper,#fff));
  --dt-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111315' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.dt{width:100%;max-width:900px;margin:0 auto;padding:14px 24px 56px;box-sizing:border-box}
.dt *,.dt *::before,.dt *::after{box-sizing:border-box}
.dt [hidden]{display:none!important}
.dt svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:where(.dt) :is(button,select,input){font-family:var(--font);color:inherit;-webkit-tap-highlight-color:transparent}
.dt :is(button,input,select,a,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:2px}
html[data-look="garden"] .dt :is(.dt-today,.dt-card,.dt-ev,.dt-err){border-radius:var(--r-card)!important}
html[data-look="garden"] .dt :is(.dt-ico,.dt-ev-x){border-radius:50%!important}
html[data-look="garden"] .dt :is(.dt-chip,.dt-tag,.dt-note,.dt-fine,.dt-sw i,.dt-toast){border-radius:999px!important}
html[data-look="garden"] .dt :is(.dt-tabs,.dt-seg,.dt-sel select,.dt-field input,.g-btn){border-radius:8px!important}
html[data-look="garden"] .dt :is(.dt-tabs button,.dt-seg button){border-radius:6px!important}

/* ---------- head (the GIF maker's) ---------- */
.dt-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px;min-height:48px}
.dt-title{display:flex;align-items:center;gap:6px;min-width:0}
.dt-title-t{min-width:0}
.dt-title h1{margin:0;font:700 26px/1.2 var(--font);color:var(--ink)}
.dt-sub{margin:2px 0 0;font:400 13px/1.4 var(--font);color:var(--ink-3)}
.dt-headacts{display:flex;align-items:center;gap:4px;flex:none}
.dt-ico{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-decoration:none;transition:background-color var(--d1)}
.dt-ico svg{width:21px;height:21px}
.dt-ico:hover{background:var(--tile-2)}
.dt-back{margin-inline-start:-10px}

/* ---------- today ---------- */
.dt-today{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 20px;padding:24px 28px;background:var(--tile);border:1px solid var(--line)}
.dt-kicker{display:flex;align-items:center;gap:0;margin:0 0 6px;font:600 14px/1.4 var(--font);color:var(--dt-acc-ink)}
.dt-kicker::before{content:"";width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--dt-acc)}
.dt-today-h{margin:0;font:700 clamp(25px,4.2vw,36px)/1.25 var(--font);color:var(--ink);text-wrap:balance}
.dt-today-g{margin:6px 0 0;font:500 clamp(17px,2.4vw,20px)/1.4 var(--font);color:var(--ink-2)}
.dt-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:12px 0 0;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 13.5px var(--font);cursor:pointer;transition:border-color var(--d1)}
.dt-chip:hover{border-color:var(--ink)}
.dt-chip svg{width:17px;height:17px}
.dt-today-art{width:clamp(120px,22vw,200px);color:var(--ink)}
.dt-today-art .mood{display:block;width:100%;height:auto}
.dt-today-art .mood .swap{transform-box:fill-box;transform-origin:center;animation:dtSwap 5s var(--ease) infinite}
@keyframes dtSwap{0%,70%{transform:rotate(0)}85%,100%{transform:rotate(180deg)}}

.dt-err{margin:14px 0 0;padding:14px 16px;background:color-mix(in srgb,var(--danger) 10%,var(--paper));color:var(--ink);font:500 15px/1.7 var(--font)}
.dt.dt-off :is(.dt-tabs,.dt-pane){display:none!important}

/* ---------- tabs ---------- */
.dt-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:20px 0 16px;padding:4px;background:var(--tile-2)}
.dt-tabs button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:0 6px;border:0;background:none;color:var(--ink-2);font:500 15px var(--font);cursor:pointer;white-space:nowrap;transition:background-color var(--d1),color var(--d1)}
.dt-tabs button svg{width:19px;height:19px;flex:none}
.dt-tabs button:hover{color:var(--ink)}
.dt-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(15,20,25,.12)}

.dt-pane{animation:dtIn .22s var(--ease)}
@keyframes dtIn{from{opacity:0;transform:translateY(4px)}}
.dt-card{padding:22px 24px;background:var(--paper);border:1px solid var(--line)}
.dt-h2{margin:6px 0 12px;font:700 19px/1.4 var(--font);color:var(--ink)}
.dt-h3{margin:0 0 14px;font:700 17px/1.4 var(--font);color:var(--ink)}

/* ---------- the picker ---------- */
.dt-pk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px}
.dt-lab{font:700 15px/1.4 var(--font);color:var(--ink)}
.dt-seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;background:var(--tile-2);min-width:178px}
.dt-seg button{min-height:40px;padding:0 12px;border:0;background:none;color:var(--ink-2);font:500 14.5px var(--font);cursor:pointer;transition:background-color var(--d1),color var(--d1)}
.dt-seg button:hover{color:var(--ink)}
.dt-seg button[aria-checked="true"]{background:var(--paper);color:var(--ink);font-weight:700;box-shadow:0 1px 3px rgba(15,20,25,.12)}
.dt-sels{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.7fr) minmax(0,1.1fr);gap:8px}
.dt-sel{display:flex;flex-direction:column;gap:4px;min-width:0}
.dt-sel > span{font:500 12.5px/1.4 var(--font);color:var(--ink-3)}
.dt-sel select{width:100%;min-height:50px;padding:0 12px 0 34px;border:1px solid var(--line-2);background:var(--paper) var(--dt-chev) no-repeat left 10px center/16px;color:var(--ink);font:600 16px var(--font);font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;transition:border-color var(--d1)}
.dt-sel select:hover{border-color:var(--ink-3)}
.dt-eq{margin:8px 0 0;font:400 14px/1.6 var(--font);color:var(--ink-3)}

/* ---------- convert ---------- */
.dt-arrow{display:grid;place-items:center;margin:14px 0 6px;color:var(--ink-3)}
.dt-arrow svg{width:22px;height:22px}
.dt-res{padding:18px 20px;background:var(--dt-wash);border-radius:var(--r-card)}
html[data-look="garden"] .dt .dt-res{border-radius:var(--r-card)!important}
.dt-res-k{margin:0 0 4px;font:500 13.5px/1.4 var(--font);color:var(--dt-acc-ink)}
.dt-res-big{margin:0;font:700 clamp(24px,4vw,32px)/1.3 var(--font);color:var(--ink);text-wrap:balance}
.dt-res-w{margin:4px 0 0;font:500 15px/1.5 var(--font);color:var(--ink-2)}
.dt-acts{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.dt-acts .g-btn svg{width:18px;height:18px}
.dt-note,.dt-fine{display:flex;align-items:flex-start;gap:8px;margin:14px 0 0;padding:9px 14px;background:var(--tile);font:400 13.5px/1.7 var(--font);color:var(--ink-2)}
.dt-note svg,.dt-fine svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--dt-acc)}
.dt-fine{background:none;padding:0;margin-top:12px;color:var(--ink-3);font-size:13px}
.dt-fine svg{color:var(--ink-3);width:15px;height:15px}

/* ---------- كم باقي ---------- */
.dt-evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:10px;margin:0 0 26px;padding:0;list-style:none}
.dt-ev{position:relative;display:flex;align-items:center;gap:14px;min-height:104px;padding:14px 18px;background:var(--paper);border:1px solid var(--line)}
.dt-ev-t{flex:1;min-width:0}
.dt-ev-name{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 4px;font:700 17px/1.35 var(--font);color:var(--ink);overflow-wrap:anywhere}
.dt-tag{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;background:var(--tile-2);font:500 11.5px/1 var(--font);color:var(--ink-2)}
.dt-tag.is-acc{background:var(--dt-acc);color:#fff}
.dt-ev-date{margin:0;font:500 13.5px/1.5 var(--font);color:var(--ink-2)}
.dt-ev-alt{margin:0;font:400 13px/1.5 var(--font);color:var(--ink-3)}
.dt-ev-brk{margin:5px 0 0;font:400 12.5px/1.5 var(--font);color:var(--ink-3)}
.dt-ev-num{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none;min-width:84px;margin:0;text-align:center;color:var(--ink)}
.dt-ev-num small{font:500 12.5px/1.3 var(--font);color:var(--ink-3)}
.dt-ev-num b{font:700 36px/1.1 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.dt-ev-num b.is-word{font-size:25px;line-height:1.5}
.dt-ev.is-near{border-color:color-mix(in srgb,var(--dt-acc) 45%,var(--line));background:var(--dt-wash)}
.dt-ev.is-now{border-color:var(--dt-acc);background:var(--dt-wash)}
.dt-ev.is-now .dt-ev-num small:first-child{color:var(--dt-acc-ink);font-weight:700}
.dt-ev.is-past{background:var(--tile)}
.dt-ev.is-past .dt-ev-num{color:var(--ink-3)}
.dt-ev-x{position:absolute;top:6px;left:6px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--ink-3);cursor:pointer;opacity:.75;transition:opacity var(--d1),background-color var(--d1)}
.dt-ev-x svg{width:16px;height:16px}
.dt-ev-x:hover{opacity:1;background:var(--tile-2);color:var(--ink)}
#dtMine .dt-ev{padding-left:20px}
#dtMine .dt-ev-num{margin-left:22px}
.dt-mine-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.dt-mine-head .dt-h2{margin:0}
.dt-mine-head .g-btn svg{width:17px;height:17px}
.dt-mine-head .g-btn.small{min-height:44px}
.dt-empty{margin:4px 0 16px;padding:18px 20px;border:1.5px dashed var(--line-2);font:400 14.5px/1.7 var(--font);color:var(--ink-3);border-radius:var(--r-card)}
html[data-look="garden"] .dt .dt-empty{border-radius:var(--r-card)!important}
.dt-form{margin:4px 0 0}
.dt-field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.dt-field > span{font:700 15px/1.4 var(--font);color:var(--ink)}
.dt-field input{width:100%;min-height:50px;padding:0 14px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);font:500 16px var(--font)}
.dt-field input:hover{border-color:var(--ink-3)}
.dt-field input[aria-invalid="true"]{border-color:var(--danger)}
.dt-ferr{margin:-12px 0 14px;font:500 13.5px/1.5 var(--font);color:var(--danger)}
.dt-sw{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:52px;margin:12px 0 0;padding:6px 0;border:0;background:none;text-align:start;cursor:pointer}
.dt-sw-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.dt-sw-t b{font:600 15px/1.4 var(--font);color:var(--ink)}
.dt-sw-t small{font:400 13px/1.5 var(--font);color:var(--ink-3)}
.dt-sw i{position:relative;flex:none;width:44px;height:26px;background:var(--sand);transition:background-color var(--d1)}
.dt-sw i::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:inset-inline-start var(--d1) var(--ease)}
.dt-sw[aria-checked="true"] i{background:var(--ink)}
.dt-sw[aria-checked="true"] i::after{inset-inline-start:21px}
.dt-preview{min-height:1.6em;margin:8px 0 0;font:700 16px/1.6 var(--font);color:var(--dt-acc-ink)}

/* ---------- احسب المدة ---------- */
.dt-hint{margin:10px 0 22px;font:400 13.5px/1.6 var(--font);color:var(--ink-3)}
.dt-span-res{margin-top:20px}
.dt-dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;margin:14px 0 0}
.dt-dl:empty{display:none}
.dt-dl div{min-width:0}
.dt-dl dt{font:500 12.5px/1.4 var(--font);color:var(--ink-3)}
.dt-dl dd{margin:2px 0 0;font:600 15px/1.5 var(--font);color:var(--ink)}

/* ---------- toast ---------- */
.dt-toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:50;display:flex;align-items:center;gap:12px;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:10px 18px;background:var(--ink);color:var(--bg);font:500 14px/1.5 var(--font);box-shadow:var(--sh-lift);transform:translateX(-50%)}
.dt-toast span{overflow-wrap:anywhere}
.dt-toast.in{animation:dtToast .22s var(--ease)}
@keyframes dtToast{from{opacity:0;transform:translate(-50%,8px)}}
.dt-toast-b{min-height:36px;padding:0 4px;border:0;background:none;color:#F2C46B;font:700 14px var(--font);cursor:pointer;flex:none}
.dt-toast-b:focus-visible{outline-color:var(--bg)!important}

/* ---------- sizes ---------- */
@media (min-width:860px){
  .dt-conv{display:grid;grid-template-columns:minmax(0,1.15fr) auto minmax(0,1fr);align-items:center;gap:0 22px}
  .dt-conv .dt-arrow{margin:28px 0 0}
  .dt-conv .dt-arrow svg{transform:rotate(90deg)}
  .dt-conv .dt-res{margin-top:28px;min-height:132px;display:flex;flex-direction:column;justify-content:center}
  .dt-conv .dt-acts{grid-column:1 / -1}
  .dt-span{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
  .dt-span .dt-hint{grid-column:1;grid-row:2;margin-bottom:0}
  .dt-span #dtToPick{grid-column:2;grid-row:1}
  .dt-span .dt-span-res,.dt-span .dt-acts{grid-column:1 / -1}
  .dt-dl{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:600px){
  .dt{padding:10px 16px 48px}
  .dt-title h1{font-size:23px}
  /* the date gets the whole width; the drawing sits beside the copy chip */
  .dt-today{position:relative;display:block;padding:18px 18px 16px}
  .dt-today-h{font-size:clamp(24px,7vw,30px)}
  .dt-today-art{position:absolute;left:16px;bottom:14px;width:min(104px,30vw)}
  .dt-card{padding:18px 16px}
  .dt-tabs button{flex-direction:column;gap:2px;min-height:56px;font-size:14px}
  .dt-tabs button svg{width:18px;height:18px}
  .dt-acts .g-btn{flex:1 1 auto}
  .dt-sels{grid-template-columns:minmax(0,.95fr) minmax(0,1.6fr) minmax(0,1.15fr);gap:6px}
  .dt-sel select{padding:0 8px 0 26px;background-position:left 7px center;background-size:14px}
  .dt-dl{grid-template-columns:1fr;gap:0}
  .dt-dl div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--dt-acc) 18%,transparent)}
  .dt-dl dd{margin:0;text-align:end}
  .dt-acts .dt-copy{flex-basis:100%}
  .dt-ev{padding:14px 14px;gap:10px}
  .dt-ev-num{min-width:72px}
  .dt-ev-num b{font-size:32px}
  .dt-toast{bottom:max(14px,env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .dt-seg{min-width:150px}
  .dt-seg button{padding:0 8px}
  .dt-sel select{padding:0 6px 0 22px;background-position:left 5px center;background-size:13px;font-size:15px}
}
/* phones on their side: the today card stays one short band */
@media (max-height:500px) and (orientation:landscape){
  .dt-today{padding:14px 20px}
  .dt-today-art{width:110px}
  .dt-tabs{margin:14px 0 12px}
}
@media (prefers-reduced-motion:reduce){
  .dt *,.dt *::before,.dt *::after{animation:none!important;transition:none!important}
}
@media print{
  .dt-tabs,.dt-acts,.dt-chip,.dt-head .dt-headacts,.dt-ev-x,.dt-toast{display:none!important}
}

/* 15ao (Aziz): «أضفه لتقويمك» — a gentle chip on each countdown, a button under convert and span, one small sheet */
.dt-ev-cal{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin:6px 0 0;padding:0 12px 0 14px;border:1px solid var(--line);border-radius:999px!important;background:var(--paper);color:var(--ink-2);font:500 12.5px/1 var(--font);cursor:pointer;transition:background-color var(--d1),color var(--d1),border-color var(--d1)}
.dt-ev-cal svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dt-ev-cal:hover{color:var(--ink);border-color:var(--ink-3)}
.dt-ev-cal:focus-visible{outline:2px solid var(--dt-acc);outline-offset:2px}
.dt-dlg{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:var(--r-card,18px);background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -30px rgba(0,0,0,.55);overflow:auto}
.dt-dlg::backdrop{background:rgba(10,12,14,.45)}
.dt-dlg[open]{animation:dtPop .22s ease-out}
@keyframes dtPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dt-dlg[open]{animation:none}}
.dt-dlg-in{padding:14px 18px 16px}
.dt-dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.dt-dlg-head h2{margin:0;font:700 20px/1.3 var(--font)}
.dt-cal-when{margin:8px 0 12px;font:500 13.5px/1.6 var(--font);color:var(--ink-2)}
.dt-cal-opts{display:grid;gap:8px}
.dt-cal-o{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 14px;border:1px solid var(--line);border-radius:14px!important;background:var(--paper);color:var(--ink);text-align:start;cursor:pointer;transition:background-color var(--d1),border-color var(--d1)}
.dt-cal-o:hover{background:var(--tile);border-color:var(--ink-3)}
.dt-cal-o:focus-visible{outline:2px solid var(--dt-acc);outline-offset:2px}
.dt-cal-o svg{flex:none;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dt-cal-o span{display:flex;flex-direction:column;gap:2px}
.dt-cal-o b{font:700 15px/1.3 var(--font)}
.dt-cal-o small{font:400 12.5px/1.3 var(--font);color:var(--ink-3)}