@import url("design-tokens.css");

/* Reusable building blocks. Use these classes rather than recreating local variants. */
.ds-shell { width: min(calc(100% - var(--ds-gutter) * 2), var(--ds-container)); margin-inline: auto; }
.ds-card { background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-sm); }
.ds-section-card { background: var(--ds-paper); border-radius: var(--ds-radius-section); overflow: hidden; }
/* Use when an editorial section card follows a different canvas. The gap is part
   of the component contract, rather than a page-specific negative-margin fix. */
.ds-section-card--separated { margin-top: var(--ds-space-7); }
.ds-button { min-height: 42px; padding: 0 var(--ds-space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2); border: 1px solid transparent; border-radius: var(--ds-radius-sm); font: 700 13px var(--ds-font-body); cursor: pointer; transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.ds-button--primary { color: var(--ds-paper); background: var(--ds-ink); border-color: var(--ds-ink); box-shadow: var(--ds-shadow-sm); }
.ds-button--secondary { color: var(--ds-ink); background: var(--ds-paper); border-color: var(--ds-line); }
.ds-button--primary:not([aria-disabled="true"]):hover { background: var(--ds-primary); border-color: var(--ds-primary); box-shadow: var(--ds-shadow-md); transform: translateY(-1px); }
.ds-button--secondary:not([aria-disabled="true"]):hover { background: var(--ds-mint); border-color: color-mix(in srgb, var(--ds-primary) 35%, var(--ds-line)); box-shadow: var(--ds-shadow-sm); transform: translateY(-1px); }
.ds-button:not([aria-disabled="true"]):active { transform: translateY(0); }
/* Concentric navbar control: control radius + edge inset = navbar radius. */
.ds-nav-control { border-radius: var(--ds-nav-control-radius); transition: transform 180ms ease, color 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease; }
.ds-input { width: 100%; min-height: 42px; padding: 0 var(--ds-space-3); color: var(--ds-ink); background: var(--ds-paper); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-sm); font: 14px var(--ds-font-body); outline: none; }
.ds-input:focus { border-color: var(--ds-primary); box-shadow: 0 0 0 3px rgba(11,111,108,.13); }
.ds-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 999px; font: 700 10px var(--ds-font-body); letter-spacing: .04em; }
.ds-pill--supported { color: #08745d; background: #dff4ea; }.ds-pill--verify { color: #8a5a10; background: #fff1d2; }.ds-pill--unknown { color: #9d4555; background: #fae3e7; }
.ds-mark { width: 36px; height: 36px; padding: 9px 7px; display: grid; align-content: center; gap: 4px; background: var(--ds-primary); border-radius: var(--ds-radius-md); }
.ds-mark i { height: 3px; display: block; margin-inline: auto; background: var(--ds-paper); border-radius: 99px; }.ds-mark i:nth-child(1) { width: 58%; opacity: .54; }.ds-mark i:nth-child(2) { width: 82%; opacity: .78; }.ds-mark i:nth-child(3) { width: 100%; }
/* Locale control: fixed geometry and a moving indicator prevent navbar layout shift. */
.ds-locale { position: relative; width: 70px; height: 30px; padding: 3px; display: grid; grid-template-columns: repeat(2, 30px); gap: 2px; isolation: isolate; background: #e7efeb; border-radius: var(--ds-radius-sm); }
.ds-locale__indicator { position: absolute; z-index: 0; top: 3px; left: 3px; width: 30px; height: 24px; background: var(--ds-paper); border-radius: 6px; box-shadow: 0 1px 3px rgba(23, 52, 58, .13); transition: transform 180ms cubic-bezier(.22, .72, .2, 1); }
.ds-locale[data-locale="it"] .ds-locale__indicator { transform: translateX(32px); }
.ds-locale button { width: 30px; height: 24px; padding: 0; position: relative; z-index: 1; color: #688082; background: transparent; border: 0; border-radius: 6px; font: 700 10px var(--ds-font-body); }
.ds-locale button[aria-pressed="true"] { color: var(--ds-ink); }
@media (prefers-reduced-motion: reduce) { .ds-locale__indicator { transition: none; } }