/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-page: #fbfaf9;
    --ds-raised: #f4efec;
    --ds-white: #ffffff;
    --ds-ink: #251f21;
    --ds-ink-2: #585254;
    --ds-ink-3: #969394;
    --ds-ink-4: #c0bebf;
    --ds-hairline: #eae9ea;
    --ds-teal: #73a89a;
    --ds-red: #ed313e;
    --ds-red-border: rgb(245 170 174);
    --ds-hover: color-mix(in srgb, #251f21 5%, transparent);
    --ds-hover-strong: color-mix(in srgb, #251f21 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(46 39 41 / 0.45);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-shadow-modal: 0 30px 70px rgb(46 39 41 / 0.28);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.box-border{box-sizing:border-box}.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[52px\]{height:52px}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.flex-none{flex:none}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.border{border-width:1px}.border-0{border-width:0}.border-border{border-color:hsl(var(--border))}.border-destructive\/40{border-color:hsl(var(--destructive)/.4)}.border-ds-hairline{border-color:var(--ds-hairline)}.border-ds-ink{border-color:var(--ds-ink)}.border-ds-redBorder{border-color:var(--ds-red-border)}.border-ds-teal{border-color:var(--ds-teal)}.border-transparent{border-color:transparent}.bg-card{background-color:hsl(var(--card))}.bg-destructive\/10{background-color:hsl(var(--destructive)/.1)}.bg-ds-ink{background-color:var(--ds-ink)}.bg-ds-white{background-color:var(--ds-white)}.bg-foreground{background-color:hsl(var(--foreground))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:transparent}.p-2{padding:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.font-text{font-family:KMR Melange Grotesk,-apple-system,Helvetica Neue,Arial,sans-serif}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-sm{font-size:.8125rem}.text-sm,.text-xs{line-height:1.5}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-none{line-height:1}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-destructive{color:hsl(var(--destructive))}.text-ds-ink{color:var(--ds-ink)}.text-ds-page{color:var(--ds-page)}.text-ds-red{color:var(--ds-red)}.text-ds-teal{color:var(--ds-teal)}.text-textPrimary{color:var(--text-primary)}.text-textSecondary{color:var(--text-secondary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline-offset-4{text-underline-offset:4px}.shadow-ds-control{--tw-shadow:var(--ds-shadow-control);--tw-shadow-colored:var(--ds-shadow-control)}.shadow-ds-control,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.transition-\[background-color\2c border-color\2c color\2c transform\]{transition-property:background-color,border-color,color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.\[transition-duration\:120ms\]{transition-duration:.12s}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:bg-destructive\/20:hover{background-color:hsl(var(--destructive)/.2)}.hover\:bg-destructive\/5:hover{background-color:hsl(var(--destructive)/.05)}.hover\:bg-ds-hover:hover{background-color:var(--ds-hover)}.hover\:bg-foreground\/90:hover{background-color:hsl(var(--foreground)/.9)}.hover\:bg-muted:hover{background-color:hsl(var(--muted))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:text-textPrimary:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ds-ink4:focus-visible{--tw-ring-color:var(--ds-ink-4)}.focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:hsl(var(--ring)/0.4)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:scale-100:active{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:bg-ds-hoverStrong:active{background-color:var(--ds-hover-strong)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-ds-hairline:disabled{border-color:var(--ds-hairline)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:text-ds-ink4:disabled{color:var(--ds-ink-4)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media not all and (min-width:768px){.max-md\:flex{display:flex}.max-md\:h-\[52px\]{height:52px}.max-md\:w-full{width:100%}.max-md\:rounded-lg{border-radius:var(--radius)}.max-md\:text-\[15px\]{font-size:15px}.max-md\:hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:768px){.md\:px-4{padding-left:1rem;padding-right:1rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:h-4 svg{height:1rem}.\[\&_svg\]\:w-4 svg{width:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
/* Files component library. Consumes the --ds-* tokens and brand @font-face
   rules from shared/ui/index.css. */
:root {
    --file-shadow: 0 1px 2px rgb(37 31 33 / 6%), 0 6px 18px rgb(37 31 33 / 5%);
    --file-pad-x: 24px;
}

.file-ground {
    box-sizing: border-box;
    min-height: 100%;
    padding: 24px 16px;
    background: var(--ds-raised);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
    font-size: 15px;
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

.file-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px var(--file-pad-x);
    background: var(--ds-page);
    color: var(--ds-ink);
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-family: var(--ds-font-text);
    font-size: 15px;
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.file-card[data-width="phone"] { max-width: 390px; }
.file-ground .file-card { border-radius: 24px; box-shadow: var(--file-shadow); }
.file-card > * { min-width: 0; }
.file-card a { color: var(--ds-ink); }
.file-card :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.file-strong { font-weight: 600; }
.file-secondary { color: var(--ds-ink-2); }
.file-known { color: var(--ds-teal); }
.file-unavailable { color: var(--ds-ink-4); text-decoration: line-through; }
.file-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.file-header { display: flex; flex-direction: column; gap: 24px; }
.file-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.file-fact { margin: 0; color: var(--ds-ink-2); }
.file-fact.is-known { color: var(--ds-teal); }
.file-intro { margin: 12px 0 0; line-height: 24px; text-wrap: pretty; }

/* Group */
.file-group { display: flex; flex-direction: column; gap: 24px; }
.file-group-label { margin: 0; font: inherit; color: var(--ds-ink-2); }
.file-group-heading {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Rows */
.file-rows { display: flex; flex-direction: column; }
.file-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-row:last-child { border-bottom: 0; }
.file-row-slot { flex: none; width: 40px; height: 40px; border-radius: 3px; background: var(--ds-raised); overflow: hidden; }
.file-row-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-row-slot.is-number { width: 24px; height: auto; background: none; color: var(--ds-ink-2); }
.file-row-slot.is-number::after, .file-step-n::after { content: "."; }
.file-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file-row-detail { color: var(--ds-ink-2); }
.file-row-value { flex: none; font-weight: 600; text-align: right; }

/* Facts */
.file-facts { display: flex; flex-direction: column; margin: 0; }
.file-facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-facts > div:last-child { border-bottom: 0; }
.file-facts dt { color: var(--ds-ink-2); }
.file-facts dd { margin: 0; }

/* Text */
.file-text { display: flex; flex-direction: column; gap: 32px; }
.file-heading { display: flex; flex-direction: column; }
.file-p { margin: 0; line-height: 24px; text-wrap: pretty; }
.file-bullets { margin: 0; padding: 0 0 0 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; line-height: 24px; }
.file-bullets li { display: list-item; padding-left: 2px; }
.file-bar { position: relative; padding-left: 16px; }
.file-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--ds-hairline); }
.file-key { margin: 0; font-weight: 600; line-height: 24px; }
.file-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.file-figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--ds-raised); }
.file-caption, .file-figure figcaption { margin: 0; color: var(--ds-ink-2); font-size: 13px; line-height: 20px; text-wrap: pretty; }
/* A caption right after a strip, chart or table sits 12px below it, like a figure's caption, instead of a full group gap away. */
.file-photos + .file-caption { margin-top: 12px; }
.file-card > .file-photos + .file-caption { margin-top: -36px; }
.file-text > .file-photos + .file-caption { margin-top: -20px; }
.file-group > .file-photos + .file-caption, .file-chart + .file-caption, .file-table-scroll + .file-caption { margin-top: -12px; }
.file-rule { margin: 8px 0; border: 0; height: 1px; background: var(--ds-hairline); }
.file-link { color: var(--ds-ink); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ds-ink-4); }
.file-link:hover { text-decoration-color: currentColor; }

