/* TKT-153 E06 «Uma tarefa de cada vez» (tickets#29): the task screen (Components/Pages/Simple/Tarefas.razor), from the client's
   sheet D16/DEC-57 of 29/10 and the prototype v3 (invoice-skill-build Interface/sibyla-registry-web/v3). One card: the eyebrow,
   the question, the consequence, the two documents side by side (stacked on a phone, the new one first), the comparison list,
   the big answers, the two text exits. Tokens from css/tokens.css. */

/* ---------- focus mode (the sheet's §3.2): today's side menu collapses to its rail while a task is on screen ----------
   Mirrors .sib-shell.nav-collapsed in tokens.css without touching the layout (the previous view). */
@media (min-width: 721px) {
  .sib-shell:has(.sib-task-focus) .sib-sidenav { width: 44px; padding: var(--sib-sp-4) 7px; overflow-x: hidden; }
  .sib-shell:has(.sib-task-focus) .sib-sidenav-toggle { margin: 0; transform: rotate(180deg); }
  .sib-shell:has(.sib-task-focus) .sib-sidenav > :not(.sib-sidenav-toggle) { display: none; }
}

/* The new frame (.sib-pf) keeps its side menu on a wide screen while a task is on screen (Miguel 04/11: collapsing it stretched the
   texts and buttons across the whole width); the prototype's focus mode (v3.css .v3.focus, ☰) stays only where the frame already
   hides the menu, at <= 860 px. Deviation recorded in docs/ui-paridade-v3-261103.md §7.3 (row 22), waiting for the T01-F OK. */

.sib-task { max-width: 880px; margin: 0 auto; padding: 8px 16px 32px; box-sizing: border-box; }
.sib-task-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 12px; color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-task-bar a { color: var(--sib-text-body); text-decoration: none; font-size: var(--sib-fs-body); }
.sib-task-bar a:hover { text-decoration: underline; }

.sib-task-card { background: var(--sib-surface); border: 1px solid var(--sib-line); border-radius: 14px; padding: 24px; box-shadow: 0 1px 2px rgba(32, 36, 42, .04); }
.sib-task-eyebrow { margin: 0 0 8px; font-size: var(--sib-fs-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-brand-ink); }
.sib-task h1 { margin: 0 0 8px; font-size: 26px; line-height: var(--sib-lh-tight); color: var(--sib-ink); }
.sib-task-lede { margin: 0 0 20px; color: var(--sib-text-body); font-size: 15px; }

