/* Team software. Colours, type sizes, radii and touch sizes follow the Step design tokens (design/tokens.json).
   One pattern on every page: a card holds rows; a row is a title, one short line under it and at most one chip;
   each screen has one main button. Text is 16px, so a phone never zooms into a field when it is touched. */
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cyan: #00C5F2; --lime: #BCE600; --ink: #00456F;
  --text: #00456F; --text-2: #1F6E8F; --link: #00748F; --lime-text: #5C7000;
  --page: #F4FAFD; --card: #FFFFFF; --surface: #EAF8FD; --seg: #DDEFF7; --dark: #00456F;
  --line: #D6F0FA; --input: #3A8FB0;
  --danger: #C4281C; --bad-bg: #FDE8E6; --ok: #1E7B34; --ok-bg: #DDF5E3; --warn-bg: #FFF1C2; --warn-text: #5C4300; --info-bg: #DDF4FB;
  --on-lime: #00456F;
  --shadow: 0 1px 3px rgba(0, 69, 111, 0.08);
  --r-s: 12px; --r-card: 18px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: light;
}

/* «استپ چت» frame, after the shell of the partners' Abi Chat: a soft patterned background and glass cards floating
   on it. The glass rule is Abi Chat's own (a tinted, blurred surface whose edge catches light from the top right);
   the colours are Step's. Values are "R G B" so one colour serves at any opacity. */
:root {
  --sc-surface: 255 255 255; --sc-own: 211 241 251; --sc-in: 226 232 240; --sc-pop: 255 255 255;
  --sc-sheen: 255 255 255; --sc-sheen-a: 0.95; --sc-sheen-b: 0.08; --sc-sheen-c: 0.35; --sc-glass-a: 0.78;
  --sc-shadow: 15 23 42; --sc-shadow-brand: 0 69 111;
  --sc-ink: 30 41 59; --sc-ink-2: 100 116 139; --sc-ink-3: 148 163 184;
  --sc-brand: 0 122 163; --sc-brand-strong: 0 98 138; --sc-brand-soft: 46 178 221; --sc-brand-tint: 211 241 251;
  --sc-page: 243 247 250;
}
/* Like Abi Chat, the desk has one look, the light one, whatever the device is set to. */
.glass {
  --glass-tint: var(--sc-surface);
  border: 1.5px solid transparent;
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--glass-tint) / var(--sc-glass-a)), rgb(var(--glass-tint) / var(--sc-glass-a))),
    linear-gradient(to bottom left, rgb(var(--sc-sheen) / var(--sc-sheen-a)), rgb(var(--sc-sheen) / var(--sc-sheen-b)) 55%, rgb(var(--sc-sheen) / var(--sc-sheen-c)));
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 20px 40px -14px rgb(var(--sc-shadow-brand) / 0.32), 0 0 0 1px rgb(var(--sc-shadow) / 0.06);
}
.glass-brand { --glass-tint: var(--sc-own); }
.glass-incoming { --glass-tint: var(--sc-in); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: rgb(var(--sc-page)); color: var(--text);
  font-family: "Vazirmatn", Tahoma, sans-serif; font-size: 16px; line-height: 1.75;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color: transparent;
}
/* the background of the Step app itself (its default, "topdots"): almost white, with a quiet field of small blue dots
   at the top of the page that fades out before the middle, so the content stays clean. Both layers stay put behind
   everything (a fixed layer scrolls more smoothly on phones than a fixed background). */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, #fbfdfe 0%, #f2f6f9 100%); }