/* Callout */
.file-callout { display: flex; flex-direction: column; gap: 4px; text-wrap: pretty; }
.file-callout[data-tone="warning"] { padding: 16px; border-radius: 8px; background: var(--ds-raised); color: var(--ds-ink); }
.file-callout[data-tone="warning"]::before { display: none; }
.file-callout[data-tone="danger"] { color: var(--ds-red); }
.file-callout[data-tone="danger"]::before { background: var(--ds-red); }

/* Numbered list */
.file-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.file-steps li { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); text-wrap: pretty; }
.file-steps li:last-child { border-bottom: 0; }
.file-steps li > span:last-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.file-step-n { flex: none; width: 24px; color: var(--ds-ink-2); }

/* Table */
.file-table-scroll { max-width: 100%; overflow-x: auto; }
.file-table { width: 100%; min-width: max-content; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.file-table th, .file-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ds-hairline); text-align: left; vertical-align: top; font-weight: 350; min-width: 100px; }
.file-table tbody tr:last-child th, .file-table tbody tr:last-child td { border-bottom: 0; }
.file-table th:first-child, .file-table td:first-child { min-width: 80px; }
.file-table thead th { padding-top: 0; }
.file-table thead th .file-secondary { margin-left: 8px; }
.file-table tbody th { color: var(--ds-ink-2); }
.file-table td.is-best { font-weight: 600; }

