/*
 * Camada de layout da aplicação sobre painel.css (contrato visual).
 * Traduz os estilos inline dos componentes JSX do ZIP (shell.jsx, screens.jsx,
 * forms.jsx, flows-*.jsx) para classes responsivas. Usa somente tokens --pn-*.
 * Sem molduras de aparelho, barra de status 09:41 ou escala tipo Frame (B01/B13).
 */
html, body { margin: 0; }
body.pn { min-height: 100vh; }
.pn :where(button) { font-family: var(--pn-font); }
.pn :where(input, select, textarea) { font-family: var(--pn-font); }
.pn textarea.pn-input { height: auto; padding: 10px 14px; resize: vertical; line-height: 1.45; min-height: 88px; }
.pn select.pn-input { appearance: none; background-image: none; padding-right: 36px; }
.pn .pn-select { position: relative; display: block; }
.pn .pn-select > i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--pn-ink-3); pointer-events: none; }
.pn .pn-select > select { width: 100%; }
/* Vidro e barra lateral do painel.css misturados em sRGB: no Chromium, color-mix(in oklch, …, transparent)
 * perde o matiz e vira matiz 0 (vermelho), o que tingia as barras de navegação no modo escuro. */
:root:not([data-theme="dark"]) { --pn-glass: color-mix(in srgb, var(--pn-surface) 74%, transparent); --pn-sidebar: color-mix(in srgb, var(--pn-bg-2) 70%, transparent); }
[data-theme="dark"] { --pn-glass: color-mix(in srgb, var(--pn-bg) 80%, transparent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 8px; top: 8px; background: var(--pn-surface); padding: 8px 12px; border-radius: 10px; box-shadow: var(--pn-shadow-2); }
.wrap-anywhere { overflow-wrap: anywhere; word-break: break-word; }
.pre-line { white-space: pre-line; }
.ink2 { color: var(--pn-ink-2); }
.ink3 { color: var(--pn-ink-3); }
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899px) { .only-desktop { display: none !important; } }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .gap-36 { gap: 36px; }
.nowrap { white-space: nowrap; }
.mt-auto { margin-top: auto; } .ml-auto { margin-left: auto; }
.w-full { width: 100%; }

/* ---------------------------------------------------------------- shell */
.app { display: flex; min-height: 100vh; }
.app > .pn-sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.pn a.pn-nav-item, .pn a.pn-nav-item:hover { color: var(--pn-ink); text-decoration: none; }
.app-main { flex: 1; min-width: 0; }
.page { padding: 36px 40px 48px; display: flex; flex-direction: column; gap: 36px; max-width: 1120px; }
.page.page-form { padding: 28px 40px 56px; gap: 24px; }
.page.page-detail { padding: 24px 40px 48px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: inherit; }
.pn a.brand:hover { text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; background: oklch(0.25 0.015 230); flex: none; }
.brand-mark svg { display: block; }
.brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.brand-word { font-weight: 500; font-size: 19px; letter-spacing: -.02em; color: var(--pn-ink); line-height: 1; }
.brand-sub { font-size: 11px; font-weight: 500; color: var(--pn-ink-2); line-height: 1.2; }
.brand.lg .brand-mark { width: 34px; height: 34px; border-radius: 9px; }
.brand.lg .brand-word { font-size: 21px; }
.brand.lg .brand-sub { font-size: 11.5px; }
.me-card { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--pn-surface); box-shadow: var(--pn-shadow-1); color: var(--pn-ink); transition: box-shadow .2s; }
.pn a.me-card { color: var(--pn-ink); text-decoration: none; }
.pn a.me-card:hover { box-shadow: var(--pn-shadow-2); text-decoration: none; }
.me-card .me-name { font-weight: 600; font-size: 14px; }
.logout { margin-top: 8px; }
.logout button { all: unset; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--pn-ink-2); }
.logout button:hover { background: var(--pn-hover); }
.logout button:focus-visible { outline: 2px solid var(--pn-accent); }
.app-tabbar { display: none; }
.mobile-me { display: none; }

@media (max-width: 899px) {
  .app > .pn-sidebar { display: none; }
  .page, .page.page-form, .page.page-detail { padding: 8px 16px 0; gap: 28px; max-width: none; }
  .page.page-form, .page.page-detail { padding-top: 12px; gap: 24px; }
  .app-main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .app.no-tabbar .app-main { padding-bottom: 40px; }
  .app-tabbar { display: grid; position: fixed; z-index: 30; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .app.no-tabbar .app-tabbar { display: none; }
  .pn a.pn-tab, .pn a.pn-tab:hover { text-decoration: none; color: var(--pn-ink-3); }
  .pn a.pn-tab.is-active { color: var(--pn-accent); }
  .mobile-me { display: inline-flex; }
}
.pn-navbar { margin: 0; }
.mnav { display: none; }
@media (max-width: 899px) {
  .mnav { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; height: 44px; padding: 0 8px; background: var(--pn-glass); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6); }
  .mnav > .side { flex: 1; display: flex; min-width: 0; }
  .mnav > .side.end { justify-content: flex-end; }
  .mnav > .title { font-weight: 650; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
  .mnav .pn-btn { font-size: 16px; font-weight: 500; }
  .mnav .pn-btn.strong { font-weight: 650; }
}

/* page header */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head > .stack { min-width: 0; }
.page-head .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; flex-wrap: wrap; }
.crumbs i { font-size: 11px; color: var(--pn-ink-3); }
.crumbs a { font-weight: 500; }
.crumbs span { color: var(--pn-ink-2); }
.create-round { border-radius: 999px !important; width: 36px !important; height: 36px !important; font-size: 18px; }
@media (max-width: 899px) {
  .page-head { flex-wrap: nowrap; align-items: flex-end; padding-top: 8px; }
  .page-head .pn-t-large { font-size: 34px; }
}

/* ------------------------------------------------------------- sections */
.section-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 899px) {
  .section-tools { margin-left: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .section-tools .pn-seg { display: grid; width: 100%; }
  .pn-section-head.has-tools { flex-wrap: wrap; }
  .pn-section-head .pn-t-title2.mhead { font-size: 17px; font-weight: 600; }
}
.search-form { margin: 0; }
.search-form .pn-search { width: 240px; }
@media (max-width: 899px) { .search-form .pn-search { width: 100%; } }
.pn-seg a { all: unset; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 14px; font-family: var(--pn-font); font-size: 13px; font-weight: 500; color: var(--pn-ink-2); cursor: pointer; white-space: nowrap; }
.pn-seg a[aria-current="true"], .pn-seg a[aria-current="page"] { color: var(--pn-ink); font-weight: 600; }
.pn-seg a:focus-visible { outline: 2px solid var(--pn-accent); border-radius: 9px; }
.results-note { font-size: 13px; color: var(--pn-ink-2); margin: -4px 0 12px; }

/* project table (desktop grid → mobile stacked) */
.ptable { overflow: hidden; }
.ptable .phead, .ptable .prow { display: grid; grid-template-columns: minmax(0, 2.4fr) 160px 120px 160px 150px 16px; gap: 20px; padding: 14px 20px; }
.ptable .phead { padding: 12px 20px; border-bottom: 1px solid var(--pn-line-soft); }
.ptable .prow { color: inherit; text-decoration: none; }
.pn .ptable a.prow:hover { text-decoration: none; }
.prow .pname { color: var(--pn-ink); font-weight: 600; font-size: 15px; }
.prow .pdesc { display: none; }
.prow .pstart { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pn-ink-2); white-space: nowrap; }
.prow .m-meta { display: none; }
@media (max-width: 899px) {
  .ptable { box-shadow: var(--pn-shadow-1); border-radius: var(--pn-r-md); }
  .ptable .phead { display: none; }
  .ptable .prow { display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; }
  .prow .pmain { flex: 1; min-width: 0; gap: 6px; }
  .prow .pname { font-size: 16px; }
  .prow .pdesc { display: block; }
  .prow .pstart { display: none; }
  .prow .m-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .prow .d-cell { display: none; }
  .prow .pn-chev { margin-top: 4px; }
}
.prio-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 22px; padding: 0 7px; border-radius: 7px; background: var(--pn-gray-soft); font-size: 12px; font-weight: 600; color: var(--pn-ink-2); }
.leaders { display: flex; align-items: center; gap: 8px; min-width: 0; }
.leaders .names { font-size: 13px; min-width: 0; }
.leaders .names a { font-weight: 500; }
.leaders .names .sep { color: var(--pn-ink-3); }
.deadline { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.deadline.end { align-items: flex-end; }
.deadline .date { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pn-ink-2); white-space: nowrap; }
.deadline .date.late { color: var(--pn-red-ink); font-weight: 600; }
.deadline .date.soon { color: var(--pn-amber-ink); font-weight: 600; }
.deadline .date.none { color: var(--pn-ink-3); }
.empty-row { padding: 28px; text-align: center; }

/* empty / error state (flows-final) */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 40px 24px; }
.empty-state .ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--pn-bg-2); color: var(--pn-ink-2); font-size: 26px; }
.empty-state h3 { font-size: 17px; font-weight: 600; }
.empty-state p { font-size: 14px; color: var(--pn-ink-2); max-width: 46ch; }

