/* Fatia B — Trabalho: espaço de trabalho da tarefa, leitor, anotações, horas. Só tokens (tokens.css). */

/* ── Página larga do espaço de trabalho ── */
.page.page-workspace { max-width: 1440px; gap: var(--s-3); padding-top: var(--s-3); }
@media (min-width: 768px) { .page.page-workspace { padding: var(--s-4) var(--s-6) var(--s-8); } }
.ws { display: grid; gap: var(--s-3); min-width: 0; }

/* Barra fina: ← · título → entregável · prazo · contador */
.ws-bar { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.ws-back { flex: none; }
.ws-heading { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-task-title { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-task-meta { color: var(--muted); font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-task-meta .pill { vertical-align: middle; }
.ws-counter { flex: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 36px; padding: 0 var(--s-3);
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 600;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-counter .icon { width: 18px; height: 18px; color: var(--muted); }
.ws-note { display: flex; align-items: center; gap: var(--s-2); color: var(--muted); font-size: var(--fs-sm); }
.ws-note .icon { width: 18px; height: 18px; }
.is-late { color: var(--bad); font-weight: 600; }
@media (max-width: 767px) {
  .ws-task-meta { display: none; }
  .ws-task-title { font-size: var(--fs-md); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ws-counter { padding: 0 var(--s-3); }
  .ws-counter-suffix { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Abas de documento */
.ws-frame { display: grid; gap: var(--s-3); min-width: 0; }
.doc-tabs-row { display: flex; align-items: flex-end; gap: var(--s-2); min-width: 0; border-bottom: 1px solid var(--line); }
.doc-tabs-row .tabs { flex: 1; min-width: 0; border-bottom: 0; }
.doc-tab { flex: none; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.doc-tab.is-task-doc::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--link); margin-right: var(--s-2); flex: none; }
.doc-tabs-more { flex: none; margin-bottom: 4px; }
@media (max-width: 767px) { .doc-tabs-more span { display: none; } .doc-tabs-more { width: var(--tap); padding: 0; } }

/* ── Leitor + lateral ── */
.reader-layout { display: grid; gap: var(--s-4); min-width: 0; align-items: start; }
@media (min-width: 1024px) { .reader-layout { grid-template-columns: minmax(0, 1fr) 340px; } }
.reader { display: grid; gap: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); overflow: hidden; }
.reader-toolbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.reader-doc { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.reader-title { font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.reader-pager { display: flex; align-items: center; gap: var(--s-1); }
.reader-pages { min-width: 112px; text-align: center; font-size: var(--fs-sm); }
.reader-goto { display: flex; align-items: center; gap: var(--s-1); margin-left: var(--s-2); }
.reader-goto input { width: 64px; min-height: 36px; padding: 0 var(--s-2); font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--edge); border-radius: var(--r-md); }
.reader-goto input:focus-visible { outline: none; border-color: var(--link); box-shadow: var(--focus); }
.reader-tools { display: flex; align-items: center; gap: var(--s-2); }
.reader > .banner { margin: var(--s-3) var(--s-4) 0; }
.reader-mode { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-4); background: var(--link-soft); color: var(--ink);
  border-bottom: 1px solid var(--line); font-weight: 500; }
.reader-mode .icon { color: var(--link); }
.reader-mode span { flex: 1; }
.reader-viewport { position: relative; min-width: 0; padding: var(--s-4); background: var(--surface-2); display: grid; justify-items: center;
  align-content: start; gap: var(--s-3); min-height: 320px; }
.reader-status { color: var(--muted); font-size: var(--fs-sm); padding: var(--s-8) 0; }
.reader-status.is-error { color: var(--bad); }
.reader-page { position: relative; background: var(--surface); box-shadow: var(--shadow-2); max-width: 100%; }
.reader-pdf:not(.is-ready) .reader-page { min-height: 0; }
.reader-page canvas { display: block; max-width: 100%; }
.reader__layer { position: absolute; inset: 0; pointer-events: none; }
.reader-markers, #annotation-markers { position: absolute; inset: 0; display: block; }
.is-annotating .reader__layer { pointer-events: auto; cursor: crosshair; outline: 2px dashed var(--link); outline-offset: -2px; }
@media (max-width: 767px) {
  .reader-toolbar { padding: var(--s-2) var(--s-3); gap: var(--s-2); }
  .reader-doc { flex: 1 1 200px; }
  .reader-tools { order: 2; }
  .reader-pager { order: 3; flex: 1 1 100%; justify-content: space-between; }
  .reader-pages { min-width: 0; flex: 1; }
  .reader-goto { margin-left: 0; } /* "ir para a página" também no celular: documento de 94 páginas não se folheia */
  .reader-goto input { width: 56px; }
  .reader-annotate, .reader-tool-label { display: none; }
  .reader-viewport { padding: var(--s-2); }
}

/* Marcadores (ponto numerado; um <button> por anotação) */
.marker { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border-radius: 50% 50% 50% 4px; border: 2px solid var(--surface); background: var(--link); color: var(--on-ink); font: inherit;
  font-size: var(--fs-xs); font-weight: 700; cursor: pointer; pointer-events: auto; box-shadow: var(--shadow-2); }
.marker:focus-visible { outline: none; box-shadow: var(--focus); }
.marker-temp { background: var(--ink); animation: marker-pop var(--t-base) var(--ease-out); }
@keyframes marker-pop { from { transform: translate(-50%, -50%) scale(.4); opacity: 0; } }
.sheet .marker { position: static; transform: none; width: 22px; height: 22px; display: inline-grid; margin-left: var(--s-1); vertical-align: middle; border-width: 1px; }

/* Planilha (aba como tabela) */
.sheet-tabs { justify-self: stretch; }
.chip[aria-current="page"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.sheet-wrap { justify-self: stretch; max-width: 100%; max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); }
.sheet-wrap:focus-visible { outline: none; box-shadow: var(--focus); }
.sheet { border-collapse: collapse; font-size: var(--fs-sm); min-width: 100%; }
.sheet th, .sheet td { padding: 6px var(--s-3); border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); text-align: left; white-space: nowrap; }
.sheet th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); font-weight: 600; color: var(--ink); box-shadow: inset 0 -1px 0 var(--line); }
.sheet td.num, .sheet th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sheet td:has(.marker) { background: var(--link-soft); }
.is-annotating .sheet td, .is-annotating .sheet th { cursor: crosshair; }
.is-annotating .sheet td:hover { background: var(--link-soft); }
.sheet .is-anchor { outline: 2px solid var(--link); outline-offset: -2px; background: var(--link-soft); }

/* Lateral: anotações da página, ações da tarefa, "Terminei" no fim */
.reader-side { display: grid; gap: var(--s-4); align-content: start; min-width: 0; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-4); box-shadow: var(--shadow-1); }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.side-title { font-size: var(--fs-md); font-weight: 600; display: flex; align-items: center; gap: var(--s-2); }
.side-title .count, .notes-toggle .count { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.side-close { display: none; }
.side-notes { display: block; }
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.note { display: grid; gap: var(--s-1); padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
  transition: box-shadow var(--t-fast), border-color var(--t-fast); }
.note:focus-visible, .note.is-highlight { outline: none; border-color: var(--link); box-shadow: 0 0 0 3px var(--link-soft); }
.note-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-sm); }
.note-number { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; background: var(--link);
  color: var(--on-ink); font-size: var(--fs-xs); font-weight: 700; }
.note-body { overflow-wrap: anywhere; }
.note-meta { display: flex; align-items: center; gap: var(--s-1); color: var(--muted); font-size: var(--fs-sm); }
.note-meta .icon { width: 16px; height: 16px; }
.note-replies { list-style: none; margin: var(--s-1) 0 0; padding: 0 0 0 var(--s-2); display: grid; gap: var(--s-2); border-left: 2px solid var(--line); }
.note-replies li { display: flex; gap: var(--s-2); font-size: var(--fs-sm); }
.reply-arrow { color: var(--muted); }
.note-reply { justify-self: start; margin-left: calc(-1 * var(--s-3)); }
.note-form { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px solid var(--link); border-radius: var(--r-md); background: var(--surface); }
.note-form-title { font-size: var(--fs-md); font-weight: 600; }
.note-reply-form { border-color: var(--line); padding: var(--s-2); }
.note-form textarea { min-height: 88px !important; }

.side-actions { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.ws-actions { display: grid; gap: var(--s-3); }
.ws-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.ws-links li { display: flex; align-items: flex-start; gap: var(--s-2); }
.ws-links .icon { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.word-box { display: grid; gap: var(--s-2); }
.word-state { display: flex; gap: var(--s-2); font-size: var(--fs-sm); }
.word-state .icon { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 1px; }
.word-actions { display: grid; gap: var(--s-2); }
.word-box .button-to, .ws-finish .button-to { display: block; }
.btn-finish { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.btn-finish:hover { background: var(--ok-soft); }
.ws-done { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }

/* Celular e tablet: lateral vira gaveta que sobe de baixo; "+ Anotar" flutua */
.reader-mobile-bar { display: none; }
@media (max-width: 1023px) {
  .reader-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 150; max-height: 78dvh; overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: var(--shadow-3); transform: translateY(105%); visibility: hidden; transition: transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base);
    padding-bottom: calc(var(--s-6) + env(safe-area-inset-bottom)); }
  .reader-side.is-open { transform: none; visibility: visible; transition: transform var(--t-base) var(--ease-out); }
  .side-close { display: inline-flex; }
  .reader-mobile-bar { position: fixed; z-index: 120; left: var(--s-4); right: var(--s-4); bottom: calc(var(--bottomnav-h) + var(--s-3) + env(safe-area-inset-bottom));
    display: flex; justify-content: space-between; gap: var(--s-2); pointer-events: none; }
  .reader-mobile-bar .btn { pointer-events: auto; box-shadow: var(--shadow-2); border-radius: var(--r-pill); }
  .notes-toggle { background: var(--surface); }
  .ws { padding-bottom: 72px; }
  /* A planilha cabe entre a barra do topo e os botões flutuantes: com a página rolada até ela, nada fica coberto. */
  .sheet-wrap { max-height: calc(100dvh - var(--topbar-h) - var(--bottomnav-h) - 96px); padding-bottom: var(--s-2); }
  /* Colunas de texto quebram linha (largura menor) em vez de cortar "queda de potencial". */
  .sheet td:not(.num) { white-space: normal; min-width: 11ch; max-width: 16ch; overflow-wrap: break-word; }
}
@media (min-width: 1024px) { .reader-mobile-bar { display: none !important; } }

/* Faixa "Ainda está lendo?" */
.ws-idle .banner { align-items: center; }

/* ── Linha do tempo ── */
.ws-timeline { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); }
.tl-summary { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; }
.tl-summary > div { display: grid; gap: 2px; min-width: 120px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.tl-summary dt { font-size: var(--fs-xs); color: var(--muted); }
.tl-summary dd { margin: 0; font-size: var(--fs-lg); font-weight: 600; }
.tl-summary .tl-total { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.tl-summary .tl-total dt { color: inherit; opacity: .8; }
#task-timeline td .muted { display: block; font-size: var(--fs-sm); }
#task-timeline tr.is-muted td { color: var(--muted); }
.tl-label { overflow-wrap: anywhere; }

/* ── Lista de tarefas ── */
.task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.task-row { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.task-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.task-title { font-weight: 600; font-size: var(--fs-md); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.task-title:hover { text-decoration: underline; }
.task-meta { color: var(--muted); font-size: var(--fs-sm); }
.task-doc { display: flex; gap: var(--s-1); align-items: flex-start; font-size: var(--fs-sm); color: var(--muted); }
.task-doc .icon { width: 16px; height: 16px; margin-top: 2px; flex: none; }
.task-side { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.task-hh { display: inline-flex; align-items: center; gap: var(--s-1); color: var(--muted); font-size: var(--fs-sm); min-width: 64px; }
.task-hh .icon { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .task-row { flex-direction: column; align-items: stretch; gap: var(--s-3); padding: var(--s-4); }
  .task-side { justify-content: space-between; flex-wrap: wrap; }
  .task-side .btn { flex: 1 0 100%; }
}
.done-tasks summary { cursor: pointer; font-weight: 600; color: var(--muted); min-height: var(--tap); display: flex; align-items: center; }
.task-list-done .task-row { box-shadow: none; background: transparent; }
.home-tasks .list-main > a { white-space: normal; }

/* ── Minhas horas ── */
.weeks { display: grid; gap: var(--s-4); }
.week .card-head { flex-wrap: wrap; }
.week-sum { color: var(--muted); font-size: var(--fs-sm); }
.week-sum strong { color: var(--ink); }
.hours-list { list-style: none; margin: 0; padding: 0; display: grid; }
.hours-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding: var(--s-3) 0; border-top: 1px solid var(--line); }
.hours-row:first-child { border-top: 0; }
.hours-main { display: flex; gap: var(--s-3); align-items: baseline; flex: 1 1 320px; min-width: 0; }
.hours-value { min-width: 64px; font-weight: 600; font-variant-numeric: tabular-nums; }
.hours-label { min-width: 0; overflow-wrap: anywhere; }
.hours-sessions { flex: 1 1 100%; padding-left: calc(64px + var(--s-3)); font-size: var(--fs-sm); }
.hours-sessions summary { cursor: pointer; color: var(--link); min-height: 32px; display: inline-flex; align-items: center; }
.hours-sessions ul { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; gap: var(--s-1); }
.session-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-3); align-items: center; }
@media (max-width: 640px) {
  .hours-sessions { padding-left: 0; }
  .session-row { grid-template-columns: 1fr auto; }
  .session-row .muted { grid-column: 1 / -1; grid-row: 2; }
}
.people-chips { align-items: center; overflow-x: auto; flex-wrap: nowrap; padding-bottom: var(--s-1); }
.people-chips .hint { white-space: nowrap; }
.people-chips .chip { flex: none; white-space: nowrap; }
.people-chips { scrollbar-width: none; }
.approval-row { align-items: center; flex-wrap: wrap; }
.approval-actions { flex-wrap: wrap; }
.btn-approve { border-color: var(--ok); color: var(--ok); font-weight: 600; }
.btn-approve:hover { background: var(--ok-soft); }
@media (max-width: 640px) { .approval-actions { flex: 1 0 100%; justify-content: flex-end; } }
.transparency { display: flex; gap: var(--s-2); align-items: flex-start; max-width: 80ch; }
.transparency .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; }

/* ── Formulários da fatia, toasts e busca ── */
fieldset.field { border: 0; margin: 0; padding: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--s-1); }
.search-row { display: flex; gap: var(--s-2); }
.search-row input { flex: 1; }
.back-link { justify-self: start; }
.toast-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.toast-link { color: inherit; font-weight: 600; text-decoration: underline; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left; }
.toast-bridge { display: block; margin-top: var(--s-1); }

/* Itens de lista da fatia ocupam a largura toda (base.css limita li a 72ch para texto corrido). */
.task-row, .hours-row, .approval-row, .note, .session-row, .ws-links li, .home-tasks .list-item { max-width: none; }
turbo-frame#new-annotation:empty { display: none; }
.done-tasks summary { gap: var(--s-2); list-style: none; }
.done-tasks summary::-webkit-details-marker { display: none; }
.done-tasks summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--t-fast); }
.done-tasks[open] summary::before { transform: rotate(45deg); }
.reader-side:has(#new-annotation form) #notes-empty { display: none; }
@media (max-width: 767px) { .hide-mobile { display: none; } }
.people-chips-label { margin: 0 0 calc(-1 * var(--s-2)); }