/* ГризлиТаск v2: Russian date/time picker, slimmer task card («Ещё»), contact picker, desktop side panel,
   compact «Дисциплина выкл», subtle motion. Yandex style: light, big rounded cards, honey #FFCC33. */
#tm-root { --tm-honey: #FFCC33; --tm-ease: cubic-bezier(.2, .8, .2, 1); }

/* tab bar: long names fit */
#tm-root .tm-tab span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 420px) { #tm-root .tm-tab span { font-size: 10.5px; letter-spacing: -.01em; } }

/* date/time button */
#tm-root .tm-rp-btn { margin-left: auto; min-height: 36px; padding: 0 14px; border-radius: 12px; border: 0; background: var(--tm-surface-2, #F2F3F5); color: var(--tm-text, #21201c); font: inherit; font-weight: 650; font-size: 14.5px; cursor: pointer; transition: background .15s, transform .12s; white-space: nowrap; }
#tm-root .tm-rp-btn.is-empty { color: var(--tm-text-3, #8a8f98); font-weight: 550; }
#tm-root .tm-rp-btn:active { transform: scale(.97); }
#tm-root .tm-rp-btn:disabled { opacity: .5; }
#tm-root .tm-field .tm-rp-btn + input[type="hidden"] + .tm-rp-btn { margin-left: 6px; }
#tm-root .tm-tool-date { position: relative; gap: 2px; }
#tm-root .tm-tool-date .tm-rp-btn { margin: 0; min-height: 0; padding: 0; background: transparent; font-size: inherit; font-weight: inherit; color: inherit; }
#tm-root .tm-tool-date .tm-rp-btn.is-empty { color: inherit; }

#tm-rp-host { position: absolute; inset: 0; z-index: 60; }
#tm-rp-host .tm-rp-scrim { position: absolute; inset: 0; z-index: 60; background: rgba(20, 20, 30, .28); opacity: 0; transition: opacity .18s; }
#tm-rp-host .tm-rp { position: absolute; z-index: 61; left: 0; right: 0; bottom: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); box-shadow: 0 -8px 40px rgba(0, 0, 0, .14); transform: translateY(100%); transition: transform .24s var(--tm-ease); }
#tm-rp-host.is-on .tm-rp-scrim { opacity: 1; }
#tm-rp-host.is-on .tm-rp { transform: none; }
#tm-rp-host:empty { display: none; }
#tm-rp-host .tm-rp-h { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
#tm-rp-host .tm-rp-h b { flex: 1; text-align: center; font-size: 17px; font-weight: 800; }
#tm-rp-host .tm-rp-nav, #tm-rp-host .tm-rp-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: #F2F3F5; font-size: 22px; line-height: 1; cursor: pointer; color: #21201c; }
#tm-rp-host .tm-rp-q { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
#tm-rp-host .tm-rp-q button, #tm-rp-host .tm-rp-foot button { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; background: #FFF4CC; color: #4d3d00; font: inherit; font-weight: 650; font-size: 14px; cursor: pointer; }
#tm-rp-host .tm-rp-foot { display: flex; justify-content: center; padding-top: 10px; }
#tm-rp-host .tm-rp-foot button { background: #F2F3F5; color: #4a5361; }
#tm-rp-host .tm-rp-wd, #tm-rp-host .tm-rp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
#tm-rp-host .tm-rp-wd span { font-size: 12px; color: #8a8f98; font-weight: 600; padding: 4px 0; }
#tm-rp-host .is-we { color: #c2410c; }
#tm-rp-host .tm-rp-grid button { aspect-ratio: 1; max-height: 46px; border: 0; border-radius: 14px; background: transparent; font: inherit; font-size: 15.5px; font-weight: 600; color: #21201c; cursor: pointer; transition: background .12s, transform .12s; }
#tm-rp-host .tm-rp-grid button.is-we { color: #c2410c; }
#tm-rp-host .tm-rp-grid button:hover { background: #F2F3F5; }
#tm-rp-host .tm-rp-grid button.is-today { box-shadow: inset 0 0 0 2px var(--tm-honey); }
#tm-rp-host .tm-rp-grid button.is-on { background: var(--tm-honey); color: #21201c; font-weight: 800; }
#tm-rp-host .tm-rp-grid button:active { transform: scale(.92); }
#tm-rp-host .tm-rp-times { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; max-height: 46vh; overflow-y: auto; }
#tm-rp-host .tm-rp-times button { border: 0; border-radius: 14px; padding: 11px 0; background: #F2F3F5; font: inherit; font-weight: 650; cursor: pointer; }
#tm-rp-host .tm-rp-times button.is-on { background: var(--tm-honey); }
#tm-rp-host .tm-rp-own { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#tm-rp-host .tm-rp-own span { color: #8a8f98; font-weight: 600; }
#tm-rp-host .tm-rp-tin { flex: 1; min-width: 0; height: 42px; border-radius: 12px; border: 0; background: #F2F3F5; padding: 0 12px; font: inherit; font-size: 16px; }
#tm-rp-host .tm-rp-ok { border: 0; border-radius: 12px; height: 42px; padding: 0 16px; background: var(--tm-honey); font: inherit; font-weight: 700; cursor: pointer; }
@media (min-width: 960px) {
  #tm-rp-host .tm-rp-scrim { background: transparent; }
  #tm-rp-host .tm-rp { left: auto; right: auto; bottom: auto; width: 330px; border-radius: 20px; padding: 14px; transform: translateY(-6px) scale(.98); opacity: 0; transition: transform .16s var(--tm-ease), opacity .16s; box-shadow: 0 12px 40px rgba(0, 0, 0, .16); }
  #tm-rp-host.is-on .tm-rp { transform: none; opacity: 1; }
}