body::after {
  content: ""; position: fixed; inset: 0 0 auto; z-index: -1; height: 46vh; pointer-events: none;
  background-image: radial-gradient(circle at center, rgb(0 160 210 / 0.32) 1.3px, transparent 1.9px);
  background-size: 22px 22px; background-position: 11px 11px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.55) 55%, transparent 100%);
}
a { color: var(--link); text-decoration: none; }
h1 { font-size: 18px; margin: 0; font-weight: 800; }
h2 { font-size: 17px; margin: 0 0 6px; font-weight: 800; line-height: 1.6; }
p { margin: 0; }
small, .small, .hint { font-size: 13px; color: var(--text-2); }
.muted { color: var(--text-2); }
.ltr { direction: ltr; unicode-bidi: isolate; text-align: left; }
.center { text-align: center; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos { color: var(--ok); } .neg { color: var(--danger); }
.pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.hide { display: none !important; }

/* top bar: a glass pill with the back arrow or logo, the page name, search, my name */
.top {
  position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 5; display: flex; align-items: center; gap: 4px;
  min-height: 56px; max-width: 720px; margin: calc(10px + env(safe-area-inset-top)) 12px 0; padding: 4px 8px; border-radius: 999px;
  color: var(--text);
  --glass-tint: var(--sc-surface);
  border: 1.5px solid transparent; background-origin: padding-box, border-box; background-clip: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--glass-tint) / var(--sc-glass-a)), rgb(var(--glass-tint) / var(--sc-glass-a))),
    linear-gradient(to bottom left, rgb(var(--sc-sheen) / var(--sc-sheen-a)), rgb(var(--sc-sheen) / var(--sc-sheen-b)) 55%, rgb(var(--sc-sheen) / var(--sc-sheen-c)));
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 20px 40px -14px rgb(var(--sc-shadow-brand) / 0.32), 0 0 0 1px rgb(var(--sc-shadow) / 0.06);
}
@media (min-width: 744px) { .top { margin-inline: auto; } }
.top .mark { display: grid; place-items: center; width: 44px; height: 44px; flex: none; }
.top .mark img { width: 30px; height: 26px; }
.top h1 { flex: 1; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: rgb(var(--sc-ink-2)); flex: none; position: relative; }
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-btn svg.line { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { background: rgb(var(--sc-ink) / 0.08); }
.top .who { font-size: 13px; font-weight: 600; color: rgb(var(--sc-brand-strong)); background: rgb(var(--sc-brand-tint) / 0.7); padding: 6px 12px; border-radius: 999px; white-space: nowrap; margin-inline-end: 4px; }

main { max-width: 720px; margin: 0 auto; padding: 16px; }
main > * + * { margin-top: 12px; }
.stack > * + * { margin-top: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.row > .grow { min-width: 130px; }

/* section heading above a card */
.sec, .section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 28px 4px 10px; }
main > .sec:first-child, main > .section-title:first-child { margin-top: 4px; }
.sec h2, .section-title h2 { margin: 0; font-size: 16px; }
.count { font-size: 13px; line-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--seg); color: var(--text-2); }

/* cards and rows */
.card {
  background: rgb(var(--sc-surface) / 0.84); border: 1px solid rgb(var(--sc-sheen) / 0.55); border-radius: 22px; padding: 16px;
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  box-shadow: 0 18px 36px -20px rgb(var(--sc-shadow-brand) / 0.36), 0 0 0 1px rgb(var(--sc-shadow) / 0.05);
}
/* blur behind many cards is heavy on a phone; there the card is simply a little more solid */
@media (hover: none) { .card { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(var(--sc-surface) / 0.94); } }
.card.soft { background: var(--surface); border-color: transparent; box-shadow: none; }
.card.warn { background: var(--warn-bg); border-color: transparent; box-shadow: none; color: var(--warn-text); }
.card > p + p { margin-top: 6px; }
.list { list-style: none; margin: 0; padding: 0; }
.list.card, .menu.card { padding: 0 16px; }
.list > li + li, .menu > li + li { border-top: 1px solid var(--line); }
.item { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 12px 0; color: inherit; }
.card.item { padding: 12px 16px; }
.item .title { font-weight: 600; overflow-wrap: anywhere; }
.meta { display: block; font-size: 13px; color: var(--text-2); margin-top: 2px; }
/* a row that opens something gets a small arrow toward the reading direction */
a.item::after, .menu a::after {
  content: ""; flex: none; width: 8px; height: 8px; margin-inline-start: 2px;
  border-left: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2); transform: rotate(45deg); opacity: 0.45;
}

