/* Focused approvals task view (/app/approvals). One job: decide on a waiting write.
   Uses style.css colour variables; no grid, no glow, monospace only for SQL and ids. No emoji. */
body.ap { background-image: none; background: var(--paper); font-family: var(--sans); }
.ap-wrap { max-width: 680px; margin: 0 auto; padding: 28px 24px 64px; }

.ap-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.ap-head h1 { font-family: var(--serif); font-size: 30px; font-weight: 400; margin: 0; letter-spacing: -0.03em; }
.ap-tabs { display: flex; gap: 4px; margin-left: auto; background: var(--panel-2); border: 1px solid var(--rule); border-radius: 4px; padding: 3px; }
.ap-tabs button { background: transparent; border: 0; color: var(--muted); padding: 7px 14px; font: 500 13px var(--sans); box-shadow: none; border-radius: 3px; cursor: pointer; }
.ap-tabs button:hover { background: transparent; color: var(--ink); border: 0; }
.ap-tabs button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(36,55,36,.12); }
.ap-tabs span { color: var(--yellow); margin-left: 4px; }
.ap-sub { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 8px 0 20px; }
.ap-empty { color: var(--muted); font-size: 15px; padding: 28px; background: var(--card); border: 1px solid var(--rule); border-radius: 6px; text-align: center; }
.ap-flash { font-size: 14px; margin-bottom: 10px; }
.ap-flash:empty { display: none; }
.ap-flash.ok { color: var(--green); }
.ap-flash.neutral { color: var(--muted); }
.ap-flash.err { color: var(--red); }

.ap-card { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 18px 40px -32px rgba(36,55,36,.28); padding: 20px 22px; margin-bottom: 14px; }
.ap-card.waiting { border-color: #dcc58f; }

.ap-status { display: flex; align-items: center; gap: 8px; font: 600 12px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; flex-wrap: wrap; }
.ap-status .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ap-status.waiting { color: var(--yellow); }
.ap-status.approved { color: var(--green); }
.ap-status.denied, .ap-status.expired, .ap-status.cancelled { color: var(--red); }
.ap-status .timer { margin-left: auto; font: 500 13px var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }

.ap-title { font-size: 20px; font-weight: 600; margin: 10px 0 12px; line-height: 1.35; color: var(--ink); }
.ap-title .id { font-family: var(--mono); font-weight: 500; }
.ap-title .op { font-family: var(--mono); font-weight: 600; color: var(--yellow); }
.ap-card:not(.waiting) .ap-title .op { color: var(--ink); }

.ap-sql { font-family: var(--mono); font-size: 15.5px; line-height: 1.6; color: var(--ink); background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 3px; padding: 12px 14px; margin-top: 14px; white-space: pre; overflow-x: auto; }
.ap-sql .kw { color: var(--blue); font-weight: 600; }
.ap-note { font-size: 12.5px; color: var(--faint); margin: 6px 0 0; }

.ap-decide { margin-top: 16px; display: grid; gap: 8px; }
.ap-decide .ap-buttons { margin-top: 6px; }
body.ap .ap-reason { width: 100%; box-sizing: border-box; padding: 10px 12px; font: 400 14.5px var(--sans); letter-spacing: 0; text-transform: none; background: #fff; border: 1px solid var(--rule); border-radius: 3px; color: var(--ink); }
body.ap .ap-reason::placeholder { color: #9aa096; }
body.ap .ap-reason:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--green-soft); }
.ap-reason-row { display: grid; gap: 4px; }
.ap-help { font: 400 12.5px var(--sans); color: var(--faint); }
.ap-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 420px; }
@media (max-width: 560px) { .ap-buttons { max-width: none; } }
.ap-buttons button { padding: 13px 16px; font: 600 15.5px var(--sans); border-radius: 3px; box-shadow: none; cursor: pointer; }
.ap-approve { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.ap-approve:hover { background: var(--green-2); border-color: var(--green-2); }
.ap-deny { background: transparent; color: var(--red); border: 1px solid var(--red); }
.ap-deny:hover { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.ap-buttons button:disabled { opacity: 0.5; cursor: default; }

.ap-details { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.ap-details summary { cursor: pointer; color: var(--muted); list-style: none; }
.ap-details summary::-webkit-details-marker { display: none; }
.ap-details summary::before { content: "+ "; font-family: var(--mono); }
.ap-details[open] summary::before { content: "- "; }
.ap-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font-size: 14.5px; line-height: 1.45; }
.ap-facts .mono { font-family: var(--mono); font-size: 13.5px; }
.ap-facts .unk { color: var(--yellow); font-weight: 600; }
.ap-record { margin-top: 14px; }
.ap-record .who { font-weight: 600; color: var(--ink); }
.ap-label { font: 500 14px var(--sans); color: var(--ink); }
.ap-label .muted { font-weight: 400; color: var(--faint); }
.ap-facts dt { color: var(--faint); }
.ap-facts dd { margin: 0; color: var(--ink); }
.ap-facts .warn { color: var(--yellow); }

.ap-outcome { margin-top: 14px; font-size: 15px; color: var(--ink); line-height: 1.5; }
.ap-outcome .who { font-weight: 600; color: var(--ink); }
.ap-outcome .why { display: block; color: var(--muted); margin-top: 2px; }

/* Top bar on this page: own nav styles, wraps on phones. */
body.ap .topbar { flex-wrap: wrap; background: rgba(248,247,242,0.94); font-family: var(--sans); }
body.ap .brand { font-weight: 600; }

@media (max-width: 560px) {
  .ap-wrap { padding: 16px 12px 40px; }
  .ap-head h1 { font-size: 22px; }
  .ap-sub { font-size: 13.5px; margin: 6px 0 14px; }
  .ap-card { padding: 16px 14px; }
  .ap-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .ap-facts dd { margin-bottom: 8px; }
  .ap-title { font-size: 18px; margin: 8px 0 10px; }
  .ap-sql { font-size: 14px; padding: 10px 12px; }
  .ap-buttons button { padding: 14px 10px; }
}
.nw { white-space: nowrap; }