/* The cockpit page /inside/cockpit/, written by scripts/build_cockpit.py from inside/cockpit/cockpit.json (ADR-0031).
   Linked from this page only, after docs.css and inside.css. The area rows follow the area rows of the CTO powersuit
   pages (/cto-powersuit/powersuit.css): the area's name, line, and plugins left, its scorecard right. Colours, type,
   radii, and the main spacing come from /design/tokens.css (ADR-0025); a few layout lengths are set here. */

main.wrap.ck { max-width: 1100px; }
.ck-head { margin-bottom: var(--mb-space-4); }
.ck-head .lede { max-width: 760px; }
.ck .sec { margin-top: var(--mb-space-6); }
.ck .note { max-width: 760px; }
.ck .empty { font: var(--mb-text-xs)/1.5 var(--mb-font-mono); color: var(--mb-text-dim); margin: 0; }
.ck-label { font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--mb-text-dim); }

/* totals */
.ck-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0 0 var(--mb-space-4); padding: 0; list-style: none; }
.ck-kpi { padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.ck-kpi .k { font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); letter-spacing: 1.6px; text-transform: uppercase; color: var(--mb-text-dim); }
.ck-kpi .v { font: 500 var(--mb-text-xl)/1.2 var(--mb-font-sans); color: var(--mb-text); }
.ck-kpi .s { font: var(--mb-text-xs)/1.5 var(--mb-font-mono); color: var(--mb-text-dim); }

/* the trend: one column per day, the bar scaled to the highest day */
.ck-panel { padding: 14px 16px; min-width: 0; }
.ck-panel h2 { margin: 0 0 10px; font: 400 var(--mb-text-xs)/1.4 var(--mb-font-mono); letter-spacing: 2.4px; text-transform: uppercase; color: var(--mb-text-dim); border: 0; padding: 0; }
.ck-trend { margin: 0; }
.ck-trend figcaption { font-size: var(--mb-text-sm); line-height: 1.45; color: var(--mb-text-soft); margin: 0 0 12px; max-width: 760px; }
.ck-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; }
.ck-days li { display: grid; grid-template-rows: 96px auto auto auto; gap: 2px; justify-items: center; min-width: 0; }
.ck-col { width: 100%; height: 96px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--mb-line); }
.ck-fill { width: 100%; min-height: 2px; border-radius: var(--mb-radius-s) var(--mb-radius-s) 0 0; background: var(--mb-accent); opacity: 0.8; }
.ck-n { font: 500 var(--mb-text-xs)/1.4 var(--mb-font-mono); color: var(--mb-text); }
.ck-c { font: var(--mb-text-xs)/1.4 var(--mb-font-mono); color: var(--mb-ok); }
.ck-day { font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); color: var(--mb-text-dim); white-space: nowrap; }
.ck-legend { display: flex; gap: 16px; margin: 10px 0 0; font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); color: var(--mb-text-dim); }
.ck-legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--mb-accent); }
.ck-legend span + span::before { background: var(--mb-ok); }

/* the areas: one row per area */
.ck-areas { margin: var(--mb-space-4) 0 0; border-bottom: 1px solid var(--mb-line); }
.ck-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--mb-space-5); padding: var(--mb-space-5) 0; border-top: 1px solid var(--mb-line); align-items: start; scroll-margin-top: calc(var(--mb-bar-h) + 12px); }
.ck-area:target { background: var(--mb-surface-hover); }
.ck-area-head h3 { margin: 0; font: 600 var(--mb-text-lg)/1.25 var(--mb-font-sans); color: var(--mb-text); }
.ck-area-head > p { margin: 6px 0 0; font-size: var(--mb-text-sm); line-height: 1.45; color: var(--mb-text-dim); }
.ck-plugins { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; }
.ck-plugins > span:last-child { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ck-plugins a { text-decoration: none; color: var(--mb-accent); }
.ck-plugins a:hover, .ck-plugins a:focus-visible { text-decoration: underline; }
.ck-plugins code { background: none; border: 0; padding: 0; font: 700 var(--mb-text-sm)/1.4 var(--mb-font-mono); color: inherit; }
.ck-card { padding: var(--mb-space-3) var(--mb-space-4); background: var(--mb-surface-raised); border: 1px solid var(--mb-line); border-radius: var(--mb-radius-l); display: grid; gap: 10px; min-width: 0; }
.ck-counts, .ck-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.ck-counts dt, .ck-kinds dt { font: var(--mb-text-2xs)/1.4 var(--mb-font-mono); letter-spacing: 0.6px; color: var(--mb-text-dim); }
.ck-counts dd { margin: 0; font: 500 var(--mb-text-lg)/1.25 var(--mb-font-sans); color: var(--mb-text); }
.ck-kinds dd { margin: 0; font: 500 var(--mb-text-md)/1.3 var(--mb-font-sans); color: var(--mb-text-soft); }
.ck-mix { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--mb-surface-sunken); }
.ck-mix span { min-width: 4px; }
.ck-mix-open, .ck-counts div:nth-child(1) dt::before { background: var(--mb-accent); }
.ck-mix-prog, .ck-counts div:nth-child(2) dt::before { background: var(--mb-info); }
.ck-mix-block, .ck-counts div:nth-child(3) dt::before { background: var(--mb-bad); }
.ck-counts div:nth-child(-n+3) dt::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.ck-card > .ck-label { margin: 2px 0 0; }

/* the open items of an area, as cards under its row */
.ck-open { grid-column: 1 / -1; min-width: 0; }
.ck-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: var(--mb-space-2); }
.ck-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--mb-surface-raised); border: 1px solid var(--mb-line); border-radius: var(--mb-radius-m); min-width: 0; }
.ck-item > a { color: var(--mb-text); font-weight: 500; font-size: var(--mb-text-sm); line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.ck-item > a:hover, .ck-item > a:focus-visible { color: var(--mb-accent); text-decoration: underline; }
.ck-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font: var(--mb-text-2xs)/1.5 var(--mb-font-mono); color: var(--mb-text-dim); }
.ck-chip { padding: 0 6px; border: 1px solid var(--mb-line); border-radius: 5px; color: var(--mb-text-soft); white-space: nowrap; }
.ck-st-open { border-color: color-mix(in srgb, var(--mb-accent) 55%, transparent); color: var(--mb-accent); }
.ck-st-in_progress { border-color: color-mix(in srgb, var(--mb-info) 55%, transparent); color: var(--mb-info); }
.ck-st-blocked { border-color: color-mix(in srgb, var(--mb-bad) 55%, transparent); color: var(--mb-bad); }
.ck-about a { color: var(--mb-accent); }
.ck-about { font-size: var(--mb-text-md); line-height: 1.55; color: var(--mb-text-soft); }
.ck-about p, .ck-about ul { max-width: 760px; }
.ck-about ul.links li { border-top: 0; padding: 3px 0; }

@media (max-width: 820px) {
  .ck-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ck-area { grid-template-columns: minmax(0, 1fr); gap: var(--mb-space-3); }
}
@media (max-width: 560px) {
  .ck-days { grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 12px; }
  .ck-counts, .ck-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}