/* DarkTask — componentes
   Um botão, um campo, um chip, uma aba, um cartão, uma linha, um estado
   vazio, um esqueleto, um diálogo, um toast. Cada módulo (dt-, dl-, sm-,
   surv-, dtf-) passa a usar estas classes; as antigas ficam até a migração
   terminar. Carrega por último de propósito. */

/* ---------------------------------------------------------------- Botão */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font: 500 var(--fs-md)/1 var(--font-ui);
  color: var(--text); background: var(--dt-toque);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease);
}
.btn:hover { background: var(--dt-toque-forte); }
.btn:active { transform: scale(.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-secondary { background: transparent; border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--dt-toque); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--dt-toque); color: var(--text); }
.btn-danger { background: transparent; color: var(--danger-text); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.btn-danger:hover { background: var(--danger-soft); color: var(--danger-text); }
.btn-danger.is-solid { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn-lg { min-height: 48px; padding: 0 22px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.btn-icon { padding: 0; width: 40px; min-width: 40px; }
.btn-icon.btn-sm { width: 32px; min-width: 32px; }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  color: var(--text); animation: dt-girar .8s linear infinite;
}
.btn-primary.is-loading::after { color: var(--on-accent); }
@keyframes dt-girar { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .btn, .btn-sm { min-height: var(--toque-min); }
  .btn-icon, .btn-icon.btn-sm { width: var(--toque-min); min-width: var(--toque-min); }
}

/* ---------------------------------------------------------------- Campo */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.field > label, .field-label { font: 500 var(--fs-sm)/1.3 var(--font-ui); color: var(--text-2); }
.field-control, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text);
  font: 400 var(--fs-md)/1.4 var(--font-ui);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.field textarea { min-height: 96px; resize: vertical; }
.field-control:focus-visible, .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  border-color: var(--accent-text);
}
.field-help { font-size: var(--fs-sm); color: var(--text-3); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--danger-text); }
.field.is-invalid .field-control, .field.is-invalid input, .field [aria-invalid="true"] { border-color: var(--danger) !important; }

/* ----------------------------------------------------------------- Chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  font: 500 var(--fs-xs)/1 var(--font-ui); white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip.is-accent { background: var(--accent-weak); color: var(--accent-text); }
.chip.is-danger { background: var(--danger-soft); color: var(--danger-text); }
.chip.is-ok { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok-text); }
.chip.is-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn-text); }

/* ----------------------------------------------------------------- Abas */
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs > [role="tab"], .tabs > button {
  flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; color: var(--text-2);
  font: 500 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
}
.tabs > [role="tab"]:hover, .tabs > button:hover { background: var(--dt-toque); color: var(--text); }
.tabs > [aria-selected="true"], .tabs > .is-active { background: var(--accent-weak); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* --------------------------------------------------------------- Cartão */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-4);
}
@media (min-width: 761px) { .card { padding: var(--sp-5); } }
.card-title { margin: 0 0 4px; font: 600 var(--fs-lg)/var(--lh-snug) var(--font-ui); color: var(--text); }
.card-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
.card.is-clickable { cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.card.is-clickable:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* ---------------------------------------------------------- Linha de lista */
.row {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 6px 8px 6px 4px;
  border-radius: var(--r-md);
}
.row:hover { background: var(--dt-toque); }
.row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.row-title { font: 500 var(--fs-md)/1.35 var(--font-ui); color: var(--text); overflow-wrap: anywhere; }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-xs); color: var(--text-3); }
.row.is-done .row-title { color: var(--text-3); text-decoration: line-through; }

