/* Стили «Сегодня». Владелец — по карте слотов 00-plan §4; цвета только из theme.css. */

/* ---------- The page: one column, two from 1240 px when the right column has blocks ---------- */
.w-home.td-page { max-width: 760px; margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); }
.td-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.td-title { margin: 0; font-size: 34px; line-height: 40px; font-weight: 550; letter-spacing: -.03em; }
.td-date { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.td-head-acts { display: flex; align-items: center; gap: 8px; }
.td-loading { margin-top: 24px; color: var(--muted-foreground); }
.td-lead { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-top: 20px; }
.td-lead .w-state { margin: 0; }
.td-rail { display: flex; flex-direction: column; gap: 36px; min-width: 0; margin-top: 36px; }
@media (min-width: 1240px) {
  .w-home.td-page:not(.is-solo) { max-width: none; grid-template-columns: minmax(0, 1fr) 320px; column-gap: 56px; grid-template-rows: auto auto auto auto 1fr; grid-template-areas: "head head" "invite invite" "day day" "lead rail" "list rail"; }
  .td-page:not(.is-solo) .td-head { grid-area: head; }
  .td-page:not(.is-solo) .td-invite { grid-area: invite; }
  .td-page:not(.is-solo) .td-day { grid-area: day; }
  .td-page:not(.is-solo) .td-lead { grid-area: lead; }
  .td-page:not(.is-solo) .td-rail { grid-area: rail; margin-top: 20px; }
  .td-page:not(.is-solo) .td-list { grid-area: list; }
}

/* ---------- Somebody calls (Р-19) ---------- */
.td-invite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; padding: 10px 12px 10px 16px; border: 1px solid var(--soon-border); border-radius: 14px; background: var(--soon-bg); color: var(--soon); font-size: 14px; line-height: 20px; font-weight: 500; }
.td-invite-sep { color: var(--muted-foreground); }
.td-invite .w-btn { margin-left: auto; }

/* ---------- The scale of the day: 9–18, a lane per overlap ---------- */
.td-scale { --lane-h: 14px; position: relative; height: calc(34px + var(--lanes) * var(--lane-h)); margin-top: 24px; }
.td-scale::before { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 1px; background: var(--border); }
.td-tick { position: absolute; left: var(--x); bottom: 13px; width: 1px; height: 7px; background: var(--border-strong); }
.td-tick small { position: absolute; left: 5px; top: 3px; font-size: 11px; line-height: 14px; color: var(--muted-foreground); }
.td-bars { position: absolute; left: 0; right: 0; top: 12px; bottom: 22px; }
.td-bar { position: absolute; left: var(--x); width: var(--w); min-width: 6px; top: calc(var(--lane) * var(--lane-h)); height: var(--lane-h); --bar: color-mix(in srgb, var(--foreground) 34%, transparent); }
.td-bar::before { content: ""; position: absolute; left: 0; right: 1px; top: 4px; height: 6px; border-radius: 3px; background: var(--bar); transition: background-color .14s; }
.td-bar-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.td-bar.is-next { --bar: var(--foreground); }
.td-bar.is-current { --bar: var(--soon); }
.td-bar.is-past { --bar: color-mix(in srgb, var(--foreground) 16%, transparent); }
.td-bar:hover, .td-bar:focus-visible { --bar: var(--foreground); }
/* A meeting cut by an end of the scale: its edge there is square, with a detached notch past it. */
.td-bar.is-cut-start::before { left: 5px; border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: -4px 0 0 -1px var(--bar); }
.td-bar.is-cut-end::before { right: 5px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 4px 0 0 -1px var(--bar); }
.td-bar::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 2px); z-index: 5; padding: 4px 8px; border-radius: 6px; background: var(--w-tip); color: var(--w-tip-fg); font-size: 12px; line-height: 16px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .1s; }
.td-bar.is-tip-end::after { left: auto; right: 0; }
.td-bar:hover::after, .td-bar:focus-visible::after { opacity: 1; }
.td-now { position: absolute; left: var(--x); top: 8px; bottom: 16px; width: 1px; background: var(--soon); pointer-events: none; }
.td-now small { position: absolute; left: 0; bottom: 100%; transform: translateX(-50%); font-size: 11px; line-height: 14px; font-weight: 500; color: var(--soon); }

