/* City theme layer for the МІСТО.MEDIA site line.
   Core (grid, type scale, news blocks, ad slots) is shared and never overridden here.
   A city may only set the tokens below; see THEME.md for what is locked.
   Load this file LAST, after the page and section styles.

   Model: the bright colour of a city lives in the round mark of its logo (--accent).
   Interface text uses a darkened tone (--accent-ink) and one shared dark (--brand-deep). */

:root{
  /* Identity tokens (default theme: base МІСТО.MEDIA, neutral blue) */
  --accent:#4a90c8;        /* round logo mark colour: top strip, link underline, small dots, selection. Not for text */
  --on-accent:#0b1620;     /* text/icons placed on --accent */
  --accent-ink:#1d5a8e;    /* city colour for small text marks (rubric labels), >=4.5:1 on white and --pale */
  --brand-deep:#142531;    /* shared dark: bands, footer. Same in every city */
  --city-tint:#e8f1f8;     /* light city surface for callouts */
  --alert:#b83125;         /* shared signal colour for urgent news, same in every city */
  --rubric-city:var(--accent-ink);
  --rubric-region:var(--brand-deep);
  --rubric-useful:#0b6b4f;
  --note-bg:#fff3d6;       /* shared signal surface for dates and notes in the guide (same in every city) */
  --note-ink:#6b4300;
  --ok-bg:#e3f3ea;         /* shared "verified" colour (same in every city) */
  --ok-ink:#0b5a3c;
  /* Compatibility: existing page CSS reads --red as the brand text colour */
  --red:var(--accent-ink);
}
/* Mariupol: gold mark, deep blue marks (mrpl.city). Mark softened from #ffd20b */
[data-city="mrpl"]{--accent:#e8b100;--accent-ink:#004e7d;--city-tint:#fbf3d6}
/* Pokrovsk24: terracotta mark (pokrovsk24.city logo) */
[data-city="pokrovsk24"]{--accent:#ce774b;--accent-ink:#9a4a26;--city-tint:#f8ece5}
/* Zaporizhzhia: coral mark (zprz.city logo) */
[data-city="zprz"]{--accent:#d85140;--accent-ink:#b03527;--city-tint:#fbeae7}
/* Kryvbas: green mark (krivbass.city logo). Mark softened from #b4df6a */
[data-city="krivbass"]{--accent:#86b83c;--accent-ink:#3f6b10;--city-tint:#eef5e1}
/* Kamianske: indigo mark (approved pair with Avdiivka) */
[data-city="kamianske"]{--accent:#7b72d9;--accent-ink:#4a3f9f;--city-tint:#eeedfa}
/* Avdiivka: sky-blue mark (approved pair with Kamianske) */
[data-city="avdeevka"]{--accent:#35b5d8;--accent-ink:#00708f;--city-tint:#e4f5fa}
/* Identity touchpoints shared by every city */
body::before{content:"";display:block;height:4px;background:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
:root{accent-color:var(--accent);caret-color:var(--accent-ink)}
button:focus-visible,a:focus-visible{outline-color:var(--accent-ink)}
/* Identity touchpoints: brand shows in color of surfaces and marks, not in layout */
.shorts{background:color-mix(in srgb,var(--brand-deep) 80%,#000)}
.footer-band{background:var(--brand-deep)}
.story-category{color:var(--accent-ink)}
/* City logo: name, round mark in the city colour, suffix. Text is set per city (theme.js or generator) */
.logo{display:flex;align-items:center;width:max-content;max-width:100%}
.logo .logo-dot{display:block;flex:none;width:.4em;height:.4em;border-radius:50%;background:var(--accent);margin:.06em .1em 0 .12em}
.logo span{color:inherit}
/* Section badge on images: the section name from the menu, readable size */
html body .art .place,html body .secondary .art .place{font-size:12px;line-height:1;letter-spacing:.02em;font-weight:500;padding:7px 10px;left:10px;top:10px;color:var(--ink,#142531);background:#ffffffe6}
/* All-news page: thumbnails are small, so no section badge on them */
html body .archive-thumb .place{display:none}
/* Badges carry the city colour: light city surface, readable city text. No decorative bars or stripes anywhere. */
html body .art .place,html body .secondary .art .place{background:var(--city-tint);color:var(--accent-ink);font-weight:600;border:0!important;padding:7px 10px}
html body .vpo-category,html body .vpo-housing strong{background:var(--city-tint);color:var(--accent-ink)}
@media (hover:hover) and (pointer:fine){html body .vpo-card:hover .vpo-category,html body .vpo-housing:hover strong{background:var(--city-tint);box-shadow:inset 0 0 0 1px var(--accent)}}
html body .vpo-card:focus-visible .vpo-category,html body .vpo-housing:focus-visible strong{background:var(--city-tint);box-shadow:inset 0 0 0 1px var(--accent)}
/* No underlines anywhere. Emphasis is bold weight; menu and headings are always black. */
html body a,html body a:focus-visible,html body .vpo-category,html body .vpo-housing strong{text-decoration:none!important}
@media (hover:hover) and (pointer:fine){html body a:hover,html body .vpo-card:hover .vpo-action,html body .vpo-all:hover{text-decoration:none!important}}
@media (hover:hover) and (pointer:fine){html body .related a:hover,html body .footer-links a:hover,html body .feed-link:hover,html body .archive-jumps a:hover,html body .shorts .more-shorts:hover,html body .vpo-all:hover{font-weight:600}}
html body .nav a,html body #mobile-rubrics nav a,html body h1{color:var(--ink,#142531)}
html body .nav a[aria-current="page"],html body #mobile-rubrics a[aria-current="page"]{color:var(--ink,#142531);font-weight:700}
@media (hover:hover) and (pointer:fine){html body .nav a:hover{color:var(--ink,#142531);font-weight:700}}
/* Bold menu without layout shift: a hidden bold copy of the label reserves the width (labels set by theme.js) */
html body .nav a{display:inline-flex;flex-direction:column;align-items:center}
html body .nav a::after{content:attr(data-label);display:block;height:0;overflow:hidden;visibility:hidden;font-weight:700;pointer-events:none}
/* Header logo links to the home page */
.brand-home{display:block;color:inherit;text-decoration:none;width:max-content;max-width:100%}
.brand-home:focus-visible{outline:3px solid var(--accent-ink);outline-offset:4px}

/* Social icons: icon only, no caption. The list takes more networks later (one <a class="social-link"> each). */
.social-links{display:flex;align-items:center;gap:2px}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;color:var(--ink,#142531);text-decoration:none}
.social-link:focus-visible{outline:3px solid var(--accent-ink);outline-offset:-3px}
@media(hover:hover) and (pointer:fine){.social-link:hover{color:var(--accent-ink)}}
.header-socials{justify-self:end}
@media(min-width:901px){
  .wrap>header>.header-socials{grid-column:3;grid-row:1;align-self:center}
}
@media(max-width:900px){
  .wrap>header{position:relative}
  .wrap>header>.header-socials{position:absolute;right:-10px;top:12px}
}
.footer-social{margin:8px 0 0 -10px}
@media(max-width:900px){
  .footer{position:relative}
  .footer-social{position:absolute;top:14px;right:-10px;margin:0}
}
.footer-band .social-link{color:#f5f7f8}
@media(hover:hover) and (pointer:fine){.footer-band .social-link:hover{color:var(--accent)}}

/* Skip link: hidden until it gets keyboard focus */
.skip-link{position:absolute;left:12px;top:-64px;z-index:2000;padding:12px 16px;background:var(--ink,#142531);color:#fff;font-size:15px;font-weight:500;text-decoration:none}
.skip-link:focus-visible{top:12px;outline:3px solid #fff;outline-offset:2px}

/* Button system: one text-only look for every CTA (no icons, no emoji). Rectangular like the cards, badges and inputs.
   .btn--primary: filled in the shared dark, hover takes the city colour. .btn--secondary: outlined. */
html body .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid var(--brand-deep);border-radius:0;font:500 16px/1.2 'Onest',sans-serif;text-align:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform 160ms var(--ease-out,ease-out),background-color 160ms var(--ease-out,ease-out),border-color 160ms var(--ease-out,ease-out),color 160ms var(--ease-out,ease-out)}
html body .btn--primary{background:var(--brand-deep);color:#fff}
html body .btn--secondary{background:transparent;color:var(--brand-deep)}
html body .btn:active{transform:scale(.98)}
html body .btn:focus-visible{outline:3px solid var(--accent-ink);outline-offset:3px}
html body .btn:disabled,html body .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
html body .btn.is-copied{background:#0b6b4f;border-color:#0b6b4f;color:#fff}
@media(hover:hover) and (pointer:fine){
  html body .btn--primary:hover:not(.is-copied){background:var(--accent-ink);border-color:var(--accent-ink)}
  html body .btn--secondary:hover{background:var(--city-tint)}
}
@media(prefers-reduced-motion:reduce){html body .btn{transition:none}}

/* "Корисне" on sites without the dark video band: a full-width band in the light city colour */
.city-band{background:var(--city-tint);padding:36px 0 40px}
.city-band .city{margin-bottom:0}
@media(max-width:900px){.city-band{padding:28px 0 32px}}

/* Story byline: author photo (round, only when a photo exists) and name */
.story-author{display:flex;align-items:center;gap:12px;min-width:0}
.story-author-photo{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;display:block}
.story-author-name{font-weight:600;color:var(--ink,#142531);overflow-wrap:anywhere}
/* author and date sit on one line and are centred on each other; they wrap only when there is no room */
html body .story-meta-row .story-byline{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 16px;padding-top:0}
html body .story-byline time{display:inline;margin:0;white-space:nowrap}

/* Audit fixes (AUDIT.md) */
/* 12: muted text on the light city surface keeps 5:1 */
.city-band{--muted:#536875}
/* 19: story rubric is visible on every width, styled like the photo badge */
html body .story-heading>.story-category{display:block;width:fit-content;max-width:100%;margin:0 0 14px;padding:7px 10px;background:var(--city-tint);color:var(--accent-ink);font-size:12px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
/* 20: author name leads, date follows as the second level */
html body .story-author-name{font-size:15px;line-height:1.3}
/* 6: several authors sit in a wrapping row; every author may have a photo or only a name */
.story-authors{display:flex;flex-wrap:wrap;gap:10px 20px;min-width:0}
/* 7: a long section name wraps inside the photo instead of running over it */
html body .art .place,html body .secondary .art .place{max-width:calc(100% - 20px);line-height:1.2}
/* 8: rubric for a card without photo: the same text style as the badge, above the headline */
.card-rubric{display:inline-block;width:fit-content;max-width:100%;margin:0 0 8px;padding:4px 8px;background:var(--city-tint);color:var(--accent-ink);font-size:12px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
/* 9: guide amounts may wrap when a site writes a longer sum */
html body .vpo-amount{overflow-wrap:anywhere}
/* 10: "Читати також" disappears when it has no material */
.story-related:not(:has(article)){display:none}
/* Photo badge is hidden on small thumbnails: there it would be clipped by the picture */
.art{container-type:inline-size}
@container (max-width:170px){.place{display:none!important}}
/* 29: text links in the desktop menu and footer are at least 24px high (WCAG 2.5.8 target size) */
html body .nav a{display:inline-flex;align-items:center;min-height:24px}
html body .footer .footer-links a{display:inline-flex;align-items:center;min-height:24px}

/* City symbol in the logo dot: on hover/focus the dot grows and the city symbol appears (as on the live sites).
   The symbol image is the city's own round emblem; only mouse hover and keyboard focus trigger it. */
.logo-dot{position:relative}
.logo-dot .logo-symbol{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;border-radius:50%;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}
.logo-dot{transition:transform .3s ease-in-out}
@media(hover:hover) and (pointer:fine){
  .brand-home:hover .logo-dot,.logo:hover .logo-dot{transform:scale(3.4);z-index:5}
  .brand-home:hover .logo-symbol,.logo:hover .logo-symbol{opacity:1}
}
.brand-home:focus-visible .logo-dot,.logo:focus-within .logo-dot{transform:scale(3.4);z-index:5}
.brand-home:focus-visible .logo-symbol,.logo:focus-within .logo-symbol{opacity:1}
@media(prefers-reduced-motion:reduce){.logo-dot,.logo-dot .logo-symbol{transition:none}}
@media(max-width:480px){
  html body .story-author-photo{width:30px;height:30px}
  html body .story-author{gap:6px}
  html body .story-author-name{font-size:13px}
  html body .story-meta-row .story-byline{column-gap:6px}
  html body .story-byline time{font-size:12px!important}
}

/* Home guide block: a click anywhere on it opens the guide; the cards and the housing link keep their own targets */
html body .vpo-guide{position:relative}
html body .vpo-guide .vpo-all::after{content:"";position:absolute;inset:0;z-index:0}
html body .vpo-guide .vpo-card,html body .vpo-guide .vpo-housing{position:relative;z-index:1}
/* Caption line of a guide card on the home page */
html body .vpo-card .vpo-caption{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font-size:13px;line-height:1.35;font-weight:500;color:var(--ink,#142531)}

/* Share panel: compact row of app icons (Telegram, Facebook, copy link) */
html body .share-panel{display:flex;flex-wrap:wrap;align-items:center;gap:0;width:max-content;max-width:calc(100vw - 40px);padding:2px;top:calc(100% + 2px)}
html body .share-panel>a,html body .share-panel>button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:0;color:var(--ink,#142531);font-size:0}
html body .share-panel>a svg,html body .share-panel>button svg{display:block;width:20px;height:20px}
html body .share-panel #share-status,html body .share-panel #manual-copy{flex:1 1 100%;margin:2px 8px 6px;max-width:220px}
@media(hover:hover) and (pointer:fine){html body .share-panel>a:hover,html body .share-panel>button:hover{background:var(--city-tint);color:var(--accent-ink);font-weight:inherit}}

/* Section pages: the lead headline stays clearly below the page title */
html body .section-lead h2{font-size:28px}
@media(min-width:901px){html body .section-lead h2{font-size:30px}}
/* Footer links on phones: one column, tight rows */
@media(max-width:700px){html body .footer .footer-links{display:flex;flex-direction:column;gap:0}html body .footer .footer-links a{min-height:30px;padding-block:3px}}

/* Desktop footer: the channel icon sits in the logo row (as on phones), well away from the footer links */
@media(min-width:901px){
  html body .footer > div:first-child:has(.footer-social){display:grid;grid-template-columns:auto auto;column-gap:20px;align-items:center;justify-content:start}
  html body .footer > div:first-child:has(.footer-social) .logo{grid-area:1/1}
  html body .footer > div:first-child:has(.footer-social) .footer-social{grid-area:1/2;margin:0;justify-self:start}
  html body .footer > div:first-child:has(.footer-social) .footer-tagline{grid-column:1/-1}
}

/* Dates and times use the same proportional digits as the text around them (tabular digits looked like another font) */
html body time,html body .meta,html body .news-item time,html body .archive-story time,html body .rail-day,html body .rail-day span{font-variant-numeric:lining-nums proportional-nums!important;font-feature-settings:normal!important}

/* Explicit owner decision, 2026-10-26: every editorial photo in an article
   uses the cover's available width, up to 900px, without changing text width
   or cropping the original. Container units keep the breakout inside wrap. */
@supports (width:1cqw){
  html body .story-page{container-type:inline-size}
  html body .story-page .story-body figure:has(img){width:100%!important;max-width:none!important;margin-inline:0!important}
  html body .story-page .story-body iframe{min-width:0!important;max-width:100%!important}
  html body .story-page .story-body img{display:block;width:min(900px,100cqw)!important;max-width:none!important;min-width:0!important;height:auto!important;margin-inline:calc((100% - min(900px,100cqw))/2)!important}
}

/* Photo badges: smaller and slightly translucent so they label the picture without competing with the headline */
html body .art .place,html body .secondary .art .place{padding:4px 8px;font-size:12px;font-weight:500;line-height:1.2;left:8px;top:8px;background:color-mix(in srgb,var(--city-tint) 75%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Phone type scale (checked against Apple's Dynamic Type sizes and news sites): titles are calmer, text stays 17-18px */
@media(max-width:700px){
  html body .story-heading h1,html body .section-page h1,html body .archive h1,html body .error-page h1{font-size:28px!important;line-height:1.18!important}
  html body main h1[data-title="long"]{font-size:26px!important;line-height:1.18!important}
  html body main h1[data-title="xlong"]{font-size:24px!important;line-height:1.18!important}
  html body .story-body h2{font-size:22px!important;line-height:1.25}
  html body .section-lead h2{font-size:24px;line-height:1.2;font-weight:var(--w-head)!important}
  html body .project-detail .pd-card--lead h2{font-size:24px;font-weight:var(--w-head)!important}
  html body .news-item .news-headline{font-size:16px}
  html body .rail-day,html body .rail-day span{font-size:17px!important;font-weight:600!important;color:var(--ink)}
  html body .section-card h3,html body .column-card h2,html body .pd-card:not(.pd-card--lead) h2{font-size:20px}
  html body .vpo-toggle-text,html body .vpo-title{font-size:20px!important;line-height:1.3}
  html body .story-body :is(p,li):not(.ad-slot *){font-size:17px!important;line-height:1.6!important}
  html body .story-body :is(p,li,h2) :is(span,font,strong,em,b,i,a):not(.btn):not(.ad-slot *){font-size:inherit!important;line-height:inherit!important}
  html body .story-body :is(figcaption,.image-caption,.v49-photo-credit),html body .story-body :is(p,li):is(.image-caption,.v49-photo-credit),html body .story-body figcaption :is(p,li){font-size:13px!important}
  html body .story-deck{font-size:17px;line-height:1.6}
}

/* Guide lists and author bios match the 17px body text on phones */
@media(max-width:700px){
  html body .vpo-panel p,html body .vpo-panel li,html body .vpo-summary,html body .vpo-alert,html body .vpo-success,html body .authors-item .author-text p{font-size:17px;line-height:1.55}
}

/* Guide block on the home page: the amounts are the point of the block, so they are larger */
html body .vpo-amount{font-size:clamp(24px,2vw,28px)!important;font-weight:600;line-height:1.15;letter-spacing:-.01em;margin:10px 0 14px;white-space:nowrap}
@media(min-width:901px) and (max-width:1100px){html body .vpo-amount{font-size:20px!important}}
@media(min-width:901px) and (max-width:1000px){html body .vpo-amount{font-size:17px!important;white-space:normal}}
@media(min-width:1101px){html body .vpo-amount{font-size:clamp(26px,2vw,28px)!important}}

/* Owner decision 2026-10-27: compact mobile menu; keep approved typography. */
html body #mobile-rubrics{height:auto;bottom:auto;max-height:100%;max-height:100dvh;padding:16px;overflow-y:auto;background:var(--pale);background:color-mix(in srgb,var(--pale) 87%,transparent)}
html body #mobile-rubrics .menu-heading{padding-bottom:8px}
html body #mobile-rubrics .menu-label{margin:16px 0 4px}
html body #mobile-rubrics nav a{padding:8px 0;min-height:44px;box-sizing:border-box}
html body #mobile-rubrics::backdrop{background:color-mix(in srgb,var(--ink) 35%,transparent)}