/* a task in a list: the round box in front of it ticks it off (or opens it again) without leaving the list */
.list > li.task-row { display: flex; align-items: center; }
.task-row .item { flex: 1; min-width: 0; }
.task-row form { flex: none; margin-inline-start: -10px; }
.tick-btn { display: grid; place-items: center; width: 44px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; }
.tick-btn span { display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid rgb(var(--sc-ink-3)); border-radius: 50%; color: transparent; transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.12s var(--ease); }
.tick-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tick-btn:hover span { border-color: rgb(var(--sc-brand)); color: rgb(var(--sc-brand) / 0.55); }
.tick-btn:active span { transform: scale(0.88); }
.tick-btn.done span { border-color: rgb(5 150 105); background: rgb(5 150 105); color: #fff; }
.task-row.is-done .title { color: var(--text-2); text-decoration: line-through; text-decoration-color: rgb(var(--sc-ink-3)); }

/* chips: one meaning each */
.chip { display: inline-block; flex: none; font-size: 12px; font-weight: 600; line-height: 24px; padding: 0 10px; border-radius: 999px; background: var(--surface); color: var(--text-2); white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
.chip.bad { background: var(--bad-bg); color: var(--danger); }
.chip.ai { background: var(--info-bg); color: var(--link); }
.chip.lime { background: var(--lime); color: var(--on-lime); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0; }
.chips .chip { line-height: 36px; padding: 0 14px; font-size: 14px; }

/* segmented choice: which list to show */
.seg { display: flex; gap: 4px; padding: 4px; background: var(--seg); border-radius: 999px; }
.seg a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border-radius: 999px; color: var(--text-2); font-size: 14px; font-weight: 700; text-align: center; }
.seg a[aria-current="page"] { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

/* forms */
label { display: block; font-size: 14px; font-weight: 600; margin: 4px 0 6px; }
.stack > label + :is(input, select, textarea) { margin-top: 0; }
label.check { display: flex; align-items: center; gap: 2px; min-height: 44px; margin: 0; font-weight: 500; }
input[type=text], input[type=password], input[type=search], input[type=tel], textarea, select {
  width: 100%; font: inherit; color: var(--text); background: var(--card);
  border: 1.5px solid var(--input); border-radius: var(--r-s); padding: 10px 14px; min-height: 48px;
}
textarea { min-height: 96px; resize: vertical; }
textarea[rows="2"] { min-height: 72px; }
::placeholder { color: var(--text-2); opacity: 0.75; }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 2px;
}
input[type=file] { font: inherit; font-size: 14px; color: var(--text); max-width: 100%; }
.file-pick { position: relative; overflow: hidden; }
.file-pick input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-pick:focus-within { outline: 3px solid var(--cyan); outline-offset: 2px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; margin: 0 0 0 8px; vertical-align: middle; accent-color: var(--cyan); flex: none; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px;
  font: inherit; font-weight: 700; text-align: center; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--lime); color: var(--on-lime); transition: transform 120ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn.second { background: var(--surface); color: var(--text); }
.card .btn.second { background: var(--seg); }
.btn.ghost { background: transparent; color: var(--link); padding: 0 10px; }
.btn.danger { background: transparent; color: var(--danger); border: 1.5px solid var(--danger); }
.btn.ghost.danger-text { color: var(--danger); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
form.inline { display: inline; }
.quick { display: flex; gap: 8px; }
.quick input { flex: 1; }

/* open-and-close parts */
summary { display: flex; align-items: center; gap: 8px; min-height: 32px; cursor: pointer; font-weight: 700; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: ""; flex: none; margin-inline-start: auto; width: 8px; height: 8px; opacity: 0.5;
  border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 160ms var(--ease);
}
details[open] > summary::after { transform: rotate(135deg); }
details[open] > summary { margin-bottom: 12px; }
.pay > summary.item { min-height: 56px; }
.pay[open] > summary.item { margin-bottom: 0; }
.pay-body { padding: 0 0 14px; }

/* messages */
.flash { border-radius: var(--r-s); padding: 12px 14px; background: var(--ok-bg); color: var(--ok); font-weight: 600; }
.flash.bad { background: var(--warn-bg); color: var(--warn-text); }
.empty { text-align: center; color: var(--text-2); padding: 20px 0; }

/* quick note: say it or type it */
.capture { display: grid; gap: 10px; }
.capture-row { display: flex; gap: 12px; align-items: center; }
.capture-row textarea { flex: 1; min-height: 64px; }
.mic { display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--cyan); cursor: pointer; transition: transform 120ms var(--ease); }
.mic svg { width: 30px; height: 30px; fill: #00456F; }
.mic[aria-pressed=true] { background: var(--danger); animation: pulse 1.2s ease-in-out infinite; }
.mic[aria-pressed=true] svg { fill: #fff; }
.mic:disabled { opacity: 0.5; }
@keyframes pulse { 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mic[aria-pressed=true] { animation: none; } .btn, .mic { transition: none; } }
.piece { background: var(--surface); border-radius: var(--r-s); padding: 12px; }

/* the "more" page */
.menu { list-style: none; margin: 0; padding: 0; }
.menu a { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 0; color: inherit; }
.menu .ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); }
.menu .ic svg { width: 22px; height: 22px; fill: var(--link); }
.menu .title { font-weight: 700; }

/* money */
.balance { text-align: center; padding: 20px 16px; }
.balance .big { font-size: 30px; font-weight: 800; line-height: 1.4; }

/* history lines */
.timeline { list-style: none; margin: 0; padding: 0; border-right: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 14px 12px 0; }
.timeline li::before { content: ""; position: absolute; right: -6px; top: 9px; width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--text-2); font-size: 14px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.token { font-family: Consolas, monospace; font-size: 14px; direction: ltr; text-align: left; overflow-wrap: anywhere; background: var(--surface); border-radius: var(--r-s); padding: 10px 12px; }
.token.lines { white-space: pre-wrap; }      /* ready-made command lines: one per line, copied as they are */
ol, ul:not(.list):not(.timeline):not(.menu) { margin: 0; padding-right: 20px; }
ol { list-style-type: persian; }
progress { width: 100%; height: 10px; accent-color: var(--cyan); }
audio { width: 100%; }

/* bottom navigation: five places, labels always shown */
.tabs {
  position: fixed; z-index: 6; display: flex; align-items: stretch;
  bottom: calc(10px + env(safe-area-inset-bottom)); right: 12px; left: 12px; max-width: 520px; margin-inline: auto;
  padding: 4px; border-radius: 26px;
  --glass-tint: var(--sc-surface);
  border: 1.5px solid transparent; background-origin: padding-box, border-box; background-clip: padding-box, border-box;
  background-image:
    linear-gradient(rgb(var(--glass-tint) / var(--sc-glass-a)), rgb(var(--glass-tint) / var(--sc-glass-a))),
    linear-gradient(to bottom left, rgb(var(--sc-sheen) / var(--sc-sheen-a)), rgb(var(--sc-sheen) / var(--sc-sheen-b)) 55%, rgb(var(--sc-sheen) / var(--sc-sheen-c)));
  -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
  box-shadow: 0 20px 40px -14px rgb(var(--sc-shadow-brand) / 0.32), 0 0 0 1px rgb(var(--sc-shadow) / 0.06);
}
.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 54px; border-radius: 22px; font-size: 11.5px; font-weight: 600; color: rgb(var(--sc-ink-2)); position: relative; transition: background-color 0.18s var(--ease), color 0.18s var(--ease); }
.tabs a svg { width: 23px; height: 23px; fill: currentColor; }
.tabs a[aria-current=page] { color: rgb(var(--sc-brand-strong)); background: rgb(var(--sc-brand-tint) / 0.75); }
.tabs a:active { background: rgb(var(--sc-ink) / 0.07); }
.tabs .badge { position: absolute; top: 4px; right: calc(50% - 24px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; line-height: 18px; text-align: center; padding: 0 5px; box-shadow: 0 0 0 2px rgb(var(--sc-surface)); }
.tabs .rail-mark, .tabs .rail-who { display: none; }

/* wide screens: the navigation is a glass rail at the side */
@media (min-width: 900px) {
  body { padding-bottom: 24px; padding-right: 108px; }
  .tabs { top: 12px; bottom: 12px; right: 12px; left: auto; width: 84px; max-width: none; margin: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px 8px; }
  .tabs a { flex: none; min-height: 62px; font-size: 12px; }
  .tabs .rail-mark { display: grid; place-items: center; min-height: 48px; margin-bottom: 8px; }
  .tabs .rail-mark img { width: 36px; height: 31px; }
  .tabs .rail-who { display: grid; place-items: center; min-height: 48px; margin-top: auto; }
  .tabs .rail-who span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(var(--sc-brand-tint)); color: rgb(var(--sc-brand-strong)); font-size: 15px; font-weight: 700; }
}
/* the sign-in page has no navigation and needs no room for it */
body.signed-out { padding-bottom: 24px; padding-right: 0; }

