/* team.css — attendance, shift board, payroll (web/js/team.js). Skin tokens only. */
.tm-body > * + * { margin-top: 14px; }
.tm-sec-hd { margin-bottom: 10px; }
.tm-av { width: 36px; height: 36px; flex: none; border-radius: 12px; display: inline-grid; place-items: center; font-weight: 800;
  color: var(--br); background: var(--bs); }
.tm-nav { display: inline-flex; align-items: center; gap: 10px; padding: 4px; border-radius: 999px; border: 1px solid var(--ln); background: var(--sf); }
.tm-nav b { min-width: 110px; text-align: center; font-size: 14px; }
.tm-stats { margin-top: 12px; }
.tm-pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tm-late { color: #D97706; font-weight: 700; }
.tm-bad { color: var(--bd, #DC2626); font-weight: 700; }
.tm-add { color: var(--ok, #16A34A); font-weight: 700; }
.tm-hint { font-size: 13px; }

/* today's board */
.tm-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.tm-person { position: relative; display: grid; gap: 10px; padding: 14px 16px; overflow: hidden; }
.tm-person::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--ln); }
.tm-st-in::before { background: var(--ok, #16A34A); }
.tm-st-late::before { background: #F59E0B; }
.tm-st-absent::before { background: var(--bd, #DC2626); }
.tm-st-leave::before, .tm-st-mission::before { background: var(--br); }
.tm-person-top { display: flex; align-items: center; gap: 10px; }
.tm-person-meta { font-size: 13px; line-height: 2; color: var(--mu); }
.tm-person .acts { margin: 0; }
.tm-st-in .tm-av { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok, #16A34A) 35%, transparent); }

/* person / day rows */
.tm-person-hd { gap: 10px; }
.tm-who { gap: 10px; align-items: center; }
.tm-who h3 { margin: 0; }
.tm-day { display: grid; grid-template-columns: minmax(130px, 170px) 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--ln); }
.tm-day:first-of-type { border-top: 0; }
.tm-day.is-absent .tm-day-l b { color: var(--bd, #DC2626); }
.tm-day-m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tm-day-r { font-size: 13px; white-space: nowrap; }
.tm-sess { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; direction: ltr;
  background: color-mix(in srgb, var(--ok, #16A34A) 10%, var(--sf)); border: 1px solid color-mix(in srgb, var(--ok, #16A34A) 30%, var(--ln)); cursor: pointer; }
.tm-sess.open { background: color-mix(in srgb, #F59E0B 12%, var(--sf)); border-color: color-mix(in srgb, #F59E0B 40%, var(--ln)); }
.tm-sess i { font-style: normal; opacity: .6; }
.tm-menu { display: grid; gap: 8px; }
@media (max-width: 640px) {
  .tm-day { grid-template-columns: 1fr auto; }
  .tm-day-m { grid-column: 1 / -1; order: 3; }
}

/* shift board */
.tm-legend { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; border: 1px solid var(--ln); background: var(--sf); }
.tm-chip i { width: 10px; height: 10px; border-radius: 50%; }
.tm-chip small { color: var(--mu); font-weight: 600; }
.tm-grid-wrap { width: 100%; contain: inline-size; container-type: inline-size; border: 1px solid var(--ln); border-radius: 16px; background: var(--sf); overflow: hidden; }
.tm-grid { width: 100%; border-collapse: collapse; }
.tm-grid th { padding: 10px 8px; font-size: 13px; font-weight: 800; border-bottom: 1px solid var(--ln); background: var(--s2, var(--bg)); text-align: center; }
.tm-grid th small { display: block; color: var(--mu); font-weight: 600; font-size: 11.5px; }
.tm-grid th em { display: block; font-style: normal; color: var(--bd, #DC2626); font-size: 11px; }
.tm-grid th:first-child { text-align: start; position: sticky; inset-inline-start: 0; z-index: 1; }
.tm-grid td { padding: 8px 6px; border-bottom: 1px solid var(--ln); vertical-align: top; }
.tm-g-name { position: sticky; inset-inline-start: 0; background: var(--sf); min-width: 160px; z-index: 1; }
.tm-g-name .btn { margin-top: 6px; }
.tm-g-sum { text-align: center; white-space: nowrap; }
.tm-cell { text-align: center; cursor: pointer; transition: background .15s; min-width: 92px; }
.tm-cell:hover, .tm-cell:focus-visible { background: color-mix(in srgb, var(--br) 6%, transparent); outline: none; }
.tm-cell.is-hol, .tm-grid th.is-hol { background: color-mix(in srgb, var(--bd, #DC2626) 6%, transparent); }
.tm-shift { --c: var(--br); display: block; margin: 2px auto; padding: 4px 6px; border-radius: 10px; font-size: 12.5px; font-weight: 800; direction: ltr; line-height: 1.5;
  color: color-mix(in srgb, var(--c) 80%, var(--ink)); background: color-mix(in srgb, var(--c) 14%, var(--sf)); border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.tm-off { display: block; margin: 4px auto 0; padding: 2px 6px; border-radius: 8px; font-size: 11px; font-weight: 700; color: var(--br); background: var(--bs); }
.tm-off.pending { color: #B45309; background: color-mix(in srgb, #F59E0B 15%, transparent); }
.tm-ranges { display: grid; gap: 10px; }
.tm-ranges-list { display: grid; gap: 8px; }
.tm-range { gap: 8px; align-items: center; flex-wrap: nowrap; }
.tm-range .ux-f { margin: 0; flex: 1; }
.tm-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-tpl { --c: var(--br); border-color: color-mix(in srgb, var(--c) 45%, var(--ln)); }
.tm-tpl small { opacity: .7; margin-inline-start: 4px; }
.tm-color { width: 44px; padding: 2px; height: 40px; flex: none; }

/* payroll */
.tm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.tm-col-main, .tm-col-side { display: grid; gap: 14px; }
@media (max-width: 960px) { .tm-cols { grid-template-columns: 1fr; } }
.tm-slip-st { gap: 6px; margin-bottom: 10px; }
.tm-lines { display: grid; border-top: 1px dashed var(--ln); }
.tm-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--ln); font-size: 14px; }
.tm-line small { display: block; color: var(--mu); font-size: 12px; }
.tm-line b { white-space: nowrap; }
.tm-line.add b { color: var(--ok, #16A34A); }
.tm-line.deduct b { color: var(--bd, #DC2626); }
.tm-line:first-child b { color: var(--ink); }
.tm-total { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 14px;
  background: var(--bs); color: var(--ink); font-size: 15px; }
.tm-total b { font-size: 20px; color: var(--br); }
.tm-pays { margin-top: 10px; }
.tm-det summary { cursor: pointer; color: var(--br); font-weight: 700; font-size: 13px; }

/* employee: clock card */
.tm-clock { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  background: linear-gradient(135deg, color-mix(in srgb, var(--br) 10%, var(--sf)), var(--sf)); }
.tm-clock-k { font-size: 12.5px; font-weight: 800; color: var(--br); }
.tm-clock-t { font-size: 22px; font-weight: 900; color: var(--ink); margin: 2px 0; }
.tm-clock-b { min-width: 140px; min-height: 52px; border-radius: 16px; font-size: 16px; font-weight: 900; color: #fff; border: 0;
  background: linear-gradient(135deg, #16A34A, #0F7A3A); box-shadow: 0 10px 24px -12px rgba(22, 163, 74, .8); }
.tm-clock-b.out { background: linear-gradient(135deg, #F97316, #DC2626); box-shadow: 0 10px 24px -12px rgba(220, 38, 38, .7); }
@media (max-width: 520px) { .tm-clock-b { width: 100%; } }

/* my shifts (dashboard + employee panel) */
.tm-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tm-wday { display: grid; gap: 6px; align-content: start; padding: 12px; }
.tm-wday .tm-shift { margin: 0; text-align: center; }
.tm-wday .tm-off { margin: 0; }
.tm-wday-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13.5px; }
.tm-wday-n { font-size: 13px; font-weight: 700; color: var(--mu); }
.tm-wday.is-today { border-color: var(--br); box-shadow: 0 0 0 2px color-mix(in srgb, var(--br) 25%, transparent); }
.tm-wday.is-hol { background: color-mix(in srgb, var(--bd, #DC2626) 5%, var(--sf)); }
.tm-wday.is-hol .tm-wday-n { color: var(--bd, #DC2626); }
.tm-wday.is-off { opacity: .8; }
.tm-mine { display: grid; gap: 12px; }

/* access settings (dashboard: members / staff permissions) */
.perm-group + .perm-group { margin-top: 14px; }
.perm-group-hd { align-items: center; padding: 6px 2px; margin-bottom: 4px; border-bottom: 1px solid var(--ln); color: var(--br); }
/* the shared table wraps its cells in the narrow (card) layout */
.tm-body .tbl td { flex-wrap: wrap; gap: 6px; }
.tm-body .tbl td .row { flex-wrap: wrap; min-width: 0; }
.tm-cell.is-ro { cursor: default; }

/* Narrow boards never scroll sideways: each colleague becomes a card with a
   seven-column week (day initials under 480px). */
@container (max-width: 1000px) {
  .tm-grid, .tm-grid tbody { display: block; }
  .tm-grid thead { display: none; }
  .tm-grid tr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 10px; border-bottom: 1px solid var(--ln); }
  .tm-grid tr:last-child { border-bottom: 0; }
  .tm-grid td { padding: 0; border: 0; }
  .tm-grid td.tm-g-name { grid-column: 1 / 6; grid-row: 1; position: static; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-bottom: 6px; background: none; }
  .tm-grid td.tm-g-name .btn { margin-top: 0; }
  .tm-grid td.tm-g-sum { grid-column: 6 / 8; grid-row: 1; align-self: center; text-align: end; font-size: 13px; }
  .tm-grid td.tm-g-sum::before { content: "جمع هفته"; display: block; color: var(--mu); font-size: 11px; font-weight: 600; }
  .tm-cell { min-width: 0; padding: 5px 2px; border: 1px solid var(--ln); border-radius: 10px; }
  .tm-cell::before { content: attr(data-d); display: block; margin-bottom: 3px; color: var(--mu); font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; }
  .tm-shift { font-size: 11.5px; padding: 3px 2px; }
  .tm-off { font-size: 10.5px; padding: 2px 3px; }
}
@container (max-width: 480px) {
  .tm-cell::before { content: attr(data-s); }
  .tm-shift { font-size: 10.5px; padding: 2px 1px; border-radius: 8px; }
  .tm-cell .mu.sm { font-size: 10.5px; }
}
/* ---- «ورود و خروج و برنامهٔ من» (team.js myWork) ---- */
.tm-clock-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tm-clock-link { min-height: 52px; border-radius: 16px; font-weight: 800; }
@media (max-width: 520px) { .tm-clock-r { width: 100%; } .tm-clock-r > * { flex: 1; } }
.tm-body > .tm-stats { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.mw-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mw-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 12.5px; color: var(--mu); font-weight: 700; }
.mw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.mw-legend i, .mw-dots i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.m-sh { background: var(--br); }
.m-at { background: var(--ok, #16A34A); }
.m-bk { background: #F59E0B; }
.m-ch { background: #8B5CF6; }
.m-lv { background: #0EA5E9; }

/* week: one card per day */
.mw-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.mw-day { display: grid; gap: 10px; align-content: start; padding: 14px !important; box-sizing: border-box; }
.mw-day.is-today { border-color: var(--br); box-shadow: 0 0 0 2px color-mix(in srgb, var(--br) 22%, transparent); }
.mw-day.is-hol { background: color-mix(in srgb, var(--bd, #DC2626) 4%, var(--sf)); }
.mw-day-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ln); }
.mw-day-b { display: grid; gap: 8px; }
.mw-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mw-line .tm-shift, .mw-line .tm-sess { margin: 0; }
.mw-k { min-width: 40px; font-size: 11.5px; font-weight: 800; color: var(--mu); }
.mw-note { font-size: 12.5px; font-weight: 700; color: var(--mu); }
.mw-note.bd { color: var(--bd, #DC2626); }
.mw-chat { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; direction: rtl;
  background: color-mix(in srgb, #8B5CF6 12%, var(--sf)); border: 1px solid color-mix(in srgb, #8B5CF6 30%, var(--ln)); }
.mw-bks { display: grid; gap: 6px; }
.mw-bk { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; min-width: 0;
  background: color-mix(in srgb, #F59E0B 9%, var(--sf)); border-inline-start: 3px solid #F59E0B; }
.mw-bk.ok { border-inline-start-color: var(--ok, #16A34A); }
.mw-bk.bd { opacity: .6; text-decoration: line-through; }
.mw-bk b { flex: none; direction: ltr; }
.mw-bk span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* month: a calendar, Saturday first */
.mw-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; container-type: inline-size; }
.mw-wd { text-align: center; font-size: 12px; font-weight: 800; color: var(--mu); padding: 4px 0; overflow: hidden; white-space: nowrap; }
.mw-cell { min-width: 0; min-height: 92px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px; box-sizing: border-box;
  border: 1px solid var(--ln); border-radius: 12px; background: var(--sf); color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
.mw-cell:hover { border-color: color-mix(in srgb, var(--br) 45%, var(--ln)); }
.mw-cell.is-pad { visibility: hidden; }
.mw-cell.is-today { border-color: var(--br); box-shadow: 0 0 0 2px color-mix(in srgb, var(--br) 22%, transparent); }
.mw-cell.is-hol { background: color-mix(in srgb, var(--bd, #DC2626) 5%, var(--sf)); }
.mw-cell.is-abs .mw-n { color: var(--bd, #DC2626); }
.mw-n { font-weight: 900; font-size: 15px; }
.mw-t { font-size: 11.5px; color: var(--mu); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl; min-height: 1em; }
.mw-dots { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; flex-wrap: wrap; }
@container (max-width: 560px) {
  .mw-cell { min-height: 58px; padding: 6px 4px; align-items: center; }
  .mw-t { display: none; }
  .mw-n { font-size: 13.5px; }
  .mw-dots { justify-content: center; gap: 3px; }
  .mw-dots i { width: 7px; height: 7px; }
}

/* year: twelve month cards */
.mw-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mw-mon { display: grid; gap: 6px; padding: 14px !important; text-align: start; font: inherit; color: var(--ink); cursor: pointer; box-sizing: border-box; }
.mw-mon:hover { border-color: color-mix(in srgb, var(--br) 45%, var(--ln)); }
.mw-mon.is-today { border-color: var(--br); }
.mw-mon b { font-size: 15px; }
.mw-mon span { font-size: 12.5px; color: var(--mu); }
.mw-mon em { font-style: normal; font-weight: 800; color: var(--ink); }
/* ---- clock card v2: sky + live clock + both calendars ---- */
.tm-clock-w { container-type: inline-size; }
.tm-clock { display: grid; grid-template-columns: minmax(200px, 300px) minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 16px !important;
  box-sizing: border-box; }
.tm-clock.is-on { border-color: color-mix(in srgb, var(--ok, #16A34A) 45%, var(--ln)); }
.tm-clock .tm-clock-l { display: grid; gap: 4px; min-width: 0; }
.tm-clock .tm-clock-k { font-size: 13px; }
.tm-clock.is-on .tm-clock-k { color: var(--ok, #16A34A); }
.tm-now { width: fit-content; font-size: 34px; font-weight: 900; letter-spacing: 1px; line-height: 1.2; direction: ltr; font-variant-numeric: tabular-nums; color: var(--ink); }
.tm-dates { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; font-weight: 700; color: var(--ink); }
.tm-dates span + span { color: var(--mu); font-weight: 600; }
.tm-dates span + span::before { content: "·"; margin-inline-end: 12px; color: var(--ln); }
.tm-shift-today { font-size: 12.5px; color: var(--mu); }
.tm-worked { display: inline-flex; align-items: center; gap: 10px; width: fit-content; margin-top: 4px; padding: 6px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--ok, #16A34A) 12%, var(--sf)); border: 1px solid color-mix(in srgb, var(--ok, #16A34A) 30%, var(--ln)); }
.tm-worked span { font-size: 12.5px; color: var(--mu); font-weight: 700; }
.tm-worked b { font-size: 20px; font-weight: 900; direction: ltr; font-variant-numeric: tabular-nums; color: var(--ok, #16A34A); }
.tm-clock .tm-clock-r { flex-direction: column; align-items: stretch; }

.tm-sky { position: relative; border-radius: 16px; overflow: hidden; aspect-ratio: 320 / 150; min-width: 0;
  background: linear-gradient(#5AA9F0, #A9D8FF 70%, #DFF1FF); transition: background .6s; }
.tm-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-arc { stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.tm-hills { fill: #3E8E5A; opacity: .85; }
.tm-horizon { stroke: rgba(255, 255, 255, .5); stroke-width: 1; }
.tm-stars circle { fill: #fff; opacity: 0; transition: opacity .6s; }
.tm-body-m, .tm-body-s { transition: transform 1s linear, opacity .6s; }
.tm-moon-cut { fill: #23305E; }
.tm-sky-t { position: absolute; inset-inline: 8px; bottom: 6px; display: flex; justify-content: space-between; font-size: 11px; font-weight: 800; color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.tm-sky[data-phase="day"] .tm-body-m, .tm-sky[data-phase="dusk"] .tm-body-m { opacity: 0; }
.tm-sky[data-phase="night"] .tm-body-s, .tm-sky[data-phase="dusk-n"] .tm-body-s { opacity: 0; }
.tm-sky[data-phase="dusk"] { background: linear-gradient(#3B5BA8, #F28C5B 62%, #FFD39A); }
.tm-sky[data-phase="dusk-n"] { background: linear-gradient(#141B3D, #4A3C78 60%, #E07B5F); }
.tm-sky[data-phase="night"] { background: linear-gradient(#060B22, #16234F 65%, #23305E); }
.tm-sky[data-phase="night"] .tm-stars circle, .tm-sky[data-phase="dusk-n"] .tm-stars circle { opacity: .85; }
.tm-sky[data-phase="night"] .tm-hills, .tm-sky[data-phase="dusk-n"] .tm-hills { fill: #0E1733; opacity: 1; }
.tm-sky[data-phase="dusk"] .tm-hills { fill: #3A4F3F; }
.tm-sky[data-phase="dusk"] .tm-moon-cut, .tm-sky[data-phase="dusk-n"] .tm-moon-cut { fill: #4A3C78; }
.tm-sky[data-phase="day"] .tm-moon-cut { fill: #A9D8FF; }

@container (max-width: 640px) {
  .tm-clock { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .tm-now { font-size: 30px; }
  .tm-clock .tm-clock-r { flex-direction: row; }
  .tm-clock .tm-clock-r > * { flex: 1; }
}
@container (min-width: 641px) and (max-width: 900px) {
  .tm-clock { grid-template-columns: minmax(170px, 230px) minmax(0, 1fr); }
  .tm-clock .tm-clock-r { grid-column: 1 / -1; flex-direction: row; }
  .tm-clock .tm-clock-r > * { flex: 1; }
}
/* ---- clock card v3: minimal and small ---- */
.tm-clock { grid-template-columns: 112px minmax(0, 1fr) auto; gap: 14px; padding: 10px 12px !important; align-items: center;
  background: var(--sf); border-radius: 16px; }
.tm-sky { width: 112px; border-radius: 12px; }
.tm-sky-t { display: none; }
.tm-clock .tm-clock-l { gap: 2px; }
.tm-clock .tm-clock-k { font-size: 11.5px; font-weight: 800; }
.tm-clock-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.tm-now { font-size: 22px; letter-spacing: .5px; line-height: 1.3; }
.tm-dates { font-size: 12px; gap: 2px 8px; }
.tm-dates span + span::before { margin-inline-end: 8px; }
.tm-shift-today { font-size: 11.5px; }
.tm-worked { margin-top: 2px; padding: 2px 10px; gap: 8px; border-radius: 999px; }
.tm-worked span { font-size: 11.5px; }
.tm-worked b { font-size: 15px; }
.tm-clock .tm-clock-r { flex-direction: column; gap: 6px; }
.tm-clock .tm-clock-b { min-width: 104px; min-height: 38px; border-radius: 12px; font-size: 14px; box-shadow: none; }
.tm-clock .tm-clock-link { min-height: 32px; padding: 4px 10px; border-radius: 10px; font-size: 12.5px; font-weight: 700; border: 0; background: none; color: var(--br); }
.tm-clock .tm-clock-link:hover { background: var(--bs); }
@container (max-width: 640px) {
  .tm-clock { grid-template-columns: 92px minmax(0, 1fr); gap: 10px 12px; }
  .tm-sky { width: 92px; }
  .tm-now { font-size: 20px; }
  .tm-clock .tm-clock-r { grid-column: 1 / -1; flex-direction: row; }
  .tm-clock .tm-clock-r > * { flex: 1; }
}
@container (min-width: 641px) and (max-width: 900px) {
  .tm-clock { grid-template-columns: 112px minmax(0, 1fr) auto; }
  .tm-clock .tm-clock-r { grid-column: auto; flex-direction: column; }
}
/* ---- clock card v4: the sky is the card's backdrop, with drifting clouds and twinkling stars ---- */
.tm-clock { position: relative; overflow: hidden; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; min-height: 118px;
  padding: 14px 16px !important; border: 0; color: #fff; background: #16234F; }
.tm-clock > :not(.tm-sky) { position: relative; z-index: 1; }
.tm-clock .tm-sky { position: absolute; inset: 0; width: auto; aspect-ratio: auto; border-radius: 0; z-index: 0; }
.tm-sky-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.tm-sky .tm-arc { stroke: rgba(255, 255, 255, .45); stroke-width: 1.2; stroke-dasharray: 3 6; }
.tm-sky .tm-hills { fill: #3E8E5A; opacity: .55; }
.tm-stars { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.tm-stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgba(255, 255, 255, .8);
  animation: tmTwinkle 3.2s ease-in-out infinite !important; }
.tm-stars i:nth-child(3n) { animation-duration: 4.6s !important; animation-delay: -1.3s !important; }
.tm-stars i:nth-child(4n+1) { animation-duration: 2.4s !important; animation-delay: -.7s !important; }
.tm-stars i:nth-child(5n+2) { animation-delay: -2.1s !important; }
@keyframes tmTwinkle { 0%, 100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.15); } }
.tm-orb { position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; opacity: 0; transition: opacity .8s, left 1s linear, top 1s linear; }
.tm-sun { background: radial-gradient(circle, #FFF6C9 0 30%, #FFD23F 31% 52%, rgba(255, 176, 32, .35) 53% 70%, transparent 71%); }
.tm-moon { width: 26px; height: 26px; margin: -13px 0 0 -13px;
  background: radial-gradient(circle at 62% 38%, transparent 0 44%, #EEF1FB 45%); box-shadow: 0 0 18px rgba(230, 236, 255, .45); }
.tm-cloud { position: absolute; left: -30%; height: 16px; border-radius: 999px; background: rgba(255, 255, 255, .9); filter: blur(.3px);
  animation: tmDrift 70s linear infinite !important; opacity: .9; transition: opacity .8s; }
.tm-cloud::before, .tm-cloud::after { content: ""; position: absolute; bottom: 5px; border-radius: 50%; background: inherit; }
.tm-cloud::before { left: 18%; width: 46%; height: 22px; }
.tm-cloud::after { left: 46%; width: 34%; height: 16px; }
.tm-cloud.c1 { top: 16%; width: 78px; }
.tm-cloud.c2 { top: 42%; width: 56px; height: 12px; animation-duration: 95s !important; animation-delay: -40s !important; opacity: .75; }
.tm-cloud.c3 { top: 26%; width: 96px; animation-duration: 120s !important; animation-delay: -85s !important; opacity: .6; }
@keyframes tmDrift { from { transform: translateX(0); } to { transform: translateX(160vw); } }
html[dir="rtl"] .tm-cloud { left: auto; right: -30%; animation-name: tmDriftR !important; }
@keyframes tmDriftR { from { transform: translateX(0); } to { transform: translateX(-160vw); } }

/* phases: sky colours, which body shows, cloud tint, readable text */
.tm-clock[data-phase="day"] { background: linear-gradient(#4FA3EE, #9FD2FF 70%, #D8EEFF); color: #0F1F3A; }
.tm-clock[data-phase="dusk"] { background: linear-gradient(#3B5BA8, #F0895A 65%, #FFD39A); }
.tm-clock[data-phase="dusk-n"] { background: linear-gradient(#141B3D, #4A3C78 65%, #C56E5A); }
.tm-clock[data-phase="night"] { background: linear-gradient(#060B22, #16234F 70%, #23305E); }
.tm-clock[data-phase="day"] .tm-sun, .tm-clock[data-phase="dusk"] .tm-sun { opacity: 1; }
.tm-clock[data-phase="night"] .tm-moon, .tm-clock[data-phase="dusk-n"] .tm-moon { opacity: 1; }
.tm-clock[data-phase="night"] .tm-stars, .tm-clock[data-phase="dusk-n"] .tm-stars { opacity: 1; }
.tm-clock[data-phase="dusk"] .tm-cloud { background: #FFE2C4; }
.tm-clock[data-phase="dusk-n"] .tm-cloud, .tm-clock[data-phase="night"] .tm-cloud { background: rgba(170, 182, 220, .22); }
.tm-clock[data-phase="night"] .tm-hills, .tm-clock[data-phase="dusk-n"] .tm-hills { fill: #0B1430; opacity: .9; }
.tm-clock[data-phase="dusk"] .tm-hills { fill: #3A4F3F; opacity: .7; }
.tm-clock:not([data-phase="day"]) .tm-now, .tm-clock:not([data-phase="day"]) .tm-dates span { color: #fff; }
.tm-clock:not([data-phase="day"]) .tm-dates span + span, .tm-clock:not([data-phase="day"]) .tm-shift-today { color: rgba(255, 255, 255, .78); }
.tm-clock:not([data-phase="day"]) .tm-clock-k { color: #BFD7FF; }
.tm-clock:not([data-phase="day"]) .tm-now { text-shadow: 0 2px 10px rgba(0, 0, 0, .35); }
.tm-clock[data-phase="day"] .tm-clock-k { color: #0F3E8A; }
.tm-clock[data-phase="day"] .tm-shift-today, .tm-clock[data-phase="day"] .tm-dates span + span { color: #2B4466; }
.tm-clock.is-on .tm-clock-k { color: #7CF0A7 !important; }
.tm-clock[data-phase="day"].is-on .tm-clock-k { color: #0B7A3B !important; }
.tm-clock .tm-worked { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tm-clock .tm-worked span { color: inherit; opacity: .85; }
.tm-clock .tm-worked b { color: #7CF0A7; }
.tm-clock[data-phase="day"] .tm-worked { background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .8); }
.tm-clock[data-phase="day"] .tm-worked b { color: #0B7A3B; }
.tm-clock .tm-clock-link { color: inherit; background: rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tm-clock .tm-clock-link:hover { background: rgba(255, 255, 255, .26); }
.tm-clock[data-phase="day"] .tm-clock-link { background: rgba(255, 255, 255, .55); color: #0F3E8A; }
@container (max-width: 640px) {
  .tm-clock { grid-template-columns: minmax(0, 1fr); }
  .tm-clock .tm-clock-r { grid-column: auto; }
}
@container (min-width: 641px) and (max-width: 900px) {
  .tm-clock { grid-template-columns: minmax(0, 1fr) auto; }
}.mw-chat.plan { background: transparent; border-style: dashed; }