/* SPDX-License-Identifier: Apache-2.0 */
/* Present the CCIR container, component controls and portable-state explanation. */
.ccir-intro { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.3fr); isolation: isolate; overflow: hidden; }
.ccir-heading { position: relative; z-index: 1; margin-bottom: 48px; padding: 28px 24px; background: linear-gradient(90deg, #102b1ef7, #102b1ee8 85%, #102b1e99); border: 1px solid #739b8277; border-right: 0; }
.ccir-heading h1 { font: italic 72px/1.15 var(--display); color: #dbffe5; letter-spacing: -6px; margin: 12px 0; }
.ccir-expansion { color: #c5e2ce; font-size: 21px; line-height: 1.3; margin: 10px 0 21px; }
.ccir-heading .lead { font-size: 28px; margin-bottom: 14px; }
.ccir-heading > p:last-of-type { max-width: 34ch; font-size: 17px; color: #bed8c7; }
.ccir-heading .action-button { max-width: 320px; }
.ccir-object { position: absolute; inset: 5px; min-width: 0; background: #102c1d; border: 1px solid #335a3e; }
.ccir-object > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 56% 50%; }
.container-name { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #092617dc; border-top: 1px solid #80a98d; }
.container-name span, .container-name small { display: block; font: 6px/1.7 var(--display); letter-spacing: 1px; color: #b8d7c2; }
.container-name b { display: block; font: 17px/1.4 var(--display); color: #d4ffdf; }
.ccir-index { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ccir-explorer h2 { margin: 0 0 8px; font-size: 18px; }
.container-explorer { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; }
.container-slots { display: flex; flex-direction: column; gap: 7px; padding: 9px; border: 1px solid #0c2516; outline: 1px solid #8daf99; background: repeating-linear-gradient(0deg, #d8f4df0c 0 1px, transparent 1px 3px), #193d29; box-shadow: inset 0 2px 7px #02180d; }
.container-slots button { display: flex; align-items: center; gap: 12px; min-height: 62px; width: 100%; padding: 8px; text-align: left; background: var(--metal); color: #143720; border: 1px solid #e3ffeb; border-right-color: #4b6d56; border-bottom: 3px solid #4b6d56; box-shadow: 1px 2px #061d10; }
.container-slots button > b { display: grid; place-items: center; width: 29px; flex: 0 0 29px; height: 35px; font: 12px var(--display); color: #ddffe6; background: #3a5c46; border: 1px solid #21462d; box-shadow: inset 1px 1px #0d301a, 1px 1px #effff3; }
.container-slots button > span { font-size: 18px; line-height: 1.2; }
.container-slots small { display: block; margin-top: 5px; font-size: 12px; color: #36533f; }
.container-slots button > i { flex: 0 0 5px; height: 12px; margin-left: auto; border: 1px solid #42684f; background: #6f957b; }
.container-slots button[aria-pressed='true'] { color: #c9ffd7; background: linear-gradient(105deg, #1c432c, #315a3f); border-color: #93c4a3; box-shadow: inset 0 2px 7px #0a2113; }
.container-slots button[aria-pressed='true'] small { color: #b2d1bc; }
.container-slots button[aria-pressed='true'] > b, .container-slots button[aria-pressed='true'] > i { color: #153a22; background: #c9ffd7; }
.container-slots button:hover { outline: 1px solid #d4ffe0; outline-offset: 1px; }
.container-readout { min-width: 0; padding: 24px; color: #c6dfce; border: 1px solid #7ba98a; border-left: 5px solid #adc9b7; background: repeating-linear-gradient(0deg, #c9ffd706 0 1px, transparent 1px 3px), #102e20; box-shadow: inset 0 2px 10px #031b0d; }
.container-readout .step-kicker { margin: 0 0 22px; padding: 6px 8px; background: #2b5038; border: 1px solid #7fa98b; color: #ccebd7; font: 7px/1.7 var(--display); }
.container-readout h3 { color: #e3ffeb; margin: 0 0 20px; font: 25px/1.3 var(--body); }
.container-readout p { font-size: 18px; line-height: 1.5; }
.component-tag { display: block; margin-top: 30px; padding-top: 14px; border-top: 3px double #71997d; color: #9dc4ab; font: 6px/1.6 var(--display); letter-spacing: .8px; }
.container-readout > article + article { margin-top: 30px; padding-top: 30px; border-top: 1px solid #739980; }
.container-enhanced .container-readout > article { margin-top: 0; padding-top: 0; border-top: 0; }
.ccir-explorer:not(.container-enhanced) .container-explorer { display: block; }
.continuity-path { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 22px 0; padding: 0; }
.continuity-path li { position: relative; padding: 17px; border: 1px solid #7fa28b; border-bottom: 4px solid #789d84; background: linear-gradient(130deg, #2c5037, #153320); box-shadow: 2px 3px #061d10; }
.continuity-path li:not(:last-child):after { content: '›'; position: absolute; right: -18px; top: 50%; font: 24px/1 var(--body); color: #c9ffd7; transform: translateY(-50%); }
.continuity-path b { display: inline-block; padding: 3px 7px; color: #173920; background: var(--metal); border: 1px solid #d4ffdd; font: 10px/1.5 var(--display); }
.continuity-path h3 { margin: 10px 0; color: #d7ffe2; font-size: 24px; }
.continuity-path p { font-size: 16px; }
.ccir .reading-grid > .metal-section { display: flex; flex-direction: column; }
@container (max-width: 720px) {
  .ccir-intro { display: flex; flex-direction: column; gap: 5px; }
  .ccir-heading { margin-bottom: 0; border-right: 1px solid #739b8277; }
  .ccir-object { position: relative; inset: auto; }
  .ccir-object > img { height: auto; aspect-ratio: 1.5; }
  .container-name { position: relative; flex-wrap: wrap; padding: 10px; }
  .container-explorer { grid-template-columns: 1fr; }
  .container-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .container-slots button > span { font-size: 16px; }
  .container-slots small { font-size: 11px; }
  .ccir-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccir-index a:first-child { grid-column: auto; }
}
@container (max-width: 440px) {
  .ccir-heading { padding: 25px 18px; }
  .ccir-heading h1 { font-size: 63px; }
  .ccir-heading .lead { font-size: 25px; }
  .container-name { gap: 6px; }
  .container-name span { flex-basis: 100%; font-size: 5px; }
  .container-name small { font-size: 5px; }
  .container-slots { grid-template-columns: 1fr; }
  .container-slots button { min-height: 60px; }
  .container-slots button > span { font-size: 18px; }
  .container-slots small { font-size: 12px; }
  .container-readout { padding: 18px; }
  .container-readout h3 { font-size: 24px; }
  .continuity-path { grid-template-columns: 1fr; gap: 23px; }
  .continuity-path li:not(:last-child):after { content: '↓'; right: 50%; top: auto; bottom: -23px; font-size: 19px; transform: translateX(50%); }
  .ccir-explorer h2 { font-size: 14px; }
}
@media print {
  .ccir-object, .container-slots, .ccir-index, .component-tag { display: none !important; }
  .ccir-intro, .container-explorer { display: block; }
  .ccir-heading, .container-readout, .continuity-path li { background: white; border: 0; box-shadow: none; color: black; }
  .container-readout [hidden] { display: block !important; }
  .container-readout article { margin-block: 20px !important; }
  .ccir-heading h1, .ccir-heading p, .container-readout h3, .continuity-path h3 { color: black; }
}