/* Photos */
.file-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; min-width: 0; }
.file-photos img { display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ds-raised); }
.file-photos[data-layout="strip"] { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-photos[data-layout="strip"]::-webkit-scrollbar { display: none; }
.file-photos[data-layout="strip"] img { flex: 0 0 auto; width: 85%; max-width: 480px; aspect-ratio: auto; scroll-snap-align: start; }
.file-photos.is-single img { width: 100%; max-width: none; aspect-ratio: auto; }

.file-bleed { margin-left: calc(-1 * var(--file-pad-x)); margin-right: calc(-1 * var(--file-pad-x)); padding-left: var(--file-pad-x); padding-right: var(--file-pad-x); scroll-padding-inline: var(--file-pad-x); }

.file-recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.file-recommendation { min-width: 0; padding: 20px; border: 1px solid var(--ds-hairline); border-radius: 18px; background: var(--ds-white); }
.file-recommendation-header { margin-bottom: 20px; }
.file-recommendation-meta { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 10px; }
.file-recommendation-number { flex: none; margin-right: 4px; color: var(--ds-ink-2); font-size: 13px; font-weight: 500; }
.file-recommendation-eyebrow { min-width: 0; margin: 0; color: var(--ds-ink-2); font-size: 12px; line-height: 18px; overflow-wrap: anywhere; }
.file-recommendation-badge { flex: none; margin-left: auto; padding: 2px 7px; border: 1px solid var(--ds-hairline); border-radius: 4px; background: var(--ds-page); color: var(--ds-ink); font-size: 11px; line-height: 18px; font-weight: 500; }
.file-recommendation-title { margin: 0; font-family: var(--ds-font-display); font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.file-recommendation-photos { margin: 0 0 20px; }
.file-recommendation-photos .file-photos:not(.is-single) img { aspect-ratio: 4 / 3; }
.file-recommendation-photos > figcaption { margin-top: 12px; }
.file-recommendation-content { display: flex; flex-direction: column; gap: 24px; }
.file-recommendation-content > * { min-width: 0; }
.file-recommendation-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ds-hairline); }
.file-recommendation-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Charts: compact white panels inside the text column, type one step down from body */
.file-chart { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--ds-white); font-size: 13px; line-height: 20px; }
.file-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ds-ink-2); }
.file-chart-head > span:first-child { min-width: 0; text-wrap: pretty; }
.file-chart-head > span + span { flex: none; white-space: nowrap; }
.file-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.file-chart.is-drawn { max-width: 420px; }
.file-chart-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-ink-2); white-space: nowrap; }
.file-sparklines { display: flex; flex-direction: column; }
.file-sparkline { display: grid; grid-template-columns: 1fr 110px 56px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-sparkline:last-child { border-bottom: 0; }
.file-sparkline svg { width: 110px; height: 32px; }
.file-sparkline-delta { text-align: right; font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-name { font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-delta { color: var(--ds-teal); }
.file-ranges { display: flex; flex-direction: column; gap: 28px; }
.file-range { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; }
.file-range-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-range-track { position: relative; height: 20px; }
.file-range-line { position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--ds-hairline); }
.file-range-band { position: absolute; top: 7px; height: 6px; border-radius: 3px; background: var(--ds-page); }
.file-range-now { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--file-series, var(--ds-ink-2)); }
.file-range.is-highlight .file-range-now { background: var(--ds-teal); }
.file-range-scale { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.file-stack-bar { display: flex; height: 16px; gap: 2px; border-radius: 3px; overflow: hidden; }
.file-stack-parts { display: flex; flex-direction: column; }
.file-stack-part { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-stack-part:last-child { border-bottom: 0; }
.file-stack-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ds-hairline); }
.file-stack-part span:nth-child(2) { flex: 1; }
.file-stack-share { color: var(--ds-ink-2); }

/* Controls */
.file-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: var(--ds-ink);
    font: inherit;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    align-self: flex-start;
    box-shadow: var(--ds-shadow-control);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.file-button.is-compact { padding: 0 16px; }
@media (hover: hover) { .file-button:hover { transform: scale(1.05); } }
.file-button[data-variant="primary"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-button[data-variant="ghost"] { background: transparent; border-color: transparent; box-shadow: none; }
.file-button[aria-pressed="true"] { background: var(--ds-teal); border-color: var(--ds-teal); color: var(--ds-white); }
.file-button:disabled { background: transparent; border-color: var(--ds-hairline); color: var(--ds-ink-4); box-shadow: none; cursor: default; transform: none; }
.file-button.is-unavailable:disabled { text-decoration: line-through; }
.file-control { display: flex; flex-direction: column; gap: 24px; }
.file-control-head { display: flex; justify-content: space-between; gap: 16px; }
.file-control-label { color: var(--ds-ink-2); }
.file-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.file-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
    outline: none;
}
.file-field:focus { border-color: var(--ds-teal); }
.file-slider { width: 100%; height: 2px; margin: 8px 0; appearance: none; -webkit-appearance: none; border-radius: 1px; background: linear-gradient(to right, var(--ds-ink) var(--file-slider-fill, 50%), var(--ds-hairline) var(--file-slider-fill, 50%)); outline: none; accent-color: var(--ds-ink); }
.file-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-control); cursor: pointer; }
.file-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); cursor: pointer; }