/* ------------------------------------------------------------ detail */
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
@media (max-width: 899px) { .detail-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.info-row { justify-content: space-between; padding: 12px 20px; }
.info-row .lbl { display: flex; align-items: center; gap: 10px; color: var(--pn-ink-2); font-size: 14px; flex: none; }
.info-row .val { font-size: 15px; font-weight: 500; text-align: right; min-width: 0; }
@media (max-width: 899px) { .info-row { padding: 12px 16px; } }
.team-group-title { display: flex; align-items: center; gap: 8px; padding: 0 20px 6px; }
.team-group-title .pn-t-over { display: inline-flex; align-items: center; gap: 6px; }
.team-row { padding: 12px 20px; }
.team-row .hours-val { text-align: right; white-space: nowrap; }
.team-row .hours-val b { font-weight: 600; font-size: 15px; }
@media (max-width: 899px) { .team-row { padding: 12px 16px; } .team-group-title { padding: 0 16px 6px; } }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.person .txt { display: flex; flex-direction: column; min-width: 0; }
.person .nm { font-weight: 600; }
.pn a.person-name { font-weight: 600; color: var(--pn-accent-ink); }
.person .nm.gone { color: var(--pn-ink-3); }
.person .nm.orphan { color: var(--pn-ink); }
.action-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.action-tiles .pn-btn { height: 60px; flex-direction: column; gap: 3px; font-size: 12px; border-radius: 14px; }
.action-tiles .pn-btn i { font-size: 20px; }
.action-tiles.one { grid-template-columns: 1fr; }
.action-tiles .pn-btn.plain { background: var(--pn-surface); color: var(--pn-ink); box-shadow: var(--pn-shadow-1); }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.timeline .pn-track > span { background: linear-gradient(90deg, var(--pn-amber) 0%, oklch(0.7 0.16 55) 100%); }
.timeline.ok .pn-track > span { background: linear-gradient(90deg, var(--pn-green) 0%, oklch(0.55 0.11 180) 100%); }
.timeline.late .pn-track > span { background: linear-gradient(90deg, var(--pn-red) 0%, oklch(0.52 0.2 20) 100%); }
.timeline .caps { display: flex; justify-content: space-between; gap: 8px; }
.timeline .today { color: var(--pn-amber-ink); font-weight: 600; text-align: center; }
.timeline.ok .today { color: var(--pn-green-ink); }
.timeline.late .today { color: var(--pn-red-ink); }

/* ------------------------------------------------------------ forms */
.form-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.form-cols > .stack { gap: 24px; min-width: 0; }
@media (max-width: 899px) { .form-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group > .gh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; min-height: 28px; }
.form-group > .gh h3 { white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.form-group > .pn-group.pad { padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.form-group > .pn-group.flush { overflow: hidden; }
.form-group > .cap { padding: 0 4px; text-wrap: pretty; }
.req { color: var(--pn-red-ink); }
.opt { font-weight: 400; color: var(--pn-ink-3); }
.lock-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 899px) { .lock-grid { grid-template-columns: minmax(0, 1fr); } }
.pn-locked .val { display: flex; align-items: center; gap: 8px; min-width: 0; }
.divider { height: 1px; background: var(--pn-line-soft); margin: 0 -20px; }
.toggle-row { display: flex; align-items: center; gap: 12px; }
.toggle-row .txt { flex: 1; min-width: 0; }
.toggle-row .ttl { font-weight: 600; }
/* switch: checkbox real com a aparência de .pn-switch */
.switch { position: relative; flex: none; display: inline-block; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch input:focus-visible + .pn-switch { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.switch input:checked + .pn-switch { background: var(--pn-green); }
.switch input:checked + .pn-switch::after { left: 22px; }
.switch.red input:checked + .pn-switch { background: var(--pn-red); }
.switch input:disabled + .pn-switch { opacity: .45; cursor: not-allowed; }
/* checkbox real com a aparência de .pn-check */
.check { position: relative; flex: none; display: inline-grid; }
.check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.check input:checked + .pn-check { background: var(--pn-accent); box-shadow: none; color: var(--pn-on-accent); }
.check input:focus-visible + .pn-check { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.check input:disabled + .pn-check { background: var(--pn-bg-2); box-shadow: none; cursor: not-allowed; }
.check input:disabled:checked + .pn-check { background: var(--pn-ink-3); color: var(--pn-surface); }
/* choice card com rádio real */
label.pn-choice { position: relative; }
label.pn-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
label.pn-choice:has(input:checked) { background: var(--pn-accent-soft); box-shadow: inset 0 0 0 2px var(--pn-accent); }
label.pn-choice.green:has(input:checked) { background: var(--pn-green-soft); box-shadow: inset 0 0 0 2px var(--pn-green); }
label.pn-choice.red:has(input:checked) { background: var(--pn-red-soft); box-shadow: inset 0 0 0 2px var(--pn-red); }
label.pn-choice:has(input:checked) .pn-check { background: var(--pn-accent); box-shadow: none; color: var(--pn-on-accent); }
label.pn-choice.green:has(input:checked) .pn-check, label.pn-choice.red:has(input:checked) .pn-check, label.pn-choice.gray:has(input:checked) .pn-check { color: var(--pn-surface); }
label.pn-choice.green:has(input:checked) .pn-check { background: var(--pn-green); }
label.pn-choice.red:has(input:checked) .pn-check { background: var(--pn-red); }
label.pn-choice.gray:has(input:checked) { background: var(--pn-gray-soft); box-shadow: inset 0 0 0 2px var(--pn-ink-2); }
label.pn-choice.gray:has(input:checked) .pn-check { background: var(--pn-ink-2); }
label.pn-choice.blue:has(input:checked) { background: var(--pn-blue-soft); box-shadow: inset 0 0 0 2px var(--pn-blue); }
label.pn-choice.blue:has(input:checked) .pn-check { background: var(--pn-blue); }
label.pn-choice:has(input:focus-visible) { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
label.pn-choice:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.pn-choice .pn-check { width: 22px; height: 22px; }
.choice-ttl { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.pn-choice.green .choice-ttl { color: var(--pn-green-ink); }
.pn-choice.red .choice-ttl { color: var(--pn-red-ink); }
.pn-choice.accent .choice-ttl { color: var(--pn-accent-ink); }
.pn-choice.gray .choice-ttl { color: var(--pn-ink); }
.pn-choice.blue .choice-ttl { color: var(--pn-blue-ink); }
/* PDF da descrição: botão ao lado de “Descrição” e campo nos formulários */
.desc-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.pdf-btn { min-width: 0; max-width: 100%; }
.pdf-btn i { font-size: 16px; flex: none; }
.pdf-current { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; padding: 4px 0 2px; }
.pdf-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; font-weight: 600; font-size: 14px; }
.pdf-chip i { font-size: 18px; flex: none; color: var(--pn-red-ink); }
.pdf-btn i { color: var(--pn-red); }
.pdf-remove { font-size: 14px; cursor: pointer; flex: none; margin-left: 4px; }
.pdf-label { font-size: 13px; font-weight: 500; color: var(--pn-ink-2); }
.pdf-pick { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdf-pick .pdf-chip { flex: 0 1 auto; min-width: 48px; }
.pdf-pick [data-pdf-name] { min-width: 0; }
.pdf-pick .pdf-size { flex: none; margin-right: 4px; }
.pdf-pick .pn-btn { flex: none; cursor: pointer; }
.pdf-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pdf-file:focus-visible + .pn-btn { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.pdf-file.is-error + .pn-btn { box-shadow: inset 0 0 0 1.5px var(--pn-red); }
/* Aguardando: campo do texto logo abaixo da escolha (StateChoices) */
.wait-field { padding: 4px 4px 6px 38px; }
/* ProjectStateBadge “full”: o texto do Aguardando quebra em várias linhas */
.pn-badge.pn-badge-full { height: auto; min-height: 24px; padding: 3px 9px; white-space: normal; line-height: 1.35; align-items: flex-start; text-align: left; overflow-wrap: anywhere; }
.pn-badge.pn-badge-full.pn-badge-lg { min-height: 28px; padding: 4px 11px; }
.pn-badge.pn-badge-full i { margin-top: 2px; flex: none; }
/* stepper com campo digitável (B13) */
.pn-step { width: 120px; }
.pn-step:focus-within { background: var(--pn-surface); box-shadow: 0 0 0 2px var(--pn-accent); }
.pn-step .val { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-weight: 600; font-size: 15px; }
.pn-step .val input { all: unset; width: 3ch; text-align: right; font-family: var(--pn-font); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.pn-step .val input::placeholder { color: var(--pn-ink-3); font-weight: 500; }
.pn-step .val input::-webkit-outer-spin-button, .pn-step .val input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pn-step .val input[type=number] { -moz-appearance: textfield; }
.pn-step.is-empty .val { color: var(--pn-ink-3); }
.pn-step.is-error .val input, .pn-step.is-over .val input { color: var(--pn-red-ink); }
.pn-step button:focus-visible { outline: 2px solid var(--pn-accent); }
.hours-locked { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.hours-locked i { color: var(--pn-ink-3); font-size: 14px; }
/* person + hours rows */
.ph-row { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px; }
.ph-row.over { background: var(--pn-red-soft); }
.ph-row.fresh .load { color: var(--pn-accent-ink); font-weight: 600; }
.ph-row.unchecked .person, .ph-row.unchecked .load { opacity: .75; }
.ph-row.unchecked .pn-step { display: none; }
.ph-row .main { display: flex; align-items: center; gap: 12px; }
.ph-row .err { padding-left: 46px; }
.ph-row.has-check .err { padding-left: 82px; }
.ph-row .load.over { color: var(--pn-red-ink); font-weight: 600; }
.ph-row .ph-tools { display: flex; gap: 6px; }
.add-row { color: var(--pn-accent-ink); font-weight: 600; padding: 14px 16px; width: 100%; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.add-row i { font-size: 22px; }
.add-row:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: -2px; }
.pn-callout .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pn-callout .body strong { font-weight: 650; color: inherit; }
.pn-callout .body .txt { color: var(--pn-ink-2); }
.pn-callout .body .act { margin-top: 8px; }
.pn-callout ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pn-callout ul li { display: flex; justify-content: space-between; gap: 12px; }
.field-hint-ok { font-size: 12px; color: var(--pn-green-ink); }
.pn-input.is-error, .pn-input[aria-invalid="true"] { border-color: var(--pn-red); box-shadow: 0 0 0 3px oklch(0.58 0.2 25/.12); }
.pw-wrap { position: relative; }
.pw-wrap .pn-input { width: 100%; padding-right: 44px; }
.pw-wrap .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); all: unset; position: absolute; right: 10px; top: 12px; cursor: pointer; color: var(--pn-ink-3); font-size: 18px; }
.pw-wrap .eye:focus-visible { outline: 2px solid var(--pn-accent); border-radius: 6px; }
.reqs { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--pn-ink-3); margin: 0; padding: 0; list-style: none; }
.reqs li { display: flex; align-items: center; gap: 8px; }
.reqs li.ok { color: var(--pn-green-ink); }
.prio-field { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------ dialogs */
dialog.pn-dialog { border: 0; padding: 0; background: transparent; max-width: min(540px, calc(100vw - 24px)); width: 540px; overflow: visible; }
#dlg-estado .dialog-card { max-height: calc(100dvh - 36px); overflow: auto; }
dialog.pn-dialog::backdrop { background: oklch(0.2 0.02 285/.3); }
.dialog-card { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--pn-surface); border-radius: 24px; box-shadow: var(--pn-shadow-3); color: var(--pn-ink); }
.dialog-card .dhead { display: flex; gap: 14px; align-items: flex-start; }
.dialog-card .dicon { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.dialog-card h2 { font-size: 18px; font-weight: 600; line-height: 1.3; }
.dialog-card .dbody { font-size: 14px; color: var(--pn-ink-2); display: flex; flex-direction: column; gap: 10px; }
.dialog-card .dactions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.bullets { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bullets li { display: flex; gap: 10px; align-items: flex-start; }
.bullets li i { margin-top: 2px; color: var(--pn-ink-2); font-size: 17px; flex: none; }
@media (max-width: 899px) {
  dialog.pn-dialog { margin: auto 12px 24px; width: auto; max-width: none; }
  dialog.pn-dialog[open] { position: fixed; inset: auto 0 0 0; }
}
dialog.pn-picker { border: 0; padding: 0; width: 400px; max-width: calc(100vw - 24px); max-height: min(560px, calc(100vh - 40px)); border-radius: 18px; box-shadow: var(--pn-shadow-3), 0 0 0 1px oklch(0.2 0.02 285/.06); background: var(--pn-surface); overflow: hidden; }
dialog.pn-picker[open] { display: flex; flex-direction: column; }
dialog.pn-picker::backdrop { background: oklch(0.2 0.02 285/.12); }
.picker-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; }
.picker-head .ttl { font-weight: 650; font-size: 17px; }
.picker-list { flex: 1; overflow: auto; }
.picker-list .pn-row { padding: 10px 16px; cursor: pointer; }
.picker-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px; border-top: 1px solid var(--pn-line-soft); }
@media (max-width: 899px) {
  dialog.pn-picker { width: 100%; max-width: none; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: calc(100vh - 58px); background: var(--pn-bg); }
  dialog.pn-picker .picker-list { margin: 0 16px 16px; border-radius: 14px; background: var(--pn-surface); }
}

/* action menu */
details.menu { position: relative; }
details.menu > summary { list-style: none; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > .pn-pop { right: 0; top: calc(100% + 6px); width: 300px; padding: 6px 0; }
details.menu .mi { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; font-size: 14px; cursor: pointer; color: var(--pn-ink); }
details.menu .mi:hover { background: var(--pn-surface-2); }
details.menu .mi:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: -2px; }
details.menu .mi.red { color: var(--pn-red-ink); }
details.menu .msep { height: 1px; background: var(--pn-line-soft); margin: 6px 16px; }

/* toast (messages) */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 32px)); }
@media (max-width: 899px) { .toasts { left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); max-width: none; } }
.pn-toast i.ok { color: var(--pn-green); }
.pn-toast i.err { color: var(--pn-red); }
.pn-toast i.info { color: var(--pn-accent); }
.pn-toast .x { all: unset; cursor: pointer; margin-left: auto; color: color-mix(in srgb, var(--pn-toast-ink) 65%, transparent); padding: 4px; border-radius: 8px; }
.pn-toast .x:focus-visible { outline: 2px solid var(--pn-accent); }

/* ------------------------------------------------------------ ranking */
.rank-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rank-list .pn-drag { position: relative; left: auto; right: auto; height: 72px; padding: 0 20px 0 8px; gap: 14px; }
.rank-list .pn-drag.dragging { z-index: 5; transform: scale(1.02); box-shadow: var(--pn-shadow-3), 0 0 0 2px var(--pn-accent); }
.rank-list .pn-drag.dragging .pn-handle { cursor: grabbing; color: var(--pn-accent); }
.rank-list .pn-handle:focus-visible { outline: 2px solid var(--pn-accent); }
.rank-list .r-dead { width: 130px; }
.rank-list .r-cond { width: 124px; }
.rank-list .r-badges { display: flex; gap: 6px; }
.rank-list .pn-handle.m { display: none; }
@media (max-width: 899px) {
  .rank-list .pn-drag { height: 68px; padding: 0 6px 0 12px; gap: 12px; }
  .rank-list .pn-rank { min-width: 36px; height: 36px; font-size: 15px; border-radius: 10px; }
  .rank-list .pn-handle.d { display: none; }
  .rank-list .pn-handle.m { display: grid; }
  .rank-list .r-dead, .rank-list .r-cond.d, .rank-list .leaders { display: none; }
}
.rank-list .r-cond.m { display: none; }
@media (max-width: 899px) { .rank-list .r-cond.m { display: flex; gap: 6px; align-items: center; } }

/* ------------------------------------------------------------ admin */
.admin-tabs { width: 100%; }
.admin-tabs.pn-seg { display: grid; }
@media (max-width: 899px) { .admin-tabs { display: none !important; } }
.legend { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 12px 16px; font-size: 12.5px; color: var(--pn-ink-2); }
.gtable .gh, .gtable .gr { display: grid; gap: 16px; padding: 12px 20px; align-items: center; }
.gtable .gh { border-bottom: 1px solid var(--pn-line-soft); }
.gtable.accounts .gh, .gtable.accounts .gr { grid-template-columns: minmax(0, 1.6fr) 140px 150px 120px minmax(150px, auto); }
.gtable.history .gh, .gtable.history .gr { grid-template-columns: 56px minmax(0, 1fr) 120px minmax(0, 1.3fr) minmax(0, 1fr) 16px minmax(0, 1fr); }
.gtable.sends .gh, .gtable.sends .gr { grid-template-columns: 150px 70px minmax(0, 1fr) 110px minmax(0, 1.4fr) 120px; }
.gtable.backups .gh, .gtable.backups .gr { grid-template-columns: minmax(0, 1fr) 150px 130px minmax(0, 1.4fr); }
.gtable .gr.tint { background: var(--pn-red-soft); }
.gtable .gday { padding: 10px 20px 6px; font-size: 12px; font-weight: 600; color: var(--pn-ink-2); background: var(--pn-surface-2); }
.gtable .actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.gtable .cell-lbl { display: none; }
@media (max-width: 899px) {
  .gtable { background: transparent; box-shadow: none !important; }
  .gtable .gh { display: none; }
  .gtable .gr { display: flex; flex-direction: column; align-items: stretch; gap: 6px; background: var(--pn-surface); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--pn-shadow-1); }
  .gtable .gr::before { display: none; }
  .gtable .gday { background: none; padding: 8px 4px 6px; letter-spacing: .06em; text-transform: uppercase; color: var(--pn-ink-3); }
  .gtable .cell-lbl { display: inline; color: var(--pn-ink-3); font-size: 12px; margin-right: 6px; }
  .gtable .actions { justify-content: flex-start; flex-wrap: wrap; }
}
.hval-arrow { color: var(--pn-ink-3); text-align: center; }
.hval { font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.hval.rank { display: inline-grid; place-items: center; min-width: 38px; height: 28px; font-size: 14px; font-weight: 700; border-radius: 8px; background: var(--pn-bg-2); color: var(--pn-ink-2); }
.hval.rank.to { background: var(--pn-accent-soft); color: var(--pn-accent-ink); }
.former { overflow: hidden; }
.former > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.former > summary::-webkit-details-marker { display: none; }
.former > summary:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: -2px; }
.former .parts .pn-row { padding: 12px 16px 12px 68px; }
@media (max-width: 899px) { .former .parts .pn-row { padding-left: 16px; } }
.former[open] .tog i { transform: rotate(180deg); }
.menu-list .pn-row { gap: 12px; color: inherit; text-decoration: none; }
.pn .menu-list a.pn-row:hover { text-decoration: none; }
.alloc-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--pn-bg-2); gap: 2px; }
.alloc-legend { display: flex; flex-direction: column; gap: 6px; }
.alloc-legend .li { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.alloc-legend .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.alloc-legend .sw.free { background: var(--pn-bg-2); box-shadow: inset 0 0 0 1px var(--pn-line); }
.load-meter { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.load-meter .lbl { white-space: nowrap; font-size: 14px; }
.load-meter.compact .lbl { font-size: 12.5px; }
.load-meter .lbl b { font-weight: 650; }
.load-meter.over .lbl { color: var(--pn-red-ink); }
.load-meter .pn-track { height: 6px; }
.etable .eh, .etable .er { display: grid; grid-template-columns: minmax(0, 1fr) 220px 16px; gap: 20px; padding: 14px 20px; align-items: center; color: inherit; }
.etable .eh { padding: 12px 20px; border-bottom: 1px solid var(--pn-line-soft); }
.pn .etable a.er:hover { text-decoration: none; }
@media (max-width: 899px) {
  .etable { box-shadow: var(--pn-shadow-1); border-radius: var(--pn-r-md); }
  .etable .eh { display: none; }
  .etable .er { grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; padding: 12px 16px; }
  .etable .er .pn-chev { display: none; }
}
.profile-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.profile-head .who { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.profile-head .name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.profile-head .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--pn-ink-2); }
.profile-head .meta span, .profile-head .meta a { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 899px) {
  .profile-head { flex-direction: column; text-align: center; }
  .profile-head .who { align-items: center; }
  .profile-head .name-row { justify-content: center; }
  .profile-head .meta { flex-direction: column; align-items: center; font-size: 15px; }
}
.proj-link-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: inherit; }
.proj-link-card.lead { margin: 0 8px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--pn-gold); }
.pn a.proj-link-card:hover { text-decoration: none; background: var(--pn-surface-2); }
.proj-link-card .pn { font-weight: 600; }
.proj-link-card .hrs { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; }
.proj-link-card .hrs b { font-weight: 650; }
/* code input (6 caixas sobre um campo real) */
.code-boxes { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.code-boxes .box { height: 52px; border-radius: 12px; border: 1px solid var(--pn-line); background: var(--pn-surface); display: grid; place-items: center; font-size: 22px; font-weight: 600; }
.code-boxes .box.cur { border-color: var(--pn-accent); box-shadow: 0 0 0 3px var(--pn-accent-ring); }
.code-boxes.err .box { border-color: var(--pn-red); color: var(--pn-red-ink); box-shadow: 0 0 0 3px oklch(0.58 0.2 25/.10); }
.code-boxes.dead .box { background: var(--pn-bg-2); color: var(--pn-ink-3); border-color: transparent; }
.code-boxes input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; caret-color: transparent; border: 0; }
.code-boxes:not(.enhanced) input { position: static; opacity: 1; grid-column: 1 / -1; height: 52px; text-align: center; letter-spacing: .4em; font-size: 22px; border-radius: 12px; border: 1px solid var(--pn-line); }
.code-boxes:not(.enhanced) .box { display: none; }
/* auth */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 16px; background: linear-gradient(180deg, var(--pn-surface) 0%, var(--pn-bg) 60%); }
.auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; padding: 28px; }
.auth-card .head { display: flex; flex-direction: column; gap: 4px; }