/* the two documents: two columns on a desk, one on a phone with the new file first (it is first in the markup) */
.sib-task-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sib-task-side { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--sib-line); border-radius: 10px; background: var(--sib-surface-tint); }
.sib-task-side.is-new { border-color: var(--sib-brand-a28); }
.sib-task-side-label { font-size: var(--sib-fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-muted); }
.sib-task-file { font-size: 15px; color: var(--sib-ink); overflow-wrap: anywhere; }
.sib-task-arrival { color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-task-open { font-size: var(--sib-fs-sm); color: var(--sib-brand-ink); }

/* the comparison (T1): the field, the two readings, «Igual» in green / «Diferente» in amber */
.sib-task-compare { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.sib-task-compare li { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border: 1px solid var(--sib-line); border-radius: 8px; font-size: var(--sib-fs-body); }
.sib-task-field { color: var(--sib-muted); }
.sib-task-badge { justify-self: end; padding: 2px 10px; border-radius: 999px; font-size: var(--sib-fs-sm); font-weight: 600; white-space: nowrap; }
.sib-task-badge.is-equal { background: var(--sib-success-bg); color: var(--sib-success); border: 1px solid var(--sib-success-border); }
.sib-task-badge.is-different { background: var(--sib-warning-bg); color: var(--sib-warning); border: 1px solid var(--sib-warning-border); }
.sib-task-badge.is-unknown { background: var(--sib-pill-neutral-bg); color: var(--sib-muted); }

/* T2: the reading beside the file — the four essential fields, «Lido» in green / «Em falta» in amber */
.sib-task-read { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.sib-task-read li { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: var(--sib-fs-sm); }
.sib-task-read li.is-missing > span:nth-child(2) { color: var(--sib-muted); }
.sib-task-waiting { margin: 0 0 16px; padding: 10px 12px; border: 1px solid var(--sib-warning-border); border-radius: 8px; background: var(--sib-warning-bg); color: var(--sib-warning); }

/* T3: the possible companies beside the document, each with its reason */
.sib-task-cards { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.sib-task-cards li { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--sib-line); border-radius: 8px; background: var(--sib-surface); font-size: var(--sib-fs-sm); }
.sib-task-cards li strong { color: var(--sib-ink); font-size: var(--sib-fs-body); }
.sib-task-cards li span { color: var(--sib-muted); }

/* the answers: big buttons, the recommended one filled */
.sib-task-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.sib-task-answers.has-many { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sib-task-answers button { display: grid; gap: 4px; justify-items: center; padding: 16px 14px; border: 1px solid var(--sib-line-strong); border-radius: 10px; background: var(--sib-surface); color: var(--sib-ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; min-height: 56px; }
.sib-task-answers button:hover { border-color: var(--sib-brand); background: var(--sib-brand-tint-bg); }
.sib-task-answers button.is-recommended { background: var(--sib-brand); border-color: var(--sib-brand); color: #fff; }
.sib-task-answers button.is-recommended:hover { background: var(--sib-brand-dark); border-color: var(--sib-brand-dark); }
.sib-task-answers button[disabled] { opacity: .6; cursor: default; }
.sib-task-answers button small { font-size: var(--sib-fs-sm); font-weight: 400; opacity: .92; }

/* the exits: «Não sei — perguntar ao contabilista» on the left, «Decidir mais tarde» on the right, text only */
.sib-task-exits { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; }
.sib-task-exits button { padding: 0; border: 0; background: none; color: var(--sib-brand-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.sib-task-exits button.is-muted { color: var(--sib-muted); }
.sib-task-exits button[disabled] { opacity: .6; cursor: default; }

/* the states */
.sib-task-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--sib-danger-border); border-radius: 8px; background: var(--sib-danger-bg); color: var(--sib-danger); }
.sib-task-notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--sib-success-border); border-radius: 8px; background: var(--sib-success-bg); color: var(--sib-success); }
.sib-task-done { text-align: center; padding: 40px 24px; }
.sib-task-done .big { font-size: 28px; font-weight: 700; color: var(--sib-ink); margin-bottom: 6px; }
.sib-task-done .sib-task-lede { margin-bottom: 20px; }
.sib-task-skel { height: 14px; margin: 10px 0; border-radius: 6px; background: var(--sib-surface-track); }
/* the loading state's shapes (no inline styles in the page): a short line, the title, a long line, a document box, an answer */
.sib-task-skel.is-short { width: 30%; }
.sib-task-skel.is-title { width: 70%; height: 26px; }
.sib-task-skel.is-long { width: 85%; }
.sib-task-skel.is-box { height: 90px; }
.sib-task-skel.is-answer { height: 56px; }
.sib-task-card[aria-busy="true"] .sib-task-sides, .sib-task-card[aria-busy="true"] .sib-task-answers { margin-top: 12px; }

/* the Início block (ArgusInicio.razor, data-block="tasks"): one line and a «Decidir» per task */
.sib-home-tasks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.sib-home-tasks li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--sib-line); border-radius: 8px; background: var(--sib-surface-tint); }
.sib-home-tasks li > span { min-width: 0; overflow-wrap: anywhere; }
.sib-home-tasks li > a { flex: none; }
/* The sheet D16's urgency dot on the Início's lines (conformity §4 item 12). */
.sib-home-dot { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: middle; background: var(--sib-brand-ink); }
.sib-home-dot.late { background: #d08a00; }
.sib-home-dot.postponed { background: var(--sib-muted); }

@media (max-width: 720px) {
  .sib-task { padding: 4px 12px 24px; }
  .sib-task-card { padding: 16px; }
  .sib-task h1 { font-size: 22px; }
  .sib-task-sides, .sib-task-answers { grid-template-columns: minmax(0, 1fr); }
  .sib-task-compare li { grid-template-columns: minmax(0, 1fr) auto; }
  .sib-task-compare li > span:nth-child(2), .sib-task-compare li > span:nth-child(3) { grid-column: 1 / -1; color: var(--sib-text-body); }
  .sib-task-exits { flex-direction: column; align-items: stretch; text-align: center; }
}

/* «Retido para lançar» (Miguel 04/11): the hold zone under the two sides. */
.sib-task-hold { margin-top: 16px; }
.sib-task-hold p { margin: 0 0 12px; }

/* «Voltar a ler com uma indicação» (Miguel 04/11): the hint under the answers. */
.sib-task-reread { display: grid; gap: 12px; margin-top: 16px; }
.sib-task-reread textarea { width: 100%; box-sizing: border-box; }
.sib-task-reread-help { margin: 0; color: var(--sib-muted); font-size: var(--sib-fs-sm); }
.sib-task-reread-actions { display: flex; flex-wrap: wrap; gap: 12px; }