.login { max-width: 380px; margin: 12vh auto 0; padding: 0 16px; }
.login .logo { width: 150px; display: block; margin: 0 auto 20px; }

/* Jalali date picker: sits in the page flow right under its input, on a line of its own */
.jdp { margin-top: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); flex: 0 0 100%; width: 100%; }
.jdp > * { max-width: 320px; }
.jdp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.jdp-head .btn { min-width: 44px; min-height: 44px; font-size: 24px; line-height: 1; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 8px; }
.jdp-w { text-align: center; font-size: 12px; color: var(--text-2); }
.jdp-d { min-height: 40px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.jdp-d.today { outline: 2px solid var(--cyan); outline-offset: -2px; }
.jdp-d.on { background: var(--lime); color: var(--on-lime); font-weight: 700; }

/* calendar, after the calendar of the partners' Abi Chat: one card with a bar of controls on top; the week (or a day)
   as a grid of hours with tasks as small chips, a column of tasks that have no time yet beside it, and a month of
   days. One grid row is fifteen minutes; an item takes its first row from an r class and its length from an s class,
   since the page allows no inline styles. */
body.wide main, body.wide .top { max-width: 1180px; }
.card.cal { padding: 0; overflow: hidden; }
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid rgb(var(--sc-ink) / 0.07); }
.cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-arrow { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 8px; color: rgb(var(--sc-ink-3)); font-size: 20px; line-height: 1; }
.cal-today { padding: 5px 10px; border-radius: 8px; color: rgb(var(--sc-ink-2)); font-size: 12px; }
.cal-arrow:hover, .cal-today:hover { background: rgb(var(--sc-ink) / 0.06); }
.cal-title { color: rgb(var(--sc-ink)); font-size: 13px; font-weight: 700; }
.cal-sep { width: 1px; height: 16px; margin: 0 4px; background: rgb(var(--sc-ink) / 0.12); }
.cal-views { display: flex; gap: 4px; }
.cal-views a, .cal-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: rgb(var(--sc-ink-2)); font-size: 12px; font-weight: 500; transition: background-color 0.15s var(--ease), color 0.15s var(--ease); }
.cal-views a:hover, .cal-pill:hover { background: rgb(var(--sc-ink) / 0.06); }
.cal-views a[aria-current="page"], .cal-pill.on { background: rgb(var(--sc-brand-tint) / 0.7); color: rgb(var(--sc-brand-strong)); }
.cal-pill svg, .cal-auto svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal-auto { display: inline-flex; align-items: center; gap: 6px; min-height: 0; padding: 6px 12px; border: 0; border-radius: 999px; background: rgb(var(--sc-ink) / 0.07); color: rgb(var(--sc-ink-2)); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.cal-auto:hover { background: rgb(var(--sc-ink) / 0.12); }
.cal-note { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--warn-bg); color: var(--warn-text); font-size: 13px; }
.cal-list { padding: 4px 16px 16px; }