/* ------------------------------------------------------- Caixa de marcar */
.check {
  appearance: none; -webkit-appearance: none; flex: none;
  width: 24px; height: 24px; border-radius: var(--r-sm);
  border: 2px solid var(--border-strong); background: transparent;
  display: inline-grid; place-items: center; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check:checked { background: var(--accent); border-color: var(--accent); }
.check:checked::after {
  content: ""; width: 12px; height: 7px; margin-top: -2px;
  border: 2px solid var(--on-accent); border-top: 0; border-right: 0;
  transform: rotate(-45deg);
}
.check-alvo { display: inline-grid; place-items: center; width: var(--toque-min); height: var(--toque-min); margin: -10px; }

/* --------------------------------------------------------- Estado vazio */
.empty {
  max-width: 360px; margin: var(--sp-6) auto; padding: var(--sp-5);
  text-align: center; color: var(--text-2);
}
.empty svg { width: 40px; height: 40px; color: var(--accent-text); margin-bottom: var(--sp-3); }
.empty-title { margin: 0 0 6px; font: 600 var(--fs-lg)/var(--lh-snug) var(--font-ui); color: var(--text); }
.empty p { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); }

/* ------------------------------------------------------------ Esqueleto */
.skeleton {
  border-radius: var(--r-sm); background: var(--surface-2);
  background-image: linear-gradient(90deg, transparent, var(--dt-toque), transparent);
  background-size: 200% 100%; animation: dt-esqueleto 1.4s var(--ease) infinite;
}
@keyframes dt-esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ------------------------------------------------------ Cabeçalho de tela */
.screen-head {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; margin: 0 0 var(--sp-4);
}
.screen-head h1 { margin: 0; font-size: var(--fs-2xl); line-height: 1.15; }
.screen-head .screen-count { font: 500 var(--fs-sm)/1 var(--font-mono); color: var(--text-3); padding-top: 6px; }
.screen-head .screen-actions { margin-left: auto; display: flex; gap: 8px; }
@media (max-width: 760px) {
  .screen-head { min-height: 48px; }
  .screen-head h1 { font-size: var(--fs-xl); }
}

