/* Incidents only. The shared look (colours, fonts, header, panels, forms, buttons,
   lists, dialogs, footer, phone layout) is in portal.css, the same file the other
   group tools use. Keep portal.css identical in every tool. */

/* Phone and time boxes look like the other inputs (portal.css styles text, email, number and date). */
input[type=tel], input[type=time] {
  width: 100%; border: 1px solid var(--line); background: var(--ground); border-radius: 6px; padding: 8px 10px; font-size: .95rem;
  text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); height: 40px; line-height: 1.2;
}
input[type=time] { -webkit-appearance: none; appearance: none; display: block; }
@media (max-width: 760px) { input[type=tel], input[type=time] { font-size: 16px; padding: 10px 12px; height: 44px; } }
/* Tabs sit on the right, next to the email, as in the other group tools. */
.top nav.tabs { margin-left: auto; }
.panel.stack > h2, .panel.stack > p { margin: 0; }
.nowrap { white-space: nowrap; }
.outside-note { color: var(--warn); font-weight: 600; }
.filters .spacer { flex: 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Public report form ---------- */
.report { max-width: 760px; margin: 0 auto; }
.banner.urgent { background: var(--bad-soft); color: var(--ink); border-left: 4px solid var(--bad); margin-bottom: 20px; }
.banner.urgent strong { display: block; color: var(--bad); }
.banner.urgent a { color: inherit; font-weight: 700; }
.report .intro p { margin: 0 0 8px; }
.report .intro p:last-child { margin: 0; }
.req { color: var(--bad); font-weight: 700; }
.lt { display: block; }
.choices { display: grid; gap: 10px; }
.q-err { color: var(--bad); font-size: .85rem; font-weight: 600; margin-top: 4px; }
.q.invalid input, .q.invalid select, .q.invalid textarea { border-color: var(--bad); }
fieldset.q.invalid { border-color: var(--bad); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#sendMsg:empty { display: none; }
.gate h1 + p strong { font-family: var(--font-display); font-size: 1.15em; }

/* ---------- One incident: the report beside its follow-up ---------- */
.detail-bar { margin-bottom: 14px; }
.detail { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 980px) { .detail { grid-template-columns: 1fr; } }
.followup { display: grid; gap: 20px; }
.followup > .panel + .panel { margin-top: 0; }
.detail-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.detail-head h2 { margin: 0; }
.report-view h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin: 20px 0 6px; }
.answers { margin: 0; display: grid; gap: 0; }
.answers .qa { padding: 8px 0; border-bottom: 1px solid var(--line); }
.answers .qa:last-child { border-bottom: 0; }
.answers dt { font-size: .8rem; font-weight: 600; color: var(--muted); }
.answers dd { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tl { padding: 10px 0 10px 14px; border-left: 3px solid var(--line); margin-left: 2px; }
.tl + .tl { border-top: 1px dashed var(--line); }
.tl-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 4px; }
.tl-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.tl-status, .tl-owner { border-left-color: var(--line); }
.tl-status .tl-text, .tl-owner .tl-text { color: var(--muted); font-size: .92rem; }
.tl-action { border-left-color: var(--good); }
.tl-external { border-left-color: var(--warn); }
.tl-outcome { border-left-color: var(--accent); }
.tl-outcome .tl-text { font-weight: 600; }
.danger-zone h2 { color: var(--bad); }

/* ---------- Printing an incident: just the report and its record ---------- */
@media print {
  .top, .mnav, .msheet, .site-foot, .detail-bar, #manage, #entryForm, #deletePanel, .banner, .toast { display: none !important; }
  body, .panel { background: #fff !important; color: #000 !important; }
  .panel { border: 0 !important; padding: 0 !important; }
  .detail { display: block; }
  .followup { margin-top: 24px; }
  .wrap { max-width: none; padding: 0; }
}
a.cname { color: var(--accent); text-decoration: none; } a.cname:hover { text-decoration: underline; }
td.brief { max-width: 360px; color: var(--muted); }