/* OutSec shared design system -- KANCHO-only additions.
 * Loaded after design-system.css. Anything genuinely app-specific
 * (not reusable by HOKOKU's report) goes here rather than bloating the
 * shared file. Kept minimal on purpose -- add to this only when a real
 * KANCHO template needs something design-system.css doesn't cover;
 * don't pre-build speculative components.
 *
 * Filled in during the KANCHO template migration (Phase 3) as concrete
 * needs surface, e.g. named grid layouts for specific pages.
 */

/* App shell -- KANCHO is a full-height interactive app, unlike HOKOKU's
   scrolling report documents, so it needs its own body layout. */
body { min-height: 100vh; display: flex; flex-direction: column; }

.wordmark-sub { font-size: 12px; font-weight: 400; }
.app-nav .wordmark-sub { color: var(--muted-on-dark); }
.auth-card .wordmark-sub { color: var(--muted); }

/* ── Small layout/spacing utility layer ──────────────────────────────────
   Deliberately small and curated (not a Tailwind clone): plumbing for
   flex/grid layout and spacing that recurs across nearly every template,
   not a substitute for real components. Actual UI patterns (panels,
   tables, buttons, form fields, badges) use design-system.css's named
   components (.card/.table-wrap/.btn-*/.field/.tag-*), not utilities. */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1 1 0%; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }
.w-full { width: 100%; }
.max-w-sm { max-width: 24rem; }
.max-w-lg { max-width: 32rem; }
.shrink-0 { flex-shrink: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.break-all { word-break: break-all; }
.select-all { user-select: all; }
.justify-center { justify-content: center; }

.p-4 { padding: 16px; }
.p-6 { padding: 24px; }
.px-4 { padding-left: 16px; padding-right: 16px; }
.py-2 { padding-top: 8px; padding-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-8 { margin-bottom: 32px; }
.ml-2 { margin-left: 8px; }
.mr-2 { margin-right: 8px; }
.nowrap { white-space: nowrap; }
.required-mark { color: var(--danger); }
.back-link { font-size: 13px; color: var(--muted); }
.back-link:hover { color: var(--ink); }

.text-xs { font-size: 11px; }
.text-sm { font-size: 13px; }
.text-lg { font-size: 17px; }
.text-xl { font-size: 20px; }
.text-2xl { font-size: 24px; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.font-normal { font-weight: 400; }
.text-pass { color: var(--status-pass); }
.text-fail { color: var(--danger); }

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.status-dot-pass { background: var(--status-pass); }
.status-dot-off { background: var(--border-light-2); }

.qr-image { width: 192px; height: 192px; }

.btn-success { background: var(--status-pass); color: #fff; }
.btn-success:hover { background: #157048; }
.btn-outline-danger { background: none; border: 1px solid rgba(209, 41, 61, 0.4); color: var(--danger); }
.btn-outline-danger:hover { background: var(--danger-bg); }

.pill-toggle { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; border: 1px solid var(--border-light-2); background: #fff; color: var(--muted); text-decoration: none; }
.pill-toggle:hover { background: var(--card-on-paper); }
.pill-toggle.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* Pill-shaped radio group (findings status picker) -- pure CSS
   equivalent of Tailwind's peer-checked pattern: a visually-hidden
   radio input followed by a styled label, using the sibling combinator
   + :checked pseudo-class (both plain standard CSS, no framework
   needed). */
.pill-radio-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pill-radio-option { display: inline-block; padding: 4px 12px; font-size: 12px; border-radius: 9999px; border: 1px solid var(--border-light-2); color: var(--muted); user-select: none; cursor: pointer; }
.pill-radio-option:hover { background: var(--card-on-paper); }
.pill-radio-input:checked + .pill-radio-option { border-color: transparent; }
.pill-radio-input:checked + .pill-radio-option.pill-pass { background: rgba(27, 138, 90, 0.14); color: var(--status-pass); }
.pill-radio-input:checked + .pill-radio-option.pill-fail { background: var(--danger-bg); color: var(--danger); }
.pill-radio-input:checked + .pill-radio-option.pill-na { background: var(--card-on-paper); color: var(--ink); }
.pill-radio-input:checked + .pill-radio-option.pill-unknown { background: rgba(201, 130, 15, 0.14); color: var(--status-medium); }

.items-end { align-items: flex-end; }
.min-w-48 { min-width: 12rem; }
.w-48 { width: 12rem; }
.w-24 { width: 6rem; }
.finding-row { padding: 16px 24px; border-bottom: 1px solid var(--border-light); }
.finding-row:last-child { border-bottom: none; }
.card-header-flat { padding: 16px 24px; border-bottom: 1px solid var(--border-light); background: var(--card-on-paper); }

.inline-flex { display: inline-flex; }
.w-28 { width: 7rem; }
.field-inline { display: flex; gap: 8px; }

.btn-outline-pass { background: rgba(27, 138, 90, 0.08); border: 1px solid rgba(27, 138, 90, 0.3); color: var(--status-pass); }
.btn-outline-pass:hover { background: rgba(27, 138, 90, 0.16); }
.btn-outline-neutral { background: var(--card-on-paper); border: 1px solid var(--border-light-2); color: var(--muted); }
.btn-outline-neutral:hover { background: var(--border-light-2); }

.text-medium { color: var(--status-medium); }
.text-nd { color: var(--status-nd); }
.text-low { color: var(--signal); }
.pt-4-bordered { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-light); }
.label-block { display: block; margin-bottom: 4px; }
.block { display: block; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.04em; }
.tracking-widest { letter-spacing: 0.15em; }
.capitalize { text-transform: capitalize; }

/* Login/auth pages (login.html, login_totp.html, login_totp_setup.html)
   -- standalone pages, don't extend base.html, so don't get .app-nav. */
.auth-shell { background: var(--ink); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: #ffffff; border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); padding: 32px; width: 100%; max-width: 24rem; }
.auth-card h1 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.auth-card .subtitle { color: var(--muted); font-size: 13px; margin-bottom: 24px; }

/* Common page-level patterns repeated across list/CRUD pages */
.page-heading { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); }
.empty-state { background: #ffffff; border: 1px solid var(--border-light-2); border-radius: 14px; padding: 32px; text-align: center; color: var(--muted); font-size: 13px; }
.link-muted { color: var(--muted); font-size: 12px; }
.link-muted:hover { color: var(--ink); }

.breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; font-size: 13px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { color: var(--border-light-2); }
.breadcrumb .current { color: var(--muted); }

.form-actions { display: flex; gap: 12px; padding-top: 8px; }
.form-actions .btn-cancel { color: var(--muted); padding: 9px 16px; font-size: 13.5px; }
.form-actions .btn-cancel:hover { color: var(--ink); }

.btn-text-danger { background: none; border: none; color: var(--danger); font-size: 13px; cursor: pointer; padding: 0; }
.btn-text-danger:hover { color: #ab2030; }

.inline-form { display: inline; }
.link-danger-sm { color: var(--danger); font-size: 12px; background: none; border: none; cursor: pointer; padding: 0; }
.link-danger-sm:hover { color: #ab2030; }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 768px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}