/* Closing line */
.file-closing { margin: 0; color: var(--ds-ink-2); }

/* Wordmark */
.file-wordmark { display: block; color: var(--ds-ink); }

/* Shopping */
.file-product { position: relative; display: flex; flex-direction: column; min-width: 0; }
.file-product-toggle, .file-product-preview {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.file-product-preview { cursor: default; }
@media (hover: hover) { .file-product-toggle:hover .file-product-name { text-decoration: underline; text-underline-offset: 3px; } }
.file-product.is-card .file-product-toggle, .file-product.is-card .file-product-preview { gap: 12px; padding-bottom: 16px; }
.file-product-photo { position: relative; display: block; width: 100%; }
.file-product-photo img, .file-product-photo .file-product-empty { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 4px; background: var(--ds-raised); }
.file-product-photo img { display: block; }
.file-product-empty { display: grid; place-items: center; color: var(--ds-ink-2); text-align: center; padding: 40px 16px 16px; box-sizing: border-box; }
.file-tags { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; align-items: center; }
.file-pill { box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--ds-ink); color: var(--ds-white); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-pill.is-pick { background: var(--ds-ink); }
.file-badge { box-sizing: border-box; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--ds-white); color: var(--ds-ink); font-size: 14px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; box-shadow: 0 1px 2px rgb(37 31 33 / 8%); }
.file-product-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-width: 0; }
.file-product-name { flex: 1; min-width: 0; font-weight: 600; text-wrap: pretty; }
.file-product .file-product-name { overflow-wrap: break-word; }
.file-product-toggle .file-product-note, .file-product-preview .file-product-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.file-product-price { flex: none; font-weight: 600; color: var(--ds-ink); }
.file-product-brand { color: var(--ds-ink-2); font-size: 13px; line-height: 20px; }
.file-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.file-product-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-product-carousel::-webkit-scrollbar { display: none; }
.file-product-carousel > .file-product { flex: none; width: 160px; scroll-snap-align: start; }

