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

/* Tabs are links of the address: the lit one is the page of the address. On a phone they scroll sideways. */
.m-tabs { margin-bottom: 16px; -webkit-overflow-scrolling: touch; }
.m-tabs .w-tab { text-decoration: none; }
.m-tabs .w-tab[aria-current="page"] { color: var(--foreground); box-shadow: inset 0 -2px 0 var(--foreground); }

.m-title { overflow-wrap: anywhere; }
.m-state-line { margin: 12px 0 16px; }
.m-series-body { display: flex; flex-direction: column; gap: 16px; }

/* «О встрече»: the room link stays on one line and breaks only where it must. */
/* The address is one line ending in «…» (whole in its tip); the button beside it copies all of it. */
.m-room { display: flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.m-room span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-audience { display: flex; flex-direction: column; gap: 4px; }
.m-audience-change { align-self: flex-start; margin-top: 2px; }
.m-share-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* «Говорили»: the names take the width of the longest one, up to half the column, so «Говорящий 2» is not cut to
   «Говорящ…» (review 4.9); a longer one ends in «…» with its whole in the tip. The bars start at one edge. */
.w-talk { display: grid; grid-template-columns: fit-content(50%) minmax(40px, 1fr) auto; grid-auto-rows: 28px; align-items: center; column-gap: 10px; font-size: 13px; }
.w-talk-row { display: contents; }
.w-talk .w-talk-name { width: auto; min-width: 0; }

/* «Проекты» of the meeting (review 4.4): the proposal is one line above the summary with its answers on the right and
   its items folded under «Посмотреть»; «Отнести к…» under the summary starts at the left edge, not in the middle. */
.m-pj-proposals { margin-bottom: 16px; }
.m-pj-proposal { padding: 8px 12px; }
.m-pj-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.m-pj-line p { flex: 1 1 240px; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.m-pj-line .pj-proposal-acts { margin-top: 0; }
.m-pj-items > summary { display: inline-flex; align-items: center; min-height: 28px; font-size: 13px; color: var(--muted-foreground); cursor: pointer; list-style: none; }
.m-pj-items > summary::-webkit-details-marker { display: none; }
.m-pj-items[open] > summary { color: var(--foreground); }
.pj-meeting > .w-btn { align-self: flex-start; }

/* The cancel form in the popover of «⋯». */
.m-pop-padded .w-pop { padding: 12px; }
.m-cancel { display: flex; flex-direction: column; gap: 10px; }
.m-cancel-scope { display: flex; flex-direction: column; }
.m-cancel .w-actions { justify-content: flex-end; }
.m-cancel-what { display: flex; flex-direction: column; margin: -4px 0 0; min-width: 0; }
.m-cancel-title { font-weight: 500; overflow-wrap: anywhere; }
.m-cancel-what small, .m-cancel-notify small { display: block; font-size: 12px; line-height: 18px; color: var(--muted-foreground); }
.m-cancel-notify { align-items: flex-start; text-align: left; }
.m-cancel .w-btn-danger { border-color: var(--danger); background: var(--danger-bg); }
.m-delete-list { margin: 0; }

.m-processing .w-steps { margin: 8px 0; }

/* The line under an item of the summary reads as text (meeting review 4.5, 4.6): the deadline with its calendar, the
   topic and the status of the register as quiet words, an owner who left as a quiet note, not a warning. */
.w-item-due { display: inline-flex; align-items: center; gap: 4px; }
.w-item-due .w-i { width: 12px; height: 12px; }
.w-item-meta .w-item-tag { opacity: 1; }
.w-item-note { color: var(--muted-foreground); font-size: 12px; }
.w-item-meta .dc-item-status { color: var(--muted-foreground); font-size: 12px; text-decoration: none; }
.w-item-meta .dc-item-status:hover { color: var(--foreground); text-decoration: underline; text-underline-offset: 2px; }
.w-block > .dc-meeting { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 2px 0 4px; padding: 0; border: 0; }
.w-block > .dc-meeting .dc-meeting-h { margin: 0; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }
/* «О встрече», the people and the access slot after the call stand apart like the cards of the side column. */
.m-page .w-about-wrap { display: flex; flex-direction: column; gap: 24px; }

/* A stretch of the call missing from the transcript, among its lines and above the summary. */
.m-gap, .m-gap-notice { display: flex; align-items: flex-start; gap: 8px; color: var(--muted-foreground); font-size: 13px; }
.m-gap { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--secondary); }
.m-gap .w-i, .m-gap-notice .w-i { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; }

/* WP21: the form of the export in the popover of «⋯». */
.m-export { display: flex; flex-direction: column; gap: 10px; }
.m-export .w-seg-full { margin: 0; }
.m-export .w-bar-run { margin-top: 0; }
.m-export .w-textarea { font-size: 13px; line-height: 20px; }
.m-export .w-actions { justify-content: flex-end; }

/* WP29: the chapters beside the lines, the band of the corrected lines, a line as a field, «изменено» with what was
   recognized, the marks of the chapters on the scrubber. */
.m-band { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; padding: 10px 12px; border-radius: 12px; background: var(--late-bg); color: var(--late); font-size: 13px; line-height: 20px; }
.m-band > .w-i { flex-shrink: 0; width: 16px; height: 16px; }
.m-band > span:not(.m-band-acts) { flex: 1 1 260px; min-width: 0; }
.m-band-acts { display: flex; gap: 6px; }
.m-band .w-btn-ghost { color: inherit; }
.m-tlayout.has-chapters { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 24px; }
.m-chapters { position: sticky; top: 16px; align-self: start; }
.m-chapters .w-menu-label { padding-left: 0; }
.m-ch-list { display: flex; flex-direction: column; gap: 2px; }
.m-ch { display: flex; align-items: baseline; gap: 8px; width: 100%; min-height: 36px; padding: 6px 8px; margin-left: -8px; border-radius: 10px; background: transparent; color: var(--body); font-size: 13px; line-height: 18px; text-align: left; }
.m-ch:hover { background: var(--hover); color: var(--foreground); }
.m-ch.is-on { background: var(--secondary); color: var(--foreground); font-weight: 500; }
.m-ch-t { flex-shrink: 0; width: 38px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; font-weight: 400; }
.m-ch-name { min-width: 0; overflow-wrap: anywhere; }
.w-line-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.m-line-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.m-line-form .w-textarea { font-size: 14px; line-height: 22px; }
.m-line-form-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.m-line-hint { font-size: 12px; color: var(--muted-foreground); }
.m-line-conflict { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--late-bg); color: var(--late); font-size: 13px; line-height: 20px; }
.m-line-conflict p { flex: 1 1 260px; margin: 0; overflow-wrap: anywhere; }
.m-line-edited { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-size: 12px; color: var(--muted-foreground); }
.m-line-orig { padding: 0; background: transparent; font-size: 12px; color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
.m-line-orig:hover { color: var(--foreground); }
.m-line-hist { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--sunken); font-size: 13px; line-height: 20px; color: var(--body); }
.m-line-hist p { margin: 0 0 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.m-phone-note { display: none; }
.m-seek { position: relative; }
.m-ch-marks { position: absolute; inset: 0; pointer-events: none; }
.m-ch-mark { position: absolute; top: 4px; width: 6px; height: 8px; margin-left: -3px; padding: 0; border-radius: 2px; background: var(--w-player-muted); pointer-events: auto; }
.m-ch-mark:hover, .m-ch-mark:focus-visible { background: var(--w-player-fg); }
/* «Отправить итоги» and «История отправок» (D-02, D-03): the side sheet of the meeting page. */
.m-undelivered { color: var(--danger); }
.sd-sec { margin-top: 20px; }
.sd-sec:first-child { margin-top: 0; }
.sd-sec > .w-h3 { margin: 0 0 6px; }
.sd-sec > .w-h3 label { font: inherit; color: inherit; }
.sd-sec > .w-note, .sd-sec > .w-field-error { margin: 6px 0 0; }
.sd-checks { display: flex; flex-direction: column; gap: 2px; }
.sd-check { width: 100%; min-height: 40px; padding: 4px 0; }
.sd-check-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sd-check-copy b { font-weight: 500; overflow-wrap: anywhere; }
.sd-check-copy small { font-size: 12px; line-height: 18px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.sd-add { margin-top: 8px; }
.sd-note { width: 100%; min-height: 72px; height: auto; padding-block: 9px; resize: vertical; field-sizing: content; }
.sd-address { display: flex; gap: 8px; margin-top: 8px; }
.sd-address .w-input { flex: 1; min-width: 0; }
.sd-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sd-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; padding: 6px 8px; margin: 0 -8px; border-radius: 10px; }
.sd-row:focus { outline: 2px solid var(--ring); outline-offset: 0; }
.sd-who { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; }
.sd-who b { font-weight: 500; overflow-wrap: anywhere; }
.sd-who small { font-size: 12px; line-height: 18px; color: var(--muted-foreground); overflow-wrap: anywhere; }
.sd-who .sd-status.is-ok { color: var(--success); }
.sd-who .sd-status.is-bad { color: var(--danger); }
.sd-tag { align-self: flex-start; margin: 2px 0; padding: 0 6px; border-radius: 6px; background: var(--sunken); font-size: 11px; line-height: 18px; color: var(--muted-foreground); }
.sd-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--body); }
.sd-empty p { margin: 0; }
.sd-hint { margin-right: auto; align-self: center; font-size: 13px; line-height: 20px; color: var(--muted-foreground); }

