/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("./fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-terracotta: #c95f5b;
    --ds-orange: #e36d42;
    --ds-ochre: #d8b76a;
    --ds-olive: #a8af6d;
    --ds-seafoam: #7f9c7d;
    --ds-mint: #c0e1dc;
    --ds-blue: #5c76ad;
    --ds-indigo: #706f9c;
    --ds-purple: #987fa0;
    --ds-salmon: #d99091;
    --ds-pink: #fac7c2;
    --ds-background-1: #ffffff;
    --ds-background-2: #fdfcfb;
    --ds-background-3: #dacbc0;
    --ds-foreground-1: #4d3533;
    --ds-foreground-2: rgb(77 53 51 / 0.7);
    --ds-foreground-3: rgb(77 53 51 / 0.5);
    --ds-foreground-4: rgb(77 53 51 / 0.2);
    --ds-foreground-5: rgb(77 53 51 / 0.05);
    --ds-border: var(--ds-foreground-4);
    --ds-hairline: rgb(77 53 51 / 0.1);
    --ds-muted: #f6f2ef;
    --ds-primary: var(--ds-foreground-1);
    --ds-on-primary: #fdfcfb;
    --ds-success: #73a89a;
    --ds-success-wash: rgb(115 168 154 / 0.1);
    --ds-danger: #ed313e;
    --ds-danger-wash: rgb(237 49 62 / 0.1);
    --ds-radius: 12px;
    --ds-radius-compact: 8px;
    --ds-control: 44px;
    --ds-control-compact: 32px;
    --ds-fg1: var(--ds-foreground-1);
    --ds-fg2: var(--ds-foreground-2);
    --ds-fg3: var(--ds-foreground-3);
    --ds-fg4: var(--ds-foreground-4);
    --ds-fg5: var(--ds-foreground-5);
    --ds-bg1: var(--ds-background-1);
    --ds-bg2: var(--ds-background-2);
    --ds-bg3: var(--ds-background-3);
    --ds-white: var(--ds-background-1);
    --ds-page: var(--ds-background-2);
    --ds-raised: var(--ds-muted);
    --ds-ink: var(--ds-foreground-1);
    --ds-ink-2: var(--ds-foreground-2);
    --ds-ink-3: var(--ds-foreground-3);
    --ds-ink-4: var(--ds-foreground-4);
    --ds-teal: var(--ds-success);
    --ds-red: var(--ds-danger);
    --ds-red-border: var(--ds-danger);
    --ds-hover: var(--ds-foreground-5);
    --ds-hover-strong: color-mix(in srgb, #4d3533 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(77 53 51 / 0.4);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-ring: 0 0 0 1px rgb(77 53 51 / 0.05);
    --ds-elevation-0: 0 1px 2px rgb(77 53 51 / 0.05);
    --ds-elevation-1: 0 2px 5px rgb(77 53 51 / 0.075), 0 9px 10px rgb(77 53 51 / 0.064), 0 21px 13px rgb(77 53 51 / 0.038), 0 38px 16px rgb(77 53 51 / 0.011), 0 59px 16px rgb(77 53 51 / 0);
    --ds-elevation-2: var(--ds-ring), 0 6px 12px rgb(77 53 51 / 0.1), 0 22px 23px rgb(77 53 51 / 0.085), 0 50px 31px rgb(77 53 51 / 0.05), 0 88px 37px rgb(77 53 51 / 0.015), 0 138px 38px rgb(77 53 51 / 0);
    --ds-elevation-3: 0 11px 24px rgb(77 53 51 / 0.13), 0 44px 45px rgb(77 53 51 / 0.111), 0 99px 62px rgb(77 53 51 / 0.065), 0 176px 73px rgb(77 53 51 / 0.019), 0 275px 77px rgb(77 53 51 / 0);
    --ds-lift: var(--ds-elevation-0);
    --ds-shadow-modal: var(--ds-elevation-3);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.m-px{margin:1px}.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-\[var\(--ds-control\)\]{height:var(--ds-control)}.h-\[var\(--ds-control-compact\)\]{height:var(--ds-control-compact)}.w-8{width:2rem}.w-9{width:2.25rem}.w-\[calc\(100\%-2px\)\]{width:calc(100% - 2px)}.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}.overflow-hidden{overflow:hidden}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-\[2px\]{border-radius:2px}.rounded-\[var\(--ds-radius\)\]{border-radius:var(--ds-radius)}.rounded-\[var\(--ds-radius-compact\)\]{border-radius:var(--ds-radius-compact)}.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-foreground1{border-color:var(--ds-foreground-1)}.border-transparent{border-color:transparent}.bg-card{background-color:hsl(var(--card))}.bg-destructive\/10{background-color:hsl(var(--destructive)/.1)}.bg-ds-background1{background-color:var(--ds-background-1)}.bg-ds-dangerWash{background-color:var(--ds-danger-wash)}.bg-ds-foreground1{background-color:var(--ds-foreground-1)}.bg-ds-successWash{background-color:var(--ds-success-wash)}.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-0{padding:0}.p-2{padding:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.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-sizeBody{font-size:.875rem}.text-sizeSm{font-size:.75rem}.text-sm{font-size:.8125rem}.text-sm,.text-xs{line-height:1.5}.text-xs{font-size:.75rem}.font-\[350\]{font-weight:350}.font-medium{font-weight:500}.font-normal{font-weight:400}.font-semibold{font-weight:600}.leading-none{line-height:1}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-destructive{color:hsl(var(--destructive))}.text-ds-danger{color:var(--ds-danger)}.text-ds-foreground1{color:var(--ds-foreground-1)}.text-ds-ink{color:var(--ds-ink)}.text-ds-onPrimary{color:var(--ds-on-primary)}.text-ds-success{color:var(--ds-success)}.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{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.shadow-\[0_0_0_1px_var\(--ds-hairline\)\]{--tw-shadow:0 0 0 1px var(--ds-hairline);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color)}.shadow-\[0_0_0_1px_var\(--ds-hairline\)\],.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}.ring{--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(3px + 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)}.transition-\[background-color\2c border-color\2c color\]{transition-property:background-color,border-color,color;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))}}.running{animation-play-state:running}.\[text-decoration-skip-ink\:none\]{-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}.\[text-decoration-thickness\:from-font\]{text-decoration-thickness:from-font}.\[text-underline-position\:from-font\]{text-underline-position:from-font}.\[transition-duration\:120ms\]{transition-duration:.12s}.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}.hover\:opacity-70:hover{opacity:.7}.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-foreground4:focus-visible{--tw-ring-color:var(--ds-foreground-4)}.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\:bg-ds-hoverStrong:active{background-color:var(--ds-hover-strong)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-transparent:disabled{border-color:transparent}.disabled\:bg-ds-background2:disabled{background-color:var(--ds-background-2)}.disabled\:bg-ds-muted:disabled{background-color:var(--ds-muted)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:font-medium:disabled{font-weight:500}.disabled\:text-ds-foreground4:disabled{color:var(--ds-foreground-4)}.disabled\:text-ds-ink4:disabled{color:var(--ds-ink-4)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-\[0_0_0_1px_var\(--ds-hairline\)\]:disabled{--tw-shadow:0 0 0 1px var(--ds-hairline);--tw-shadow-colored:0 0 0 1px var(--tw-shadow-color)}.disabled\:shadow-\[0_0_0_1px_var\(--ds-hairline\)\]:disabled,.disabled\:shadow-none:disabled{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.\[\&_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}:is(p,span,li,label)>.\[\:is\(p\2c span\2c li\2c label\)\>\&\]\:text-inherit{color:inherit}:is(p,span,li,label)>.\[\:is\(p\2c span\2c li\2c label\)\>\&\]\:\[font\:inherit\]{font:inherit}
/* Files component library. Consumes the --ds-* tokens and brand @font-face
   rules from shared/ui/index.css. */
:root {
    /* The brand faces carry Latin only; Hebrew, Arabic, Devanagari, Tamil and emoji take the platform's own face for the script, and Noto where the platform has none. */
    --file-font-scripts: "Noto Sans Hebrew", "Noto Sans Arabic", "Noto Naskh Arabic", "Noto Sans Devanagari", "Noto Sans Tamil", "Noto Color Emoji";
    --file-font-text: var(--ds-font-text), var(--file-font-scripts);
    --file-font-display: var(--ds-font-display), var(--file-font-scripts);
    --file-shadow: 0 1px 2px rgb(37 31 33 / 6%), 0 6px 18px rgb(37 31 33 / 5%);
    --file-pad-x: 24px;
    /* One column width for every label-and-value grid: comparison tables and Facts. */
    --file-col: 200px;
    /* A comparison column needs room for a photo; a narrower table stretches to fill instead. */
    --file-product-col: 300px;
    /* Two steps of the text scale: body, and the smaller size for captions and secondary lines. */
    --file-text: 14px;
    --file-small: 12px;
    /* How long a stateful button takes to roll to its next state; ROLL_MS in controls.tsx matches it. */
    --file-button-roll: 320ms;
    /* Running low is the one warning the design tokens have no colour for. */
    --file-low-stock: #d59b53;
    --file-photo-max-height: 600px;
    /* Scales every negative letter spacing in the kit; Arabic-script pages set it to zero, because spacing pulls joined letters apart. */
    --file-tracking: 1;
    /* The label column every label-and-value grid shares: Facts and stacked comparison cells. */
    --file-label-col: min(var(--file-col), 38%);
}

.file-ground {
    box-sizing: border-box;
    min-height: 100%;
    padding: 24px 16px;
    background: var(--ds-raised);
    color: var(--ds-ink);
    font-family: var(--file-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: calc(-0.01em * var(--file-tracking));
    -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(--file-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: calc(-0.01em * var(--file-tracking));
    /* A long URL, address or code breaks before it pushes past its box; ordinary words still wrap whole. */
    overflow-wrap: break-word;
}

.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; }
/* Zero specificity beyond the element, so any class an author or the kit gives a link sets its colour. */
:where(.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); font-weight: 600; }
.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(--file-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: calc(-0.025em * var(--file-tracking));
    text-wrap: balance;
}
.file-fact { margin: 0; color: var(--ds-ink-2); font-weight: 400; }
.file-fact.is-known { color: var(--ds-teal); font-weight: 600; }
.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-head { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.file-group-heading {
    margin: 0;
    font-family: var(--file-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: calc(-0.025em * var(--file-tracking));
}

/* Rows */
.file-rows { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.file-rows.is-numbered { counter-reset: file-row; }
.file-rows.is-numbered .file-row { counter-increment: file-row; }
.file-row-slot.is-counted::before { content: counter(file-row); }
.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: "."; }
/* The value holds the line end while it needs at most two fifths of the row; a longer one drops under the text instead of squeezing it a word per line. */
.file-row-body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 4px 16px; flex: 1; min-width: 0; }
.file-row-main { display: flex; flex-direction: column; flex: 1 1 60%; min-width: 0; }
.file-row-detail { color: var(--ds-ink-2); }
.file-row-value { flex: 0 1 auto; min-width: 0; font-weight: 600; }

/* Facts */
.file-facts { display: flex; flex-direction: column; margin: 0; }
.file-facts > div { display: grid; grid-template-columns: var(--file-label-col) minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-facts > div:last-child { border-bottom: 0; }
.file-facts dt, .file-table.is-stacking td > .file-cell-label { padding-inline-end: 16px; }
.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; padding-inline-start: 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; line-height: 24px; }
.file-bullets li { display: list-item; padding-inline-start: 2px; }
.file-bar { position: relative; padding-inline-start: 16px; }
.file-bar::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 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; }
/* A figure or lone photo shows the whole image, never past its source size, and no taller than a screenful on desktop. */
.file-figure img { display: block; align-self: flex-start; width: auto; max-width: 100%; height: auto; max-height: var(--file-photo-max-height); border-radius: 4px; background: var(--ds-raised); }
.file-figure[data-fit="cover"] img { width: 100%; max-height: none; aspect-ratio: 3 / 2; object-fit: cover; }
.file-caption, .file-figure figcaption { margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); 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, .file-strip + .file-caption { margin-top: 12px; }
.file-card > :is(.file-photos, .file-strip) + .file-caption { margin-top: -36px; }
.file-text > :is(.file-photos, .file-strip) + .file-caption { margin-top: -20px; }
.file-group > :is(.file-photos, .file-strip) + .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 { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
.file-table { table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.file-table th, .file-table td { padding-block: 12px; padding-inline: 0 16px; border-bottom: 1px solid var(--ds-hairline); text-align: start; vertical-align: top; font-weight: 350; overflow-wrap: anywhere; }
.file-table tbody tr:last-child th, .file-table tbody tr:last-child td { border-bottom: 0; }
.file-table thead th { padding-top: 0; }
/* Each part of a head is its own run, so an option number keeps its place beside a Latin name on a right-to-left page. */
.file-table thead th > span { unicode-bidi: isolate; }
.file-table thead th .file-secondary { margin-inline-start: 8px; }
.file-table tbody th { color: var(--ds-ink-2); }
.file-table td.is-best, .file-table td.file-product-price { font-weight: 600; }
.file-table.is-options { width: max(100%, calc(var(--file-table-columns) * var(--file-col))); }
.file-table.is-options .file-cell-label { display: none; }
/* The scroller pads only its leading side, so a product comparison sheds that width to end on the text margin. */
.file-table.is-products { width: max(100% - var(--file-pad-x), calc(var(--file-table-columns) * var(--file-product-col))); font-variant-numeric: normal; }
.file-table.is-products thead th { padding-bottom: 20px; vertical-align: top; }
.file-cell-label { display: block; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; font-weight: 350; }
.file-product-head { display: flex; flex-direction: column; }
.file-product-head-photo { position: relative; display: block; margin-bottom: 12px; }
.file-product-head-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ds-raised); }
.file-product-head-photo > .file-product-empty { display: grid; aspect-ratio: 1; border-radius: 12px; background: var(--ds-raised); padding: 16px; }
/* On a phone a comparison stacks one block per option or product, its cells labelled like Facts; `order` on each cell regroups them by column.
   A viewport query, because a size container would collapse a table an author places in a shrink-to-fit row. */
@media (max-width: 640px) {
    .file-table.is-stacking { display: flex; flex-direction: column; width: calc(100% - var(--file-pad-x)); }
    .file-table.is-stacking :is(thead, tbody, tr) { display: contents; }
    .file-table.is-stacking :is(.file-table-corner, tbody th) { display: none; }
    .file-table.is-stacking thead th { display: block; padding-block: 32px 4px; border-bottom: 0; }
    .file-table.is-stacking thead th:first-of-type, .file-table.is-stacking .file-table-corner + th { padding-top: 0; }
    .file-table.is-stacking td { display: grid; grid-template-columns: var(--file-label-col) minmax(0, 1fr); padding-inline: 0; }
    .file-table.is-stacking td > .file-cell-label { display: block; font-size: var(--file-text); line-height: 24px; }
    /* A value with no letters of the page's script (₪720) resolves left to right in its <bdi>, so it aligns by the cell's direction, not its own. */
    .file-table.is-stacking td > bdi { justify-self: start; }
    .file-table.is-stacking td.file-product-price { display: block; }
    .file-table.is-products thead th { padding-bottom: 12px; }
    .file-table.is-products .file-product-head { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-content: start; column-gap: 16px; }
    .file-table.is-products .file-product-head-photo { grid-row: span 3; margin-bottom: 0; }
    .file-table.is-products thead .file-dots { margin-inline-start: 144px; }
}

/* 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; }
/* Each photo sits in the button that opens the viewer, so in a strip the button takes the slide and the photo fills it. */
.file-photo-zoom { all: unset; box-sizing: border-box; display: block; min-width: 0; border-radius: 8px; cursor: zoom-in; }
.file-photos[data-layout="strip"] > .file-photo-zoom { flex: 0 0 auto; width: 85%; max-width: 480px; scroll-snap-align: start; }
.file-photos[data-layout="strip"] > .file-photo-zoom img { width: 100%; max-width: none; }
.file-photos.is-single > .file-photo-zoom { justify-self: stretch; width: auto; max-width: 100%; }
/* A strip clips anything outside it, so a photo's focus ring sits inside the photo. */
.file-photo-zoom:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
[data-can-drag], [data-can-drag] .file-product-toggle, [data-can-drag] .file-product-zoom, [data-can-drag] .file-photo-zoom { cursor: grab; }
[data-drag-scroll] { position: relative; }
[data-drag-scroll][data-dragging] { scroll-snap-type: none; user-select: none; }
[data-dragging], [data-dragging] .file-product-toggle, [data-dragging] .file-product-zoom, [data-dragging] .file-photo-zoom { cursor: grabbing; }
.file-photos.is-single > .file-photo-zoom img { width: auto; max-width: 100%; max-height: var(--file-photo-max-height); aspect-ratio: auto; }

/* A strip or carousel runs to the card's edges, so its scroll reads without a control. */
.file-bleed { margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x); scroll-padding-inline: var(--file-pad-x); }
/* A photo strip's frame carries its arrows. The frame takes the strip's bleed, so its box is the strip's visible area and the arrows sit 12px in from its edges; a host whose strip bleeds further moves them with --file-strip-arrows-inset. */
.file-strip { position: relative; min-width: 0; }
.file-strip[data-bleed] { margin-inline: calc(-1 * var(--file-pad-x)); }
.file-strip > .file-bleed { margin-inline: 0; }
.file-strip-arrows { position: absolute; inset: 50% var(--file-strip-arrows-inset, 12px) auto; z-index: 1; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.file-strip-arrow { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ds-page); color: var(--ds-ink); box-shadow: var(--ds-elevation-0); cursor: pointer; pointer-events: auto; transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s; animation: file-strip-arrow-in 160ms ease-out; }
/* An arrow with nowhere to go fades and shrinks away, keeping its place so the other stays put. */
.file-strip-arrow:disabled { opacity: 0; transform: scale(0.95); visibility: hidden; transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s 160ms; }
@keyframes file-strip-arrow-in { from { opacity: 0; transform: scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .file-strip-arrow, .file-strip-arrow:disabled { transition: none; animation: none; } }
.file-strip-arrow:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.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-inline-end: 4px; color: var(--ds-ink-2); font-size: var(--file-small); font-weight: 500; }
.file-recommendation-eyebrow { min-width: 0; margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 18px; overflow-wrap: anywhere; }
.file-recommendation-badge { flex: none; margin-inline-start: auto; padding: 2px 7px; border: 1px solid var(--ds-hairline); border-radius: 4px; background: var(--ds-page); color: var(--ds-ink); font-size: var(--file-small); line-height: 18px; font-weight: 500; }
.file-recommendation-title { margin: 0; font-family: var(--file-font-display); font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: calc(-0.025em * var(--file-tracking)); 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 { --file-range-label: clamp(104px, 30%, 200px); display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--ds-white); font-size: var(--file-small); line-height: 20px; }
.file-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 16px; color: var(--ds-ink-2); }
.file-chart-head > span:first-child { flex: 1 1 60%; min-width: 0; text-wrap: pretty; }
.file-chart-head > span + span { flex: 0 1 auto; min-width: 0; }
.file-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.file-chart.is-drawn { max-width: 420px; }
/* Plots draw left to right in every language, so their axes and column labels keep that order on a right-to-left page. */
.file-chart-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-ink-2); white-space: nowrap; direction: ltr; }
.file-chart-axis > span, .file-bar-labels > span { unicode-bidi: plaintext; }
.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 { justify-self: end; font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-name { font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-delta { color: var(--ds-teal); font-weight: 600; }
.file-ranges { display: flex; flex-direction: column; gap: 28px; }
.file-range { display: grid; grid-template-columns: var(--file-range-label) minmax(0, 1fr); gap: 12px; align-items: center; }
/* A label gets two lines before it gives way, so a phone shows a whole name where one line cut it off. */
.file-range-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; line-height: 16px; }
.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: var(--file-range-label) minmax(0, 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: calc(-0.01em * var(--file-tracking));
    white-space: nowrap;
    text-decoration: none;
    align-self: flex-start;
    max-width: 100%;
    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; }
/* A close button centres in whatever bar holds it, unlike a button in the flow, which starts its line. It stays a 32px square on a phone too, reaching a 44px target through an invisible margin. */
.file-close { position: relative; flex: none; align-self: center; width: 32px; padding: 0; }
.file-close::before { content: ""; position: absolute; inset: -6px; }
/* An icon at a pill's end takes less side padding than text, so it sits about as far from the edge as from the top and bottom. The label must be an element beside the icon, since :first-child and :last-child skip text. */
.file-button.is-pill { border-radius: 999px; --file-button-icon-pad: 10px; }
.file-button.is-pill:has(> svg:first-child, > .file-button-slot > .file-button-face:last-child > svg:first-child) { padding-inline-start: var(--file-button-icon-pad); }
.file-button.is-pill:has(> svg:last-child, > .file-button-slot > .file-button-face:last-child > svg:last-child) { padding-inline-end: var(--file-button-icon-pad); }
/* A stateful button clips its own faces, so a push runs to the button's edge. The inset is the gap from a face to that edge: (32px height - 16px face) / 2. */
.file-button[data-state] { overflow: hidden; --file-button-inset: 8px; }
.file-button-slot { display: inline-grid; grid-template-columns: minmax(0, auto); min-width: 0; transition: width var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
.file-button-face { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; justify-self: start; }
/* A row too narrow for the longest full label, "Sent to Instinct" at 148px, swaps every state with a short label to it. */
.file-button-label.is-short { display: none; }
@container file-actions (width < 150px) { .file-button-face:has(> .is-short) > .file-button-label:not(.is-short) { display: none; } .file-button-label.is-short { display: inline; } }
/* Both faces travel one face plus the inset on the same curve, so the next pushes the current out; the outgoing face also fades as it goes. */
.file-button-face.is-leaving { animation: file-button-out var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.file-button-face.is-entering { animation: file-button-in var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes file-button-out { to { transform: translateY(calc(-100% - var(--file-button-inset))); opacity: 0; } }
@keyframes file-button-in { from { transform: translateY(calc(100% + var(--file-button-inset))); } }
.file-spin { animation: file-spin 900ms linear infinite; }
@keyframes file-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .file-button-slot { transition: none; } .file-button-face.is-entering, .file-spin { animation: none; } .file-button-face.is-leaving { display: none; } }
.file-button svg { flex: none; }
/* A button never outgrows its container: the label gives way with an ellipsis and the icon keeps its size. */
.file-button > span:not(.file-button-slot), .file-button-label { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
@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:not([data-state]) { background: transparent; border-color: var(--ds-hairline); color: var(--ds-ink-4); box-shadow: none; cursor: default; transform: none; }
/* A stateful button keeps its colours while disabled; only its label and icon say it is working or done. */
.file-button[data-state]:disabled { 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: calc(-0.01em * var(--file-tracking));
    outline: none;
}
.file-field:focus { border-color: var(--ds-teal); }
/* A range input runs right to left on a right-to-left page, so its fill does too. */
.file-slider:dir(rtl) { --file-slider-direction: to left; }
/* The input is a 24px tap target; the 2px track is drawn inside it. */
.file-slider { display: block; width: 100%; height: 24px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; outline: none; accent-color: var(--ds-ink); }
.file-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 1px; background: linear-gradient(var(--file-slider-direction, to right), var(--ds-ink) var(--file-slider-fill, 50%), var(--ds-hairline) var(--file-slider-fill, 50%)); }
.file-slider::-moz-range-track { height: 2px; border-radius: 1px; background: linear-gradient(var(--file-slider-direction, to right), var(--ds-ink) var(--file-slider-fill, 50%), var(--ds-hairline) var(--file-slider-fill, 50%)); }
.file-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; 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: start;
    cursor: pointer;
}
.file-product-preview { cursor: default; }
/* Text marked as a link's label underlines while the link or button around it is hovered: a product's name, an option's title and its See details. */
@media (hover: hover) { :is(a, button):hover .file-hover-underline { text-decoration: underline; text-underline-offset: 3px; } }
.file-product.is-card { gap: 20px; }
/* 48px clear each side: the group's 24px gap plus this margin, and the padding below. */
.file-group > .file-product.is-card + .file-product.is-card { margin-top: 24px; padding-top: 48px; border-top: 1px solid var(--ds-hairline); }
.file-product-media { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
/* Only a strip of several photos needs one shared height; a lone photo takes the column width, because a fixed frame could only fit it by banding. */
.file-product-media .file-photos:not(.is-single) { height: min(420px, 100cqw); }
.file-product-media .file-photos img { width: auto; height: 100%; max-width: none; object-fit: contain; border-radius: 12px; }
.file-product-media .file-photos.is-single img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
/* Each photo sits in the button that opens the viewer, so the button takes the frame and the photo fills it. */
.file-product-zoom { all: unset; box-sizing: border-box; display: block; flex: none; border-radius: 12px; cursor: zoom-in; }
.file-photos:not(.is-single) > .file-product-zoom { height: 100%; }
.file-photos.is-single > .file-product-zoom { width: 100%; }
.file-product-thumbs { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px; margin: -1px; }
.file-product-thumbs::-webkit-scrollbar { display: none; }
.file-product-thumb { all: unset; box-sizing: border-box; flex: 0 0 auto; display: block; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--ds-hairline); }
.file-product-thumb[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--ds-ink-3); }
.file-product-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ds-raised); }
.file-product-photo { position: relative; display: block; width: 100%; container-type: inline-size; }
.file-product-photo img, .file-product-photo .file-product-empty { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: var(--ds-raised); }
.file-product-photo img { display: block; height: auto; max-height: calc(100cqw * 4 / 3); aspect-ratio: auto; }
/* The square is the crop: contain in a fixed frame bands every photo the merchant did not shoot square. */
.file-product.is-tile .file-product-photo img { aspect-ratio: 1; object-fit: cover; }
.file-product.is-tile .file-product-photo .file-product-empty { aspect-ratio: 1; }
.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; inset-inline: 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: var(--file-text); font-weight: 500; line-height: 1; letter-spacing: calc(-0.01em * var(--file-tracking)); }
.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: var(--file-text); font-weight: 500; line-height: 1; letter-spacing: calc(-0.01em * var(--file-tracking)); box-shadow: var(--ds-elevation-0); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* As in a row, a price wider than two fifths of the line drops under the name rather than squeezing it. */
.file-product-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 8px; width: 100%; min-width: 0; }
.file-product-name { flex: 1 1 60%; 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: 0 1 auto; min-width: 0; font-weight: 600; color: var(--ds-teal); }
.file-product-brand { color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
/* A tile keeps its brand line to one row so tiles in a row align; the dialog carries it in full. */
.file-product.is-tile .file-product-brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.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: clamp(200px, 29vw, 320px); 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 { position: relative; min-width: 0; container-type: inline-size; }
.file-product-gallery .file-photos { overscroll-behavior-x: contain; scroll-snap-type: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) { height: min(360px, 100cqw); }
.file-product-gallery .file-photos img { object-fit: contain; max-width: none; scroll-snap-align: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) img { width: auto; height: 100%; }
.file-product-gallery .file-photos.is-single img { width: 100%; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
.file-product-gallery > .file-product-empty { width: 100%; aspect-ratio: 1; background: var(--ds-raised); border-radius: 12px; }
.file-product-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.file-product-copy { display: flex; flex-direction: column; }
.file-product-note { margin: 8px 0 0; text-wrap: pretty; }
.file-product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; container: file-actions / inline-size; }
.file-product > .file-product-actions { margin-top: auto; padding-top: 14px; }
.file-product.is-card > .file-product-actions { padding-top: 2px; }
.file-product-actions .file-caption { margin: 0; font-size: var(--file-small); line-height: 18px; }
.file-product-actions .file-caption button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
/* The citation always starts its own line under the note it credits. */
.file-product-source { display: block; }
/* A host reset may set svg to display block, which would drop the arrow onto its own line. */
.file-product-source svg { display: inline-block; vertical-align: -0.125em; margin-inline-start: 3px; }
/* Alone on its line, the link takes the 24px minimum tap height that a link inside a sentence is excused. */
.file-product-source .file-link { display: inline-flex; align-items: center; min-block-size: 24px; }
.file-product-detail .file-product-name { font-size: 22px; line-height: 1.25; }
.file-product-modal { box-sizing: border-box; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; padding: 0 24px 24px; border: 0; background: var(--ds-white); color: var(--ds-ink); box-shadow: var(--ds-shadow-modal); overflow: auto; overscroll-behavior: contain; font-family: var(--file-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: calc(-0.01em * var(--file-tracking)); }
.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; margin-inline: -24px; padding: 12px; background: var(--ds-white); }
.file-product-modal :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
/* A strip clips anything outside it, so a photo's focus ring sits inside the photo. */
.file-product-zoom:focus-visible { outline-offset: -2px; }

/* Variant pickers sit a step below the 32px purchase button, so buying stays the strongest control. */
.file-variants { display: flex; flex-direction: column; gap: 14px; }
.file-variant { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.file-variant-label { display: flex; gap: 6px; align-items: baseline; color: var(--ds-ink-2); }
.file-variant-label b { font-weight: 400; color: var(--ds-ink); }
.file-variant-label em { font-style: normal; color: var(--ds-ink-3); }
.file-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; padding-block-start: 3px; padding-inline-start: 3px; }
/* The ring sits outside the colour, so a pale swatch keeps its edge against the page. */
.file-swatch, .file-dot { all: unset; position: relative; box-sizing: border-box; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-ink) 12%, transparent); }
.file-swatch { width: 24px; height: 24px; cursor: pointer; }
.file-swatch::after, .file-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1px transparent; transition: box-shadow 120ms; }
.file-swatch[aria-pressed="true"]::after { box-shadow: 0 0 0 1.25px var(--ds-ink); }
.file-swatch.is-out::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--ds-white); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ds-ink) 25%, transparent); }
.file-swatch:focus-visible, .file-dot:focus-visible { outline: none; }
.file-swatch:focus-visible::after, .file-dot:focus-visible::after { box-shadow: 0 0 0 2px var(--ds-ink); }
.file-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.file-size { height: 28px; min-width: 36px; padding: 0 10px; font-size: var(--file-small); }
.file-size[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-stock { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
.file-stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink-4); }
.file-stock.is-in::before { background: var(--ds-teal); }
.file-stock.is-low::before { background: var(--file-low-stock); }
.file-stock.is-out { color: var(--ds-ink); }
.file-stock.is-out::before { background: var(--ds-ink); }
.file-price-was { margin-inline-start: 6px; color: var(--ds-ink-3); font-weight: 350; text-decoration: line-through; }
/* Compact colour dots show the range on a tile, a comparison head or an image card, and switch the photo where they can. */
.file-dots { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; }
.file-dot { width: 16px; height: 16px; }
button.file-dot { cursor: pointer; }
.file-dot.is-current::after { box-shadow: 0 0 0 1px var(--ds-ink); }
.file-dots-more { margin-inline-start: 2px; color: var(--ds-ink-3); font-size: var(--file-small); line-height: 20px; }
.file-dots-label { min-width: 0; margin-inline-start: 4px; overflow: hidden; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.file-product.is-tile > .file-dots, .file-table.is-products thead .file-dots { margin-top: 8px; }

/* Full-screen photo viewer. It owns every gesture, so a pinch zooms the photo and never the page behind it. */
.file-viewer { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; flex-direction: column; overflow: hidden; background: transparent; color: var(--ds-white); font-family: var(--file-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: calc(-0.01em * var(--file-tracking)); touch-action: none; overscroll-behavior: contain; }
/* An author display value would beat the browser rule that hides a closed dialog. */
.file-viewer[open] { display: flex; }
.file-viewer:focus { outline: none; }
/* The page stays faintly in view behind the photo, so the viewer reads as a layer over it. */
.file-viewer::backdrop { background: color-mix(in srgb, var(--ds-ink) 80%, transparent); transition: background-color 200ms ease-out; }
/* A zoomed photo has the screen to itself: the overlay turns opaque and the controls fade until a tap zooms back out. */
.file-viewer[data-zoomed]::backdrop { background: var(--ds-ink); }
.file-viewer-bar, .file-viewer-footer { transition: opacity 200ms ease-out; }
.file-viewer[data-zoomed] :is(.file-viewer-bar, .file-viewer-footer) { opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s 200ms; }
.file-viewer-bar { display: flex; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 8px; }
.file-viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; overflow: hidden; touch-action: none; }
.file-viewer-stage img { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: zoom-in; will-change: transform; animation: file-viewer-in 200ms ease-out; }
/* The stage keeps its size, so the photo does not jump, but stops clipping, so a zoomed photo runs to the screen's edges where the faded controls were. */
.file-viewer[data-zoomed] .file-viewer-stage { overflow: visible; }
.file-viewer[data-zoomed] .file-viewer-stage img { cursor: zoom-out; }
@keyframes file-viewer-in { from { opacity: 0.35; } }
/* Stepping, the count and the caption sit together under the photo, in reach of a thumb, so nothing covers the photo itself. */
.file-viewer-footer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 20px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--file-text); line-height: 20px; }
.file-viewer-steps { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.file-viewer-title { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: color-mix(in srgb, var(--ds-white) 72%, transparent); }
.file-viewer-count { min-width: 64px; text-align: center; }
/* The library's ghost button in the viewer's dark colours: a 32px rounded square, 44px on a phone. */
.file-viewer .file-viewer-button { width: 32px; padding: 0; align-self: center; color: var(--ds-white); }
@media (hover: hover) { .file-viewer .file-viewer-button:not(:disabled):hover { background: color-mix(in srgb, var(--ds-white) 12%, transparent); } }
.file-viewer .file-viewer-button:disabled { border-color: transparent; background: transparent; color: color-mix(in srgb, var(--ds-white) 30%, transparent); }
.file-viewer .file-viewer-button:focus-visible { outline: 2px solid var(--ds-white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .file-viewer-stage img { animation: none; } .file-viewer::backdrop, .file-viewer-bar, .file-viewer-footer, .file-viewer[data-zoomed] :is(.file-viewer-bar, .file-viewer-footer) { transition: none; } }
/* Focus handed back after a click or tap closes a dialog carries no ring; it outranks any host's focus ring, which cannot know about it. */
[data-quiet-focus]:focus { outline: none !important; }

/* 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(--file-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: calc(-0.01em * var(--file-tracking));
}
.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 { min-height: 0; 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 0 -2px; padding: 16px 0 4px; border-top: 1px solid var(--ds-hairline); color: var(--ds-ink-2); }
.file-image-footer > span { color: var(--ds-ink-3); }
.file-image-footer > span:empty { display: none; }
.file-image-footer > span:empty + .file-wordmark { margin-inline-start: 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%; border-radius: 20px; background: var(--ds-raised); aspect-ratio: auto; }
/* Cover, never contain: a contained photo bands the frame wherever its ratio differs from the slot. */
.file-product-image-photo img { display: block; object-fit: cover; }
.file-product-image-tag { position: absolute; top: 12px; inset-inline-start: 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: calc(-0.01em * var(--file-tracking)); }
.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: var(--file-small); line-height: 18px; }
.file-product-image .file-product-name { overflow-wrap: break-word; }
.file-product-image-variant { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 6px; }
/* The frame body clips at its edge, so the dots leave room for the ring and its 1px line. */
.file-product-image-variant .file-dots { gap: 5px; padding-block: 1px; padding-inline: 4px 0; }
.file-product-image-variant .file-dot { width: 14px; height: 14px; }
.file-product-image-size { flex: none; margin-inline-start: auto; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }

/* Rendered images keep the smaller scale inside their fixed frame; the body size is for pages */
.file-image .file-card { font-size: var(--file-small); 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; }
/* A figure in a fixed frame shrinks its image to the room left, so the caption stays inside the frame. */
.file-image .file-figure { min-height: 0; }
.file-image .file-figure img { min-height: 0; }
.file-image .file-figure:not([data-fit="cover"]) img { object-fit: contain; }
.file-image .file-figure figcaption { flex: none; }

/* 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; }
    .file-product-modal { width: min(920px, calc(100% - 32px)); height: auto; max-height: calc(100dvh - 32px); margin: auto; border-radius: 16px; }
    .file-product.is-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .file-bleed { padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
    .file-product-media .file-photos, .file-product-gallery .file-photos { margin-inline: 0; padding-inline: 0; }
    .file-product-media > .file-strip, .file-product-gallery > .file-strip { margin-inline: 0; }
    .file-product-detail .file-product-info { position: sticky; top: 56px; }
    .file-product-gallery .file-photos { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
    .file-product-gallery .file-photos:not(.is-single) { height: auto; }
    .file-product-gallery .file-photos img, .file-product-gallery .file-photos:not(.is-single) img { width: 100%; height: auto; }
    .file-product-media .file-photos { display: block; overflow: visible; height: auto; }
    .file-product-media .file-photos:not(.is-single) { height: auto; }
    .file-product-media .file-photos > .file-product-zoom:not(:first-child) { display: none; }
    .file-product-media .file-photos > .file-product-zoom, .file-product-gallery .file-photos > .file-product-zoom { width: 100%; height: auto; }
    .file-product-media .file-photos img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
    .file-product-thumbs { display: flex; }
}

@media (max-width: 600px) {
    .file-card .file-button, .file-card .file-product-toggle { min-height: 44px; }
    .file-card .file-button[data-state] { --file-button-inset: 14px; }
    .file-card .file-button.is-pill { --file-button-icon-pad: 14px; }
    .file-viewer .file-viewer-button:not(.file-close) { width: 44px; height: 44px; }
    .file-close, .file-card .file-close { height: 32px; min-height: 32px; }
    .file-swatches { gap: 12px; }
    .file-size, .file-card .file-size { height: 32px; min-height: 32px; min-width: 38px; }
}

.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; }
/* Compare columns: subgrid keeps every row level across columns; the last column ends on the text margin. */
.file-compare { --file-compare-col: var(--file-product-col); display: grid; grid-auto-flow: column; grid-auto-columns: var(--file-compare-col); column-gap: 16px; margin-inline: calc(-1 * var(--file-pad-x)); padding: 0 var(--file-pad-x); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline-start: var(--file-pad-x); scrollbar-width: none; }
.file-compare::-webkit-scrollbar { display: none; }
/* Focus returns to the scroller after a dialog closes, and Safari then treats it as keyboard focus; the column heads carry the visible focus instead. */
.file-compare:focus, .file-compare-head:focus:not(:focus-visible) { outline: none; }
.file-compare-column, .file-compare-column > dl { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; margin: 0; }
.file-compare-column { scroll-snap-align: start; }
.file-compare-column > dl { grid-row: 2 / -1; }
.file-compare-head { display: flex; flex-direction: column; gap: 12px; padding: 0 0 12px; border: 0; background: none; text-align: start; color: inherit; font: inherit; }
button.file-compare-head { cursor: pointer; }
.file-compare-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: clip; background: var(--ds-raised); }
.file-compare-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An option without a photo shows its title in the photo's place, so its column never reads as missing content. */
.file-compare-photo-name { box-sizing: border-box; display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; overflow-wrap: anywhere; font-family: var(--file-font-display); font-size: 22px; line-height: 1.15; letter-spacing: calc(-0.02em * var(--file-tracking)); color: var(--ds-ink-2); }
.file-compare-tags { position: absolute; top: 8px; inset-inline: 8px; display: flex; gap: 4px; align-items: flex-start; }
.file-compare-tags > .file-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-compare-column.is-selected .file-compare-photo { box-shadow: inset 0 0 0 2px var(--ds-ink); }
.file-compare-tags .file-badge { gap: 4px; }
.file-compare-open { display: inline-flex; align-items: center; gap: 2px; margin-top: -8px; color: var(--ds-ink); line-height: 20px; }
.file-compare-head > strong { font-weight: 600; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-compare-cell { padding: 8px 0; border-top: 1px solid var(--ds-hairline); }
.file-compare-cell > dt { margin: 0; }
.file-compare-cell > dd { margin: 0; display: flex; flex-direction: column; font-size: var(--file-text); line-height: 24px; }
.file-compare-cell.is-best > dd { font-weight: 600; }
.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; }
.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; }
/* A bar grows from the label's side, so on a right-to-left page it grows leftward. */
.file-signed-bars svg:dir(rtl) { transform: scaleX(-1); }
.file-bar-labels { display: flex; text-align: center; direction: ltr; }
.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; }