/* Product details share one gallery in page content and the modal. */
.file-product-detail { display: flex; flex-direction: column; gap: 24px; }
.file-product-gallery { min-width: 0; }
.file-product-hero { position: relative; }
.file-product-hero > img, .file-product-hero > .file-product-empty { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--ds-raised); border-radius: 6px; }
.file-product-gallery .file-tags { top: 12px; left: 12px; }
.file-gallery-controls { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; color: var(--ds-ink-2); font-size: 13px; }
.file-gallery-controls .file-button { min-width: 44px; min-height: 44px; font-size: 20px; }
.file-gallery-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 4px; margin: 8px -4px -4px; }
.file-gallery-thumbnails button { flex: none; width: 56px; padding: 2px; background: transparent; border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.file-gallery-thumbnails button[aria-pressed="true"] { border-color: var(--ds-ink); }
.file-gallery-thumbnails img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--ds-raised); border-radius: 2px; }
.file-product-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.file-product-copy { display: flex; flex-direction: column; gap: 4px; }
.file-product-note { margin: 8px 0 0; text-wrap: pretty; }
.file-product-source { margin: 0; }
.file-product-source a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border-radius: 6px; background: var(--ds-ink); color: var(--ds-white); text-decoration: none; font-weight: 500; }
.file-product-source a:hover { opacity: 0.9; }
.file-product-detail .file-product-name { font-size: 22px; line-height: 1.25; }
.file-product-modal { box-sizing: border-box; width: min(920px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0 24px 24px; border: 0; background: var(--ds-white); color: var(--ds-ink); border-radius: 16px; box-shadow: var(--ds-shadow-modal); overflow: auto; overscroll-behavior: contain; font-family: var(--ds-font-text); font-size: 15px; font-weight: 350; line-height: 24px; letter-spacing: -0.01em; }
.file-product-modal:focus { outline: none; }
.file-product-modal::backdrop { background: var(--ds-scrim); }
.file-product-modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; padding: 6px 0; background: var(--ds-white); }
.file-product-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin-right: -12px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ds-ink); cursor: pointer; }
@media (hover: hover) { .file-product-close:hover { background: var(--ds-raised); } }
.file-product-close:active { background: var(--ds-raised); }
.file-product-modal :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

/* Image frame: the card every rendered image shares */
.file-image {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 16px;
    background: var(--ds-white);
    color: var(--ds-ink);
    border-radius: 24px;
    overflow: hidden;
    font-family: var(--ds-font-text);
    font-size: 15px;
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}
.file-image[data-ratio="portrait"] { width: 390px; height: 480px; }
.file-image[data-ratio="square"] { width: 390px; height: 390px; }
.file-image[data-ratio="landscape"] { width: 480px; height: 360px; }
.file-image-body { display: flex; flex-direction: column; gap: 36px; flex: 1; min-height: 0; overflow: hidden; }
.file-image-body > .file-card { padding: 0; max-width: none; background: transparent; }
.file-image-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: none; margin: 0 -16px -2px; padding: 16px 16px 4px; border-top: 1px solid var(--ds-hairline); color: var(--ds-ink-2); }
.file-image-footer > span:empty { display: none; }
.file-image-footer > span:empty + .file-wordmark { margin-left: auto; }