@media (max-width: 1100px) {
  .m-tlayout.has-chapters { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .m-chapters { position: static; }
  .m-ch-list { flex-direction: row; overflow-x: auto; gap: 6px; scrollbar-width: none; padding-bottom: 2px; }
  .m-ch { flex-shrink: 0; width: auto; margin-left: 0; border: 1px solid var(--border); }
  .m-ch-name { white-space: nowrap; }
}

@media (max-width: 760px) {
  .m-tabs { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .m-ch { min-height: 44px; }
  .m-band-acts .w-btn { height: 40px; }
  .m-phone-note { display: block; margin-top: 12px; font-size: 13px; color: var(--muted-foreground); }
  .sd-check { min-height: 44px; }
  .sd .w-sheet-foot { flex-wrap: wrap; }
  .sd-hint { flex-basis: 100%; }
  /* A finger needs 44 px (review 10.1): the tick of a task, the moments and the small links of the page keep their
     look and take a finger past their edges, the way app.css does it for .w-btn, .w-ib and .w-back. */
  .m-page :where(.w-taskbox, .w-moment, .w-link) { position: relative; }
  .m-page .w-taskbox::before, .m-page .w-moment::before, .m-page .w-link::before { content: ""; position: absolute; }
  .m-page .w-taskbox::before { inset: -13px; }
  .m-page .w-moment::before { inset: -11px 0; }
  .m-page .w-link::before { inset: -12px 0; }
}