/* Paper keeps small units whole and headings with what follows. Photos and cards stay breakable: holding a tall one whole pushes it to the next page and leaves a blank one behind. */
@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-strip-arrows, .file-chart details { display: none; }
    .file-row, .file-facts > div, .file-steps li, .file-callout, .file-key, .file-chart, .file-table tr, .file-table td, .file-sparkline, .file-range, .file-stack-part, .file-compare-cell, .file-recommendation-header, .file-product.is-tile, .file-figure figcaption { break-inside: avoid; }
    .file-title, .file-group-label, .file-group-heading, .file-group-head, .file-heading, .file-recommendation-header, .file-chart-head { break-after: avoid; }
    .file-data-table { min-width: 0; }
    .file-data-table th, .file-data-table td { min-width: 0; }
}

[lang|="ar"], [lang|="fa"], [lang|="ur"] { --file-tracking: 0; letter-spacing: 0; }

/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("./fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-terracotta: #c95f5b;
    --ds-orange: #e36d42;
    --ds-ochre: #d8b76a;
    --ds-olive: #a8af6d;
    --ds-seafoam: #7f9c7d;
    --ds-mint: #c0e1dc;
    --ds-blue: #5c76ad;
    --ds-indigo: #706f9c;
    --ds-purple: #987fa0;
    --ds-salmon: #d99091;
    --ds-pink: #fac7c2;
    --ds-background-1: #ffffff;
    --ds-background-2: #fdfcfb;
    --ds-background-3: #dacbc0;
    --ds-foreground-1: #4d3533;
    --ds-foreground-2: rgb(77 53 51 / 0.7);
    --ds-foreground-3: rgb(77 53 51 / 0.5);
    --ds-foreground-4: rgb(77 53 51 / 0.2);
    --ds-foreground-5: rgb(77 53 51 / 0.05);
    --ds-border: var(--ds-foreground-4);
    --ds-hairline: rgb(77 53 51 / 0.1);
    --ds-muted: #f6f2ef;
    --ds-primary: var(--ds-foreground-1);
    --ds-on-primary: #fdfcfb;
    --ds-success: #73a89a;
    --ds-success-wash: rgb(115 168 154 / 0.1);
    --ds-danger: #ed313e;
    --ds-danger-wash: rgb(237 49 62 / 0.1);
    --ds-radius: 12px;
    --ds-radius-compact: 8px;
    --ds-control: 44px;
    --ds-control-compact: 32px;
    --ds-fg1: var(--ds-foreground-1);
    --ds-fg2: var(--ds-foreground-2);
    --ds-fg3: var(--ds-foreground-3);
    --ds-fg4: var(--ds-foreground-4);
    --ds-fg5: var(--ds-foreground-5);
    --ds-bg1: var(--ds-background-1);
    --ds-bg2: var(--ds-background-2);
    --ds-bg3: var(--ds-background-3);
    --ds-white: var(--ds-background-1);
    --ds-page: var(--ds-background-2);
    --ds-raised: var(--ds-muted);
    --ds-ink: var(--ds-foreground-1);
    --ds-ink-2: var(--ds-foreground-2);
    --ds-ink-3: var(--ds-foreground-3);
    --ds-ink-4: var(--ds-foreground-4);
    --ds-teal: var(--ds-success);
    --ds-red: var(--ds-danger);
    --ds-red-border: var(--ds-danger);
    --ds-hover: var(--ds-foreground-5);
    --ds-hover-strong: color-mix(in srgb, #4d3533 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(77 53 51 / 0.4);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-ring: 0 0 0 1px rgb(77 53 51 / 0.05);
    --ds-elevation-0: 0 1px 2px rgb(77 53 51 / 0.05);
    --ds-elevation-1: 0 2px 5px rgb(77 53 51 / 0.075), 0 9px 10px rgb(77 53 51 / 0.064), 0 21px 13px rgb(77 53 51 / 0.038), 0 38px 16px rgb(77 53 51 / 0.011), 0 59px 16px rgb(77 53 51 / 0);
    --ds-elevation-2: var(--ds-ring), 0 6px 12px rgb(77 53 51 / 0.1), 0 22px 23px rgb(77 53 51 / 0.085), 0 50px 31px rgb(77 53 51 / 0.05), 0 88px 37px rgb(77 53 51 / 0.015), 0 138px 38px rgb(77 53 51 / 0);
    --ds-elevation-3: 0 11px 24px rgb(77 53 51 / 0.13), 0 44px 45px rgb(77 53 51 / 0.111), 0 99px 62px rgb(77 53 51 / 0.065), 0 176px 73px rgb(77 53 51 / 0.019), 0 275px 77px rgb(77 53 51 / 0);
    --ds-lift: var(--ds-elevation-0);
    --ds-shadow-modal: var(--ds-elevation-3);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

html, body, #root { margin: 0; min-height: 100%; }
body { background: var(--ds-page); }
.file-nav { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--ds-hairline); }
.file-nav a { padding: 10px 0; color: var(--ds-ink-2); text-decoration: none; }
.file-nav a[aria-current="page"] { color: var(--ds-ink); box-shadow: inset 0 -1px 0 var(--ds-ink); }
@media (max-width: 600px) { .file-nav a { display: inline-flex; align-items: center; min-height: 44px; } }

/* Charte Larissa : bordeaux, or, crème */
.lkz { display: flex; gap: 12px; align-items: flex-start; background: #faf3e2; border-left: 4px solid #6e1e3c; border-radius: 10px; padding: 14px 16px; margin: 6px 0 10px; }
.lkz-name { flex: none; color: #6e1e3c; font-weight: 600; font-size: 12px; border: 1.5px solid #c9a227; border-radius: 999px; padding: 3px 10px; background: #fff; }
.lkz-text { color: var(--ds-ink); font-size: 14px; line-height: 22px; }
.lkz-text p { margin: 0 0 8px; }
.lkz-text p:last-child { margin-bottom: 0; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin: 10px 0; }
.kpi { border: 1px solid var(--ds-hairline); border-radius: 12px; padding: 12px 14px; background: #fff; }
.kpi-vert { border-left: 5px solid #2e7d32; }
.kpi-orange { border-left: 5px solid #c77700; }
.kpi-rouge { border-left: 5px solid #b3261e; }
.kpi-neutre { border-left: 5px solid var(--ds-hairline); }
.kpi-label { color: var(--ds-ink-2); font-size: 12px; line-height: 16px; }
.kpi-value { font-size: 20px; font-weight: 600; color: var(--ds-ink); margin: 4px 0 6px; }
.kpi-detail { color: var(--ds-ink-2); font-size: 12px; line-height: 17px; margin-top: 6px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.badge-vert { background: #e2f0e4; color: #245f2a; }
.badge-orange { background: #fceed4; color: #8a5800; }
.badge-rouge { background: #f9e2e0; color: #9c2a1f; }
.badge-neutre { background: var(--ds-raised); color: var(--ds-ink-2); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; margin-top: 4px; }
@media (max-width: 480px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; }

.levier { border: 1px solid var(--ds-hairline); border-left: 5px solid #c9a227; border-radius: 12px; padding: 12px 14px; margin: 10px 0; background: #fffdf6; }
.levier-titre { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ds-ink); }
.levier p { margin: 4px 0; color: var(--ds-ink-2); font-size: 13px; line-height: 19px; }
.levier .effet { color: #6e1e3c; font-weight: 600; }

.statut-ligne { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; }
.statut-ligne .badge { flex: none; }
.statut-note { color: var(--ds-ink-2); font-size: 13px; line-height: 19px; }

/* Carnet de bord : portes et parcours guidé */
.doors { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.door { display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--ds-hairline); border-left: 5px solid #6e1e3c; border-radius: 12px; padding: 14px 16px; background: #fff; font-family: inherit; min-height: 44px; }
.door:active { background: #faf3e2; }
.door-titre { display: block; font-size: 16px; font-weight: 600; color: var(--ds-ink); }
.door-detail { display: block; font-size: 13px; color: var(--ds-ink-2); margin-top: 3px; line-height: 18px; }
.progress { font-size: 12px; font-weight: 600; color: #6e1e3c; letter-spacing: 0.04em; text-transform: uppercase; margin: 2px 0 10px; }

/* Question statut au démarrage */
.statut-card { border: 1px solid var(--ds-hairline); border-left: 5px solid #c9a227; border-radius: 12px; padding: 14px 16px; margin: 10px 0; background: #fffdf6; }
.statut-aide { color: var(--ds-ink-2); font-size: 13px; line-height: 19px; margin: 6px 0; }

/* Journées notées avec retrait */
.journee { display: flex; align-items: center; gap: 10px; border: 1px solid var(--ds-hairline); border-radius: 12px; padding: 10px 12px; margin: 8px 0; background: #fff; }
.journee-info { flex: 1; min-width: 0; }
.journee-date { display: block; font-size: 14px; font-weight: 600; color: var(--ds-ink); }
.journee-detail { display: block; font-size: 12px; color: var(--ds-ink-2); line-height: 17px; }
.journee-val { flex: none; font-size: 14px; font-weight: 600; color: var(--ds-ink); }
.journee-del { flex: none; min-height: 36px; border: 1px solid #b3261e; color: #9c2a1f; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Historique des mois précédents (jamais additionné) */
.historique { margin: 4px 0 10px; }
.hist-ligne { display: flex; flex-direction: column; border: 1px dashed var(--ds-hairline); border-radius: 10px; padding: 8px 12px; margin: 6px 0; background: var(--ds-raised); }
.hist-mois { font-size: 12px; font-weight: 600; color: var(--ds-ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.hist-detail { font-size: 13px; color: var(--ds-ink-2); margin-top: 2px; }

/* Sélecteur explicite du mois suivi */
.mois-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.mois-chip { border: 1px solid var(--ds-hairline); background: var(--ds-raised); color: var(--ds-ink-2); border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 600; cursor: pointer; }
.mois-chip.actif { background: #6e1e3c; color: #fff; border-color: #6e1e3c; }

/* Champ date natif validé */
.date-field { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.date-label { font-size: 13px; color: var(--ds-ink-2); }
.date-input { font-size: 16px; padding: 12px 14px; border: 1px solid var(--ds-hairline); border-radius: 10px; background: var(--ds-raised); color: var(--ds-ink); width: 100%; }

/* Sauvegarde : zones de texte export/import */
.sauvegarde-zone { width: 100%; box-sizing: border-box; font-family: monospace; font-size: 11px; line-height: 15px; border: 1px solid var(--ds-hairline); border-radius: 10px; padding: 10px; background: var(--ds-raised); color: var(--ds-ink); margin: 6px 0; }

/* Mobile : la ligne « personne » (et les journées) empile ses champs au lieu de les compresser */
@media (max-width: 480px) {
  .journee { flex-wrap: wrap; align-items: flex-start; }
  .journee > * { flex: 1 1 100%; min-width: 0; }
  .journee .journee-del, .journee > button { flex: 0 0 auto; }
}

/* Explications repliees (version allegee) */
.aide { margin: 6px 0; }
.aide summary { cursor: pointer; font-weight: 600; font-size: 13px; color: #6E1E3C; }
.aide-texte { margin: 4px 0 8px; font-size: 13px; color: #6b6257; }

.photo-compact { margin: 8px 0; }
.photo-compact img { width: 100%; max-height: 160px; object-fit: cover; object-position: center 25%; border-radius: 12px; }

.mention { font-size: 11px; line-height: 16px; color: #8a7f72; margin-top: 10px; }

/* Boutons remarquables et chiffres renforcés (demande du 5 novembre) : chaque zone touchable se distingue du fond, dans la charte bordeaux/or/crème ; la couleur n'indique jamais un état seule, le libellé reste porteur. */
button.file-button[data-variant="primary"] { background: #6e1e3c; border-color: #6e1e3c; color: #ffffff; font-weight: 700; min-height: 48px; }
button.file-button[data-variant="ghost"] { background: #faf3e2; border: 1.5px solid #c9a227; color: #6e1e3c; font-weight: 600; min-height: 44px; }
button.file-button.is-compact { background: #fffdf6; border: 1.5px solid #c9a227; color: #6e1e3c; font-weight: 600; }
.door { background: #6e1e3c; border: 1.5px solid #6e1e3c; border-left: 6px solid #c9a227; }
.door:active { background: #581631; }
.door-titre { color: #ffffff; }
.door-detail { color: #f2e3c8; }
.mois-chip { background: #fffdf6; border: 1.5px solid #c9a227; color: #6e1e3c; }
.mois-chip.actif { background: #6e1e3c; color: #ffffff; border-color: #6e1e3c; }
.journee-del { background: #f9e2e0; }
.kpi-value { font-size: 24px; font-weight: 700; color: #6e1e3c; }
.journee-val { color: #6e1e3c; font-weight: 700; }
.levier .effet { font-weight: 700; }

/* Révision du 10 novembre 2026 : accueil simplifié en sections, cibles plus grandes, place santé */
.doors-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6e1e3c; margin: 16px 2px 2px; }
.doors-label:first-child { margin-top: 2px; }
.door { min-height: 56px; padding: 16px 18px; }
.door-titre { font-size: 17px; }
.door-detail { font-size: 13px; line-height: 19px; margin-top: 4px; }
.door-hero { padding: 20px 18px; min-height: 72px; box-shadow: 0 2px 10px rgba(110,30,60,0.28); }
.door-hero .door-titre { font-size: 19px; }
.door-hero .door-detail { font-size: 14px; }
.door-sante { background: #faf3e2; border: 1.5px solid #c9a227; border-left: 6px solid #c9a227; }
.door-sante .door-titre { color: #6e1e3c; }
.door-sante .door-detail { color: #6b5a3e; }
.door:focus-visible, .file-button:focus-visible, .mois-chip:focus-visible { outline: 3px solid #c9a227; outline-offset: 2px; }
.sante-bloc { border: 1px solid var(--ds-hairline); border-left: 5px solid #c9a227; border-radius: 12px; padding: 14px 16px; margin: 10px 0; background: #fff; }
.sante-titre { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: #6e1e3c; }
.sante-bloc p { margin: 4px 0; color: var(--ds-ink-2); font-size: 14px; line-height: 20px; }
.sante-risque { color: var(--ds-ink); font-weight: 600; }

/* 10 novembre (validation Larissa) : trois gros boutons distincts, reste du carnet replie */
.door-voir { background: #c9a227; border: 1.5px solid #c9a227; border-left: 6px solid #6e1e3c; }
.door-voir:active { background: #b8931f; }
.door-voir .door-titre { color: #3a2303; }
.door-voir .door-detail { color: #4a3410; }
.aide-carnet { margin-top: 14px; }
.aide-carnet summary { font-size: 15px; padding: 12px 14px; border: 1.5px dashed #c9a227; border-radius: 12px; background: #fffdf6; min-height: 44px; display: flex; align-items: center; }
.aide-carnet .doors { margin: 8px 0 4px; }
.aide-carnet .door { background: #fffdf6; border: 1.5px solid #c9a227; border-left: 6px solid #6e1e3c; }
.aide-carnet .door-titre { color: #6e1e3c; }
.aide-carnet .door-detail { color: #6b5a3e; }

/* 10 novembre (demande Larissa) : porte « Passer en bénéfice » distincte, toujours dans la charte */
.door-benefice { background: #fffdf6; border: 1.5px solid #6e1e3c; border-left: 6px solid #6e1e3c; }
.door-benefice:active { background: #faf3e2; }
.door-benefice .door-titre { color: #6e1e3c; }
.door-benefice .door-detail { color: #6b5a3e; }

/* Tableau de bord d'accueil (maquette validée par Larissa le 10 novembre 2026) */
.dash { border: 1px solid var(--ds-hairline); border-left: 5px solid #6e1e3c; border-radius: 14px; padding: 14px; margin: 12px 0; background: #faf3e2; }
.dash-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.dash-titre { font-size: 15px; font-weight: 700; color: #6e1e3c; }
.dash-jour { display: flex; gap: 8px; margin-bottom: 10px; }
.dash-kpi { flex: 1; border-radius: 10px; padding: 8px 6px; text-align: center; background: #fff; }
.dash-lab { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.dash-val { display: block; font-size: 17px; font-weight: 800; margin-top: 2px; }
.dash-in .dash-lab, .dash-in .dash-val { color: #2e7d32; }
.dash-out .dash-lab, .dash-out .dash-val { color: #b3261e; }
.dash-rest .dash-lab, .dash-rest .dash-val { color: #8a6a12; }
.dash-bandeau { display: flex; gap: 10px; align-items: flex-start; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.dash-point { width: 12px; height: 12px; border-radius: 50%; margin-top: 3px; flex: none; }
.dash-bandeau p { margin: 0; font-size: 13px; line-height: 19px; }
.dash-bandeau.dash-vert { background: #e2f0e4; } .dash-bandeau.dash-vert .dash-point { background: #2e7d32; } .dash-bandeau.dash-vert p { color: #245f2a; }
.dash-bandeau.dash-orange { background: #fceed4; } .dash-bandeau.dash-orange .dash-point { background: #c77700; } .dash-bandeau.dash-orange p { color: #8a5800; }
.dash-bandeau.dash-rouge { background: #f9e2e0; } .dash-bandeau.dash-rouge .dash-point { background: #b3261e; } .dash-bandeau.dash-rouge p { color: #9c2a1f; }
.dash-bandeau.dash-neutre { background: var(--ds-raised); } .dash-bandeau.dash-neutre .dash-point { background: var(--ds-ink-2); } .dash-bandeau.dash-neutre p { color: var(--ds-ink-2); }
.dash-panneau { background: #fff; border: 1.5px solid #c9a227; border-radius: 12px; padding: 10px 12px 6px; margin-bottom: 10px; }
.dash-panneau-titre { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #6e1e3c; margin: 0 0 6px; }
.dash-ligne { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px dashed #e6d9bd; }
.dash-ligne:last-child { border-bottom: none; }
.dash-ligne .dash-k { color: var(--ds-ink-2); }
.dash-ligne .dash-v { font-weight: 700; color: var(--ds-ink); text-align: right; }
.dash-v-texte { font-weight: 600; font-size: 12.5px; }
.dash-v-pos { color: #2e7d32 !important; }
.dash-v-neg { color: #b3261e !important; }
.dash-jauge { background: #efe4c8; border-radius: 8px; height: 10px; overflow: hidden; margin: 4px 0 6px; }
.dash-jauge > span { display: block; height: 10px; background: linear-gradient(to right, #c9a227, #6e1e3c); }
.dash-jauge-lab { font-size: 12px; font-weight: 600; color: #6e1e3c; margin: 0 0 4px; line-height: 17px; }
.dash-note { font-size: 12px; color: var(--ds-ink-2); margin: 2px 0 8px; line-height: 17px; }
.dash-boutons { display: flex; flex-direction: column; gap: 7px; }
.dash-btn { border: none; border-radius: 10px; padding: 11px 0; font-size: 13px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; font-family: inherit; min-height: 44px; width: 100%; }
.dash-btn-main { background: #6e1e3c; color: #faf3e2; }
.dash-btn-or { background: #c9a227; color: #3d2f05; }
.dash-btn-nuit { background: #2a161e; color: #c9a227; }
.dash-btn-xls { background: #fff; color: #2e7d32; border: 2px solid #2e7d32; }

/* Accueil court façon tableau de bord (demande de Larissa, 10 novembre 2026) */
.dash-apptete { margin: 2px 0 8px; }
.dash-apptitre { display: block; font-size: 19px; font-weight: 700; color: #6e1e3c; }
.dash-appfact { display: block; font-size: 12px; color: var(--ds-ink-2); margin-top: 2px; line-height: 16px; }
.dash-nav { display: flex; gap: 8px; margin: 12px 0 4px; }
.dash-navbtn { flex: 1; border: 1.5px solid #6e1e3c; background: #fff; color: #6e1e3c; border-radius: 10px; padding: 9px 2px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; min-height: 44px; }
.dash-navbtn:active { background: #faf3e2; }