/* File: public/stylesheets/projectWheel/outputs.css
   The output sections of the wheel (views/projectWheel/constructionPlan/*; docs/OUTPUT_SECTIONS.md). Loaded with
   engineering.css, whose eng-* classes (wrap, head, tabs, toolbar, table, pills, timeline) these pages share. */

/* the register row of the output, read without a click */
.out-about { border: 1px solid var(--eng-border); border-radius: 12px; background: var(--eng-soft); padding: .6rem .9rem; margin-top: 1rem; }
.out-about summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .9rem; }
.out-about summary::-webkit-details-marker { display: none; }
.out-about-body { margin-top: .75rem; }
.out-kind-pill { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.out-kind-output { background: #ede9fe; color: var(--eng-purple); }
.out-kind-input { background: #e0f2fe; color: #075985; }
.out-availability { font-size: .85rem; background: #fff; border-radius: 8px; overflow: hidden; }
.out-availability tr.missing td { color: var(--eng-muted); }
.out-availability td.num, .out-availability th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* cards on the package page */
.out-card { border: 1px solid var(--eng-border); border-radius: 12px; background: #fff; padding: 1rem 1.1rem; }
.out-h2 { font-size: 1.05rem; font-weight: 600; color: var(--eng-primary); margin: 0 0 .5rem; }
.out-h3 { font-size: .9rem; font-weight: 600; color: var(--eng-muted); margin: 1rem 0 .4rem; text-transform: uppercase; letter-spacing: .03em; }
.out-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; }
.out-stats > div { background: var(--eng-soft); border-radius: 8px; padding: .5rem .6rem; }
.out-stat { display: block; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.out-stat-label { display: block; font-size: .72rem; color: var(--eng-muted); text-transform: uppercase; letter-spacing: .03em; }
.out-list { padding-left: 1.1rem; margin: 0; font-size: .9rem; }
.out-list li { margin-bottom: .2rem; }
.out-scroll { max-height: 22rem; overflow: auto; }
.out-scroll-sm { max-height: 12rem; overflow: auto; }

/* who wrote a field */
.out-field { margin-bottom: .75rem; }
.out-src { display: inline-block; border-radius: 999px; padding: .1rem .5rem; font-size: .7rem; font-weight: 600; }
.out-src-derived { background: #e0f2fe; color: #075985; }
.out-src-person { background: #dcfce7; color: #166534; }
.out-src-agent { background: #ede9fe; color: var(--eng-purple); }
.out-src-empty { background: #f1f5f9; color: var(--eng-muted); }
.out-textarea { font-size: .9rem; }
.out-constraint { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.out-constraint .note { flex: 1 1 12rem; }

/* the wheel's legend: the slots that are outputs */
.pw-output-legend { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; font-size: .8rem; color: #64748b; margin: .5rem 0 0; }
.pw-output-legend .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .3rem; vertical-align: -1px; }
.pw-output-legend .swatch-output { background: #8b5cf6; }
.pw-output-legend .swatch-input { background: #0ea5e9; }
svg .pw-slot-output { stroke: #8b5cf6; stroke-width: 2px; }
svg .pw-slot-input { stroke: #0ea5e9; stroke-width: 1px; }

/* the registers (docs/REGISTERS_BUILD.md): tiles with a tone, KPI cards with a health, the record's field list */
.out-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.out-tile { background: var(--eng-soft); border-radius: 8px; padding: .5rem .6rem; border-left: 4px solid var(--eng-border); }
.out-tile-green { border-left-color: #198754; } .out-tile-amber { border-left-color: #ffc107; } .out-tile-red { border-left-color: #dc3545; } .out-tile-muted { border-left-color: var(--eng-border); }
.out-stats > div.out-tile-green { box-shadow: inset 4px 0 0 #198754; } .out-stats > div.out-tile-amber { box-shadow: inset 4px 0 0 #ffc107; } .out-stats > div.out-tile-red { box-shadow: inset 4px 0 0 #dc3545; }
.out-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .5rem; }
.out-kpi { display: flex; flex-direction: column; gap: .15rem; text-decoration: none; color: inherit; background: #fff; border: 1px solid var(--eng-border); border-radius: 10px; padding: .55rem .7rem; border-top: 4px solid var(--eng-border); }
.out-kpi:hover { border-color: var(--eng-primary); color: inherit; }
.out-kpi-title { font-size: .8rem; color: var(--eng-muted); } .out-kpi-value { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; } .out-kpi-sub { font-size: .72rem; color: var(--eng-muted); }
.out-health-green { border-top-color: #198754; } .out-health-amber { border-top-color: #ffc107; } .out-health-red { border-top-color: #dc3545; } .out-health-gap { border-top-color: #94a3b8; background: #f8fafc; } .out-health-none { border-top-color: var(--eng-border); }
span.out-health { display: inline-block; border-radius: 999px; padding: .1rem .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; }
span.out-health-green { background: #dcfce7; color: #166534; } span.out-health-amber { background: #fef3c7; color: #92400e; } span.out-health-red { background: #fee2e2; color: #991b1b; } span.out-health-gap { background: #f1f5f9; color: #475569; } span.out-health-none { background: #f1f5f9; color: var(--eng-muted); }
.out-health-text.out-health-green { color: #166534; font-weight: 600; } .out-health-text.out-health-amber { color: #92400e; font-weight: 600; } .out-health-text.out-health-red { color: #991b1b; font-weight: 600; } .out-health-text.out-health-gap { color: #475569; font-weight: 600; }
.out-score { display: inline-block; min-width: 2.2rem; text-align: center; border-radius: 6px; padding: .05rem .35rem; font-weight: 600; background: var(--eng-soft); }
.out-dl { margin: 0; } .out-dl-row { display: grid; grid-template-columns: 11rem 1fr; gap: .5rem; padding: .3rem 0; border-bottom: 1px dashed var(--eng-border); font-size: .9rem; }
.out-dl-row dt { color: var(--eng-muted); font-weight: 500; } .out-dl-row dd { margin: 0; } .out-prewrap { white-space: pre-wrap; }
.out-crumb { font-size: .85rem; } .out-crumb a { text-decoration: none; }
.out-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; }
.out-pill-ok { background: #dcfce7; color: #166534; }

@media (max-width: 768px) {
    .out-stats { grid-template-columns: repeat(2, 1fr); }
    .out-dl-row { grid-template-columns: 1fr; }
}