/* osha300.css — OSHA 300 log / 301 / 300A.
   Same vocabulary as injury.css (HR card look, pills, fieldsets). The one
   deliberate emphasis: anything with a legal clock on it (severe-injury
   report to OSHA, 7-day entry, Feb 1 posting) renders as a banner, not a hint. */

.osha-wrap { display: flex; flex-direction: column; gap: .9rem; padding: 0 .35rem; min-width: 0; }
/* fieldsets default to min-width:min-content and will widen the page past the
   viewport on long lines — every container here is allowed to shrink */
.osha-fs, .osha-row, .osha-q, .osha-verdict, .osha-form, .osha-grid { min-width: 0; }
.osha-row-sub, .osha-row-meta, .osha-step p, .osha-contact { overflow-wrap: anywhere; }
.osha-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.osha-head h3 { margin: 0; }
.osha-sub { display: flex; gap: .35rem; flex-wrap: wrap; }
.osha-sub button {
  border-radius: 999px; padding: .35rem .8rem; font-size: .82rem; cursor: pointer;
  border: 1px solid var(--border, #d1d5db); background: var(--surface-2, #f3f4f6);
}
.osha-sub button.active { background: var(--amber, #f3b73f); border-color: var(--amber, #f3b73f); color: #1b1b1b; font-weight: 600; }
.osha-sub .cnt { margin-left: .3rem; font-weight: 700; }

.osha-banner {
  border-radius: 10px; padding: .6rem .85rem; font-size: .88rem; line-height: 1.4;
  border: 1px solid var(--danger, #c0392b); background: color-mix(in srgb, var(--danger, #c0392b) 7%, transparent);
  color: #7a1b12;
}
.osha-banner.warn { border-color: #b7791f; background: #fff8e6; color: #7a4d00; }
.osha-banner.info { border-color: #2f6df6; background: #eef3ff; color: #1b3f8f; }
.osha-banner b { font-weight: 700; }

.osha-toolbar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.osha-toolbar select, .osha-toolbar input {
  font: inherit; padding: .4rem .55rem; border: 1px solid var(--border, #d1d5db); border-radius: 8px; background: var(--surface, #fff);
}
.osha-btn, .osha-btn-primary, .osha-btn-danger {
  border-radius: 8px; padding: .5rem .85rem; font-size: .9rem; cursor: pointer; border: 1px solid transparent;
}
.osha-btn { background: var(--surface-2, #f3f4f6); border-color: var(--border, #d1d5db); }
.osha-btn-primary { background: var(--accent, #2563eb); color: #fff; }
.osha-btn-danger { background: var(--danger, #c0392b); color: #fff; font-weight: 600; }
.osha-btn:hover, .osha-btn-primary:hover, .osha-btn-danger:hover { filter: brightness(1.06); }
.osha-btn[disabled], .osha-btn-primary[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- log table ---- */
.osha-tablewrap { overflow-x: auto; border: 1px solid var(--border, #d1d5db); border-radius: 10px; background: var(--surface, #fff); }
.osha-table { border-collapse: collapse; width: 100%; font-size: .84rem; min-width: 900px; }
.osha-table th, .osha-table td { padding: .45rem .55rem; border-bottom: 1px solid var(--border, #eef0f2); text-align: left; vertical-align: top; }
.osha-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted, #6b7280); background: var(--surface-2, #f9fafb); white-space: nowrap; }
.osha-table td.c { text-align: center; } .osha-table td.n { text-align: right; font-variant-numeric: tabular-nums; }
.osha-table tr.clickable { cursor: pointer; } .osha-table tr.clickable:hover { background: var(--surface-2, #f9fafb); }
.osha-table tr.void td { text-decoration: line-through; color: var(--muted, #9ca3af); }
.osha-table tfoot td { font-weight: 700; border-top: 2px solid var(--border, #d1d5db); }
.osha-empty { padding: 1.2rem; text-align: center; color: var(--muted, #6b7280); font-size: .9rem; }

/* ---- pills ---- */
.osha-pill { display: inline-block; margin-left: .35rem; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; vertical-align: middle; white-space: nowrap; }
.osha-pill--pending { background: #fef6e0; color: #8a5b00; }
.osha-pill--recordable { background: #fdecea; color: #a11c11; }
.osha-pill--not_recordable { background: #eef2f5; color: #4b5563; }
.osha-pill--open { background: #e8f2fd; color: #1b4f9c; }
.osha-pill--closed { background: #e6f6ee; color: #12633f; }
.osha-pill--late { background: #fdecea; color: #a11c11; }
.osha-pill--severe { background: #c0392b; color: #fff; }
.osha-pill--privacy { background: #ede9fe; color: #5b21b6; }
.osha-pill--incident { background: #f1f3f5; color: #4b5563; }

/* ---- review queue ---- */
.osha-list { display: flex; flex-direction: column; gap: .5rem; }
.osha-row { border: 1px solid var(--border, #d1d5db); border-radius: 10px; padding: .7rem .85rem; background: var(--surface, #fff); }
.osha-row-title { font-weight: 600; font-size: .95rem; }
.osha-row-sub { font-size: .85rem; color: var(--muted, #6b7280); margin-top: .15rem; white-space: pre-wrap; }
.osha-row-meta { font-size: .78rem; color: var(--muted, #9ca3af); margin-top: .2rem; }
.osha-row-actions { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .55rem; }

/* ---- checklist ---- */
.osha-check { display: flex; flex-direction: column; gap: .5rem; margin-top: .5rem; }
.osha-q { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; font-size: .86rem; padding: .35rem .5rem; border-radius: 8px; background: var(--surface-2, #f9fafb); }
.osha-q .yn { display: flex; gap: .4rem; }
.osha-q .yn label { display: flex; gap: .2rem; align-items: center; font-size: .82rem; }
.osha-q .note { grid-column: 1 / -1; font-size: .76rem; color: var(--muted, #6b7280); }
.osha-verdict { font-size: .9rem; padding: .5rem .7rem; border-radius: 8px; border: 1px dashed var(--border, #d1d5db); }
.osha-verdict.rec { border-color: var(--danger, #c0392b); color: #7a1b12; }
.osha-verdict.not { border-color: #12633f; color: #12633f; }

/* ---- forms ---- */
.osha-form { display: flex; flex-direction: column; gap: .75rem; }
.osha-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .6rem .8rem; }
.osha-l { display: flex; flex-direction: column; gap: .3rem; font-size: .84rem; font-weight: 600; }
.osha-l input, .osha-l textarea, .osha-l select {
  font: inherit; font-weight: 400; padding: .45rem .55rem; border: 1px solid var(--border, #d1d5db);
  border-radius: 8px; background: var(--surface, #fff); color: inherit; width: 100%;
}
.osha-l textarea { resize: vertical; }
.osha-l.wide { grid-column: 1 / -1; }
.osha-cb { display: flex; gap: .45rem; align-items: center; font-size: .86rem; font-weight: 400; }
.osha-fs { border: 1px solid var(--border, #d1d5db); border-radius: 10px; padding: .85rem; display: flex; flex-direction: column; gap: .7rem; }
.osha-fs legend { font-size: .85rem; font-weight: 700; padding: 0 .4rem; }
.osha-fs.severe { border-color: var(--danger, #c0392b); background: color-mix(in srgb, var(--danger, #c0392b) 5%, transparent); }
.osha-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .25rem; }
.osha-err { color: var(--danger, #c0392b); font-size: .88rem; margin: .25rem 0 0; }
.osha-hint { font-size: .8rem; color: var(--muted, #6b7280); line-height: 1.4; margin: 0; }

/* ---- summary ---- */
.osha-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.osha-stat { border: 1px solid var(--border, #d1d5db); border-radius: 10px; padding: .6rem .75rem; background: var(--surface, #fff); }
.osha-stat .k { font-size: .72rem; text-transform: uppercase; color: var(--muted, #6b7280); letter-spacing: .03em; }
.osha-stat .v { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- guide ---- */
.osha-guide { display: flex; flex-direction: column; gap: .7rem; }
.osha-step { border-left: 3px solid var(--amber, #f3b73f); padding: .35rem .8rem; }
.osha-step h4 { margin: 0 0 .25rem; font-size: .95rem; }
.osha-step p { margin: 0; font-size: .88rem; line-height: 1.5; }
.osha-step ol, .osha-step ul { margin: .35rem 0 .5rem; padding-left: 1.3rem; font-size: .88rem; line-height: 1.5; }
.osha-step li { margin: .2rem 0; }
.osha-contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .5rem; }
.osha-contact { border: 1px solid var(--border, #d1d5db); border-radius: 8px; padding: .5rem .7rem; font-size: .86rem; }
.osha-contact .k { font-size: .72rem; text-transform: uppercase; color: var(--muted, #6b7280); }

/* ---- audit ---- */
.osha-audit { font-size: .8rem; color: var(--muted, #6b7280); display: flex; flex-direction: column; gap: .25rem; }

@media (max-width: 640px) {
  .osha-actions, .osha-row-actions { flex-direction: column; }
  .osha-actions button, .osha-row-actions button { width: 100%; }
  .osha-q { grid-template-columns: 1fr; }
}