.auth-card .lead { font-size: 14px; color: var(--pn-ink-2); }
.auth-foot { font-size: 12px; color: var(--pn-ink-2); text-align: center; }
.auth-card .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; font-size: 20px; }
.email-chip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--pn-bg-2); font-size: 13px; min-width: 0; }
.email-chip .grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  .auth-wrap { justify-content: flex-start; align-items: stretch; padding: 40px 16px 24px; background: var(--pn-bg); }
  .auth-wrap .brand { align-self: center; }
  .auth-card { max-width: none; background: transparent; box-shadow: none; padding: 0; }
  .auth-card h1 { font-size: 20px; }
  .auth-card .lead { font-size: 13px; }
  .auth-foot { margin-top: auto; font-size: 11px; }
}
.pn-btn.block { width: 100%; }
.pn-btn[aria-busy="true"] { opacity: .85; }
.pn-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.stat-big { font-size: 22px; font-weight: 700; }
.stat-big small { font-size: 14px; font-weight: 400; color: var(--pn-ink-2); }
.iframe-mail { width: 100%; min-height: 70vh; border: 0; border-radius: 16px; background: var(--pn-bg-2); }

/* botões como links: mantêm as cores do painel.css acima da regra .pn a */
.pn a.pn-btn, .pn a.pn-btn:hover { text-decoration: none; }
.pn a.pn-btn-primary { color: var(--pn-on-accent); }
.pn a.pn-btn-tinted { color: var(--pn-tinted-ink); }
.pn a.pn-btn-plain { color: var(--pn-accent-ink); }
.pn a.pn-btn-gray { color: var(--pn-ink); }
.pn a.pn-btn-danger { color: var(--pn-red-ink); }
/* linhas e cartões clicáveis sem âncoras aninhadas: link esticado */
.tap { position: relative; }
.pn a.stretch { color: inherit; }
.pn a.stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.pn a.stretch:hover { text-decoration: none; }
.tap .over { position: relative; z-index: 2; }
/* contorno só ao navegar pelo teclado; clique ou toque não deixa contorno */
.tap:has(:focus-visible) { box-shadow: 0 0 0 2px var(--pn-accent); }
.pn :focus:not(:focus-visible) { outline: none; }
body.pn { -webkit-tap-highlight-color: transparent; }
.detail-areas { grid-template-areas: "desc info" "team info"; }
@media (max-width: 899px) { .detail-areas { grid-template-areas: "desc" "info" "team"; } }
@media (max-width: 899px) { .info-row.first-m::before { display: none; } }