/* ---------- The next meeting ---------- */
.td-next { --time-col: 148px; --col-gap: 28px; --pad: 28px; border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(180deg, var(--raised), var(--card)); box-shadow: var(--edge), var(--lift); overflow: hidden; }
.td-next-body { display: grid; grid-template-columns: var(--time-col) minmax(0, 1fr); column-gap: var(--col-gap); padding: var(--pad); }
.td-next-clock { display: block; margin-left: -2px; font-size: 54px; line-height: 54px; font-weight: 300; letter-spacing: -.045em; color: var(--foreground); }
.td-next-rel { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--muted-foreground); }
.td-next.is-soon .td-next-rel { color: var(--soon); }
.td-next-dot { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: var(--soon); }
.td-next.is-live .td-next-dot { animation: td-next-live 2.4s ease-in-out infinite; }
@keyframes td-next-live { 50% { opacity: .35; } }
.td-next-copy { min-width: 0; }
.td-next-title { display: block; max-width: 100%; font-size: 22px; line-height: 28px; font-weight: 560; letter-spacing: -.018em; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; text-wrap: balance; }
.td-next-title:hover { text-decoration: underline; text-decoration-color: var(--border-strong); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.td-next-meta { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--muted-foreground); }
.td-next-who { margin: 14px 0 0; font-size: 13px; line-height: 20px; color: var(--body); }
.td-next-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.td-next-acts .w-btn { height: 40px; padding: 0 18px; text-decoration: none; }
.td-next .w-btn-primary.td-next-cta { background: var(--soon-action); border-color: var(--soon-action); color: var(--soon-action-fg); }

/* ---------- «Дальше» ---------- */
.td-list { min-width: 0; margin-top: 28px; }
.td-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.td-list .w-day:first-of-type { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) { .td-next.is-live .td-next-dot { animation: none; } }

/* ---------- Phone, 390 px ---------- */
@media (max-width: 760px) {
  .td-title { font-size: 30px; line-height: 36px; }
  .td-head-acts { width: 100%; }
  .td-head-acts .w-btn { flex: 1; height: 44px; }
  .td-scale { --lane-h: 22px; margin-top: 20px; }
  .td-bar::before { top: 6px; height: 10px; border-radius: 4px; }
  .td-tick:not(.is-major) small { display: none; }
  .td-next { --pad: 20px; }
  .td-next-body { display: block; }
  .td-next-time { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 12px; }
  .td-next-clock { font-size: 44px; line-height: 48px; }
  .td-next-rel { margin-top: 0; }
  .td-next-title { font-size: 20px; line-height: 26px; }
  .td-next-acts .w-btn { flex: 1; height: 44px; }
  .td-invite .w-btn { height: 44px; }
  .td-rail { gap: 28px; margin-top: 28px; }
}

/* WP14: «Ждут вас» — what asks for the person's action, in the right column. What asks the same thing is one item:
   the request once, then a row for each thing it is about. */