/* ---------------------------------------------------------------- Toast */
.dt-toasts {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px;
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
.dt-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: var(--r-lg);
  background: var(--surface-3); color: var(--text);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
  font-size: var(--fs-sm); line-height: 1.4;
  animation: dt-toast-in var(--dur-base) var(--ease);
}
.dt-toast.is-leaving { animation: dt-toast-out var(--dur-base) var(--ease) forwards; }
.dt-toast-icon { flex: none; width: 20px; height: 20px; color: var(--accent-text); }
.dt-toast.is-warn .dt-toast-icon, .dt-toast.is-error .dt-toast-icon { color: var(--danger-text); }
.dt-toast.is-ok .dt-toast-icon { color: var(--ok-text); }
.dt-toast-text { flex: 1 1 auto; min-width: 0; }
.dt-toast-action {
  flex: none; min-height: 32px; padding: 0 10px; border-radius: var(--r-sm);
  border: 0; background: var(--accent-weak); color: var(--accent-text);
  font: 600 var(--fs-sm)/1 var(--font-ui); cursor: pointer;
}
.dt-toast-close {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center;
}
.dt-toast-close:hover { background: var(--dt-toque); color: var(--text); }
@keyframes dt-toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes dt-toast-out { to { opacity: 0; transform: translateY(8px); } }
@media (max-width: 760px) {
  .dt-toasts { left: 12px; right: 12px; width: auto; bottom: calc(var(--dt-mobile-bar-space, 74px) + 12px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------- Diálogo */
.dt-system-dialog-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: var(--scrim) !important;
  backdrop-filter: blur(var(--dt-backdrop-blur)); -webkit-backdrop-filter: blur(var(--dt-backdrop-blur));
}
.dt-system-dialog {
  width: min(440px, 100%); padding: var(--sp-5);
  background: var(--surface-3) !important; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow-2);
  animation: dt-toast-in var(--dur-base) var(--ease);
}
.dt-system-dialog header h2 { margin: 0 0 8px; font-size: var(--fs-xl); }
.dt-system-dialog-message { margin: 0 0 var(--sp-5); color: var(--text-2); font-size: var(--fs-md); line-height: 1.5; white-space: pre-line; }
.dt-system-dialog footer { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.dt-system-dialog footer button {
  min-height: 44px; padding: 0 18px; border-radius: var(--r-md);
  font: 500 var(--fs-md)/1 var(--font-ui); cursor: pointer;
}
.dt-system-dialog-cancel { background: transparent; border: 1px solid var(--border-strong); color: var(--text); }
.dt-system-dialog-cancel:hover { background: var(--dt-toque); }
.dt-system-dialog-confirm { background: var(--accent); border: 1px solid var(--accent); color: var(--on-accent); }
.dt-system-dialog.is-danger .dt-system-dialog-confirm { background: var(--danger); border-color: var(--danger); color: #fff; }
@media (max-width: 760px) {
  .dt-system-dialog-backdrop { align-items: flex-end; padding: 0; }
  .dt-system-dialog { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); }
  .dt-system-dialog footer button { flex: 1 1 auto; }
}

/* ---------------------------------------------- Modais do índice (folha) */
@media (max-width: 760px) {
  .dt-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
  .dt-modal-backdrop > form, .dt-modal-backdrop > .dt-floating-modal, .dt-modal-backdrop > .dt-view-modal, .dt-settings-modal {
    width: 100% !important; max-width: none !important;
    border-radius: var(--r-xl) var(--r-xl) 0 0 !important;
    max-height: calc(100dvh - 24px) !important;
  }
}

/* ---------------------------------------------------- "Quando" da tarefa */
.dt-task-quando { margin-bottom: 18px; }
.dt-task-quando-linha { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dt-task-quando-campo, .dt-task-quando-campo select {
  min-height: 44px; padding: 8px 12px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text);
  font: 400 var(--fs-sm)/1.2 var(--font-ui);
}
input.dt-task-quando-campo[type="date"] { flex: 1 1 150px; }
input.dt-task-quando-campo[type="time"] { flex: 0 0 112px; }
sc-raw-select.dt-task-quando-campo { flex: 1 1 140px; padding: 0; border: 0; background: transparent; min-height: 0; }
sc-raw-select.dt-task-quando-campo select { width: 100%; }
.dt-card-topo .dt-quando { margin-left: auto; }

/* ======================================================================
   Remodelagem de 12/09/2026 — sobreposições sobre o desenho antigo
   ====================================================================== */

/* N-08: o hero de 200px vira um cabeçalho de 56px. A etiqueta, o parágrafo
   e a marca d'água saem; sobram título, contagem e ações. */
.dl-hero {
  display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 12px 18px !important;
  min-height: 56px; padding: 8px 0 14px !important; margin: 0 0 12px !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.dl-hero::after, .dl-hero .dl-eyebrow, .dl-hero-copy p { display: none !important; }
.dl-hero-copy { flex: 1 1 auto; min-width: 0; }
.dl-hero-copy h1, .dl-hero-copy h2 { margin: 0 !important; font: 600 var(--fs-2xl)/1.15 var(--font-ui) !important; letter-spacing: -.01em !important; }
.dl-hero-side { margin-left: auto; display: flex !important; align-items: center !important; gap: 10px !important; flex-wrap: wrap; }
.dl-hero-metric { min-width: 0 !important; padding: 0 12px 0 0 !important; border-right: 1px solid var(--border) !important; display: flex; align-items: baseline; gap: 6px; }
.dl-hero-metric strong { display: inline !important; font: 600 var(--fs-lg)/1 var(--font-mono) !important; }
.dl-hero-metric span { display: inline !important; margin: 0 !important; font-size: var(--fs-xs) !important; color: var(--text-3) !important; }
@media (max-width: 760px) {
  .dl-hero-copy h1, .dl-hero-copy h2 { font-size: var(--fs-xl) !important; }
  .dl-hero-side { width: 100%; margin-left: 0; }
}

/* P-03: a grade de cartões de tarefa vira lista de linhas. O título tem a
   linha inteira; a descrição fica para a tarefa aberta; as ações vão para a
   direita; código, projeto e "quando" formam a linha de apoio. */
.dt-task-grid { display: flex !important; flex-direction: column !important; gap: 6px !important; grid-template-columns: none !important; }
html body .dt-app-root .dt-task-card {
  display: flex !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 4px 12px !important; padding: 8px 10px 8px 12px !important;
  min-height: 0 !important; width: auto !important; min-width: 0 !important;
  border-radius: var(--r-md) !important; cursor: default !important;
  background: var(--surface-1) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html body .dt-app-root .dt-task-card:hover { background: var(--surface-2) !important; }
html body .dt-app-root .dt-task-card > .dt-card-topo { order: 3; flex: 1 1 100%; margin: 0 !important; gap: 10px; }
html body .dt-app-root .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer) { order: 1; flex: 1 1 60%; min-width: 0; }
html body .dt-app-root .dt-task-card > p { display: none !important; }
html body .dt-app-root .dt-task-card > .dt-task-footer { order: 2; flex: 0 0 auto; margin: 0 0 0 auto !important; padding: 0 !important; border: 0 !important; }
html body .dt-app-root .dt-task-card > .dt-task-footer > span[style*="flex:1"] { display: none; }
html body .dt-app-root .dt-task-card button[aria-label="Abrir a tarefa"] { font-size: var(--fs-md) !important; font-weight: 500 !important; line-height: 1.35 !important; }
.dt-darktasks-container .dt-task-grid { display: flex !important; flex-direction: column !important; overflow: visible !important; }
html body .dt-app-root .dt-darktasks-container .dt-task-card { width: auto !important; min-width: 0 !important; }

/* P-05: excluir não brilha em vermelho na linha do cartão; só no ponteiro. */
.dt-env-card-action-danger { color: var(--text-3) !important; background: transparent !important; border-color: transparent !important; }
.dt-env-card-action-danger:hover, .dt-env-card-action-danger:focus-visible { color: var(--danger-text) !important; background: var(--danger-soft) !important; }

/* A-09: alvo mínimo de 44px em todo controle de ícone no celular. */
@media (max-width: 760px) {
  .dt-task-actions > button, .dt-project-actions > button, .dt-section-actions > button,
  .dt-env-card-action, .dt-env-open-actions > button, .dt-timeline-action, .dl-btn-status, .dl-icon-button,
  .dt-media-play-toggle, .dt-vol-mute, .dt-audio-btn, .dt-supertask-form-toggle {
    min-width: 44px !important; min-height: 44px !important;
  }
  .dt-task-actions > button, .dt-project-actions > button, .dt-env-card-action { width: 44px !important; height: 44px !important; }
}

/* P-03 (ajuste): o título toma o que sobra na linha; assinatura e anexos
   descem para a linha de apoio, à esquerda e pequenos. */
html body .dt-app-root .dt-task-card > div:nth-child(2) { order: 1 !important; flex: 1 1 0 !important; min-width: 0; }
html body .dt-app-root .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):not(:nth-child(2)) {
  order: 4 !important; flex: 1 1 100% !important; justify-content: flex-start !important; gap: 8px !important; margin: 0 !important;
}
html body .dt-app-root .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):not(:nth-child(2)):empty { display: none !important; }
html body .dt-app-root .dt-task-card .dt-assinatura { margin: 0 !important; }
html body .dt-app-root .dt-task-card > .dt-task-footer { flex-wrap: nowrap !important; gap: 6px !important; }
html body .dt-app-root .dt-task-card > .dt-task-footer .dt-task-actions { gap: 4px !important; }
@media (max-width: 760px) {
  html body .dt-app-root .dt-task-card > .dt-task-footer { order: 5 !important; flex: 1 1 100% !important; margin: 4px 0 0 !important; justify-content: flex-end !important; }
}

/* N-03: fora do Hoje, a linha do tempo e a rádio viram uma faixa de uma
   linha que abre ao toque no cabeçalho. No Hoje o dock fica inteiro. */
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-timeline-dock .dt-timeline-scroll,
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-timeline-dock .dt-media-bar { display: none !important; }
html:not([data-dt-tela="hoje"]) .dt-timeline-dock .dt-timeline-head { cursor: pointer; }
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-timeline-dock .dt-timeline-head { margin-bottom: 0 !important; }
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-timeline-dock .dt-timeline-inner { padding-top: 6px !important; padding-bottom: 6px !important; }
html:not([data-dt-tela="hoje"]) .dt-timeline-dock .dt-timeline-head::after {
  content: ""; width: 8px; height: 8px; margin-left: 6px; flex: none;
  border-left: 2px solid var(--text-3); border-top: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(3px); transition: transform var(--dur-fast) var(--ease);
}
html:not([data-dt-tela="hoje"])[data-dt-dock="aberto"] .dt-timeline-dock .dt-timeline-head::after { transform: rotate(225deg) translateY(-2px); }
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-app-root { padding-bottom: 72px !important; }
html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-page-tail footer { padding-bottom: 56px !important; }
@media (max-width: 900px) {
  html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-app-root { padding-bottom: calc(var(--dt-mobile-bar-space, 74px) + 64px + env(safe-area-inset-bottom)) !important; }
  html:not([data-dt-tela="hoje"]):not([data-dt-dock="aberto"]) .dt-page-tail footer { padding-bottom: calc(var(--dt-mobile-bar-space, 74px) + 56px) !important; }
}

/* P-03 (ajuste 2): a linha ocupa a largura toda da lista. */
html body .dt-app-root .dt-task-grid { align-items: stretch !important; width: 100% !important; }
html body .dt-app-root .dt-task-card { width: 100% !important; max-width: none !important; align-self: stretch !important; box-sizing: border-box !important; }
html body .dt-app-root .dt-task-grid { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; }

/* P-03 (ajuste 3): as prioritárias também são linhas de largura inteira. */
html body .dt-app-root .dt-darktasks-container .dt-task-grid { align-items: stretch !important; }
html body .dt-app-root .dt-darktasks-container .dt-task-card { width: 100% !important; max-width: none !important; }

/* M-03: no celular os quatro atalhos cabem numa grade 2×2 de 88px. */
@media (max-width: 760px) {
  .dtf-shortcut-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .dtf-shortcut { min-height: 88px !important; padding: 12px !important; gap: 6px !important; }
  .dtf-shortcut .dtf-shortcut-desc, .dtf-shortcut small, .dtf-shortcut p { display: none !important; }
}
@media (max-width: 760px) {
  .dtf-shortcut > span:not(.dtf-shortcut-icon) { display: none !important; }
  .dtf-shortcut strong { font-size: var(--fs-sm) !important; }
}

/* P-03 (ajuste 4): tudo alinhado à esquerda; o título cresce de verdade. */
html body .dt-app-root .dt-task-card { justify-content: flex-start !important; text-align: left !important; align-content: flex-start !important; }
html body .dt-app-root .dt-task-card > div:nth-child(2) { max-width: none !important; width: auto !important; justify-content: flex-start !important; }
html body .dt-app-root .dt-task-card > div:nth-child(2) > button { width: auto !important; flex: 1 1 auto !important; }
html body .dt-app-root .dt-task-card > .dt-card-topo { justify-content: flex-start !important; }
html body .dt-app-root .dt-task-card > .dt-task-footer { justify-content: flex-end !important; }
/* P-03 (ajuste 5): o estilo inline do cartão dizia flex-direction: column. */
html body .dt-app-root .dt-task-card { flex-direction: row !important; }
html body .dt-app-root .dt-task-card > div:not(.dt-card-topo):not(.dt-task-footer):not(:nth-child(2)) { width: 100% !important; }

/* K-02: nos cadernos, escrever é a ação principal; gravar por voz, a segunda.
   Quem está num lugar público ou sem microfone não pode ter a principal presa. */
html body .dt-app-root [data-dt-new-text-idea] { background: var(--accent) !important; color: var(--on-accent) !important; border-color: var(--accent) !important; }
html body .dt-app-root [data-dt-new-audio-note] { background: transparent !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important; }

/* L-02: o item da lista é uma linha, também no celular — status em fila,
   alvo de 44px, e não um cartão de 200px com quatro botões empilhados. */
@media (max-width: 760px) {
  #darklist-container .dl-item-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 10px !important; padding: 8px 10px !important; }
  #darklist-container .dl-item-corpo { flex: 1 1 60% !important; min-width: 0; }
  #darklist-container .dl-item-acoes { flex: 0 0 auto !important; margin-left: auto !important; }
  #darklist-container .dl-status-buttons { display: flex !important; grid-template-columns: none !important; width: auto !important; gap: 6px !important; }
  #darklist-container .dl-btn-status { min-width: 44px !important; min-height: 44px !important; padding: 0 10px !important; }
}

/* C-05: tamanho do texto */
.dt-zoom-options { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.dt-zoom-options [aria-checked="true"] { background: var(--accent-weak) !important; border-color: var(--accent) !important; color: var(--accent-text) !important; }
/* P-05: também no cabeçalho do ambiente aberto. */
html body .dt-app-root .dt-env-card-action-danger { color: var(--text-3) !important; background: transparent !important; border-color: transparent !important; }
html body .dt-app-root .dt-env-card-action-danger:hover, html body .dt-app-root .dt-env-card-action-danger:focus-visible { color: var(--danger-text) !important; background: var(--danger-soft) !important; }

/* M-01: barra inferior do celular — cinco lugares, 56px, alvo de 44px.
   O rodapé antigo (logotipo + Menu) só aparece como folha, quando aberto. */
.dt-barra-mobile { display: none; }
@media (max-width: 900px) {
  :root { --dt-mobile-bar-space: 64px; }
  .dt-barra-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-dock);
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    height: calc(56px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom);
    background: var(--surface-3); border-top: 1px solid var(--border);
    box-shadow: 0 -8px 24px -18px rgba(0, 0, 0, .6);
  }
  .dt-barra-mobile-item {
    all: unset; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 44px; color: var(--text-3); font: 500 11px/1 var(--font-ui); cursor: pointer; border-radius: var(--r-md);
  }
  .dt-barra-mobile-item span { font-size: 11px; }
  .dt-barra-mobile-item[aria-current="page"] { color: var(--accent-text); }
  .dt-barra-mobile-item:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }
  .dt-barra-mobile-item.is-destaque svg { width: 26px; height: 26px; color: var(--on-accent); background: var(--accent); border-radius: 50%; padding: 6px; box-sizing: content-box; margin-top: -14px; box-shadow: 0 6px 16px -6px var(--accent); }
  .dt-barra-mobile-item.is-destaque span { color: var(--text-2); }
  .dt-barra-mobile-tracos { width: 22px; height: 22px; display: inline-flex; flex-direction: column; justify-content: center; gap: 4px; }
  .dt-barra-mobile-tracos i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
  /* O rodapé antigo some quando a folha está fechada; a folha continua igual. */
  .dt-sidebar:not(.is-mobile-open) { display: none !important; }
  .dt-sidebar.is-mobile-open { z-index: calc(var(--z-dock) + 1); }
  .dt-timeline-dock { bottom: calc(var(--dt-mobile-bar-space) + 8px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 900px) {
  /* A folha do menu fica acima da faixa da linha do tempo. */
  .dt-sidebar.is-mobile-open { z-index: 39 !important; }
}