/* editor de equipe sem JS: estados dos controles ocultos */
.ph-row:has([data-row-remove]:checked) .main > .grow, .ph-row:has([data-row-remove]:checked) .pn-step { opacity: .45; text-decoration: line-through; }
.ph-row [data-row-remove]:checked + label { background: var(--pn-red-soft); color: var(--pn-red-ink); }
.ph-row [data-row-leader]:checked + label { background: var(--pn-gold-soft, var(--pn-amber-soft)); color: var(--pn-amber-ink); }
.ph-tools input:focus-visible + label { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.rank-new { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--pn-accent-soft); box-shadow: inset 0 0 0 2px var(--pn-accent); }
.rank-new .pn-rank { min-width: 32px; height: 32px; font-size: 14px; border-radius: 9px; background: var(--pn-accent); color: var(--pn-on-accent); }
.form-cols.react { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
@media (max-width: 899px) { .form-cols.react { grid-template-columns: minmax(0, 1fr); } }
.ink3 { color: var(--pn-ink-3); }
[data-over-box]:empty { display: none; }
[hidden] { display: none !important; }
.switch .pn-switch, .check .pn-check { display: block; }
.check .pn-check { display: grid; }
.ph-row .load { display: block; padding-left: 42px; margin-top: -2px; }
@media (max-width: 899px) {
  .ph-row .main { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 6px; align-items: center; }
  .ph-row.has-check .main { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .ph-row .main > .grow { display: contents; }
  .ph-row .main > .grow > .load { grid-row: 2; grid-column: 1 / -1; padding-left: 46px; margin-top: 0; }
  .ph-row.has-check .main > .grow > .load { padding-left: 82px; }
  .ph-row .pn-step { width: 112px; }
}
.page.page-form.narrow { max-width: 640px; }
.ctable .phead, .ctable .prow { grid-template-columns: minmax(0, 2.6fr) 130px 140px 130px 16px; }
.rank-list .rname { font-weight: 600; font-size: 16px; color: var(--pn-ink); }
.rank-list .rname:hover { text-decoration: underline; }
.rank-list .r-badges.d { display: flex; gap: 6px; }
@media (max-width: 899px) { .rank-list .r-badges.d { display: none; } .rank-list .rname { font-size: 15px; } }
.rank-list .pn-drag.moved { box-shadow: var(--pn-shadow-1), inset 0 0 0 2px var(--pn-accent-ring); }

/* histórico do projeto */
.hist-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hcard { padding: 16px 0 6px; display: flex; flex-direction: column; gap: 4px; }
.hcard h2 { padding: 0 20px 6px; display: flex; gap: 8px; align-items: center; }
.dl-line { list-style: none; margin: 0; padding: 6px 20px 14px; display: flex; flex-direction: column; }
.dl-line li { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
.dl-line li .dot { flex: none; width: 11px; height: 11px; border-radius: 50%; margin-top: 5px; background: var(--pn-surface); box-shadow: inset 0 0 0 2px var(--pn-line); }
.dl-line li:not(:last-child)::before { content: ""; position: absolute; left: 4.5px; top: 20px; bottom: 4px; width: 2px; background: var(--pn-line-soft); }
.dl-line li .d { font-weight: 600; color: var(--pn-ink-2); text-decoration: line-through; }
.dl-line li.current .dot { background: var(--pn-accent); box-shadow: none; }
.dl-line li.current .d { color: var(--pn-ink); text-decoration: none; }
.htable { overflow: hidden; }
.htable .hhead, .htable .hrow { display: grid; grid-template-columns: 110px 170px minmax(0, 1fr) minmax(0, 1fr) 20px minmax(0, 1fr); gap: 16px; padding: 12px 20px; align-items: center; }
.htable .hhead { padding: 8px 20px; border-bottom: 1px solid var(--pn-line-soft); }
.htable .hrow.prio { background: color-mix(in srgb, var(--pn-accent-soft) 55%, transparent); }
.hdate { display: flex; flex-direction: column; }
.hdate .dd { font-size: 14px; font-weight: 500; }
.hinfo { font-weight: 600; font-size: 14px; }
.hfrom { font-size: 14px; color: var(--pn-ink-2); overflow-wrap: anywhere; }
.hto { font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow-wrap: anywhere; }
.harrow { color: var(--pn-ink-3); }
.pn-rank.sm { min-width: 38px; height: 30px; font-size: 14px; border-radius: 9px; color: var(--pn-ink-2); }
.pn-rank.sm.to { background: var(--pn-accent-soft); color: var(--pn-accent-ink); }
.hto .delta { color: var(--pn-accent-ink); font-weight: 600; }
.hist-tabs { width: 100%; display: none; }
@media (max-width: 899px) {
  .hist-tabs { display: grid !important; }
  .hist-cards { display: flex; flex-direction: column; gap: 16px; }
  .hist-cards.m-changes { display: none; }
  .hist-cards.m-people .h-dates, .hist-cards.m-dates .h-people { display: none; }
  .htable.m-hide { display: none; }
  .htable { background: none; box-shadow: none; overflow: visible; display: flex; flex-direction: column; gap: 12px; }
  .htable .hhead { display: none; }
  .htable .hrow { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); gap: 8px 8px; padding: 14px; background: var(--pn-surface); border-radius: var(--pn-r-md); box-shadow: var(--pn-shadow-1); border: 0; }
  .htable .hrow::after { display: none; }
  .htable .hrow.prio { box-shadow: inset 0 0 0 2px var(--pn-accent); background: var(--pn-surface); }
  .htable .hinfo { grid-row: 1; grid-column: 1 / 3; font-weight: 650; }
  .htable .hdate { grid-row: 1; grid-column: 3; flex-direction: row; justify-content: flex-end; gap: 4px; font-size: 12px; color: var(--pn-ink-3); }
  .htable .hdate .dd { font-size: 12px; font-weight: 400; }
  .htable .hdate .dd::after { content: " ·"; }
  .htable .hfrom { grid-row: 2; grid-column: 1; }
  .htable .harrow { grid-row: 2; grid-column: 2; }
  .htable .hto { grid-row: 2; grid-column: 3; }
  .htable .hwho { grid-row: 3; grid-column: 1 / -1; }
}
.page-head > .stack { flex: 1 1 380px; }

/* perfil */
.profile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.prof-projects { padding: 20px 0 12px; display: flex; flex-direction: column; gap: 18px; }
.prof-projects > h2 { padding: 0 20px; }
.prof-load { display: flex; flex-direction: column; gap: 16px; }
.big-load { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.big-load span { font-size: 17px; font-weight: 500; color: var(--pn-ink-2); }
.big-load.over { color: var(--pn-red-ink); }
.grp-t { padding: 0 20px; display: inline-flex; gap: 6px; align-items: center; }
.gold { color: var(--pn-gold); }
.lead-box { margin: 0 12px; border-radius: 14px; box-shadow: inset 0 0 0 1.5px var(--pn-gold); overflow: hidden; }
.pp-row { padding: 14px 20px; gap: 14px; }
.lead-box .pp-row { padding: 14px 8px 14px 12px; }
/* participando: mesmo recorte arredondado do bloco de liderança, sem a borda dourada */
.join-box { margin: 0 12px; border-radius: 14px; overflow: hidden; }
.join-box .pp-row { padding: 14px 8px 14px 12px; }
.pp-name { font-weight: 600; font-size: 15px; }
.pp-hrs { white-space: nowrap; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.pp-hrs b { font-size: 16px; }
.former-past summary { list-style: none; cursor: pointer; padding: 16px 20px; }
.former-past summary::-webkit-details-marker { display: none; }
.former-past[open] .tog { transform: rotate(180deg); }
.row-btn { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.react-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: end; color: var(--pn-ink); }
.pn-btn-danger.solid { background: var(--pn-red); color: var(--pn-on-strong); }
.ml-auto { margin-left: auto; }
@media (max-width: 899px) {
  .profile-grid { display: flex; flex-direction: column-reverse; gap: 22px; }
  .prof-projects { background: none; box-shadow: none; padding: 0; gap: 14px; }
  .prof-projects > h2 { display: none; }
  .prof-load { padding: 16px; gap: 12px; }
  .grp-t { padding: 0 16px; }
  .lead-box, .join-box { margin: 0; background: var(--pn-surface); border-radius: var(--pn-r-md); box-shadow: var(--pn-shadow-1); overflow: hidden; }
  .lead-box { box-shadow: inset 0 0 0 1.5px var(--pn-gold); }
  .pp-row, .lead-box .pp-row { padding: 12px 16px; }
  .react-fields { grid-template-columns: minmax(0, 1fr); }
}
.page.page-form.narrow-lg { max-width: 820px; }
.sub-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.sub-card.ok { box-shadow: var(--pn-shadow-1), inset 0 0 0 1.5px var(--pn-green); }
.sub-card.err { box-shadow: var(--pn-shadow-1), inset 0 0 0 1.5px var(--pn-red); }
.sub-name { font-weight: 650; font-size: 16px; }
.sub-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
@media (max-width: 899px) { .sub-card { padding: 16px; } .sub-fields { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) { .profile-grid > *, .profile-grid .stack { width: 100%; align-self: stretch; } }

/* contas */
.acc-legend { padding: 14px 18px; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.acc-legend .lg-note { margin-left: auto; }
.atable { overflow: visible; }
.atable.orphan { box-shadow: var(--pn-shadow-1), inset 0 0 0 1.5px var(--pn-accent-soft); }
.atable .ahead, .atable .arow { display: grid; grid-template-columns: minmax(0, 1.6fr) 340px 140px 150px; gap: 16px; padding: 12px 20px; align-items: center; }
.atable .ahead { grid-template-columns: minmax(0, 1.6fr) 170px 154px 140px 150px; border-bottom: 1px solid var(--pn-line-soft); }
.atable .acell-badges { display: grid; grid-template-columns: 170px 154px; gap: 16px; }
.atable .acell-act { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.atable .arow { position: relative; }
details.menu .msep { height: 1px; background: var(--pn-line-soft); margin: 4px 8px; }
details.menu .mi { text-decoration: none; }
.pn details.menu a.mi:hover { text-decoration: none; }
details.menu[open] > summary { box-shadow: 0 0 0 2px var(--pn-accent); }
details.menu > .pn-pop { z-index: 40; }
@media (max-width: 899px) {
  .acc-legend { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
  .acc-legend .lg-note { margin-left: 0; }
  .acc-filter { display: grid; width: 100%; }
  .atable .ahead { display: none; }
  .atable .arow { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; padding: 12px 16px; }
  .atable .acell-who { grid-column: 1; grid-row: 1; }
  .atable .acell-act { grid-column: 2; grid-row: 1; }
  .atable .acell-act > .pn-btn-tinted, .atable .acell-act > .pn-btn-gray:not(summary) { display: none; }
  .atable .acell-badges { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 6px; flex-wrap: wrap; padding-left: 44px; }
  .atable .acell-badges .d-only { display: none; }
  .atable .acell-last { display: none; }
  details.menu > .pn-pop { position: fixed; left: 10px; right: 10px; bottom: 24px; top: auto; width: auto; border-radius: 16px; }
}
.former .parts { border-top: 1px solid var(--pn-line-soft); background: var(--pn-surface-2); }
.act-row { gap: 10px; font-weight: 500; color: var(--pn-accent-ink); text-decoration: none; }
.act-row.red { color: var(--pn-red-ink); }
.act-form { display: contents; }
.pn a.act-row:hover { text-decoration: none; }
.info-list .info-row .val { text-align: right; overflow-wrap: anywhere; }

/* histórico geral */
.sel-sm { display: inline-block; }
.sel-sm > i:first-child { left: 12px; right: auto; }
.sel-sm select.pn-input { height: 36px; padding: 0 30px 0 34px; font-size: 13px; font-weight: 500; border-radius: 10px; background: var(--pn-bg-2); border: 0; appearance: none; max-width: 240px; }
.gtable.hist .ghead, .gtable.hist .grow-row { display: grid; grid-template-columns: 52px 150px 130px minmax(0, 1.1fr) minmax(0, 1fr) 18px minmax(0, 1fr); gap: 14px; padding: 12px 20px; align-items: center; }
.gtable.hist .ghead { border-bottom: 1px solid var(--pn-line-soft); }
.gday { padding: 10px 20px 6px; background: var(--pn-surface-2); font-size: 13px; font-weight: 650; color: var(--pn-ink-2); }
.g-time { font-weight: 500; }
.g-target { font-weight: 600; font-size: 14px; }
.g-from { font-size: 14px; color: var(--pn-ink-2); overflow-wrap: anywhere; }
.g-to { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.g-arrow { color: var(--pn-ink-3); }
@media (max-width: 899px) {
  .hist-filters .pn-seg { display: grid; width: 100%; }
  .gtable.hist { background: none; box-shadow: none; display: flex; flex-direction: column; gap: 8px; overflow: visible; }
  .gtable.hist .ghead { display: none; }
  .gday { background: none; padding: 8px 4px 0; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: var(--pn-ink-3); }
  .gtable.hist .grow-row { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 10px 8px; padding: 14px; background: var(--pn-surface); border-radius: var(--pn-r-md); box-shadow: var(--pn-shadow-1); }
  .gtable.hist .grow-row::after { display: none; }
  .g-type { grid-row: 1; grid-column: 1 / 3; }
  .g-time { grid-row: 1; grid-column: 3; text-align: right; font-size: 12px; }
  .g-item { grid-row: 2; grid-column: 1 / -1; }
  .g-from { grid-row: 3; grid-column: 1; }
  .g-arrow { grid-row: 3; grid-column: 2; }
  .g-to { grid-row: 3; grid-column: 3; }
  .g-who { grid-row: 4; grid-column: 1 / -1; }
}

/* resumos */
.send-hero { padding: 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.pn-section-icon.big { width: 44px; height: 44px; border-radius: 14px; font-size: 22px; }
.gtable.sends .ghead, .gtable.sends .srow { display: grid; grid-template-columns: 150px 64px minmax(0, 1fr) 140px minmax(0, 1fr) 190px; gap: 16px; padding: 12px 20px; align-items: center; }
.gtable.sends .ghead { border-bottom: 1px solid var(--pn-line-soft); }
.gtable.sends .srow.fail { background: color-mix(in srgb, var(--pn-red-soft) 60%, transparent); }
.s-day { font-weight: 500; font-size: 14px; }
.s-act { display: flex; justify-content: flex-end; }
.mail-frame { width: 100%; min-height: 70vh; border: 0; border-radius: var(--pn-r-md); background: #ffffff; box-shadow: var(--pn-shadow-1); }
.mail-text { white-space: pre-wrap; font-family: var(--pn-font); font-size: 14px; }
@media (max-width: 899px) {
  .send-hero { padding: 16px; }
  .gtable.sends .ghead { display: none; }
  .gtable.sends .srow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 12px 16px; }
  .s-day { grid-row: 1; grid-column: 1; font-weight: 600; font-size: 15px; }
  .s-state { grid-row: 1; grid-column: 2; }
  .s-time { grid-row: 2; grid-column: 1 / -1; }
  .s-to { grid-row: 3; grid-column: 1 / -1; }
  .s-content { grid-row: 4; grid-column: 1 / -1; }
  .s-act { grid-row: 5; grid-column: 1 / -1; justify-content: flex-start; }
  .s-act:empty { display: none; }
}
.sender-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 899px) { .sender-cols, .grid-2 { grid-template-columns: minmax(0, 1fr); } }
.amber-ink { color: var(--pn-amber-ink); }
.test-cfg summary { cursor: pointer; }
.test-cfg dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: 13px; }
.test-cfg dt { color: var(--pn-ink-2); }
.test-cfg dd { margin: 0; overflow-wrap: anywhere; }
.g-to, .g-from { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* autenticação */
.auth-card { padding: 32px; box-shadow: var(--pn-shadow-2); }
.auth-icon { width: 52px; height: 52px; border-radius: 16px; font-size: 26px; }
.email-chip { padding: 8px 8px 8px 12px; border-radius: 12px; gap: 10px; font-size: 14px; font-weight: 500; }
.email-chip > i { color: var(--pn-ink-2); font-size: 18px; }
.center-link { text-align: center; font-size: 14px; font-weight: 500; align-self: center; }
.link-btn { all: unset; color: var(--pn-accent-ink); font-weight: 500; cursor: pointer; }
.link-btn[aria-disabled="true"] { color: var(--pn-ink-3); cursor: default; }
.link-btn:focus-visible { outline: 2px solid var(--pn-accent); border-radius: 4px; }
.code-boxes .box { height: 56px; font-size: 24px; font-weight: 650; }
.code-boxes .box.cur::after { content: ""; width: 2px; height: 24px; background: var(--pn-accent); border-radius: 1px; }
.code-boxes.enhanced:not(:focus-within) .box.cur { border-color: var(--pn-line); box-shadow: none; }
.code-boxes.enhanced:not(:focus-within) .box.cur::after { display: none; }
.code-boxes:not(.enhanced) .box { display: none; }
.code-boxes:not(.enhanced) { display: block; }
.code-boxes:not(.enhanced) input { position: static; opacity: 1; width: 100%; height: 56px; font-size: 24px; letter-spacing: .4em; text-align: center; border: 1px solid var(--pn-line); border-radius: 12px; }
.reqs li i { font-size: 15px; }
@media (max-width: 899px) { .auth-card { padding: 0; background: none; box-shadow: none; max-width: none; } }
.pref-dep { border: 0; padding: 0; margin: 0; min-width: 0; }
.pref-dep:disabled { opacity: .45; }
.pref-opt { padding: 12px 0; gap: 12px; cursor: pointer; }
.pref-opt::after { left: 0 !important; }
.signout { color: var(--pn-red-ink); font-weight: 500; gap: 10px; }
.red-ink { color: var(--pn-red-ink); }
@media (max-width: 899px) { .signout { justify-content: center; } }
.no-perm { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 72px 24px; }
.no-perm .np-icon { width: 64px; height: 64px; border-radius: 20px; font-size: 30px; }
.no-perm p { max-width: 44ch; font-size: 15px; text-wrap: pretty; }
.no-perm > div { margin-top: 8px; }
/* respiro entre o último campo e o botão principal nas telas de entrada */
.auth-card form > .pn-btn-lg { margin-top: 8px; }
.auth-card .forgot-row { margin-top: -6px; }

/* ------------------------------------------------------------- reports */
.report-cta { display: flex; flex-direction: column; gap: 6px; padding: 12px 0 4px; }
/* barra lateral: mesmo tamanho do destaque do item selecionado (.pn-nav-item) */
.report-cta .report-btn { width: 100%; justify-content: center; height: 38px; border-radius: 10px; }
.report-cta .report-btn:hover { text-decoration: none; }
.report-cta .report-btn.is-alert { background: var(--pn-red); box-shadow: none; }
.report-cta .report-btn.is-alert:hover { background: var(--pn-red-ink); }
.report-cta .report-btn:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.report-excl { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--pn-red); font-weight: 800; font-size: 13px; line-height: 1; }
.report-since { font-size: 12px; color: var(--pn-ink-2); text-align: center; }
.report-cta.m { padding: 0; }
.report-cta.m .report-btn { height: 44px; border-radius: 12px; }
/* texto do report: nunca estoura a largura */
.rtext { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.rtext-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 14px; line-height: 1.45; color: var(--pn-ink); min-width: 0; max-width: 100%; }
.over { position: relative; z-index: 2; }
/* coluna “Último report” na lista de colaboradores */
.etable .eh, .etable .er { grid-template-columns: minmax(180px, .85fr) minmax(0, 1.5fr) 200px 16px; }
.ereport { display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0; align-self: center; }
.ereport .rtext-body { font-size: 13px; color: var(--pn-ink-2); }
/* check à esquerda; check e bloco (projeto + texto) centralizados na altura */
.er-text { display: inline-flex; align-items: center; align-self: flex-start; gap: 8px; min-width: 0; max-width: 100%; padding: 5px 14px 5px 8px; border-radius: 18px; background: var(--pn-gray-soft); }
.er-check { flex: none; color: var(--pn-green); font-size: 16px; line-height: 1; }
.er-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.er-none { color: var(--pn-ink-3); }
@media (max-width: 899px) {
  .etable .er { grid-template-columns: minmax(0, 1fr) 120px; }
  .etable .er .ereport { grid-row: 2; grid-column: 1 / -1; padding-left: 46px; }
}
/* perfil, página do projeto e lista completa */
.prof-reports, .proj-reports { padding: 16px 0 8px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px 8px; flex-wrap: wrap; }
.pr-head h2 { display: flex; align-items: center; gap: 8px; }
.report-item { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 20px; min-width: 0; }
.ri-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-width: 0; }
.ri-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ri-proj { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; max-width: 100%; min-width: 0; }
.ri-when { white-space: nowrap; }
/* lado a lado: autor ou projeto + data à esquerda, texto à direita; empilha no celular */
.report-item.side { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; grid-template-areas: "meta text edit"; column-gap: 24px; row-gap: 8px; align-items: start; }
.report-item.side > .ri-meta { grid-area: meta; gap: 4px; }
.report-item.side > .rtext { grid-area: text; }
.report-item.side > .ri-edit { grid-area: edit; }
.report-item.side .ri-when { white-space: normal; }
@media (min-width: 900px) { .report-item.side:has(> .ri-meta > .person) > .rtext { padding-top: 6px; } }
/* em linha: “Projeto/Nome – texto” e a data embaixo, começando junto do nome */
.report-item.line { display: flex; flex-direction: row; align-items: center; gap: 12px; }
.ri-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ri-line { margin: 0; font-size: 14px; line-height: 1.45; color: var(--pn-ink); overflow-wrap: anywhere; }
.ri-name { font-weight: 600; color: var(--pn-accent-ink); }
.ri-name.ri-none { color: var(--pn-ink-2); font-weight: 500; }
.ri-name.ri-gone { color: var(--pn-ink-3); }
.ri-dash { color: var(--pn-ink-3); }
.ri-txt { white-space: pre-wrap; }
.report-item.line .ri-when { font-size: 12px; color: var(--pn-ink-3); white-space: normal; }
.report-item.line .ri-edit { flex: none; }
@media (max-width: 899px) { .report-item.side { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "meta edit" "text text"; } }
/* campo do report: largura para 60 caracteres, uma linha */
.report-input { width: calc(60ch + 34px); max-width: 100%; }
.report-count { margin-left: auto; font-variant-numeric: tabular-nums; }
@media (max-width: 899px) { .report-item { padding: 12px 16px; } .pr-head { padding: 0 16px 8px; } }

/* assuntos (ui.jsx SubjectChip · pnSubjectTone): [matiz, croma]; fundo e texto seguem o modo (--pn-chip-*-l), ponto saturado */
.subj-c0 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 25); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 25); --subj-dot: oklch(0.66 0.15 25); }
.subj-c1 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 52); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 52); --subj-dot: oklch(0.66 0.15 52); }
.subj-c2 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.042 80); --subj-ink: oklch(var(--pn-chip-ink-l) 0.112 80); --subj-dot: oklch(0.66 0.14 80); }
.subj-c3 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.036 105); --subj-ink: oklch(var(--pn-chip-ink-l) 0.096 105); --subj-dot: oklch(0.66 0.12 105); }
.subj-c4 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 325); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 325); --subj-dot: oklch(0.66 0.15 325); }
.subj-c5 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.033 192); --subj-ink: oklch(var(--pn-chip-ink-l) 0.088 192); --subj-dot: oklch(0.66 0.11 192); }
.subj-c6 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.036 218); --subj-ink: oklch(var(--pn-chip-ink-l) 0.096 218); --subj-dot: oklch(0.66 0.12 218); }
.subj-c7 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.012 240); --subj-ink: oklch(var(--pn-chip-ink-l) 0.032 240); --subj-dot: oklch(0.66 0.04 240); }
.subj-c8 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 255); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 255); --subj-dot: oklch(0.66 0.15 255); }
.subj-c9 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 278); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 278); --subj-dot: oklch(0.66 0.15 278); }
.subj-c10 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.045 302); --subj-ink: oklch(var(--pn-chip-ink-l) 0.120 302); --subj-dot: oklch(0.66 0.15 302); }
.subj-c11 { --subj-bg: oklch(var(--pn-chip-bg-l) 0.042 350); --subj-ink: oklch(var(--pn-chip-ink-l) 0.112 350); --subj-dot: oklch(0.66 0.14 350); }
.subj { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--subj-bg); color: var(--subj-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; max-width: 100%; min-width: 0; text-decoration: none; vertical-align: middle; }
.subj.subj-lg { height: 28px; padding: 0 11px; font-size: 13px; }
.pn a.subj, .pn a.subj:hover { color: var(--subj-ink); text-decoration: none; }
a.subj:hover { box-shadow: inset 0 0 0 1.5px var(--subj-dot); }
a.subj:focus-visible { outline: 2px solid var(--subj-dot); outline-offset: 2px; }
.subj-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--subj-dot); flex: none; }
.subj-name { overflow: hidden; text-overflow: ellipsis; }
.subj-empty { color: var(--pn-ink-3); }
@media (min-width: 900px) { .prow .psubj { min-width: 0; display: flex; align-items: center; } }
.prow .m-subj { min-width: 0; max-width: 55%; display: flex; }
/* página do assunto */
.subj-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.subj-icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 16px; background: var(--subj-bg); color: var(--subj-dot); font-size: 26px; }
.stable .phead, .stable .prow { grid-template-columns: minmax(0, 2.4fr) 160px 150px 16px; }
.subj-del-m { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px; color: var(--pn-red-ink); font-weight: 500; cursor: pointer; }
@media (max-width: 899px) { .subj-icon { width: 44px; height: 44px; font-size: 22px; } .subj-head { flex-direction: column; align-items: flex-start; } }