.tw-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.tw-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; padding: 10px 0; }
.tw-item.is-group { grid-template-columns: 16px minmax(0, 1fr); }
.tw-icon { width: 16px; height: 16px; margin-top: 2px; color: var(--muted-foreground); }
.tw-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.tw-title { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--foreground); text-decoration: none; overflow-wrap: anywhere; text-wrap: pretty; }
a.tw-title:hover { text-decoration: underline; }
.tw-subject { max-width: 100%; color: var(--muted-foreground); text-decoration: none; overflow-wrap: anywhere; border-radius: 4px; }
.tw-subject:hover { color: var(--foreground); text-decoration: underline; }
.tw-detail { max-width: 100%; overflow-wrap: anywhere; }
.tw-acts { margin-top: 8px; }
.tw-hide { color: var(--muted-foreground); }
.tw-item:not(.is-group) .tw-hide { margin-top: -4px; }
.tw-more { margin-top: 4px; }
.tw-rows { list-style: none; margin: 0; padding: 0; width: 100%; }
.tw-row { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; }
.tw-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tw-row .tw-subject, .tw-row .tw-detail { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* The ring of a link that is cut short stays inside it: its own box would clip it. */
.tw .tw-subject:focus-visible { outline-offset: -2px; }
.tw-row .tw-go { flex: none; white-space: nowrap; text-decoration: none; }
/* The cross of a row is quiet until the row is pointed at or reached with the keyboard; a finger has no pointer. */
.tw-row .tw-hide { opacity: 0; }
.tw-row:hover .tw-hide, .tw-row:focus-within .tw-hide { opacity: 1; }
@media (hover: none) { .tw-row .tw-hide { opacity: 1; } }
@media (max-width: 760px) {
  /* A finger gets the whole 44 px of every control: the box itself, so rows one under another do not overlap targets. */
  .tw-row { min-height: 44px; }
  .tw .w-btn { height: 44px; }
  .tw .w-btn::before, .tw .w-ib::before { content: none; }
  .tw .w-ib { width: 44px; height: 44px; }
  .tw-more { min-height: 44px; }
  .tw-item:not(.is-group) .tw-hide { margin-top: -12px; }
}

/* WP28: «Из календаря» — the person's own calendar events of today, the last block of the right column. */
.td-cal-src { margin: 2px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.td-cal-stale, .td-cal-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.td-cal-stale > .w-i, .td-cal-offer > .w-i { flex-shrink: 0; width: 14px; height: 14px; }
.td-cal-offer { flex-wrap: nowrap; align-items: flex-start; margin: 0; }
.td-cal-offer > .w-i { margin-top: 3px; }
.td-cal-allday { margin: 10px 0 0; font-size: 13px; line-height: 20px; color: var(--body); overflow-wrap: anywhere; }
.td-cal-empty { margin: 8px 0 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
.td-cal-evs { display: flex; flex-direction: column; margin-top: 6px; }
.td-cal-evwrap { display: block; position: relative; }
.td-cal-ev { display: flex; align-items: flex-start; gap: 14px; width: calc(100% + 24px); min-height: 48px; padding: 6px 12px; margin: 0 -12px; border: 0; border-radius: 12px; background: transparent; text-align: left; color: var(--foreground); }
.td-cal-ev:hover { background: var(--hover); }
.td-cal-ev.is-past { color: var(--muted-foreground); }
.td-cal-time { width: 46px; flex-shrink: 0; font-size: 14px; line-height: 20px; }
.td-cal-time small { display: block; font-size: 13px; color: var(--muted-foreground); }
.td-cal-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.td-cal-title { display: flex; align-items: center; gap: 6px; max-width: 100%; font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-cal-ev.is-tentative .td-cal-title { font-style: italic; }
.td-cal-lock { flex-shrink: 0; width: 14px; height: 14px; color: var(--muted-foreground); }
.td-cal-clash { display: inline-flex; max-width: 100%; padding: 0 8px; border-radius: 10px; background: var(--warning-bg); color: var(--warning); font-size: 12px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-cal-pop { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; font-size: 13px; line-height: 20px; color: var(--body); }
.td-cal-pop b { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
.td-cal-pop small { color: var(--muted-foreground); font-size: 12px; line-height: 18px; }
.td-cal-link { display: flex; align-items: center; gap: 6px; color: var(--foreground); overflow-wrap: anywhere; }
.td-cal-link .w-i { flex-shrink: 0; width: 14px; height: 14px; color: var(--muted-foreground); }
.td-cal-link span { min-width: 0; }
.td-cal-clash-line { color: var(--warning); }
.td-cal-fold { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 10px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--secondary); color: var(--foreground); font-size: 14px; text-align: left; }
.td-cal-fold:hover { background: var(--hover); }
.td-cal-fold span { flex: 1; }
.td-cal-fold .w-i { color: var(--muted-foreground); }
.td-cal-more { margin-top: 4px; }
.td-cal-note { margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--muted-foreground); }