/* Tarikhi Naam: a calm almanac. Form column beside a results ledger; Nastaliq names are the hero, gold numerals carry the Abjad sums. */

@font-face{font-family:"Figtree"; src:url(fonts/figtree.woff2) format("woff2"); font-weight:300 900; font-display:swap}
@font-face{font-family:"Gloock"; src:url(fonts/gloock.woff2) format("woff2"); font-display:swap}
@font-face{font-family:"Plex Mono"; src:url(fonts/ibm-plex-mono.woff2) format("woff2"); font-display:swap}
@font-face{font-family:"Nastaliq"; src:url(fonts/noto-nastaliq-urdu.woff2) format("woff2"); font-display:block;
  unicode-range:U+0020, U+00A0, U+0600-06FF, U+200C-200F, U+25CC, U+FDF2, U+FDFA-FDFB}
@font-face{font-family:"Naskh"; src:url(fonts/noto-naskh-arabic.woff2) format("woff2"); font-display:block;
  unicode-range:U+0020, U+00A0, U+0600-06FF, U+200C-200F, U+25CC, U+FDF2, U+FDFA-FDFB}

:root{
  --paper:#F6F2E9; --surface:#FFFDF8; --raise:#FFFFFF; --ink:#1B2A26; --muted:#5F6964; --line:#E5DDCC; --line-2:#D6CCB6;
  --accent:#0F6B5A; --accent-ink:#0B5547; --accent-soft:#E3EEE8; --on-accent:#FFFFFF;
  --gold:#94650F; --gold-soft:#F5EAD0; --warn:#A23B1C;
  --f-display:"Gloock", Georgia, serif;
  --f-body:"Figtree", "Naskh", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --f-urdu:"Nastaliq", "Jameel Noori Nastaleeq", "Noto Nastaliq Urdu", "Naskh", serif;
  --f-naskh:"Naskh", "Noto Naskh Arabic", "Geeza Pro", serif;
  --r:14px; --shadow:0 1px 2px rgba(60,45,10,.05), 0 2px 8px rgba(60,45,10,.04);
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%; text-size-adjust:100%; -webkit-tap-highlight-color:transparent}
body{margin:0; background:var(--paper); color:var(--ink); font:400 15px/1.55 var(--f-body); -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--f-display); font-weight:400; text-wrap:balance; margin:0; letter-spacing:.005em}
p{margin:0}
button,input,select{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
svg{flex:none}

.wrap{max-width:1200px; margin:0 auto; padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:calc(88px + env(safe-area-inset-bottom));
  padding-left:max(16px, env(safe-area-inset-left)); padding-right:max(16px, env(safe-area-inset-right))}
.ur{font-family:var(--f-urdu); direction:rtl; unicode-bidi:isolate; line-height:2.1; font-weight:400}
.num{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.label{font-size:12px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.label .opt{text-transform:none; letter-spacing:0; font-weight:500}
.hint{font-size:13px; color:var(--muted)}

/* Header */
.mast{display:grid; grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"logo text ur" "logo install ur"; gap:4px 18px; align-items:center;
  padding-bottom:22px; margin-bottom:24px; border-bottom:1px solid var(--line)}
.logo{grid-area:logo; width:56px; height:56px; border-radius:14px; box-shadow:0 2px 10px rgba(11,74,62,.18); align-self:start; margin-top:4px}
.mast-text{grid-area:text}
.mast h1{font-size:clamp(28px, 4.6vw, 42px); line-height:1.08}
.mast p{margin-top:6px; color:var(--muted); max-width:60ch}
.mast-ur{grid-area:ur; font-size:clamp(30px, 4.6vw, 48px); color:var(--gold); line-height:1.7; justify-self:end}
.install{grid-area:install; justify-self:start; margin-top:10px}
@media (max-width:640px){
  .mast{grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"logo title ur" "desc desc desc" "install install install"; gap:4px 10px; padding-bottom:16px; margin-bottom:18px}
  .mast-text{display:contents}
  .mast h1{grid-area:title; font-size:clamp(22px, 7vw, 28px)}
  .mast p{grid-area:desc; font-size:14px; margin-top:8px}
  .logo{width:40px; height:40px; border-radius:10px; margin-top:0; align-self:center}
  .mast-ur{font-size:clamp(22px, 7vw, 30px); line-height:1.6}
  .install{justify-self:start; margin-top:8px}
}

/* Layout */
.grid{display:grid; grid-template-columns:minmax(300px, 360px) minmax(0, 1fr); gap:24px; align-items:start}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr); gap:20px}}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px; box-shadow:var(--shadow)}
.form{display:flex; flex-direction:column; gap:18px}
@media (min-width:901px) and (min-height:780px){.form{position:sticky; top:16px}}
.results{min-width:0}

/* Controls */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.label-row{display:flex; justify-content:space-between; align-items:baseline}
.link{border:0; background:none; padding:2px 0; color:var(--accent); font-size:13px; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.dgrid{display:grid; grid-template-columns:64px minmax(0,1fr) 84px; gap:8px}
input[type=text],input[type=search],input[type=date],select{width:100%; min-width:0; background:var(--raise); border:1px solid var(--line-2); border-radius:10px;
  padding:9px 11px; min-height:46px; font-size:16px; font-family:"Figtree", var(--f-urdu); line-height:1.4; appearance:none; -webkit-appearance:none}
input[type=date]{display:block}
select{padding-right:32px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%235F6964' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; background-size:12px 8px; text-overflow:ellipsis}
input:focus,select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:#9AA19C}
.seg{display:flex; background:var(--paper); border:1px solid var(--line); border-radius:11px; padding:3px; gap:3px}
.seg button{flex:1; white-space:nowrap; border:0; background:transparent; border-radius:8px; padding:8px 10px; min-height:40px; font-weight:600; color:var(--muted); transition:background .15s, color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"]{background:var(--raise); color:var(--ink); box-shadow:0 1px 3px rgba(40,30,0,.12)}
.conv{font-size:13.5px; background:var(--accent-soft); color:var(--accent-ink); border-radius:10px; padding:9px 12px; line-height:1.6}
.conv:empty{display:none}
.conv b{font-weight:650}
.conv .ur{font-size:16px; line-height:1; margin-inline-start:4px}
.conv .warn{display:block; color:var(--warn); margin-top:2px}
.check{display:flex; gap:10px; align-items:flex-start; font-size:14px; cursor:pointer; line-height:1.45}
.check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--accent); flex:none}
.fixedbox{display:flex; gap:8px; align-items:stretch}
.clearable{position:relative; flex:1; min-width:0}
/* Physical right, not inline-end: the input is dir=auto, so Urdu text would flip a logical padding to the left */
.clearable input{padding-right:40px}
.clear{position:absolute; right:4px; top:50%; transform:translateY(-50%); width:34px; height:34px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:22px; line-height:1}
.clear:hover{background:var(--accent-soft); color:var(--ink)}
.fixedval{min-width:64px; display:grid; place-items:center; padding:0 8px; border-radius:10px; background:var(--gold-soft); color:var(--gold); font-size:16px}
.sugg{display:flex; flex-wrap:wrap; gap:6px}
.sugg:empty{display:none}
.chip{border:1px solid var(--line-2); background:var(--raise); border-radius:999px; padding:2px 12px; font-size:13.5px; display:inline-flex; gap:8px; align-items:center; min-height:36px}
.chip .ur{font-size:16px; line-height:1.8}
.chip:hover{border-color:var(--accent)}
.err{color:var(--warn); font-size:13px}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; border:1px solid var(--line-2); background:var(--raise); border-radius:10px; padding:8px 14px; min-height:42px; font-weight:600; white-space:nowrap}
.btn:hover{border-color:var(--accent)}
.btn svg{width:18px; height:18px}
.btn.primary{background:var(--accent); color:var(--on-accent); border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-ink)}
.icon{display:inline-flex; align-items:center; gap:5px; border:0; background:transparent; color:var(--muted); padding:6px 9px; border-radius:8px; font-size:13px; font-weight:600; min-height:34px}
.icon:hover{background:var(--accent-soft); color:var(--ink)}
.icon svg{width:15px; height:15px}
.icon.save[aria-pressed="true"]{color:var(--gold)}

/* Totals */
.totals{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-bottom:20px}
.tot{border:1px solid var(--line); background:var(--surface); border-radius:var(--r); padding:12px 14px; text-align:left; display:flex; flex-direction:column; gap:1px; box-shadow:var(--shadow); transition:border-color .15s, background .15s}
.tot:hover{border-color:var(--line-2)}
.tot .f{font-size:12.5px; color:var(--muted)}
.tot .n{font-family:var(--f-mono); font-size:28px; color:var(--gold); line-height:1.2}
.tot .c{font-size:12.5px; font-weight:650; color:var(--accent)}
.tot[aria-pressed="true"]{border-color:var(--accent); background:var(--raise); box-shadow:inset 0 0 0 1px var(--accent), var(--shadow)}
.tot.isvi .n{color:var(--accent)}
.tot .sm{display:none}
@media (max-width:520px){.totals{gap:6px}.tot{padding:10px 9px}.tot .n{font-size:21px}.tot .f,.tot .c{font-size:11.5px}
  .tot .lg{display:none}.tot .sm{display:inline}.tot .f.num{font-size:10.5px; letter-spacing:-.04em; white-space:nowrap}}

.head{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; justify-content:space-between; margin-bottom:6px}
.head h2{font-size:26px}
.filters{display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center}
.filters .seg{min-width:230px}
.search{position:relative; width:190px}
.search svg{position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--muted); pointer-events:none}
.search input{padding-left:34px; min-height:42px}
.filters .check{align-items:center}
@media (max-width:640px){
  .head{margin-bottom:2px}
  .filters{width:100%}
  .filters .seg{flex:1 1 100%; min-width:0}
  .search{flex:1 1 100%; width:auto}
  .filters .btn{margin-left:auto}
}

/* Result sections and cards */
.sec{margin-top:22px}
.sec > h3{font-family:var(--f-body); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); display:flex; gap:10px; align-items:baseline; margin-bottom:10px}
.sec > h3 span{font-weight:500; letter-spacing:0; text-transform:none}
.sec > p{margin:-4px 0 12px; font-size:13.5px; color:var(--muted); max-width:70ch}
.list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px 8px; display:flex; flex-direction:column; min-width:0; box-shadow:var(--shadow)}
.card .ur{font-size:25px; line-height:2; text-align:right; overflow-wrap:anywhere}
.card .tr{font-weight:650; font-size:15.5px; line-height:1.35}
.card .mn{font-size:13px; color:var(--muted); margin-top:3px; line-height:1.45}
.card .mn b{font-weight:600; color:var(--ink)}
.card .sum{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:auto; padding-top:8px; border-top:1px dashed var(--line-2); font-size:13px}
.card .meta{margin-bottom:8px}
.card .sum .num{color:var(--gold); overflow-wrap:anywhere}
.card .acts{display:flex; gap:0; flex:none; margin-right:-6px}
.sumbtn{display:inline-flex; align-items:center; gap:6px; border:0; background:none; padding:6px 8px; margin-left:-8px; border-radius:8px; color:var(--gold); font-size:13px; text-align:left; min-height:34px}
.sumbtn:hover{background:var(--gold-soft)}
.sumbtn svg{width:10px; height:7px; color:var(--muted); transition:transform .15s}
.sumbtn[aria-expanded="true"] svg{transform:rotate(180deg)}
.jump{display:none}
@media (max-width:900px){.jump:not([hidden]){display:inline-flex; width:100%}}
.letters{display:flex; flex-wrap:wrap; gap:4px; direction:rtl; margin-top:8px}
.lt{display:flex; flex-direction:column; align-items:center; min-width:34px; padding:2px 4px 3px; border-radius:8px; background:var(--paper)}
.lt b{font-family:var(--f-naskh); font-size:19px; font-weight:400; line-height:1.55}
.lt i{font-style:normal; font-family:var(--f-mono); font-size:11px; color:var(--gold)}
.lt.sp{min-width:10px; background:transparent}
.fx{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border-radius:5px; padding:1px 5px; margin-left:6px; vertical-align:2px}
.more{margin-top:12px}
.empty{padding:28px 22px; text-align:center; color:var(--muted); background:var(--surface); border:1px dashed var(--line-2); border-radius:var(--r); margin-top:20px}

/* Lower reference */
.lower{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; margin-top:48px}
@media (max-width:900px){.lower{grid-template-columns:minmax(0,1fr); gap:16px; margin-top:36px}}
.lower h2{font-size:24px; margin-bottom:4px}
.calc-field{margin-top:12px}
#calcIn{font-family:var(--f-urdu); font-size:20px; line-height:2; min-height:60px; padding-block:4px}
.calc-out{display:flex; gap:16px; align-items:center; margin-top:12px; flex-wrap:wrap}
.calc .big{font-size:40px; color:var(--gold); line-height:1.1}
.calc .letters{flex:1; margin:0}
.abjad{display:flex; flex-wrap:wrap; gap:12px 14px; direction:rtl; margin-top:12px}
.word{display:flex; flex-direction:column; gap:2px}
.word .w{font-family:var(--f-urdu); font-size:21px; color:var(--accent); text-align:center; line-height:1.9}
.word .ls{display:flex; gap:3px}
.rules{margin:14px 0 0; padding-left:18px; font-size:14px}
.rules li{margin:5px 0}
.rules .ar{font-family:var(--f-naskh); font-size:17px; line-height:1.3}
.foot{margin-top:36px; padding-top:16px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); display:grid; gap:6px}

/* Shortlist */
.fab{position:fixed; z-index:15; right:max(16px, env(safe-area-inset-right)); bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:8px; border:0; border-radius:999px; padding:12px 18px 12px 15px; background:var(--ink); color:#FFF8E8; font-weight:650;
  box-shadow:0 6px 22px rgba(27,42,38,.28); animation:pop .25s ease-out}
.fab svg{width:18px; height:18px; color:#E2BC6A}
.fab .count{background:#E2BC6A; color:var(--ink); border-radius:999px; min-width:22px; padding:0 6px; font-size:13px; line-height:22px; text-align:center}
@keyframes pop{from{transform:translateY(12px); opacity:0}}
.sheet{border:0; padding:0; border-radius:18px; width:min(560px, calc(100vw - 32px)); max-height:min(80vh, 760px); background:var(--surface); color:var(--ink);
  box-shadow:0 20px 60px rgba(27,42,38,.3); display:none; flex-direction:column}
.sheet[open]{display:flex}
.sheet::backdrop{background:rgba(27,42,38,.4)}
.sheet-head{display:flex; align-items:center; justify-content:space-between; padding:16px 16px 10px 20px; border-bottom:1px solid var(--line)}
.sheet-head h2{font-size:24px}
.close{font-size:24px; width:40px; height:40px; justify-content:center}
.sheet-body{overflow:auto; padding:6px 20px; overscroll-behavior:contain}
.sheet-foot{display:flex; justify-content:space-between; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line)}
/* Shortlist groups: one per date, with an editable name ("Son", "Me") */
.sl-group{padding:14px 0 6px; border-bottom:2px solid var(--line)}
.sl-group:last-child{border-bottom:0}
.sl-ghead{display:flex; align-items:center; justify-content:space-between; gap:12px}
.sl-name{flex:1; min-width:0; display:flex; align-items:center; gap:7px; color:var(--muted); cursor:text}
.sl-name svg{width:15px; height:15px}
input.sl-label{flex:1; min-width:0; min-height:0; border:0; border-bottom:1px dashed var(--line-2); border-radius:0; background:transparent; padding:3px 0;
  font:650 17px/1.35 var(--f-body); color:var(--ink)}
input.sl-label:focus{border-bottom:1px solid var(--accent); box-shadow:none}
input.sl-label::placeholder{color:var(--muted); font-weight:500}
.sl-date{margin:3px 0 2px 22px; font-size:12.5px}
.who{display:inline-block; vertical-align:middle; margin-left:6px; padding:2px 10px; border-radius:999px; background:var(--gold-soft); color:var(--gold);
  font:650 14px/1.5 var(--f-body)}
.sl-item{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line)}
.sl-item:last-child{border-bottom:0}
.sl-item > *{grid-column:1}
.sl-item .ur{font-size:22px; line-height:2; text-align:right}
.sl-item .tr{font-weight:650}
.sl-item .num{font-size:12.5px; color:var(--gold)}
.sl-item .icon{grid-column:2; grid-row:1 / 4; font-size:22px; width:40px; height:40px; justify-content:center}
@media (max-width:640px){
  .sheet{width:100%; max-width:none; margin:auto 0 0; border-radius:20px 20px 0 0; max-height:85vh}
}

.toast{position:fixed; left:50%; transform:translate(-50%, 8px); bottom:calc(80px + env(safe-area-inset-bottom)); background:var(--ink); color:#FFF8E8; padding:10px 18px; border-radius:999px;
  font-weight:600; font-size:14px; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:30; max-width:calc(100vw - 32px); text-align:center}
.toast.on{opacity:1; transform:translate(-50%, 0)}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}