.dl { padding-bottom: 2rem; }
.dl .panel { min-width: 0; padding: 1rem; margin-bottom: 1.25rem; }
.dl-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.dl-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin: .6rem 0; }
.dl-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.dl input:not([type=checkbox]):not([type=range]), .dl select, .dl textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; font-size: 1rem; }
.dl textarea { min-height: 100px; }
.dl input[type=range] { width: 100%; min-height: 44px; }
.dl-check { display: flex; flex-direction: row; align-items: center; gap: .5rem; min-height: 44px; cursor: pointer; }
.dl-check input { width: 24px; height: 24px; flex-shrink: 0; }
.dl .btn { min-height: 44px; min-width: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.dl .btn[aria-pressed=false] { opacity: .72; }
.dl .btn[aria-pressed=true] { box-shadow: inset 0 0 0 2px var(--primary, #2563eb); }
.dl p, .dl li, .dl dd, .dl dt, .dl td, .dl th, .dl span { overflow-wrap: anywhere; }
.dl .hint { font-size: .95rem; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .6rem 0; }
.dl details { margin: .8rem 0; }
.dl summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: .5rem; padding: .5rem 0; font-weight: 600; }
.dl-step { border: 1px solid var(--border, #d8dee8); border-radius: .7rem; padding: 0 .8rem; }
.dl-step[open] { padding-bottom: .6rem; }
.dl-step-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--primary, #2563eb); color: #fff; font-size: .9rem; flex-shrink: 0; }
.dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.dl-card { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 44px; min-width: 0; padding: .6rem; text-align: left; font: inherit; color: inherit; background: var(--surface, #fff); border: 1px solid var(--border, #d8dee8); border-radius: .6rem; cursor: pointer; }
.dl-card[aria-pressed=true] { border-color: var(--primary, #2563eb); box-shadow: 0 0 0 2px var(--primary, #2563eb); }
.dl-card:focus-visible, .dl-panel:focus-visible, .dl-drawing:focus-visible, .dl-canvas:focus-visible { outline: 3px solid var(--primary, #2563eb); outline-offset: -3px; }
.dl-thumb { display: block; width: 100%; height: 72px; background: #f8fafc; border-radius: .4rem; }
.dl-badge { font-size: .8rem; padding: .1rem .4rem; border-radius: .4rem; background: #f1f5f9; color: #334155; }
.dl-badge.is-reference { background: #ecfdf5; color: #065f46; }
.dl-examples { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.dl-example { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.dl-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .4rem; }
.dl-stage, .dl-stage3d { position: relative; background: var(--surface, #fff); border: 1px solid var(--border, #d8dee8); border-radius: .6rem; overflow: hidden; }
.dl-drawing, .dl-canvas { display: block; width: 100%; height: 55vh; height: 55dvh; min-height: 280px; max-height: 680px; touch-action: none; background: #fff; }
.dl-panel { fill: transparent; stroke: none; cursor: pointer; }
.dl-panel.is-selected { fill: #fde68a; fill-opacity: .55; }
.dl-drawing [data-issue].is-flash circle { stroke-width: 2px; }
.dl-overlay { position: absolute; inset: 0; pointer-events: none; }
.dl-dim3d { position: absolute; padding: .1rem .35rem; border-radius: .3rem; background: #0f172acc; color: #fff; font-size: .8rem; white-space: nowrap; }
.dl-stage3d svg { display: block; width: 100%; height: auto; max-height: 55vh; max-height: 55dvh; }
.dl-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .5rem 0; }
.dl-layer { display: flex; align-items: center; gap: .4rem; min-height: 44px; cursor: pointer; }
.dl-layer input { width: 22px; height: 22px; }
.dl-sample { width: 30px; height: 8px; flex-shrink: 0; }
.dl-selection { margin: .6rem 0; padding: .7rem; border: 1px solid var(--border, #d8dee8); border-radius: .6rem; }
.dl-selection p { margin: .2rem 0; }
.dl-stats { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .35rem 1rem; font-variant-numeric: tabular-nums; }
.dl-stats dt { min-width: 0; }
.dl-stats dd { margin: 0; text-align: right; font-weight: 700; }
.dl-alerts { list-style: none; padding: 0; display: grid; gap: .5rem; }
.dl-alert { margin: 0; padding: .5rem .7rem; border-left: 4px solid #f59e0b; background: #fffbeb; border-radius: .4rem; }
.dl-alert.is-error { border-left-color: #dc2626; background: #fef2f2; }
.dl-alert.is-info { border-left-color: #2563eb; background: #eff6ff; }
.dl-alert .btn { margin: .3rem .3rem 0 0; }
.dl-table, .dl-guide-table { max-width: 100%; overflow-x: auto; }
.dl-sheet-figure { margin: 1rem 0 0; min-width: 0; }
.dl-sheet-svg { display: block; width: 100%; height: auto; max-height: 60vh; max-height: 60dvh; }
.dl-print { display: none; }
@media (hover: hover) {
    .dl-card:hover { border-color: var(--primary, #2563eb); }
    .dl-panel:hover { fill: #bfdbfe; fill-opacity: .35; }
}
@media (min-width: 640px) { .dl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dl-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
    .dl-layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
    .dl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
    .dl-table table, .dl-table tbody, .dl-table tr, .dl-table td { display: block; width: 100%; }
    .dl-table thead { display: none; }
    .dl-table tr { border: 1px solid var(--border, #d8dee8); border-radius: .6rem; margin: .5rem 0; padding: .3rem .6rem; }
    .dl-table td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem; border: 0; padding: .25rem 0; }
    .dl-table td::before { content: attr(data-label); font-weight: 600; }
}
@media (max-width: 379px) { .dl-fields, .dl-stats { grid-template-columns: minmax(0, 1fr); } .dl-stats dd { text-align: left; } .dl-cards { grid-template-columns: minmax(0, 1fr); } }
@media print {
    @page { margin: 10mm; }
    body:has([data-dieline]) .site-header, body:has([data-dieline]) .site-footer, body:has([data-dieline]) .page-head, body:has([data-dieline]) .guide, body:has([data-dieline]) .ad-slot { display: none !important; }
    .dl > :not(.dl-print) { display: none !important; }
    .dl-print { display: block; }
    /* The SVG carries width and height in mm: never stretch it to the page. */
    .dl-print svg { max-width: none; }
    .dl-print p { font-size: 9pt; margin: .1rem 0; break-inside: avoid; }
}