/* slimmer task card */
#tm-root .tm-more { margin: 10px 0 4px; }
#tm-root .tm-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--tm-radius, 18px); background: var(--tm-surface, #fff); cursor: pointer; font-weight: 700; user-select: none; }
#tm-root .tm-more > summary::-webkit-details-marker { display: none; }
#tm-root .tm-more > summary svg { width: 18px; height: 18px; color: var(--tm-text-3); transition: transform .2s var(--tm-ease); }
#tm-root .tm-more[open] > summary svg { transform: rotate(45deg); }
#tm-root .tm-more > summary em { font-style: normal; font-weight: 500; color: var(--tm-text-3); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
#tm-root .tm-more[open] > summary { border-radius: var(--tm-radius, 18px) var(--tm-radius, 18px) 0 0; }
#tm-root .tm-more[open] > .tm-group { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; animation: tmFade .2s var(--tm-ease); }
#tm-root .tm-d-team { margin-top: 10px; }
#tm-root .tm-cpick { flex: none; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 12px; padding: 7px 10px; background: #FFF4CC; color: #4d3d00; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
#tm-root .tm-cpick svg { width: 14px !important; height: 14px !important; }

/* contact picker */
#tm-root .tm-cp { position: absolute; inset: 0; z-index: 40; }
#tm-root .tm-cp-scrim { position: absolute; inset: 0; background: rgba(20, 20, 30, .22); opacity: 0; transition: opacity .18s; }
#tm-root .tm-cp-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 78%; display: flex; flex-direction: column; background: #fff; border-radius: 24px 24px 0 0; padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); transform: translateY(100%); transition: transform .24s var(--tm-ease); box-shadow: 0 -8px 40px rgba(0, 0, 0, .14); }
#tm-root .tm-cp.is-on .tm-cp-scrim { opacity: 1; }
#tm-root .tm-cp.is-on .tm-cp-box { transform: none; }
#tm-root .tm-cp-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
#tm-root .tm-cp-h b { font-size: 18px; font-weight: 800; padding-left: 4px; }
#tm-root .tm-cp-q { height: 46px; border-radius: 14px; border: 0; background: #F2F3F5; padding: 0 14px; font: inherit; font-size: 16px; margin-bottom: 8px; }
#tm-root .tm-cp-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
#tm-root .tm-cp-list button { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border: 0; border-radius: 14px; background: transparent; text-align: left; font: inherit; cursor: pointer; }
#tm-root .tm-cp-list button:hover, #tm-root .tm-cp-list button.is-on { background: #FFF8E0; }
#tm-root .tm-cp-list span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#tm-root .tm-cp-list small { color: var(--tm-text-3); font-size: 12.5px; }
#tm-root .tm-cp-list em { font-style: normal; font-size: 12px; color: var(--tm-text-3); }
#tm-root .tm-cp-av { width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--tm-honey); display: grid; place-items: center; font-style: normal; font-weight: 800; color: #21201c; }