/* a task (or a meeting, a deadline) in the calendar: a small chip with a bar for its priority */
.tchip { display: flex; align-items: stretch; gap: 4px; min-width: 0; padding: 2px 6px; overflow: hidden; border-radius: 8px; background: rgb(var(--sc-surface)); box-shadow: inset 0 0 0 1px rgb(var(--sc-ink) / 0.12); color: rgb(var(--sc-ink) / 0.85); font-size: 11px; line-height: 16px; text-align: right; transition: filter 0.15s; }
.tchip:hover { filter: brightness(0.95); }
.tchip .bar { flex: none; width: 4px; border-radius: 999px; background: rgb(var(--sc-brand-soft)); }
.tchip .t { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tchip.pr-1 .bar { background: rgb(239 68 68); }
.tchip.pr-3 .bar { background: rgb(203 213 225); }
.tchip.st-doing { background: rgb(236 249 254); box-shadow: inset 0 0 0 1px rgb(170 228 247); color: rgb(0 69 111); }
.tchip.st-waiting { background: rgb(255 251 235); box-shadow: inset 0 0 0 1px rgb(253 230 138); color: rgb(146 64 14); }
.tchip.st-done { background: rgb(236 253 245); box-shadow: inset 0 0 0 1px rgb(167 243 208); color: rgb(6 95 70); }
.tchip.st-done .t { text-decoration: line-through; text-decoration-color: rgb(6 95 70 / 0.4); }
.tchip.overdue { box-shadow: inset 0 0 0 1px rgb(252 165 165); }
.tchip.deadline { background: rgb(var(--sc-surface) / 0.6); box-shadow: none; outline: 1px dashed rgb(var(--sc-ink) / 0.28); outline-offset: -1px; }
.tchip.meeting { background: rgb(245 243 255); box-shadow: inset 0 0 0 1px rgb(221 214 254); color: rgb(91 33 182); }
.tchip.meeting .bar { background: rgb(167 139 250); }
.tchip.decision, .tchip.milestone { background: rgb(255 251 235); box-shadow: inset 0 0 0 1px rgb(253 230 138); color: rgb(146 64 14); }
.tchip.decision .bar, .tchip.milestone .bar { background: rgb(251 191 36); }
.tchip.holiday { background: rgb(254 242 242); box-shadow: none; color: rgb(220 38 38); }
.tchip.holiday .bar { display: none; }
.tchip[draggable="true"] { cursor: grab; }
.cal.dragging .tchip[draggable="true"] { cursor: grabbing; }

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 12px; }
.mhead { padding-bottom: 4px; color: rgb(var(--sc-ink-3)); font-size: 11px; text-align: center; }
.mhead.off { color: rgb(248 113 113); }
.mcell { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 92px; padding: 6px; border-radius: 12px; background: rgb(var(--sc-surface)); box-shadow: inset 0 0 0 1px rgb(var(--sc-ink) / 0.06); }
.mcell.out { background: rgb(var(--sc-ink) / 0.02); box-shadow: none; }
.mcell.over { background: rgb(var(--sc-brand-tint) / 0.5); box-shadow: inset 0 0 0 2px rgb(var(--sc-brand) / 0.5); }
.mnum { align-self: flex-start; margin-bottom: 2px; padding: 0 5px; border-radius: 6px; color: rgb(var(--sc-ink-2)); font-size: 11px; line-height: 18px; }
.mcell.off .mnum { color: rgb(248 113 113); }
.mcell.today .mnum { background: rgb(var(--sc-brand)); color: #fff; font-weight: 700; }
.mmore { padding: 0 4px; color: rgb(var(--sc-ink-3)); font-size: 10px; }
.mmore:hover { color: rgb(var(--sc-brand-strong)); }

.cal-body { display: flex; min-width: 0; }
.cal-backlog { display: none; flex: none; flex-direction: column; gap: 6px; width: 224px; padding: 12px; border-left: 1px solid rgb(var(--sc-ink) / 0.07); }
.cal-side-title { display: flex; align-items: center; justify-content: space-between; color: rgb(var(--sc-ink-2)); font-size: 12px; font-weight: 600; }
.cal-side-hint { color: rgb(var(--sc-ink-3)); font-size: 11.5px; line-height: 1.8; }
.cal-backlog .tchip, .cal-backlog-m .tchip { padding: 4px 6px; }
.cal-backlog-m { padding: 8px 12px; border-bottom: 1px solid rgb(var(--sc-ink) / 0.07); }
.cal-backlog-m summary { display: flex; align-items: center; gap: 8px; color: rgb(var(--sc-ink-2)); font-size: 12px; font-weight: 600; cursor: pointer; }
.cal-backlog-m .stack { margin-top: 8px; }
.cal-backlog-m .stack > * + * { margin-top: 6px; }
@media (min-width: 900px) { .cal-backlog { display: flex; } .cal-backlog-m { display: none; } }
.cal-main { flex: 1; min-width: 0; }
.cal-scroll { overflow-x: auto; }
.cal-grid { display: grid; }
.cal-grid.day { grid-template-columns: 44px minmax(0, 1fr); }
.cal-grid.week { grid-template-columns: 44px repeat(7, minmax(0, 1fr)); }
.chead { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 6px 2px; border-bottom: 1px solid rgb(var(--sc-ink) / 0.07); text-align: center; }
.chead .dname { display: block; color: rgb(var(--sc-ink-3)); font-size: 11px; }
.chead .dn { display: inline-block; margin-inline-start: 4px; padding: 0 5px; border-radius: 6px; color: rgb(var(--sc-ink-2)); font-size: 12px; font-weight: 600; line-height: 18px; }
.chead.off .wd { color: rgb(248 113 113); }
.chead.today .dn { background: rgb(var(--sc-brand)); color: #fff; }
.ccol { position: relative; display: grid; grid-template-rows: repeat(56, 12px); grid-template-columns: minmax(0, 1fr); margin: 0; border-right: 1px solid rgb(var(--sc-ink) / 0.06); background-image: repeating-linear-gradient(to bottom, rgb(var(--sc-ink) / 0.07) 0 1px, transparent 1px 48px); }
.ccol.hours { border-right: 0; background-image: none; }
.ccol.today { background-color: rgb(var(--sc-brand-tint) / 0.16); }
.hl { grid-column: 1; color: rgb(var(--sc-ink-3)); font-size: 10px; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; transform: translateY(-5px); }
.slot { grid-column: 1; z-index: 1; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: copy; }
.slot:hover, .slot:focus-visible { background: rgb(var(--sc-brand-tint) / 0.6); }
.ccol .tchip { grid-column: 1; z-index: 2; margin: 1px 2px; }
.ccol .tchip.alt { margin-inline-start: 40%; }
.now { position: relative; grid-column: 1; z-index: 3; align-self: start; height: 0; border-top: 2px solid rgb(248 113 113); pointer-events: none; }
.now::before { content: ""; position: absolute; top: -7px; right: 0; width: 12px; height: 12px; border-radius: 50%; background: rgb(248 113 113); }
.cal-drop { position: absolute; right: 2px; left: 2px; z-index: 4; border: 1px dashed rgb(var(--sc-brand-soft)); border-radius: 6px; background: rgb(var(--sc-brand-tint) / 0.75); color: rgb(var(--sc-brand-strong)); font-size: 10px; line-height: 16px; text-align: center; pointer-events: none; }
/* a phone: taller rows for a finger, and the week keeps its seven columns by sliding sideways */
@media (hover: none) {
  .ccol { grid-template-rows: repeat(56, 15px); background-image: repeating-linear-gradient(to bottom, rgb(var(--sc-ink) / 0.07) 0 1px, transparent 1px 60px); }
}
@media (max-width: 899px) {
  .cal-grid.week { grid-template-columns: 40px repeat(7, minmax(96px, 1fr)); min-width: 720px; }
  .cal-bar { padding: 8px 12px; gap: 6px; }
  .cal-sep { display: none; }
}

/* a small dialog over the page (a new task on an hour of the calendar) */
.sc-scrim { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(0 0 0 / 0.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.sc-dialog { width: 100%; max-width: 448px; margin: 0; overflow: hidden; border-radius: 24px; background: rgb(var(--sc-pop)); box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }
.sc-dialog-head { padding: 14px 20px; border-bottom: 1px solid rgb(var(--sc-ink) / 0.06); color: rgb(var(--sc-ink)); font-size: 14px; font-weight: 700; }
.sc-dialog-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; }
.sc-dialog-body label { margin: 0; color: rgb(var(--sc-ink-2)); font-size: 12px; font-weight: 500; }
.sc-dialog-foot { display: flex; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid rgb(var(--sc-ink) / 0.06); }
.sc-btn { min-height: 0; padding: 8px 12px; border: 0; border-radius: 12px; background: none; box-shadow: inset 0 0 0 1px rgb(var(--sc-ink) / 0.14); color: rgb(var(--sc-ink-2)); font: inherit; font-size: 14px; cursor: pointer; }
.sc-btn.go { padding: 8px 16px; background: rgb(var(--sc-brand)); box-shadow: none; color: #fff; }
.sc-btn.go:hover { background: rgb(var(--sc-brand-strong)); }
.r1 { grid-row-start: 1; }
.r2 { grid-row-start: 2; }
.r3 { grid-row-start: 3; }
.r4 { grid-row-start: 4; }
.r5 { grid-row-start: 5; }
.r6 { grid-row-start: 6; }
.r7 { grid-row-start: 7; }
.r8 { grid-row-start: 8; }
.r9 { grid-row-start: 9; }
.r10 { grid-row-start: 10; }
.r11 { grid-row-start: 11; }
.r12 { grid-row-start: 12; }
.r13 { grid-row-start: 13; }
.r14 { grid-row-start: 14; }
.r15 { grid-row-start: 15; }
.r16 { grid-row-start: 16; }
.r17 { grid-row-start: 17; }
.r18 { grid-row-start: 18; }
.r19 { grid-row-start: 19; }
.r20 { grid-row-start: 20; }
.r21 { grid-row-start: 21; }
.r22 { grid-row-start: 22; }
.r23 { grid-row-start: 23; }
.r24 { grid-row-start: 24; }
.r25 { grid-row-start: 25; }
.r26 { grid-row-start: 26; }
.r27 { grid-row-start: 27; }
.r28 { grid-row-start: 28; }
.r29 { grid-row-start: 29; }
.r30 { grid-row-start: 30; }
.r31 { grid-row-start: 31; }
.r32 { grid-row-start: 32; }
.r33 { grid-row-start: 33; }
.r34 { grid-row-start: 34; }
.r35 { grid-row-start: 35; }
.r36 { grid-row-start: 36; }
.r37 { grid-row-start: 37; }
.r38 { grid-row-start: 38; }
.r39 { grid-row-start: 39; }
.r40 { grid-row-start: 40; }
.r41 { grid-row-start: 41; }
.r42 { grid-row-start: 42; }
.r43 { grid-row-start: 43; }
.r44 { grid-row-start: 44; }
.r45 { grid-row-start: 45; }
.r46 { grid-row-start: 46; }
.r47 { grid-row-start: 47; }
.r48 { grid-row-start: 48; }
.r49 { grid-row-start: 49; }
.r50 { grid-row-start: 50; }
.r51 { grid-row-start: 51; }
.r52 { grid-row-start: 52; }
.r53 { grid-row-start: 53; }
.r54 { grid-row-start: 54; }
.r55 { grid-row-start: 55; }
.r56 { grid-row-start: 56; }
.s1 { grid-row-end: span 1; }
.s2 { grid-row-end: span 2; }
.s3 { grid-row-end: span 3; }
.s4 { grid-row-end: span 4; }
.s5 { grid-row-end: span 5; }
.s6 { grid-row-end: span 6; }
.s7 { grid-row-end: span 7; }
.s8 { grid-row-end: span 8; }
.s9 { grid-row-end: span 9; }
.s10 { grid-row-end: span 10; }
.s11 { grid-row-end: span 11; }
.s12 { grid-row-end: span 12; }
.s13 { grid-row-end: span 13; }
.s14 { grid-row-end: span 14; }
.s15 { grid-row-end: span 15; }
.s16 { grid-row-end: span 16; }
.s17 { grid-row-end: span 17; }
.s18 { grid-row-end: span 18; }
.s19 { grid-row-end: span 19; }
.s20 { grid-row-end: span 20; }
.s21 { grid-row-end: span 21; }
.s22 { grid-row-end: span 22; }
.s23 { grid-row-end: span 23; }
.s24 { grid-row-end: span 24; }
.s25 { grid-row-end: span 25; }
.s26 { grid-row-end: span 26; }
.s27 { grid-row-end: span 27; }
.s28 { grid-row-end: span 28; }
.s29 { grid-row-end: span 29; }
.s30 { grid-row-end: span 30; }
.s31 { grid-row-end: span 31; }
.s32 { grid-row-end: span 32; }
.s33 { grid-row-end: span 33; }
.s34 { grid-row-end: span 34; }
.s35 { grid-row-end: span 35; }
.s36 { grid-row-end: span 36; }
.s37 { grid-row-end: span 37; }
.s38 { grid-row-end: span 38; }
.s39 { grid-row-end: span 39; }
.s40 { grid-row-end: span 40; }
.s41 { grid-row-end: span 41; }
.s42 { grid-row-end: span 42; }
.s43 { grid-row-end: span 43; }
.s44 { grid-row-end: span 44; }
.s45 { grid-row-end: span 45; }
.s46 { grid-row-end: span 46; }
.s47 { grid-row-end: span 47; }
.s48 { grid-row-end: span 48; }
.s49 { grid-row-end: span 49; }
.s50 { grid-row-end: span 50; }
.s51 { grid-row-end: span 51; }
.s52 { grid-row-end: span 52; }
.s53 { grid-row-end: span 53; }
.s54 { grid-row-end: span 54; }
.s55 { grid-row-end: span 55; }
.s56 { grid-row-end: span 56; }