/* campo Assunto do formulário (SubjectField + SubjectMenu) */
.subj-field { position: relative; }
.subj-select > summary.subj-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; min-width: 0; }
.subj-select[open] > summary.subj-summary { border-color: var(--pn-accent); box-shadow: 0 0 0 3px var(--pn-accent-ring); }
.subj-current { display: flex; align-items: center; min-width: 0; }
details.menu.subj-select > .pn-pop { left: 0; right: auto; top: calc(100% + 6px); width: 300px; max-width: 100%; padding: 6px; max-height: 340px; overflow: auto; }
.subj-opt { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; cursor: pointer; color: var(--pn-ink); min-width: 0; }
.subj-opt:hover { background: var(--pn-hover); }
.subj-opt:focus-visible { outline: 2px solid var(--pn-accent); outline-offset: -2px; }
.subj-opt[aria-selected=true] { background: var(--pn-accent-soft); }
.subj-opt .subj-check { color: var(--pn-accent-ink); font-weight: 700; visibility: hidden; }
.subj-opt[aria-selected=true] .subj-check { visibility: visible; }
.subj-opt.subj-new { justify-content: flex-start; color: var(--pn-accent-ink); font-weight: 600; }
.subj-opt.subj-new i { font-size: 19px; }
@media (max-width: 899px) { details.menu.subj-select > .pn-pop { position: absolute; left: 0; right: 0; bottom: auto; top: calc(100% + 6px); width: auto; border-radius: 18px; } }

