/* Structural styling for the .now time-site widget pack (.tw-*).
   Deliberately skin-neutral: layout, spacing and rhythm live here, while colour
   comes from each skin's --c (accent) and the surrounding text colour. Skins
   override individual tw-* rules where their design calls for it. */

/* ---- shared primitives ---- */
.tw-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;width:100%}
.tw-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tw-rule{width:100%;height:1px;background:rgba(128,128,128,.25);margin:18px 0}
.tw-note{font-size:13.5px;opacity:.72;text-align:center;line-height:1.55;max-width:52ch;margin:6px auto 0}
.tw-out{font-size:clamp(22px,9cqw,44px);text-align:center}
.tw-colon{font-weight:800;opacity:.5}
.tw-n{width:74px}
.tw-ghost{background:transparent;border:1px dashed rgba(128,128,128,.5);color:inherit;
  border-radius:999px;padding:9px 16px;font-weight:600;cursor:pointer;font-size:13px}
.tw-select,.wc-select{font-size:15px;padding:9px 11px;border-radius:9px;
  border:1px solid rgba(128,128,128,.4);background:rgba(127,127,127,.05);color:inherit}
.tw-range{accent-color:var(--c,#333)}
.tw-ctrl{display:flex;flex-direction:column;gap:4px;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.6px;opacity:.75}
.tw-ref{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.tw-ref-item{font-size:12.5px;font-variant-numeric:tabular-nums;padding:5px 10px;border-radius:999px;
  background:rgba(127,127,127,.1);border:1px solid rgba(128,128,128,.18)}
.tw-bar{width:100%;max-width:520px;height:12px;border-radius:999px;background:rgba(128,128,128,.2);
  overflow:hidden;margin:4px auto}
.tw-bar-fill{height:100%;width:0;background:var(--c,#4a7);transition:width .4s}

/* copyable key/value rows (localdatetime.now, atomicclock.now) */
.tw-kv{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,2.2fr) auto;gap:10px;
  align-items:center;width:100%;padding:8px 10px;border-radius:9px}
.tw-kv:nth-child(odd){background:rgba(127,127,127,.06)}
.tw-k{font-size:12px;text-transform:uppercase;letter-spacing:.7px;opacity:.65}
.tw-v{font-variant-numeric:tabular-nums;font-weight:600;overflow-wrap:anywhere;font-size:14.5px}
.tw-copy{background:transparent;border:1px solid rgba(128,128,128,.4);color:inherit;border-radius:7px;
  padding:5px 10px;font-size:11.5px;font-weight:700;cursor:pointer;letter-spacing:.4px}
.tw-copy:hover{border-color:var(--c,#888);color:var(--c,#333)}

/* ---- militarytime.now ---- */
.tw-mil{text-align:center;width:100%}
.tw-mil-time{letter-spacing:.06em}
.tw-mil-say{font-size:15px;font-style:italic;opacity:.75;margin-top:6px}
.tw-mil-civ{font-size:13px;opacity:.6;margin-top:2px}
.tw-mil-in{width:110px;font-variant-numeric:tabular-nums;letter-spacing:.14em;text-align:center}
.tw-chart{width:100%;display:flex;flex-direction:column;gap:1px;max-height:520px;overflow:auto}
.tw-chart-row{display:grid;grid-template-columns:78px 110px 1fr;gap:10px;align-items:center;
  padding:8px 12px;border-radius:6px;font-size:14px}
.tw-chart-row:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-chart-row.is-now{background:var(--c,#333);color:#fff}
.tw-chart-mil{font-variant-numeric:tabular-nums;font-weight:800;letter-spacing:.05em}
.tw-chart-civ{font-variant-numeric:tabular-nums;opacity:.85}
.tw-chart-say{font-style:italic;opacity:.65;font-size:13px}
.tw-chart-row.is-now .tw-chart-civ,.tw-chart-row.is-now .tw-chart-say{opacity:.95}
.tw-zulu{text-align:center;width:100%}

/* ---- timezones.now ---- */
.tw-search{width:min(100%,460px)}
.tw-zlist{width:100%;display:flex;flex-direction:column;gap:1px;max-height:460px;overflow:auto}
.tw-zrow{display:grid;grid-template-columns:1fr 96px 90px;gap:10px;align-items:center;
  padding:9px 12px;border-radius:6px;font-size:14px}
.tw-zrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-zname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-ztime{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c,#222);text-align:right}
.tw-zoff{font-variant-numeric:tabular-nums;opacity:.6;font-size:12.5px;text-align:right}
.tw-offsets{width:100%;display:flex;flex-direction:column;gap:1px;max-height:520px;overflow:auto}
.tw-orow{display:grid;grid-template-columns:96px 74px 1fr;gap:10px;align-items:center;
  padding:8px 12px;border-radius:6px;font-size:13.5px}
.tw-orow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-orow.is-now{outline:2px solid var(--c,#333);outline-offset:-2px}
.tw-ooff{font-variant-numeric:tabular-nums;font-weight:700}
.tw-otime{font-variant-numeric:tabular-nums;color:var(--c,#222)}
.tw-oplaces{opacity:.72}
.tw-abbr{width:100%;display:flex;flex-direction:column;gap:1px;overflow:auto}
.tw-abbr-row{display:grid;grid-template-columns:118px 1.2fr 118px 1.6fr;gap:10px;padding:9px 12px;
  border-radius:6px;font-size:13.5px;align-items:start}
.tw-abbr-row:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-abbr-row.is-head{font-weight:800;font-size:11.5px;text-transform:uppercase;letter-spacing:.7px;opacity:.7;background:none}
.tw-abbr-row span:first-child{font-weight:700;font-variant-numeric:tabular-nums}

/* ---- timeclock.now ---- */
.tw-punch-status{font-size:14px;opacity:.75;text-align:center}
.tw-punch-log{width:100%;max-width:460px;display:flex;flex-direction:column;gap:1px;margin-top:8px}
.tw-punch-entry{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;border-radius:6px;font-size:14px}
.tw-punch-entry:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-punch-dur{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c,#222)}
.tw-punch-total{margin-top:12px;font-weight:800;font-size:16px;text-align:center}
.tw-card{width:100%;display:flex;flex-direction:column;gap:2px;overflow-x:auto}
.tw-card-row{display:grid;grid-template-columns:104px 1fr 1fr 92px 132px;gap:8px;align-items:center;
  padding:6px 8px;border-radius:6px;min-width:600px}
.tw-card-row:nth-child(even){background:rgba(127,127,127,.06)}
.tw-card-row.is-head{font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;opacity:.7;
  font-weight:800;background:none;min-width:600px}
.tw-card-day{font-weight:700;font-size:14px}
.tw-card-h{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c,#222);font-size:14px;text-align:right}
.tw-card-row .wc-input{padding:7px 9px;font-size:14px;width:100%}
.tw-card-totals{margin-top:14px;text-align:center}
.tw-total-line{font-weight:800;font-size:17px}
.tw-total-sub{font-size:13.5px;opacity:.7;margin-top:3px}

/* ---- ustime.now ---- */
.tw-usboard{width:100%;display:flex;flex-direction:column;gap:2px}
.tw-usrow{display:grid;grid-template-columns:1fr 150px 118px 92px;gap:10px;align-items:center;
  padding:11px 14px;border-radius:8px;font-size:14.5px}
.tw-usrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-usname{font-weight:700}
.tw-ustime{font-variant-numeric:tabular-nums;font-weight:800;color:var(--c,#222);text-align:right;font-size:17px}
.tw-usdate{opacity:.65;font-size:13px;text-align:right}
.tw-usoff{font-variant-numeric:tabular-nums;opacity:.55;font-size:12.5px;text-align:right}
.tw-dst{width:100%;display:flex;flex-direction:column;gap:2px}
.tw-dstrow{display:grid;grid-template-columns:230px 1fr;gap:12px;padding:10px 14px;border-radius:8px;font-size:14px}
.tw-dstrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-dstrow.is-next{outline:2px solid var(--c,#333);outline-offset:-2px}
.tw-dstdate{font-weight:800;font-variant-numeric:tabular-nums}
.tw-dstwhat{opacity:.78}

/* ---- localdatetime.now ---- */
.tw-dt,.tw-offset{width:100%;display:flex;flex-direction:column;gap:2px;align-items:stretch}
.tw-dt .wc-time,.tw-offset .wc-time{text-align:center}
.tw-dt .wc-date{text-align:center;margin-bottom:12px}

/* ---- livetime.now / digitalclock.now ---- */
.tw-live{text-align:center;position:relative}
.tw-live-time{letter-spacing:.02em}
.tw-live-ms{font-variant-numeric:tabular-nums;font-size:clamp(14px,4cqw,22px);opacity:.55;
  margin-top:-4px;font-weight:700}
.tw-big{width:100%;display:flex;align-items:center;justify-content:center;padding:22px 10px;border-radius:14px}
.tw-big.is-fs{background:#000;height:100vh;padding:0}
.tw-big-face{text-align:center;font-variant-numeric:tabular-nums;line-height:1}
.tw-big-time{font-size:clamp(40px,22cqw,120px);font-weight:800;letter-spacing:.02em}
.tw-big.is-fs .tw-big-time{font-size:22vw}
.tw-big-date{font-size:clamp(13px,4cqw,20px);opacity:.6;margin-top:10px;letter-spacing:.08em;text-transform:uppercase}
.tw-big-ctrls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:center;margin-top:16px}
.tw-c-amber .tw-big-time{color:#ffb300}
.tw-c-red .tw-big-time{color:#ff3b30}
.tw-c-green .tw-big-time{color:#28d17c}
.tw-c-blue .tw-big-time{color:#4aa8ff}
.tw-c-white .tw-big-time{color:#f4f6fa}

/* ---- atomicclock.now ---- */
.tw-atomic{text-align:center;width:100%}
.tw-atomic-label{font-size:11.5px;text-transform:uppercase;letter-spacing:1.4px;opacity:.6}
.tw-atomic-time{font-variant-numeric:tabular-nums}
.tw-drift{margin-top:14px;font-size:14.5px;font-variant-numeric:tabular-nums}
.tw-verdict{margin-top:6px;font-weight:800;font-size:14px;letter-spacing:.3px}
.tw-verdict.is-good{color:#1f9d55}
.tw-verdict.is-warn{color:#c47f17}
.tw-verdict.is-bad{color:#d4382f}
.tw-scales{width:100%;display:flex;flex-direction:column;gap:2px}
.tw-scale-row{display:grid;grid-template-columns:64px 118px 1fr;gap:12px;align-items:center;
  padding:11px 14px;border-radius:8px;font-size:14px}
.tw-scale-row:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-scale-name{font-weight:800;letter-spacing:.5px}
.tw-scale-time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--c,#222)}
.tw-scale-desc{opacity:.72;font-size:13px}

/* ---- datetoday.now ---- */
.tw-today{text-align:center;width:100%}
.tw-today-wd{font-size:clamp(15px,5cqw,22px);text-transform:uppercase;letter-spacing:.22em;opacity:.6}
.tw-today-date{font-size:clamp(28px,12cqw,56px);font-weight:800;line-height:1.1;margin-top:6px;color:var(--c,#222)}
.tw-today-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-top:20px}
.tw-stat{display:flex;flex-direction:column;gap:2px;padding:12px 10px;border-radius:10px;
  background:rgba(127,127,127,.08);border:1px solid rgba(128,128,128,.16)}
.tw-stat-v{font-variant-numeric:tabular-nums;font-weight:800;font-size:17px}
.tw-stat-k{font-size:11px;text-transform:uppercase;letter-spacing:.8px;opacity:.6}
.tw-week,.tw-doy,.tw-dow{text-align:center;width:100%}
.tw-week-big{letter-spacing:.02em}

/* ---- months.now ---- */
.tw-month{width:100%;text-align:center}
.tw-month-name{font-size:clamp(26px,11cqw,48px);font-weight:800;color:var(--c,#222);line-height:1.1}
.tw-month-meta{font-size:14px;opacity:.7;margin:6px 0 4px}
.tw-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:16px}
.tw-cal-h{font-size:11px;text-transform:uppercase;letter-spacing:.6px;opacity:.5;padding:4px 0;font-weight:700}
.tw-cal-d{padding:8px 0;border-radius:7px;font-variant-numeric:tabular-nums;font-size:14px;
  background:rgba(127,127,127,.07)}
.tw-cal-d.is-today{background:var(--c,#333);color:#fff;font-weight:800}
.tw-cal-x{padding:8px 0}
.tw-mtable{width:100%;display:flex;flex-direction:column;gap:1px;margin-top:14px}
.tw-mrow{display:grid;grid-template-columns:1fr 48px 92px;gap:10px;padding:8px 12px;border-radius:6px;
  align-items:center;font-size:14px}
.tw-mnum-tool .tw-mrow{grid-template-columns:48px 1fr 58px 1.6fr}
.tw-mrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-mrow.is-now{outline:2px solid var(--c,#333);outline-offset:-2px}
.tw-mname{font-weight:700}
.tw-mnum,.tw-mdays{font-variant-numeric:tabular-nums;opacity:.75}
.tw-mabbr{opacity:.6;font-size:13px}
.tw-morigin{opacity:.68;font-size:13px}
.tw-quarter{width:100%;text-align:center}
.tw-qlist{width:100%;display:flex;flex-direction:column;gap:1px;margin-top:14px}
.tw-qrow{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:9px 12px;border-radius:6px;font-size:14px}
.tw-qrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-qrow.is-now{outline:2px solid var(--c,#333);outline-offset:-2px}
.tw-qname{font-weight:800}
.tw-qmonths{opacity:.72}

/* ---- midweek.now ---- */
.tw-mw,.tw-wp,.tw-weekend{width:100%;text-align:center}
.tw-mw-day{font-size:clamp(28px,12cqw,54px);font-weight:800;color:var(--c,#222);line-height:1.05}
.tw-mw-verdict{font-size:clamp(15px,5cqw,21px);font-weight:700;margin:8px 0 14px}
.tw-mw-verdict.is-yes{color:#1f9d55}
.tw-mw-verdict.is-weekend{color:var(--c,#333)}
.tw-mw-verdict.is-no{opacity:.75}
.tw-mw-pct{font-variant-numeric:tabular-nums;font-size:14px;opacity:.75}
.tw-mw-count{font-variant-numeric:tabular-nums;font-size:13.5px;opacity:.6;margin-top:6px}
.tw-wp-days{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.tw-wp-day{font-size:12px;font-weight:700;padding:6px 11px;border-radius:999px;
  background:rgba(127,127,127,.1);opacity:.55}
.tw-wp-day.is-done{opacity:.85}
.tw-wp-day.is-now{background:var(--c,#333);color:#fff;opacity:1}

/* ---- fortnight.now ---- */
.tw-fn{width:100%;text-align:center}
.tw-fn-dots{display:flex;gap:6px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.tw-fn-dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(128,128,128,.4)}
.tw-fn-dot.is-done{background:rgba(128,128,128,.45);border-color:transparent}
.tw-fn-dot.is-now{background:var(--c,#333);border-color:var(--c,#333);
  box-shadow:0 0 0 4px rgba(128,128,128,.18)}
.tw-paylist{width:100%;display:flex;flex-direction:column;gap:1px;max-height:420px;overflow:auto;margin-top:6px}
.tw-payrow{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:8px 12px;border-radius:6px;font-size:14px}
.tw-payrow:nth-child(odd){background:rgba(127,127,127,.07)}
.tw-payrow.is-next{outline:2px solid var(--c,#333);outline-offset:-2px;font-weight:700}
.tw-payn{font-variant-numeric:tabular-nums;opacity:.55}
.tw-payd{font-variant-numeric:tabular-nums}

/* ---- indiatime.now ---- */
.tw-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%}
.tw-pair-cell{display:flex;flex-direction:column;gap:3px;align-items:center;padding:18px 12px;
  border-radius:12px;background:rgba(127,127,127,.07);border:1px solid rgba(128,128,128,.16)}
.tw-pair-name{font-size:11.5px;text-transform:uppercase;letter-spacing:1px;opacity:.65;font-weight:700}
.tw-pair-time{font-variant-numeric:tabular-nums;font-weight:800;font-size:clamp(20px,7cqw,34px);color:var(--c,#222)}
.tw-pair-date{font-size:13px;opacity:.65}
.tw-pair-off{font-size:11.5px;opacity:.5;font-variant-numeric:tabular-nums}

/* ---- responsive ---- */
@media(max-width:640px){
  .tw-kv{grid-template-columns:1fr auto;grid-template-areas:"k copy" "v v";row-gap:4px}
  .tw-k{grid-area:k}.tw-v{grid-area:v}.tw-copy{grid-area:copy}
  .tw-chart-row{grid-template-columns:66px 92px;row-gap:2px}
  .tw-chart-say{grid-column:1/-1;padding-left:2px}
  .tw-zrow{grid-template-columns:1fr 80px;row-gap:2px}
  .tw-zoff{grid-column:2;text-align:right}
  .tw-usrow{grid-template-columns:1fr 118px;row-gap:2px}
  .tw-usdate,.tw-usoff{grid-column:2;text-align:right}
  .tw-abbr-row{grid-template-columns:96px 1fr;row-gap:2px}
  .tw-abbr-row span:nth-child(3),.tw-abbr-row span:nth-child(4){grid-column:1/-1;font-size:12.5px}
  .tw-dstrow{grid-template-columns:1fr;row-gap:3px}
  .tw-scale-row{grid-template-columns:56px 1fr;row-gap:3px}
  .tw-scale-desc{grid-column:1/-1}
  .tw-pair{grid-template-columns:1fr}
  /* Reference rows whose fixed first column left too little room for the text
     beside it on a phone: stack the description under the label. */
  .tw-orow{grid-template-columns:96px 74px;row-gap:2px}
  .tw-oplaces{grid-column:1/-1;font-size:12.5px}
  .tw-mrow{grid-template-columns:44px 1fr 54px;row-gap:2px}
  .tw-morigin{grid-column:1/-1;font-size:12.5px}
  .tw-mnum-tool .tw-mrow{grid-template-columns:44px 1fr 54px}
  /* A calendar is always 7 columns; just give the cells room to breathe. */
  .tw-cal{gap:3px}
  .tw-cal-d,.tw-cal-x{padding:7px 0;font-size:13px}
  .tw-cal-h{font-size:10px;letter-spacing:.3px}
  .tw-form{flex-direction:column;align-items:stretch}
  .tw-form .wc-input,.tw-form .wc-select{width:100%}
  .tw-n{width:100%}
}