/* Product image: the single-product PNG */
.file-product-image-photo { position: relative; flex: 1; min-height: 0; }
.file-product-image-photo img, .file-product-image-photo .file-product-empty { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: var(--ds-raised); aspect-ratio: auto; }
.file-product-image-photo img { display: block; }
.file-product-image-tag { position: absolute; top: 12px; left: 12px; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ds-ink); color: var(--ds-white); font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-product-image-tag.is-pick { background: var(--ds-ink); }
.file-product-image-copy { display: flex; flex-direction: column; gap: 2px; flex: none; }
.file-product-image .file-image-body { gap: 16px; }
.file-product-image .file-image-footer { padding-top: 10px; font-size: 12px; line-height: 18px; }
.file-product-image .file-product-name { overflow-wrap: break-word; }

/* Rendered images keep the 13/20 scale inside their fixed frame; the 15/24 base is for pages */
.file-image .file-card { font-size: 13px; line-height: 20px; }
.file-image .file-title { font-size: 24px; }
.file-image .file-group-heading { font-size: 18px; }
.file-image .file-intro, .file-image .file-p, .file-image .file-bullets, .file-image .file-key { line-height: 20px; }

/* Desktop */
@media (min-width: 768px) {
    .file-ground { padding: 36px; }
    .file-card { --file-pad-x: 36px; padding: 36px; }
    .file-card[data-width="phone"] { --file-pad-x: 24px; padding: 24px 24px; }
    .file-title { font-size: 36px; }
    .file-intro, .file-closing, .file-p { max-width: 72ch; }
    .file-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .file-product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
}

@media (max-width: 600px) {
    .file-card .file-button, .file-card .file-product-toggle { min-height: 44px; }
}

@media print {
    .file-ground { background: var(--ds-white); padding: 0; }
    .file-card, .file-ground .file-card { box-shadow: none; max-width: none; border-radius: 0; }
    .file-photos, .file-table-scroll { overflow: visible; }
}

.file-figure[data-fit="contain"] img { aspect-ratio: auto; object-fit: contain; }
.file-data-table { min-width: 100%; }
.file-data-table caption { text-align: start; color: var(--ds-ink-2); padding-bottom: 16px; }
.file-data-table th, .file-data-table td { min-width: 120px; max-width: 32ch; white-space: normal; overflow-wrap: anywhere; }
.file-data-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
.file-data-table th button { background: none; border: 0; padding: 10px 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.file-chart details { border-block: 1px solid var(--ds-hairline); padding: 12px 0; }
.file-chart details > summary { cursor: pointer; min-height: 24px; padding: 10px 0; font-weight: 600; }
.file-chart details > :not(summary) { margin-top: 12px; }
@media print {
    .file-data-table { min-width: 0; }
    .file-data-table th, .file-data-table td { min-width: 0; }
}
.file-scaled-chart { max-width: 640px; width: 100%; box-sizing: border-box; }
.file-signed-bars { display: grid; gap: 14px; }
.file-signed-bars > div { display: grid; grid-template-columns: minmax(50px, 1fr) minmax(60px, 2fr) minmax(30px, auto); align-items: center; gap: 12px; }
.file-signed-bars strong { text-align: end; font-weight: 600; }
.file-bar-labels { display: flex; text-align: center; }
.file-bar-labels > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-chart-readout { margin: 0; min-height: 40px; color: var(--ds-ink-2); }
.file-scaled-chart .file-chart-axis { white-space: normal; }
.file-scaled-chart .file-chart-axis span:last-child { text-align: end; }
.file-scaled-chart [tabindex]:focus { outline: none; }
.file-scaled-chart [tabindex]:focus-visible circle:last-child { stroke-width: 3; }

.file-image .file-chart details, .file-image .file-chart-readout { display: none; }