/* editor de assunto: nome, 12 cores, prévia (SubjectEditor) */
.lbl-like { font-size: 13px; font-weight: 500; color: var(--pn-ink-2); }
.subj-colors { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; }
.subj-swatch { position: relative; aspect-ratio: 1; min-width: 28px; border-radius: 50%; background: var(--subj-dot); display: grid; place-items: center; color: oklch(0.99 0 0); cursor: pointer; }
.subj-swatch input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.subj-swatch i { font-size: 14px; font-weight: 700; visibility: hidden; }
.subj-swatch:has(input:checked) { box-shadow: 0 0 0 2px var(--pn-surface), 0 0 0 4px var(--subj-dot); }
.subj-swatch:has(input:checked) i { visibility: visible; }
.subj-swatch:has(input:focus-visible) { outline: 2px solid var(--pn-accent); outline-offset: 4px; }
@media (max-width: 899px) { .subj-colors { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; } }

/* notas do projeto (flows-notes.jsx: NotesBlock, NoteItem, PdfChip, NoteComposer) */
.proj-notes { padding: 16px 0 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow: hidden; }
.proj-notes .pr-head { padding-bottom: 12px; }
.notes-closed { display: flex; gap: 6px; align-items: center; padding: 0 20px 10px; }
.notes-empty { padding: 0 20px 20px; font-size: 15px; }
.notes-list { border-top: 1px solid var(--pn-line-soft); }
.note-item { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; min-width: 0; }
.note-item + .note-item { border-top: 1px solid var(--pn-line-soft); }
.note-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.note-del { color: var(--pn-red-ink); height: 32px; flex: none; }
.pn .note-del:hover { color: var(--pn-red-ink); }
.note-text { margin: 0; font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.note-pdf { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; background: var(--pn-tinted-bg); color: var(--pn-tinted-ink); font-size: 14px; font-weight: 600; max-width: 100%; min-width: 0; text-decoration: none; }
.pn a.note-pdf, .pn a.note-pdf:hover { color: var(--pn-tinted-ink); text-decoration: none; }
a.note-pdf:hover { box-shadow: inset 0 0 0 1.5px var(--pn-accent); }
.note-pdf > i { color: var(--pn-red); font-size: 18px; flex: none; }
.note-pdf .pn-t-cap { font-weight: 400; flex: none; }
.note-pdf.chosen { padding-right: 4px; }
.note-pdf-x { height: 28px; width: 28px; color: var(--pn-ink-2); }
.notes-all { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-top: 1px solid var(--pn-line-soft); font-weight: 600; font-size: 15px; }
.pn a.notes-all:hover { text-decoration: none; background: var(--pn-surface-2); }
.page.page-form.notes-page { max-width: 820px; }
.note-input { height: auto; padding: 12px 14px; resize: vertical; line-height: 1.5; min-height: 200px; }
.note-meta { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.note-meta > .pn-hint, .note-meta > .pn-err { flex: 1; }
.note-count { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--pn-ink-2); margin-left: auto; }
.note-count.over { color: var(--pn-red-ink); }
.note-drop { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 16px; text-align: center; flex-wrap: wrap; }
.note-drop .drop-ico { font-size: 26px; color: var(--pn-ink-3); }
.note-drop .pn-btn { cursor: pointer; }
.note-drop.is-error { border-color: var(--pn-red); }
.note-drop.drag { border-color: var(--pn-accent); background: var(--pn-accent-soft); }
#note-pdf:focus-visible + .note-drop .pn-btn { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .proj-notes { padding-top: 14px; }
  .note-item { padding: 14px 16px; }
  .notes-closed { padding: 0 16px 10px; }
  .notes-empty { padding: 0 16px 16px; }
  .note-drop { flex-direction: column; }
}
@media (max-width: 599px) { .pdf-pick { flex-wrap: wrap; } }
/* Busca: o anel arredondado da caixa (focus-within) já indica o foco; sem o contorno retangular do campo. */
.pn .pn-search input:focus-visible { outline: none; }
/* Projetos: link “Prioridade” abaixo da lista de ativos (administradores) */
.prio-link { display: flex; align-self: center; width: fit-content; align-items: center; gap: 8px; margin: 14px auto 0; padding: 6px 4px; font-size: 15px; font-weight: 600; color: var(--pn-accent-ink); text-decoration: none; }
.prio-link i { font-size: 18px; }
.pn a.prio-link:hover { color: var(--pn-accent-press); text-decoration: none; }
.pn a.prio-link:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* tarefas do projeto (flows-tasks.jsx) */
.ring { position: relative; flex: none; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.ring .ring-bg { stroke: var(--pn-bg-2); }
.ring .ring-fg { stroke: var(--pn-green); }
.ring-txt { position: relative; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: var(--pn-ink); }
.tasks-btn { display: flex; align-items: center; gap: 14px; padding: 14px 20px; color: var(--pn-ink); text-decoration: none; }
.pn a.tasks-btn, .pn a.tasks-btn:hover { color: var(--pn-ink); text-decoration: none; }
.tasks-btn .ttl { font-weight: 650; font-size: 16px; }
@media (max-width: 899px) { .tasks-btn { padding: 12px 16px; } }
.page.page-form.tasks-page { max-width: 1120px; gap: 22px; }
.tasks-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marks-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: var(--pn-accent-soft); box-shadow: inset 0 0 0 1.5px var(--pn-accent); flex-wrap: wrap; color: var(--pn-accent-ink); font-weight: 600; }
.marks-bar > i { font-size: 20px; }
.marks-bar[hidden] { display: none; }
@media (max-width: 899px) { .marks-bar { position: sticky; top: 50px; z-index: 3; } }
.task-list { overflow: hidden; }
.task-head { display: flex; gap: 16px; padding: 10px 20px 10px 60px; border-bottom: 1px solid var(--pn-line-soft); }
.task-head .th-people { width: 200px; } .task-head .th-meta { width: 290px; display: flex; gap: 10px; } .task-head .th-state { width: 140px; flex: none; } .task-head .th-more { width: 32px; }
.task-row { align-items: center; gap: 14px; padding: 13px 20px; }
.task-row.pending { background: color-mix(in srgb, var(--pn-accent-soft) 60%, transparent); }
.task-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.task-title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task-name { font-weight: 600; font-size: 15px; color: var(--pn-ink); overflow-wrap: anywhere; }
.task-name.struck { color: var(--pn-ink-2); text-decoration: line-through; text-decoration-color: var(--pn-ink-3); }
.task-row.pending .task-name.struck { color: var(--pn-ink); text-decoration: none; }
.task-pend { font-size: 12.5px; font-weight: 600; color: var(--pn-accent-ink); }
.task-pend[hidden] { display: none; }
.task-people-d { width: 200px; min-width: 0; flex: none; display: flex; }
.task-meta { width: 290px; flex: none; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.task-meta .task-badge { width: 140px; flex: none; }
.task-more { color: var(--pn-ink-2); flex: none; }
.task-more-sp { width: 32px; flex: none; }
.task-empty { display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: var(--pn-ink-2); font-size: 14px; margin: 0; }
.task-empty i { font-size: 20px; color: var(--pn-ink-3); }
.pnames { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.pn-avatar.more { background: var(--pn-bg-2); color: var(--pn-ink-2); font-size: 10px; font-weight: 600; display: inline-grid; place-items: center; border-radius: 50%; }
/* check redondo: aberta, marcada sem salvar (acento), concluída (verde) */
.tcheck { position: relative; flex: none; width: 26px; height: 26px; cursor: pointer; }
.tcheck input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tcheck .tdot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--pn-check-ring); color: var(--pn-surface); }
.tcheck .tdot i { font-size: 14px; font-weight: 700; visibility: hidden; }
.tcheck input:checked + .tdot { background: var(--pn-green); box-shadow: none; }
.tcheck input:checked + .tdot i { visibility: visible; }
.task-row.pending .tcheck input:checked + .tdot { background: var(--pn-accent-soft); box-shadow: inset 0 0 0 2px var(--pn-accent); color: var(--pn-accent-ink); }
.tcheck input:disabled { cursor: default; }
.tcheck input:disabled:not(:checked) + .tdot { opacity: .5; }
.tcheck input:focus-visible + .tdot { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
@media (max-width: 899px) {
  .task-row { align-items: flex-start; padding: 13px 16px; }
  .tcheck { margin-top: 1px; }
  .task-main { flex-direction: column; align-items: stretch; gap: 7px; }
  .task-title { flex: none; }
  .task-meta { width: auto; }
  .task-meta .task-badge { width: auto; }
}
/* formulário da tarefa */
.task-people { display: flex; flex-wrap: wrap; gap: 8px; }
.tp-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; cursor: pointer; font-size: 13.5px; font-weight: 500; background: var(--pn-bg-2); color: var(--pn-ink); }
.tp-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tp-chip .tp-ok { display: none; font-weight: 700; }
.tp-chip:has(input:checked) { background: var(--pn-accent-soft); box-shadow: inset 0 0 0 1.5px var(--pn-accent); color: var(--pn-accent-ink); }
.tp-chip:has(input:checked) .tp-ok { display: inline; }
.tp-chip:has(input:focus-visible) { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.task-states { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 11px; background: var(--pn-bg-2); align-self: flex-start; }
.ts-opt { position: relative; display: flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--pn-ink-2); cursor: pointer; }
.ts-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.ts-opt:has(input:checked) { background: var(--pn-surface); color: var(--pn-ink); font-weight: 600; box-shadow: 0 1px 3px oklch(0.2 0.02 285/.12); }
.ts-opt:has(input:focus-visible) { outline: 2px solid var(--pn-accent); }
.task-del-btn { margin-right: auto; }
@media (max-width: 899px) {
  .task-states { display: flex; flex-direction: column; gap: 8px; padding: 0; background: none; width: 100%; }
  .ts-opt { height: 44px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--pn-line); background: var(--pn-surface); }
  .ts-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--pn-accent); background: var(--pn-accent-soft); color: var(--pn-accent-ink); }
}
/* perfil: tarefas abertas */
.prof-tasks { overflow: hidden; }
.prof-tasks h2 { padding: 20px 20px 12px; display: flex; gap: 8px; align-items: center; }
.ptask { padding: 12px 20px; gap: 12px; align-items: flex-start; }
.ptask .pt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ptask .pt-proj { font-weight: 500; }
@media (max-width: 899px) { .prof-tasks h2 { padding: 14px 16px 10px; } .ptask { padding: 12px 16px; } }

