/* ══════════════════════════════════════════════════
   TIME IN NEPAL — widget designs
   Every rule is scoped under .tm and sets its own font, size, colour and spacing,
   so the widget looks the same on any page. Options arrive as CSS variables:
   --tm-size, --tm-color, --tm-accent, --tm-bg, --tm-align
══════════════════════════════════════════════════ */
.tm{
  --tm-size:16px;--tm-color:#1b2f50;--tm-accent:#f47a20;--tm-bg:transparent;--tm-face:#fff;--tm-align:left;
  box-sizing:border-box;margin:0;padding:.3em .5em;
  font-family:"Mukta","Plus Jakarta Sans",system-ui,sans-serif;font-size:var(--tm-size);font-weight:500;
  line-height:1.5;color:var(--tm-color);background:var(--tm-bg);text-align:var(--tm-align);
  letter-spacing:0;text-transform:none;font-style:normal;word-spacing:normal;
}
.tm *,.tm *::before,.tm *::after{box-sizing:border-box;margin:0;padding:0;border:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none}
.tm-t{font-variant-numeric:tabular-nums}
.tm-row{white-space:nowrap}
.tm [data-f]:empty{display:none}                 /* parts switched off in "What to show" */
.tm-lbl{font-weight:700}
.tm-gap{display:inline-block;width:1em}

/* Text designs may wrap on very narrow screens */
.tm--line .tm-row{white-space:normal}

/* ── Cards: the chosen background colours the card itself; the area around it stays clear ── */
.tm--clock,.tm--patro,.tm--pill{background:transparent}

/* ── Clock card ── */
.tm--clock .tm-card{
  display:inline-block;text-align:center;padding:.7em 1.1em .75em;border-radius:.9em;
  background:var(--tm-face);border:1px solid rgba(27,47,80,.12);border-top:.3em solid var(--tm-accent);
  box-shadow:0 .3em 1.2em rgba(27,47,80,.08);color:var(--tm-color);min-width:12em;
}
.tm--clock .tm-cap{font-size:.72em;font-weight:700;color:var(--tm-accent)}
.tm--clock .tm-big{font-size:2.1em;font-weight:700;line-height:1.15;white-space:nowrap;color:var(--tm-color)}
.tm--clock .tm-per{font-size:.42em;font-weight:600;vertical-align:.35em;color:var(--tm-accent)}
.tm--clock .tm-sub{font-size:.95em;font-weight:600;margin-top:.2em;white-space:nowrap;color:var(--tm-color)}
.tm--clock .tm-sub2{font-size:.75em;opacity:.65;white-space:nowrap;color:var(--tm-color)}

/* ── Patro card ── */
.tm--patro .tm-patro{
  display:inline-block;width:13em;text-align:center;border-radius:.9em;overflow:hidden;
  background:var(--tm-face);border:1px solid rgba(27,47,80,.12);box-shadow:0 .3em 1.2em rgba(27,47,80,.08);color:var(--tm-color);
}
.tm--patro .tm-head{background:var(--tm-accent);color:#fff;font-size:1.25em;font-weight:700;line-height:1.2;padding:.35em .5em .3em}
.tm--patro .tm-my{font-size:1em;font-weight:600;margin-top:.45em;color:var(--tm-color)}
.tm--patro .tm-day{font-size:3.6em;font-weight:700;line-height:1;margin:.05em 0 .02em;color:var(--tm-accent)}
.tm--patro .tm-wd{font-size:1.05em;font-weight:700;color:var(--tm-color)}
.tm--patro .tm-foot{display:flex;justify-content:space-between;gap:.5em;margin-top:.5em;padding:.35em .7em;font-size:.72em;background:rgba(127,127,127,.1);white-space:nowrap;color:var(--tm-color)}

/* ── Compact pill ── */
.tm--pill .tm-pill{
  display:inline-flex;align-items:center;gap:.35em;padding:.2em .8em;border-radius:100em;white-space:nowrap;
  background:var(--tm-face);border:1px solid rgba(127,127,127,.25);color:var(--tm-color);font-weight:600;
}
.tm--pill .tm-dot{width:.5em;height:.5em;border-radius:50%;background:var(--tm-accent);flex-shrink:0}
.tm--pill .tm-sep{width:1px;height:1em;background:currentColor;opacity:.25;margin:0 .2em}

.tm-credit{display:block;margin-top:.3em;font-size:.62em;font-weight:600;opacity:.55;text-decoration:none;color:inherit}
a.tm-credit:hover{opacity:1;color:var(--tm-accent)}

/* Inside the iframe the widget fills the frame */
.tm--embed{min-height:100%}

/* ══════════════════════════════════════════════════
   TOOL PAGE
══════════════════════════════════════════════════ */
.nt-tool .tm--page{padding:1.2em .5em}
.nt-tool .tm--page .tm-card{min-width:16em}

/* Gallery */
.tm-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin:2rem 0 2.5rem}
.tm-g{
  display:flex;flex-direction:column;gap:10px;cursor:pointer;text-align:left;
  background:var(--bg,#f5f6fa);border:1.5px solid var(--border,#dde3ef);border-radius:16px;padding:12px 14px 14px;
  transition:border-color .2s,box-shadow .2s;
}
.tm-g:hover{border-color:var(--blue,#1e7fd4)}
.tm-g[aria-checked="true"]{border-color:var(--orange,#f47a20);box-shadow:0 0 0 3px rgba(244,122,32,.18);background:#fff}
.tm-g:focus-visible{outline:2px solid var(--blue,#1e7fd4);outline-offset:2px}
.tm-g-name{font-size:.78rem;font-weight:700;color:var(--ink2,#4a5568)}
.tm-g[aria-checked="true"] .tm-g-name{color:var(--orange,#f47a20)}
.tm-g-view{display:flex;align-items:center;min-height:86px;overflow:hidden;pointer-events:none}
.tm-g-view .tm{max-width:100%}

/* Controls */
.tm-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin:0 0 1.2rem}
.tm-controls label{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--ink2,#4a5568)}
.tm-controls label[hidden]{display:none}
.tm-controls select{font-family:inherit;font-size:.88rem;padding:.55rem .7rem;border:1.5px solid var(--border,#dde3ef);border-radius:10px;background:#fff;color:var(--ink,#1a2233)}
.tm-controls input[type="color"]{width:100%;height:40px;padding:3px;border:1.5px solid var(--border,#dde3ef);border-radius:10px;background:#fff;cursor:pointer}
.tm-controls input[type="range"]{width:100%;accent-color:var(--orange,#f47a20)}
.tm-controls .tm-check{flex-direction:row;align-items:center;gap:.5rem;align-self:end;padding-bottom:.6rem}
.tm-controls .tm-check input{width:18px;height:18px;accent-color:var(--orange,#f47a20)}
.tm-size-val{font-weight:600;color:var(--orange,#f47a20)}
.tm-dims{font-weight:600;color:var(--ink3,#8896a8)}

/* "What to show" */
.tm-show{margin:0 0 1.2rem;padding:12px 14px 14px;border:1.5px solid var(--border,#dde3ef);border-radius:14px;background:#fff}
.tm-show legend{padding:0 .4rem;font-size:.82rem;font-weight:800;color:var(--slate-dk,#1b2f50)}
.tm-show-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px 20px}
.tm-show-col{display:flex;flex-direction:column;gap:10px}
.tm-show-h{font-size:.72rem;font-weight:800;color:var(--orange,#f47a20)}
.tm-show label{display:flex;flex-direction:column;gap:.35rem;font-size:.78rem;font-weight:700;color:var(--ink2,#4a5568)}
.tm-show select{font-family:inherit;font-size:.86rem;padding:.5rem .65rem;border:1.5px solid var(--border,#dde3ef);border-radius:10px;background:#fff;color:var(--ink,#1a2233)}
.tm-show .tm-check{flex-direction:row;align-items:center;gap:.5rem}
.tm-show .tm-check input{width:17px;height:17px;accent-color:var(--orange,#f47a20)}
.tm-show .is-off,.tm-controls .is-off{opacity:.45}
.tm-show-note{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:#fff7ed;border:1.5px solid #fed7aa;font-size:.8rem;line-height:1.5;color:#9a3412}
.tm-parts{display:flex;flex-wrap:wrap;gap:8px 16px}
@media(max-width:600px){.tm-show-grid{grid-template-columns:1fr}}

/* Preview stage: checks show where a transparent widget lets the page through */
.tm-stage{
  border:1.5px dashed var(--border,#dde3ef);border-radius:18px;padding:18px;overflow:auto;
  background-color:#fff;
  background-image:linear-gradient(45deg,#f0f2f7 25%,transparent 25%),linear-gradient(-45deg,#f0f2f7 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#f0f2f7 75%),linear-gradient(-45deg,transparent 75%,#f0f2f7 75%);
  background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;
}
.tm-stage-inner{min-height:60px}

@media(max-width:600px){
  .tm-controls{grid-template-columns:1fr}
  .tm-gallery{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.tm-g{transition:none}}