/* compact «Дисциплина выкл» */
#tm-root .tm-disc-open { min-height: 40px !important; margin: 4px 0 8px !important; padding: 0 6px 0 12px !important; border-radius: 999px !important; background: var(--tm-surface-2, #F2F3F5) !important; box-shadow: none !important; font-weight: 600 !important; font-size: 14px; color: var(--tm-text-2); width: auto !important; display: inline-flex !important; }
#tm-root .tm-disc-open svg { width: 16px !important; height: 16px !important; color: var(--tm-text-3) !important; }
#tm-root .tm-disc-open span { flex: none !important; }
#tm-root .tm-disc-open em { margin-left: 6px; padding: 5px 12px; border-radius: 999px; background: var(--tm-honey); color: #21201c !important; font-size: 13px; }

/* desktop: the task card is a side panel, the list stays visible */
@media (min-width: 960px) {
  #tm-root .tm-sheet { left: auto !important; right: 0; top: 0; bottom: 0; width: min(460px, 42vw); border-radius: 24px 0 0 24px !important; box-shadow: -12px 0 40px rgba(0, 0, 0, .10); }
  #tm-root .tm-sheet.is-in { transform: translateX(100%); }
  #tm-root .tm-sheet-h .grab { display: none; }
  #tm-root #tm-sheet-host .tm-scrim { background: rgba(20, 20, 30, .08); }
  #tm-root .tm-cp-box { left: 50%; right: auto; bottom: auto; top: 80px; width: calc(100% - 32px); transform: translate(-50%, 12px); opacity: 0; border-radius: 20px; transition: transform .18s var(--tm-ease), opacity .18s; max-height: calc(100% - 120px); }
  #tm-root .tm-cp.is-on .tm-cp-box { transform: translate(-50%, 0); opacity: 1; }
}

/* subtle motion */
@keyframes tmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes tmPop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
#tm-root .tm-task.is-done .tm-check { animation: tmPop .28s var(--tm-ease); }
#tm-root .tm-task .tm-title { transition: color .2s, opacity .2s; }
#tm-root .tm-fab { transition: transform .16s var(--tm-ease), box-shadow .16s; }
#tm-root .tm-fab:active { transform: scale(.92); }
#tm-root .tm-tab { transition: background .15s, color .15s; }
#tm-root .tm-quickd button, #tm-root .tm-seg button, #tm-root .tm-tool { transition: background .15s, transform .12s; }
#tm-root .tm-quickd button:active, #tm-root .tm-seg button:active, #tm-root .tm-tool:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { #tm-root *, #tm-rp-host * { animation: none !important; transition: none !important; } }
#tm-root #tm-d-client { flex: 1; min-width: 0; }
/* priority in one line; «Человек / Организация» aligned with the field text */
#tm-root .tm-field:has(> #tm-d-pri) { flex-wrap: nowrap; }
#tm-root .tm-field:has(> #tm-d-pri) > .lab { flex: 1 1 auto; }
#tm-root .tm-field > #tm-d-pri { flex: none; flex-wrap: nowrap; }
#tm-root #tm-d-ckind { padding: 2px 16px 10px 52px; }
#tm-root #tm-d-ckind + .tm-quickd, #tm-root #tm-d-clients { padding-left: 52px; }