/* Aparência (flows-final.jsx AppearanceSettings): Claro ou Escuro com miniatura do modo */
.theme-opts { display: flex; gap: 12px; }
.theme-opt { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; cursor: pointer; background: var(--pn-surface-2); box-shadow: inset 0 0 0 1px var(--pn-line); transition: background .2s, box-shadow .2s; }
.theme-opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.theme-opt:has(input:checked) { background: var(--pn-accent-soft); box-shadow: inset 0 0 0 2px var(--pn-accent); }
.theme-opt:has(input:focus-visible) { outline: 2px solid var(--pn-accent); outline-offset: 2px; }
.theme-thumb { height: 64px; border-radius: 10px; overflow: hidden; display: grid; grid-template-columns: 30% 1fr; box-shadow: inset 0 0 0 1px oklch(0.5 0.01 200/.25); }
.theme-thumb .main { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.theme-thumb .card { height: 18px; border-radius: 5px; }
.theme-thumb .pill { width: 40px; height: 10px; border-radius: 999px; background: #9AD678; }
.theme-thumb.light { background: oklch(0.968 0.004 285); } .theme-thumb.light .side { background: oklch(0.94 0.006 285); } .theme-thumb.light .card { background: #ffffff; }
.theme-thumb.dark { background: #202B30; } .theme-thumb.dark .side { background: #34423F; } .theme-thumb.dark .card { background: #394246; }
.theme-lbl { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--pn-ink); }
.theme-lbl .on, .theme-lbl .theme-check { display: none; }
.theme-check { margin-left: auto; font-weight: 700; }
.theme-opt:has(input:checked) .theme-lbl { color: var(--pn-accent-ink); }
.theme-opt:has(input:checked) .theme-lbl .on, .theme-opt:has(input:checked) .theme-lbl .theme-check { display: inline-block; }
.theme-opt:has(input:checked) .theme-lbl .off { display: none; }

/* Preenchimento automático do navegador: mantém a cor do campo (sem o amarelo do Chrome), com foco e erro visíveis */
.pn input:-webkit-autofill, .pn input:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0 1000px var(--pn-surface) inset; -webkit-text-fill-color: var(--pn-ink); caret-color: var(--pn-ink); transition: background-color 600000s 0s; }
.pn input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--pn-surface) inset, 0 0 0 3px var(--pn-accent-ring); -webkit-text-fill-color: var(--pn-ink); }
.pn input.is-error:-webkit-autofill, .pn input[aria-invalid="true"]:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px var(--pn-surface) inset, 0 0 0 3px oklch(0.58 0.2 25/.12); }
/* linhas na borda de um cartão arredondado: o destaque (hover/foco) acompanha os cantos */
.pn-card > .pn-row:first-child { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.pn-card > .pn-row:last-child { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }