/* Shared by admin and public alike. Same convention as admin.css/public.css:
   Settings (tokens) → Generic (reset, bare elements) → Global Exceptions
   (state-driven overrides used by both sides — .hide, .sr-only, the focus
   outline, the button cursor). Already close to this shape before this
   pass — mostly banners, not restructuring. */

/* ===== Settings (design tokens) ===== */
:root {

    --color-delete: #d00065;
    --color-success: #00aec7;
    --color-partial: #fecc33;
    --color-gray: #595959;
    --color-disabled: #e1e2e2;
    --color-black: #0e1514;
    --color-white: #ffffff;
    --color-link: blue;

    --base1: 4px;
    --base2: calc(var(--base1) * 2); /* 8 */
    --base3: calc(var(--base1) * 3); /* 12 */
    --base4: calc(var(--base1) * 4); /* 16 */
    --base5: calc(var(--base1) * 5); /* 20 */
    --base6: calc(var(--base1) * 6); /* 24 */
    --base8: calc(var(--base1) * 8); /* 32 */
    --base9: calc(var(--base1) * 9); /* 36 */
    --base10: calc(var(--base1) * 10); /* 40 */
    --base12: calc(var(--base1) * 12); /* 48 */
    --base14: calc(var(--base1) * 14); /* 56 */
    --base15: calc(var(--base1) * 15); /* 60 */
    --base16: calc(var(--base1) * 16); /* 64 */
    --base24: calc(var(--base1) * 24); /* 96 */
    --base28: calc(var(--base1) * 28); /* 112 */
    --base32: calc(var(--base1) * 32); /* 128 */

    --input-border-radius: var(--base1);
    --button-padding: var(--base4) var(--base6);
    --button-border: 1px solid var(--color-gray);
    --button-border-radius: var(--base4);

    --Zalando-Sans-Regular: 'Zalando Sans', sans-serif;
    --Zalando-Sans-SemiExpanded: 'Zalando Sans SemiExpanded', sans-serif;
    --Zalando-Sans-Expanded: "Zalando Sans Expanded", sans-serif;
    --Space-Grotesk:  'Space Grotesk', monospace;

    --reading-measure: clamp(41ch, 50vw, 56ch);
    --public-button-radius: var(--base1);
}

/* ===== Generic (reset, bare element styles) ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    color: var(--color-black);
    background-color: var(--color-white);
    font-family: var(--Zalando-Sans-Regular);
    font-weight: lighter;
}

img,
video {
    max-width: 100%;
}

h1 {
    font-family: var(--Zalando-Sans-SemiExpanded);
    font-size: 2.25em;
    font-weight: 500;
}

h2, h3 {
    font-weight: 300;
    display: inline-block;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.25em;
}

p {
    max-width: var(--reading-measure);
}

.symbol {
    font-family: var(--Space-Grotesk);
    font-size: 1rem;
}

/* ===== Global Exceptions (shared state/utility classes) ===== */

button,
[role="button"] {
    cursor: pointer;
    border: 0;
    border-radius: 0;
    padding: var(--base1);
}

/* Negative, not positive, offset — deliberate, not a typo. Several elements
   this outline has to render on (.thumbnail-media, .project-media-expand)
   sit inside a container with overflow: hidden; a positive/outward offset
   would get silently clipped by that overflow, leaving the ring partially or
   fully invisible on exactly the controls where getting it right matters
   most. Drawing the ring 2px inward instead keeps it fully inside every
   ancestor's box no matter what, at the cost of sitting flush against the
   control's own edge rather than floating outside it — still meets WCAG
   2.4.13 (Focus Appearance, AAA)'s "area at least as large as a 2px
   perimeter around the component" requirement, just traced on the inside of
   that perimeter instead of the outside. */
button:focus,
a:focus,
[tabindex]:focus {
    outline: 1px solid var(--color-link);
    outline-offset: -1;
}

/* Truly shared layout mechanics only — visual treatment now diverges by
   skin. Admin's own tag is still plain white-background/black-text
   (admin.css); the public side's is an icon with no background at all
   (public.css) — see CLAUDE.md's strip-down notes and
   ARCHITECTURE.md pattern 10a for why the two aren't the same component
   visually even though they share this one class and this same "which
   entity is currently open" job. */
.open-tag {
    display: none;
    position: absolute;
    z-index: 1;
}

/* .sr-only (public)
    and
    .visually-hidden (admin)  */
.sr-only,
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.hide {
    display: none !important;
}