/* ===========================================================================
   Admin dashboard.
   Loaded only by /admin.html, so visitors never download it. Laid out after
   Kevin's reference (2026-09-24), reorganised 2026-09-25: a sidebar that only
   moves between pages, a top bar, the Tapahtumat page (stat cards, filter,
   search, the list, its "Uusi tapahtuma" button and dialog), the event in
   rounded cards beside a live phone preview with a save bar pinned to the
   bottom, the Aftermoviet page. Its own acid (the site is black and white
   since 2026-10-09) and the site's type.
   =========================================================================== */

.admin-body{
  --adm-bg: #0B0C0D;
  --adm-panel: #121315;
  --adm-card: #151619;
  --adm-field: #0E0F11;
  --adm-line: #25272B;
  --adm-line-2: #33363B;
  --adm-muted: #8C9098;
  --adm-radius: 12px;
  --adm-r-sm: 8px;
  --adm-acid-soft: rgb(232 255 46 / .1);
  --adm-side: 264px;
  --adm-rail: 348px;
  /* the site turned black and white (2026-10-09); the admin keeps its yellow:
     it is the tool, not the site (its previews load the site's own colours) */
  --acid: #E8FF2E;
  background: var(--adm-bg); color: var(--paper);
}

/* Author `display` rules beat the UA stylesheet's [hidden]{display:none}, so
   anything toggled via el.hidden needs this to actually disappear. */
[hidden]{ display: none !important; }

/* the brand name, acid everywhere it appears (the login card) */
.brand-word{ color: var(--acid); }

.admin-msg{ font-size: 0.86rem; line-height: 1.45; }
.admin-msg--error{ color: var(--danger); }
.admin-msg--ok{ color: var(--acid); }
.admin-msg--info{ color: var(--adm-muted); }
.admin-empty{ color: var(--adm-muted); font-size: 0.88rem; padding: 14px 4px; }
.req{ font-style: normal; color: var(--acid); }

/* --- buttons ------------------------------------------------------------------ */
.adm-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 14px; border-radius: var(--adm-r-sm);
  background: transparent; border: 1px solid var(--adm-line-2); color: var(--paper);
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; white-space: nowrap;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.adm-btn:hover{ background: #1C1E22; border-color: #4A4E55; }
.adm-btn--primary{ background: var(--acid); border-color: var(--acid); color: #0A0A0A; font-weight: 800; }
.adm-btn--primary:hover{ background: #F4FF8A; border-color: #F4FF8A; }
.adm-btn--outline{ border-color: #D8D8D2; }
.adm-btn--ghost{ border-color: transparent; color: var(--adm-muted); }
.adm-btn--danger{ border-color: rgb(255 42 42 / .45); color: #FF6B6B; }
.adm-btn--danger:hover{ background: rgb(255 42 42 / .12); border-color: #FF6B6B; }
.adm-btn--icon{ width: 40px; padding: 0; }
.adm-btn:disabled, .adm-btn[aria-disabled="true"]{ opacity: .4; cursor: not-allowed; }
/* round buttons never give up width to the words beside them (flex: none):
   squeezed, the dialogs' × turned into an oval on a phone (Kevin, 2026-09-27) */
.adm-iconbtn{
  position: relative; display: inline-grid; place-items: center; flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  background: transparent; border: 1px solid var(--adm-line); color: var(--paper); cursor: pointer;
}
.adm-iconbtn:hover{ background: #1C1E22; }
.adm-round{
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--acid); color: var(--acid); cursor: pointer;
}
.adm-round:hover{ background: var(--acid); color: #0A0A0A; }
:where(.admin-app) :focus-visible{ outline: 2px solid var(--acid); outline-offset: 2px; }

/* --- login / denied gate -------------------------------------------------- */
.admin-gate{ min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
/* a reload with a saved login: no login form while the dashboard loads, only
   a quiet word if it takes a moment (admin.html's head sets the class, and
   js/admin.js lifts it when it shows a view) */
.adm-resume .admin-gate{ display: none; }
.adm-resume body::after{
  content: 'Ladataan…'; position: fixed; inset: 0; display: grid; place-items: center;
  color: var(--adm-muted); font-size: 0.9rem; font-weight: 600;
  animation: adm-wait 0s .6s backwards;
}
@keyframes adm-wait{ from{ visibility: hidden; } }
.admin-gate__card{
  position: relative; width: 100%; max-width: 380px;
  background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  padding: 36px 32px;
}
.admin-gate__close{
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px;
  display: grid; place-items: center; color: var(--adm-muted); border-radius: 50%;
}
.admin-gate__close:hover{ color: var(--paper); background: var(--adm-bg); }
.admin-gate__title{ font-family: var(--font-display); font-size: 2rem; line-height: 1; margin-bottom: 24px; }
.admin-gate__form{ display: flex; flex-direction: column; gap: 16px; }
.admin-gate__note{ color: var(--adm-muted); font-size: 0.88rem; margin-top: 18px; line-height: 1.6; }
.admin-gate__note code{ background: var(--adm-bg); padding: 2px 6px; border-radius: 4px; font-size: 0.85em; }
.admin-gate .btn{ border-radius: var(--adm-r-sm); }

/* --- fields --------------------------------------------------------------- */
.field{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field--wide{ grid-column: 1 / -1; }
.field__label{ font-size: 0.8rem; font-weight: 600; color: #C9CCD2; }
.field__hint{ font-size: 0.76rem; line-height: 1.4; color: var(--adm-muted); }
.field__hint--warn{ color: #FFC14D; }
.field__hint--error{ color: var(--danger); }
.field__hint--ok{ color: var(--acid); }
.field__hint--count{ align-self: flex-end; font-variant-numeric: tabular-nums; }

.field input, .field select, .field textarea, .adm-chips{
  width: 100%;
  background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm);
  color: var(--paper); font-family: var(--font-body); font-size: 0.92rem;
  padding: 10px 13px; min-height: 42px;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .field textarea::placeholder, .adm-chips input::placeholder{ color: #5E626A; }
.field input:hover, .field select:hover, .field textarea:hover{ border-color: var(--adm-line-2); }
.field input:focus, .field select:focus, .field textarea:focus, .adm-chips:focus-within{
  outline: none; border-color: var(--acid); box-shadow: 0 0 0 3px rgb(232 255 46 / .14);
}
.field textarea{ resize: vertical; line-height: 1.6; min-height: 124px; }
.field input:disabled{ opacity: .5; cursor: not-allowed; }
/* native select arrow is light-on-light in a dark theme, so draw our own */
.field select{
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%238c9098' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 36px; cursor: pointer;
}
.field input[type="date"]::-webkit-calendar-picker-indicator{ filter: invert(.65); cursor: pointer; }
/* iPhone: its own date field sizes itself past the box and centres the day */
@supports (-webkit-touch-callout: none){
  .field input[type="date"]{ -webkit-appearance: none; appearance: none; min-width: 0; }
  .field input[type="date"]::-webkit-date-and-time-value{ text-align: left; }
}
/* a time typed outside 24 h range flags itself instead of failing at save */
.field input.is-invalid{ border-color: var(--danger); box-shadow: 0 0 0 3px rgb(255 42 42 / .14); }

.grid{ display: grid; gap: 16px 18px; }
.grid--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* a field with a button beside it */
.field__with-btn{ display: flex; gap: 8px; align-items: stretch; }
.field__with-btn input{ flex: 1 1 auto; min-width: 0; }
.field__with-btn .adm-btn{ flex: 0 0 auto; min-height: 42px; }

/* the theme: the dropdown, then the swatch and "Oma väri" beside it */
.adm-theme{ display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.adm-theme select{ flex: 1 1 160px; min-width: 160px; }   /* the colour row wraps under it before the name is squeezed */
.field__color{ display: flex; align-items: stretch; gap: 8px; flex: none; }
.field .field__color input[type="color"]{
  flex: none; width: 44px; height: 42px; min-height: 0; padding: 4px; cursor: pointer;
  background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm);
}
.field .field__color input[type="color"]::-webkit-color-swatch-wrapper{ padding: 0; }
.field .field__color input[type="color"]::-webkit-color-swatch{ border: 0; border-radius: 5px; }
.field .field__color input[type="color"]:disabled{ opacity: .55; cursor: not-allowed; }
.field__color.is-off input[type="color"]{ opacity: .2; }
/* "Sivulla": the soft tones the name gets on the site, whatever was picked */
.field__shown{ display: flex; align-items: center; gap: 8px; padding-left: 4px; font-size: 0.78rem; font-weight: 600; color: var(--adm-muted); white-space: nowrap; }
/* Sävy: a slider from the soft default to strong, its two ends named */
.tone-pick{ display: grid; gap: 6px; margin-top: 12px; max-width: 360px; }
.tone-pick input{ width: 100%; accent-color: var(--acid); cursor: pointer; }
.tone-pick__ends{ display: flex; justify-content: space-between; font-size: .74rem; font-weight: 600; color: var(--adm-muted); }
.tone-pick.is-off{ opacity: .45; }
.tone-pick.is-off input{ cursor: not-allowed; }
.field__tone{
  width: 42px; height: 42px; border-radius: var(--adm-r-sm); border: 1px solid var(--adm-line);
  background: linear-gradient(to bottom, var(--own-light, var(--theme)), var(--own-mid, var(--theme)) 55%, var(--own-deep, var(--theme)));
}
.field__switch{
  display: flex; align-items: center; gap: 8px; padding: 0 12px; min-height: 42px;
  border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm);
  font-size: 0.85rem; font-weight: 600; color: var(--paper);
  cursor: pointer; white-space: nowrap; user-select: none;
}
.field .field__switch input{
  flex: none; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0;
  accent-color: var(--acid); cursor: pointer;
}

/* the tag as a chip in a box, like a tag input: the chip, then the words */
.adm-chips{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 5px 8px; cursor: text; }
.adm-chips input{
  flex: 1 1 120px; min-width: 0; min-height: 30px; padding: 0 4px;
  background: none; border: 0; color: var(--paper); font-family: var(--font-body); font-size: 0.92rem;
}
.adm-chips input:focus{ outline: none; box-shadow: none; }
.adm-chip{
  display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 4px 0 10px;
  border-radius: 6px; background: var(--theme, var(--acid)); color: #0A0A0A;
  font-size: 0.8rem; font-weight: 800; letter-spacing: .02em;
}
.adm-chip__x{
  width: 22px; height: 22px; display: grid; place-items: center; border-radius: 4px;
  background: none; border: 0; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
}
.adm-chip__x:hover{ background: rgb(0 0 0 / .15); }
/* a tag as a plain outlined chip: on the site every tag wears the site's one colour */
.tag-chip{
  gap: 6px; border: 2px solid var(--paper); background: none;
  color: var(--paper); text-transform: uppercase; letter-spacing: .06em;
}
.tag-chip .adm-chip__x:hover{ background: rgb(255 255 255 / .1); }
.adm-chips input[hidden]{ display: none; }

/* --- the app: sidebar | main ---------------------------------------------------- */
.admin-app{
  display: grid; grid-template-columns: var(--adm-side) minmax(0, 1fr);
  min-height: 100vh;
}

/* sidebar: the brand, the pages, sign out at the foot */
.adm-side{
  position: sticky; top: 0; height: 100vh; z-index: 40;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 16px 16px;
  background: var(--adm-bg); border-right: 1px solid var(--adm-line);
  /* more pages than a short screen holds (Kevin 2026-10-20: "i cant scroll
     down in the menu"): the menu scrolls on its own, the page stays put */
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2A2D33 transparent;
}
.adm-side__brand{ display: flex; align-items: center; gap: 10px; padding: 0 8px; }
.adm-side__brand img{ width: 52px; height: auto; }
.adm-side__brand .site-head__name b{ font-size: 17px; }
.adm-side__brand .site-head__name small{ font-size: 8px; margin-top: 3px; }

.adm-nav{ display: flex; flex-direction: column; gap: 4px; }
.adm-nav__item{
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
  border-radius: var(--adm-r-sm); background: none; border: 0; cursor: pointer;
  color: #D5D7DC; font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; text-align: left;
}
.adm-nav__item svg{ color: var(--adm-muted); flex: none; }
.adm-nav__item:hover{ background: #16181B; color: var(--paper); }
.adm-nav__item.is-active{ background: var(--adm-acid-soft); color: var(--paper); }
.adm-nav__item.is-active svg{ color: var(--acid); }
a.adm-nav__item{ text-decoration: none; }
.adm-nav__item[aria-current="page"]{ background: var(--adm-acid-soft); color: var(--paper); }
.adm-nav__item[aria-current="page"] svg{ color: var(--acid); }
/* how many there are, quietly at the end of the row */
.adm-nav__count{
  margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: 999px;
  background: #1C1E22; color: var(--adm-muted); font-size: 0.74rem; font-weight: 700;
  text-align: center; font-variant-numeric: tabular-nums;
}
.adm-nav__count:empty{ display: none; }
/* a quiet name over a group of pages ("Sivusto", 2026-09-27) */
.adm-nav__group{ margin: 16px 12px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5E626A; }
.adm-side__out{
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; flex: none;
  margin-top: auto;   /* signing out sits apart from the pages, at the foot */
  background: none; border: 0; border-radius: var(--adm-r-sm); cursor: pointer;
  color: var(--adm-muted); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600;
}
.adm-side__out:hover{ color: var(--paper); background: #16181B; }

/* the search box: the Tapahtumat page's */
.adm-search{
  display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px;
  background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm);
  color: var(--adm-muted);
}
.adm-search:focus-within{ border-color: var(--acid); }
.adm-search input{
  flex: 1 1 auto; min-width: 0; background: none; border: 0; outline: none;
  color: var(--paper); font-family: var(--font-body); font-size: 0.9rem;
}
.adm-search input::placeholder{ color: #5E626A; }
.adm-search input::-webkit-search-cancel-button{ filter: invert(.6); }

/* --- main: top bar, stats, the work area, the save bar -------------------------- */
.adm-main{ display: flex; flex-direction: column; min-width: 0; }

.adm-top{
  display: flex; align-items: center; gap: 12px;
  padding: 16px 28px 8px;
}
.adm-top__menu{ display: none; }

/* where you are (2026-09-27): the house (the Hallintapaneeli), then the page */
.crumbs{ display: flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; font-size: 0.8rem; color: var(--adm-muted); }
.crumbs a{ color: var(--adm-muted); text-decoration: none; white-space: nowrap; }
.crumbs a:hover{ color: var(--paper); }
.crumbs__home{ display: inline-grid; place-items: center; width: 28px; height: 28px; margin: -6px -4px; border-radius: 6px; }
.crumbs__sep{ color: #5E626A; }
.crumbs b{ font-weight: 600; color: #C9CCD2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.adm-pophost{ position: relative; }
.adm-bell__count{
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--acid); color: #0A0A0A;
  font-size: 0.68rem; font-weight: 800; display: grid; place-items: center;
}
.adm-user{
  display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px;
  background: none; border: 0; border-radius: 999px; cursor: pointer; color: var(--paper); font-family: var(--font-body); text-align: left;
}
.adm-user:hover{ background: #16181B; }
.adm-user__avatar{
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: #1E2024; border: 1px solid var(--adm-line-2); font-size: 0.82rem; font-weight: 800; letter-spacing: .04em;
}
.adm-user__text{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.adm-user__text b{ font-size: 0.86rem; font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-user__text small{ font-size: 0.74rem; color: var(--adm-muted); }
.adm-user__chev{ color: var(--adm-muted); }

/* popovers: the bell, the account, the state, "more" */
.adm-pop{
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50; min-width: 220px; max-width: calc(100vw - 24px);
  padding: 6px; background: #17191C; border: 1px solid var(--adm-line-2); border-radius: var(--adm-radius);
  box-shadow: 0 18px 44px rgb(0 0 0 / .55);
}
.adm-pop--menu{ left: 0; right: auto; }
.adm-pop--right{ left: auto; right: 0; }
.adm-pop__title{ padding: 8px 10px 6px; font-size: 0.72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--adm-muted); }
.adm-pop__item{
  display: block; width: 100%; padding: 10px 12px; border-radius: 6px; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--paper);
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
}
.adm-pop__item:hover{ background: #22252A; }
.adm-pop--bell{ width: min(360px, calc(100vw - 32px)); }
.adm-bell__list{ list-style: none; max-height: 60vh; overflow-y: auto; }
.adm-bell__item{
  display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 10px 12px 10px 14px; text-align: left;
  background: none; border: 0; border-left: 3px solid #FFC14D; border-radius: 0 6px 6px 0; cursor: pointer;
  color: var(--paper); font-family: var(--font-body);
}
.adm-bell__item + .adm-bell__item, li + li .adm-bell__item{ margin-top: 4px; }
.adm-bell__item:hover{ background: #22252A; }
.adm-bell__item[data-tone="error"]{ border-left-color: var(--danger); }
.adm-bell__item[data-tone="info"]{ border-left-color: #5E626A; }
.adm-bell__item b{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1rem; line-height: 1; }
.adm-bell__item span{ font-size: 0.8rem; color: #C9CCD2; }
.adm-bell__none{ padding: 12px; font-size: 0.85rem; color: var(--adm-muted); }

/* the event | its live preview */
.adm-work{
  display: grid; grid-template-columns: minmax(0, 1fr) var(--adm-rail); gap: 18px; align-items: start;
  padding: 0 28px 28px; flex: 1 1 auto;
}
.adm-editor{ min-width: 0; }
.admin-app:not(.is-editing) .adm-work{ grid-template-columns: minmax(0, 1fr); }
/* a page's head (2026-09-27): its name, what it holds, its one main action */
.pg{ display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 20px; }
.pg__title{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 2.6rem; line-height: .95; }
.pg__hello{ font-size: 1.7rem; font-weight: 800; line-height: 1.2; }
.pg__sub{ margin-top: 6px; font-size: 0.88rem; color: var(--adm-muted); }
.adm-page__cta{ min-height: 46px; padding: 0 20px; font-size: 0.92rem; }

/* number cards: a tinted icon, the number, the way to its list */
.kpis{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpis--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi{
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 16px 16px 18px;
  background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  color: inherit; text-decoration: none; text-align: left; font-family: var(--font-body); cursor: pointer;
  transition: background .15s, border-color .15s;
}
.kpi:hover{ background: #17181B; border-color: var(--adm-line-2); }
.kpi.is-static{ cursor: default; }
.kpi.is-static:hover{ background: var(--adm-card); border-color: var(--adm-line); }
.kpi.is-static .kpi__go{ display: none; }
.tile{ flex: none; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: var(--adm-acid-soft); color: var(--acid); }
.tile--sm{ width: 36px; height: 36px; border-radius: 9px; }
.tile--blue, .tile--publish{ background: rgb(99 132 255 / .14); color: #93A9FF; }
.tile--green, .tile--worker{ background: rgb(54 210 122 / .13); color: #5BE38F; }
.tile--amber{ background: rgb(255 193 77 / .13); color: #FFC14D; }
.tile--grey, .tile--login{ background: #1E2024; color: #C9CCD2; }
.tile--red, .tile--delete{ background: rgb(255 42 42 / .14); color: #FF6B6B; }
.kpi__text{ display: flex; flex-direction: column; min-width: 0; }
.kpi__label{ font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #C9CCD2; }
.kpi__value{ margin-top: 4px; font-size: 1.85rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__sub{ margin-top: 3px; font-size: 0.78rem; color: var(--adm-muted); }
.kpi__state{ display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 0.95rem; font-weight: 800; line-height: 1.2; color: #5BE38F; }
.kpi__state::before{ content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgb(54 210 122 / .18); }
.kpi__state[data-tone="on"]{ color: #FF6B6B; }
.kpi__state[data-tone="on"]::before{ box-shadow: 0 0 0 3px rgb(255 42 42 / .2); }
.kpi__state[data-tone="scheduled"]{ color: #FFC14D; }
.kpi__state[data-tone="scheduled"]::before{ box-shadow: 0 0 0 3px rgb(255 193 77 / .2); }
.kpi__go{ flex: none; margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--adm-line-2); color: var(--adm-muted); }
.kpi:hover .kpi__go{ color: var(--paper); border-color: #4A4E55; }

/* panels: a card with a head (its icon, its name, "Näytä kaikki") */
.panel{ min-width: 0; padding: 18px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); }
.panel__head{ display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.panel__head > svg{ flex: none; color: var(--acid); }
.panel__title{ font-size: 1rem; font-weight: 800; }
.panel__more{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--paper); text-decoration: none; white-space: nowrap; }
.panel__more svg{ color: var(--acid); }
.panel__more:hover{ color: var(--acid); }

/* the Hallintapaneeli: what matters now on the left, who did what and the links on the right */
.dash{ display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.dash__col{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* a night's poster, its age limit on it; the mark stands in for a missing one */
.poster{
  position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden;
  background: #1C1E22 url("/photos/mark-white.webp") center / 60% no-repeat;
}
.poster:has(img){ background: #1C1E22; }
.poster img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.poster__age{ position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 4px; background: rgb(0 0 0 / .72); color: var(--paper); font-size: 0.64rem; font-weight: 800; letter-spacing: .04em; }
.meta{ display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 0.84rem; color: #C9CCD2; }
.meta > span{ display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.meta svg{ flex: none; color: var(--adm-muted); }

/* a state as a pill */
.badge{
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--adm-line-2); background: #1A1C1F; font-size: 0.74rem; font-weight: 700; color: #C9CCD2; white-space: nowrap;
}
.badge::before{ content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8C9098; }
.badge--live{ color: #5BE38F; border-color: rgb(54 210 122 / .45); background: rgb(54 210 122 / .08); }
.badge--live::before{ background: #36D27A; }
.badge--draft::before{ background: #FFC14D; }
/* a new product (Merch, 2026-09-28): the UUTUUS the FlashySkies card shows */
.badge--new{ color: var(--acid); border-color: rgb(232 255 46 / .45); background: rgb(232 255 46 / .08); }
.badge--new::before{ background: var(--acid); }
.badge--past{ color: var(--adm-muted); }
/* Kide's word on the tickets: the number always, in colour when it matters */
.adm-row__stock{ color: #C9CCD2; }
.adm-row__stock[data-tone="low"]{ color: #FFC14D; }
.adm-row__stock[data-tone="out"]{ color: var(--danger); }
.adm-row__stock[data-tone="soon"]{ color: var(--adm-muted); }

/* the next night */
.next{ display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.next__text{ min-width: 0; }
.next__title{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; line-height: .95; overflow-wrap: anywhere; }
.next__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.next__act{ display: flex; flex-direction: column; gap: 8px; min-width: 150px; }
.next__act .adm-btn{ min-height: 42px; }

/* short lists in the panels: each row a link */
.mini{ list-style: none; }
.mini > li + li{ border-top: 1px solid var(--adm-line); }
.mini__row{
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto 16px; gap: 14px; align-items: center;
  padding: 10px 6px; margin: 0 -6px; border-radius: 8px; color: inherit; text-decoration: none;
}
.mini > li:first-child .mini__row{ padding-top: 0; }
.mini__row:hover{ background: #191B1E; }
.mini__thumb{ display: block; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; background: #1C1E22 url("/photos/mark-white.webp") center / 60% no-repeat; }
.mini__thumb:has(img){ background: #1C1E22; }
.mini__thumb--wide{ height: 30px; }
.mini__thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.mini__text{ min-width: 0; }
.mini__title{ display: block; font-weight: 800; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__meta{ display: block; margin-top: 3px; font-size: 0.78rem; color: var(--adm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini__money{ display: flex; flex-direction: column; align-items: flex-end; font-size: 0.8rem; color: var(--adm-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mini__money b{ font-size: 0.9rem; color: var(--paper); }
.mini__go{ color: #5E626A; display: grid; }
.mini__row:hover .mini__go{ color: var(--paper); }
.mini > .adm-empty{ padding: 20px 12px; }

/* who did what, newest first */
.feed{ list-style: none; }
.feed > li{ display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; }
.feed > li + li{ border-top: 1px solid var(--adm-line); }
.feed > li:first-child{ padding-top: 0; }
.feed > li.admin-empty{ display: block; padding: 6px 0; }
.feed__text{ min-width: 0; font-size: 0.86rem; line-height: 1.35; overflow-wrap: anywhere; }
.feed__text small{ display: block; margin-top: 2px; font-size: 0.78rem; color: var(--adm-muted); }
.feed time{ font-size: 0.76rem; color: var(--adm-muted); white-space: nowrap; }

/* quick links */
.qlinks{ display: grid; gap: 8px; }
.qlink{
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 16px; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: 10px;
  color: inherit; text-decoration: none;
}
.qlink:hover{ border-color: var(--adm-line-2); background: #121416; }
.qlink b{ display: block; font-size: 0.88rem; }
.qlink small{ display: block; font-size: 0.76rem; color: var(--adm-muted); }
.qlink > svg{ color: var(--adm-muted); }

/* the list's tools: tabs with counts, the search, the order */
.toolbar{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ltabs{ display: flex; gap: 2px; margin-right: auto; border-bottom: 1px solid var(--adm-line); overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.ltabs::-webkit-scrollbar{ display: none; }
.ltab{
  display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 44px; padding: 0 12px; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; color: #C9CCD2; white-space: nowrap;
}
.ltab:hover{ color: var(--paper); }
.ltab i{ font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #1E2024; font-size: 0.72rem; color: var(--adm-muted); text-align: center; font-variant-numeric: tabular-nums; }
.ltab i:empty{ display: none; }
.ltab[aria-pressed="true"]{ color: var(--paper); border-bottom-color: var(--acid); }
.ltab[aria-pressed="true"] i{ background: var(--adm-acid-soft); color: var(--acid); }
.toolbar__search{ width: 300px; }
/* the order: the native select, invisible over its own label, so the phone's picker opens */
.sortsel{
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px;
  background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm);
  font-size: 0.86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.sortsel svg{ flex: none; color: var(--adm-muted); }
.sortsel select{ position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.sortsel:focus-within{ border-color: var(--acid); }
.sortsel:hover{ border-color: var(--adm-line-2); }

/* Tapahtumat: one card per night; its name's link covers the card (a stretched link) */
.erows{ display: flex; flex-direction: column; gap: 10px; }
.erows > .adm-empty, .erows > .admin-empty{ background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); }
.erows > .admin-empty{ padding: 18px; }
.erow{
  position: relative; display: grid; grid-template-columns: 104px minmax(0, 1fr) auto auto; gap: 20px; align-items: center;
  padding: 14px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  transition: border-color .15s, background .15s;
}
.erow:hover{ border-color: var(--adm-line-2); background: #17181B; }
.erow:focus-within{ border-color: var(--adm-line-2); }
.erow__main{ min-width: 0; }
.erow__title{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; line-height: 1; overflow-wrap: anywhere; }
.erow__link{ color: inherit; text-decoration: none; }
.erow__link::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; }
.erow__link:focus-visible{ outline: none; }
.erow:has(.erow__link:focus-visible){ outline: 2px solid var(--acid); outline-offset: 2px; }

.chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip{ padding: 3px 9px; border: 1px solid var(--adm-line-2); border-radius: 6px; font-size: 0.72rem; font-weight: 700; color: #D5D7DC; }
.chip--theme{ border-color: var(--theme, var(--adm-line-2)); color: var(--own-mid, var(--theme, #D5D7DC)); }
.erow__facts{ display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 120px; }
.erow__money{ display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.erow__money b{ font-size: 1rem; font-weight: 800; }
.erow__act{ position: relative; z-index: 1; display: flex; gap: 8px; }   /* above the card's link */
/* an open ⋯ menu lies over the cards below it, their buttons too */
.erow__act:has(.adm-pop:not([hidden])){ z-index: 5; }
.adm-btn--edit{ border-color: rgb(232 255 46 / .45); color: var(--acid); }
.adm-btn--edit:hover{ background: var(--adm-acid-soft); border-color: var(--acid); }
.erow.is-past .poster, .erow.is-past .erow__title{ opacity: .6; }
.adm-pop__item--danger{ color: #FF6B6B; }
a.adm-pop__item{ text-decoration: none; }

/* nothing to list: what to do about it */
.adm-empty{ display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 44px 24px; text-align: center; }
.adm-empty__title{ font-weight: 800; font-size: 1rem; }
.adm-empty__text{ max-width: 42ch; font-size: 0.86rem; color: var(--adm-muted); }
.adm-empty .adm-btn{ margin-top: 12px; }

/* the event's header card */
.adm-head{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
}
.adm-head__thumb{
  flex: none; width: 64px; height: 64px; border-radius: 10px; overflow: hidden;
  background: #1C1E22 url("/photos/mark-white.webp") center / 60% no-repeat;
}
.adm-head__thumb:has(img){ background: #1C1E22; }
.adm-head__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.adm-head__main{ flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.adm-head__row{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-head__title{
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: .95; overflow-wrap: anywhere;
}
/* the facts, a hairline between each; one that would open a wrapped line is
   clipped away (each fact carries its rule on its left, 1px outside the box) */
.adm-head__meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; overflow: hidden;
  margin-left: -12px; font-size: 0.84rem; line-height: 1.2; color: #C9CCD2;
}
.adm-head__meta span{ margin-left: -1px; padding: 0 12px; border-left: 1px solid var(--adm-line-2); }
.adm-head__meta span:last-child{ font-weight: 700; color: var(--paper); }
.adm-head__stock{ margin-top: 8px; font-size: 0.82rem; font-weight: 700; color: var(--acid); font-variant-numeric: tabular-nums; }
.adm-head__stock[data-tone="low"]{ color: #FFC14D; }
.adm-head__stock[data-tone="out"]{ color: var(--danger); }
.adm-head__stock[data-tone="soon"]{ color: var(--adm-muted); }
.adm-head__actions{ display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* the state: a pill that says it, and opens the one change there is */
.status-badge{
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px 0 12px;
  border-radius: 999px; border: 1px solid var(--adm-line-2); background: #1A1C1F; cursor: pointer;
  color: #C9CCD2; font-family: var(--font-body); font-size: 0.72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.status-badge::before{ content: ''; width: 7px; height: 7px; border-radius: 50%; background: #FFC14D; }
.status-badge::after{
  content: ''; width: 7px; height: 7px; margin-left: 2px; border: solid currentColor; border-width: 0 1.6px 1.6px 0;
  transform: rotate(45deg) translate(-2px, -2px);
}
.status-badge[data-state="live"]{ color: #5BE38F; border-color: rgb(54 210 122 / .45); background: rgb(54 210 122 / .08); }
.status-badge[data-state="live"]::before{ background: #36D27A; }

/* the section tabs, stuck under the top of the screen while the cards scroll */
.adm-tabs{
  position: sticky; top: 0; z-index: 20;
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  margin: 12px 0 14px; padding: 0 4px; background: var(--adm-bg);
  border-bottom: 1px solid var(--adm-line);
}
.adm-tabs::-webkit-scrollbar{ display: none; }
.adm-tab{
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 46px; padding: 0 8px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; color: var(--adm-muted); font-size: 0.82rem; font-weight: 600; white-space: nowrap;
}
.adm-tab:hover{ color: var(--paper); }
.adm-tab.is-active{ color: var(--paper); border-bottom-color: var(--acid); }
.adm-tab.is-active svg{ color: var(--acid); }

/* a section of the event: an icon, a title and what it holds, then its fields */
.adm-card{
  scroll-margin-top: 64px;
  padding: 20px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
}
.adm-card + .adm-card{ margin-top: 14px; }
.adm-card__head{ display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
/* a second block in the same section (Kuva ja kuvaus: the words under the picture) */
.adm-card__more{ margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--adm-line); }
.adm-card__icon{
  flex: none; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center;
  background: var(--adm-acid-soft); color: var(--acid);
}
.adm-card__title{ font-size: 1rem; font-weight: 800; line-height: 1.3; }
.adm-card__sub{ font-size: 0.8rem; color: var(--adm-muted); }

/* Lisäasetukset: publishing, a copy, deleting */
.adm-more{ display: flex; flex-direction: column; }
.adm-more__row{ display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.adm-more__row + .adm-more__row{ border-top: 1px solid var(--adm-line); }
.adm-more__title{ font-size: 0.9rem; font-weight: 700; margin-bottom: 2px; }

/* --- the rail: live preview, what's missing -------------------------------------- */
.adm-rail{ position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; }
.admin-app:not(.is-editing) .adm-rail{ display: none; }
.adm-live{ padding: 16px; }
.adm-live__head{ display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; color: var(--acid); }
.adm-live__title{ font-size: 0.95rem; font-weight: 800; color: var(--paper); }

.adm-seg{ display: grid; grid-template-columns: 1fr 1fr; padding: 3px; margin-bottom: 14px; background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: 9px; }
.adm-seg__btn{
  min-height: 34px; border-radius: 6px; border: 0; background: none; cursor: pointer;
  color: var(--adm-muted); font-family: var(--font-body); font-size: 0.84rem; font-weight: 700;
}
.adm-seg__btn[aria-selected="true"]{ background: #22252A; color: var(--paper); box-shadow: inset 0 -2px 0 var(--acid); }

/* Teema: the header logo's two looks, radios drawn as the segmented control */
.adm-logo-pick{ display: grid; gap: 6px; margin-top: 14px; }
.adm-seg--pick{ margin: 0; }
.adm-seg--pick .adm-seg__btn{ position: relative; display: flex; align-items: center; justify-content: center; padding: 6px 10px; text-align: center; line-height: 1.25; }
.adm-seg--pick input{ position: absolute; opacity: 0; pointer-events: none; }
.adm-seg--pick .adm-seg__btn:has(input:checked){ background: #22252A; color: var(--paper); box-shadow: inset 0 -2px 0 var(--acid); }
.adm-seg--pick .adm-seg__btn:has(input:focus-visible){ outline: 2px solid var(--acid); outline-offset: 2px; }
/* each logo option shows the F6 mark as it will look: one colour (the
   accent, like the header's Liput button), or the event name's colours */
.adm-seg--pick .adm-seg__btn.logo-opt{ justify-content: flex-start; gap: 14px; min-height: 64px; padding: 10px 16px; text-align: left; }
.logo-opt__mark{
  flex: none; width: 58px; aspect-ratio: 454 / 288; background: var(--adm-muted);
  -webkit-mask: url(/photos/mark-white.webp) center / contain no-repeat;
  mask: url(/photos/mark-white.webp) center / contain no-repeat;
}
.adm-logo-pick[data-theme] .logo-opt__mark--flat{ background: var(--theme-accent, var(--acid)); }
.adm-logo-pick[data-theme] .logo-opt__mark--fill{ background: var(--theme-fill, var(--theme-accent, var(--acid))); }
.logo-opt__text{ display: grid; gap: 2px; min-width: 0; }
.logo-opt__text b{ font-size: .86rem; font-weight: 800; color: var(--paper); }
.logo-opt__text small{ font-size: .74rem; font-weight: 500; color: var(--adm-muted); }
/* a phone: the two options one under the other, each on one line */
@media (max-width: 560px){ .adm-seg--pick{ display: grid; grid-template-columns: minmax(0, 1fr); } }
.adm-logo-pick.is-off .adm-seg{ opacity: .5; }
.adm-logo-pick.is-off .adm-seg__btn{ cursor: not-allowed; }

/* the frame: a phone (rounded, dark bezel) or a screen, the page scaled into it */
.adm-device{ display: flex; justify-content: center; }
.adm-device__screen{
  --w: 390px; --h: 844px; --s: .74;
  position: relative; overflow: hidden; flex: none;
  width: calc(var(--w) * var(--s)); height: calc(var(--h) * var(--s));
  background: #0A0A0A;
}
.adm-device__screen iframe{
  position: absolute; left: 0; top: 0; border: 0;
  width: var(--w); height: var(--h); transform: scale(var(--s)); transform-origin: 0 0;
}
.adm-device[data-device="mobile"] .adm-device__screen{
  border-radius: 34px; box-shadow: 0 0 0 9px #1E2024, 0 0 0 10px #34373C, 0 20px 50px rgb(0 0 0 / .5);
  margin: 10px 0;
}
.adm-device[data-device="desktop"] .adm-device__screen{
  border-radius: 8px; box-shadow: 0 0 0 6px #1E2024, 0 0 0 7px #34373C;
  margin: 6px 0;
}

.admin-missing{ font-size: 0.84rem; padding: 14px 16px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); }
.admin-missing:empty{ display: none; }
.admin-missing__title{ font-weight: 800; color: #FF6B6B; }
.admin-missing.is-ready .admin-missing__title{ color: var(--acid); }
.admin-missing ul{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; list-style: none; }
.admin-missing__go{
  min-height: 30px; padding: 3px 10px; cursor: pointer;
  border: 1px solid rgb(255 42 42 / .45); border-radius: 6px; background: transparent; color: #FF6B6B;
  font: inherit; font-size: 0.74rem; font-weight: 700;
}
.admin-missing__go:hover{ background: rgb(255 42 42 / .1); border-color: #FF6B6B; }

/* --- the save bar, pinned to the bottom while an event is open ------------------- */
.adm-savebar{
  position: sticky; bottom: 0; z-index: 30;
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap;
  padding: 12px 28px calc(12px + env(safe-area-inset-bottom));
  background: rgb(11 12 13 / .96); backdrop-filter: blur(8px); border-top: 1px solid var(--adm-line);
}
.admin-app:not(.is-editing) .adm-savebar{ display: none; }
.adm-savebar__delete{
  display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-height: 40px; padding: 0 6px;
  background: none; border: 0; cursor: pointer; color: #FF6B6B; font-family: var(--font-body); font-size: 0.86rem; font-weight: 600;
}
.adm-savebar__delete:hover{ color: var(--danger); }
.adm-savebar__delete[hidden] + .adm-savebar__msg, .adm-savebar__delete[hidden] ~ .adm-dirty{ margin-left: 0; }
.adm-savebar__msg{ flex: 1 1 260px; margin: 0; }
.adm-savebar__why{ flex: 1 1 200px; font-size: 0.78rem; font-weight: 700; color: #FF6B6B; }
.adm-dirty{ display: inline-flex; align-items: center; gap: 8px; font-size: 0.82rem; color: #D5D7DC; }
.adm-dirty::before{ content: ''; width: 8px; height: 8px; border-radius: 50%; background: #FF9A3C; }
.adm-savebar .adm-btn{ min-height: 44px; padding: 0 20px; }

/* --- Asetukset -------------------------------------------------------------------------- */
.adm-settings{ max-width: 1000px; }
.adm-settings__act{ flex-direction: row; align-items: flex-end; gap: 10px; }
#settingsMsg{ margin-top: 14px; }

/* --- Aftermoviet: the videos on /media (2026-09-27: cards, tabs, the Media page beside) --- */

/* a card in a list (merch, partners): its picture, its words, the switch and the buttons */
.mcards{ display: flex; flex-direction: column; gap: 10px; }
.mcards > .adm-empty, .mcards > .admin-empty{ background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius); }
.mcards > .admin-empty{ padding: 18px; }
.mcard{
  display: grid; grid-template-columns: 188px minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 14px; background: var(--adm-card); border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
}
.mcard__main{ min-width: 0; }
.mthumb{
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #1C1E22 url("/photos/mark-white.webp") center / 30% no-repeat;
}
.mthumb:has(img){ background: #1C1E22; }
.mthumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
a.mthumb::after{
  content: ''; position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  background: rgb(10 10 10 / .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7v10l8-5z' fill='white'/%3E%3C/svg%3E") center / 20px no-repeat;
}
a.mthumb:hover::after{ background-color: #FF3D3D; }
.mthumb--broken{ display: grid; place-items: center; padding: 6px; font-size: 0.74rem; color: #FF6B6B; text-align: center; background: var(--adm-field); }
.mcard__title{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; line-height: 1; overflow-wrap: anywhere; }
.mcard__desc{ margin-top: 8px; font-size: 0.82rem; line-height: 1.45; color: #C9CCD2; overflow-wrap: anywhere; }
.mcard__foot{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; font-size: 0.78rem; color: var(--adm-muted); }
.yt{ display: inline-flex; align-items: center; gap: 6px; color: #D5D7DC; font-weight: 600; }
.mcard__side{ display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }

/* Merch (2026-09-27): a product's card, its photo square; the dialog's photos */
.mcard--merch{ grid-template-columns: 96px minmax(0, 1fr) auto; }
.mthumb--merch{ aspect-ratio: 1; }
.mcard__price{ margin-top: 4px; font-weight: 700; font-size: 0.95rem; color: var(--paper); }
.pg__sub a{ color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.mr-photos{ display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin: 2px 0 10px; padding: 0; list-style: none; }
.mr-photo{ position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--adm-field); border: 2px solid transparent; }
.mr-photo.is-main{ border-color: var(--acid); }
.mr-photo img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.mr-photo__tag{
  position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgb(10 10 10 / .8); color: var(--paper); font-size: 0.68rem; font-weight: 700;
}
.mr-photo__btn{
  position: absolute; top: 6px; width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgb(10 10 10 / .78); color: var(--paper);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
/* the photo itself is a button: it opens the photo's aiming (a crosshair says so) */
.mr-photo__aim{ display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mr-photo__aim:focus-visible{ outline: 2px solid var(--paper); outline-offset: -4px; }
.mr-photo__target{
  position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: rgb(10 10 10 / .8); color: var(--paper); pointer-events: none;
}
.mr-photo__tag{ pointer-events: none; }
.mr-photo.is-aiming{ border-color: var(--paper); }
.mr-photo.is-aiming .mr-photo__target{ background: var(--paper); color: #0A0A0A; }
/* aiming a photo: the whole photo with the spot, the site's three frames under it */
.mr-aim{ display: grid; gap: 10px; margin: 0 0 12px; padding: 14px; border: 1px solid var(--adm-line-2); border-radius: 10px; background: var(--adm-field); }
.mr-aim[hidden]{ display: none; }
.mr-aim__head{ display: flex; align-items: center; gap: 8px; }
.mr-aim__head b{ margin-right: auto; }
.mr-aim .field__hint{ margin: 0; }
.mr-aim__pick{ position: relative; width: fit-content; max-width: 100%; margin: 0 auto; cursor: crosshair; touch-action: none; user-select: none; }
.mr-aim__pick:focus-visible{ outline: 2px solid var(--paper); outline-offset: 3px; }
.mr-aim__pick img{ display: block; max-width: 100%; max-height: 300px; border-radius: 6px; pointer-events: none; }
.mr-aim__dot{
  position: absolute; width: 26px; height: 26px; transform: translate(-50%, -50%); pointer-events: none;
  border: 3px solid var(--paper); border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(10 10 10 / .7), inset 0 0 0 2px rgb(10 10 10 / .7);
}
.mr-aim__frames{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: end; }
.mr-aim__frames figure{ margin: 0; }
.mr-aim__frame{ display: block; overflow: hidden; border-radius: 6px; background: #0A0A0A; }
.mr-aim__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.mr-aim__frames figcaption{ margin-top: 4px; font-size: 0.75rem; color: var(--adm-muted); }
.mr-photo__btn--left{ left: 6px; }
.mr-photo__btn--remove{ right: 6px; }
.mr-photo__btn:hover{ background: var(--paper); color: #0A0A0A; }
.mr-add{ align-self: flex-start; cursor: pointer; }
.mr-add:focus-within{ outline: 2px solid var(--paper); outline-offset: 2px; }
.mr-add.is-disabled{ opacity: .5; pointer-events: none; }
.adm-merch-form__fields{ display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mcard__act{ position: relative; display: flex; gap: 8px; }
.mcard__act:has(.adm-pop:not([hidden])){ z-index: 5; }

/* the switch: a real checkbox under a track (keyboard and screen readers get the box) */
.switch{ position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 0.78rem; line-height: 1.25; color: #C9CCD2; cursor: pointer; }
.switch__input{ position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: pointer; }
.switch__track{ position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: #2A2D32; border: 1px solid var(--adm-line-2); transition: background .15s, border-color .15s; }
.switch__track::after{ content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #8C9098; transition: transform .15s, background .15s; }
.switch__input:checked + .switch__track{ background: var(--acid); border-color: var(--acid); }
.switch__input:checked + .switch__track::after{ transform: translateX(18px); background: #0A0A0A; }
.switch__input:focus-visible + .switch__track{ outline: 2px solid var(--acid); outline-offset: 2px; }
.switch__input:disabled, .switch__input:disabled ~ *{ cursor: not-allowed; opacity: .45; }
.switch--field{ font-size: 0.88rem; font-weight: 600; color: var(--paper); }

/* the Media page in small */



@media (max-width: 720px){
  /* a card on a phone: the picture on top, then its words, the switch and the buttons in a row */
  .mcard{ grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .mcard__side{ flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .mcard__title{ font-size: 1.3rem; }
  /* a product keeps its small square beside the name; the switch and buttons go under */
  .mcard--merch{ grid-template-columns: 72px minmax(0, 1fr); }
  .mcard--merch .mcard__side{ grid-column: 1 / -1; }
}

/* --- Esikatsele: the preview, big ------------------------------------------------------- */
.adm-dialog{
  margin: auto;   /* the site's reset zeroes margins; a modal centres on them */
  width: min(1100px, calc(100vw - 32px)); padding: 16px;
  /* the screen that shows (dvh): on a phone 100vh reaches under the browser's own bars */
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
  background: var(--adm-panel); color: var(--paper); border: 1px solid var(--adm-line-2); border-radius: 16px;
}
.adm-dialog::backdrop{ background: rgb(0 0 0 / .7); }
.adm-dialog__bar{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.adm-dialog__bar .adm-seg{ width: 240px; margin: 0; }

/* Uusi tapahtuma: a small form over the page */
.adm-dialog--form{ width: min(640px, calc(100vw - 32px)); padding: 22px 22px 18px; overflow-y: auto; }
.adm-dialog--form[open]{ animation: dialog-in .16s ease-out; }
@keyframes dialog-in{ from{ opacity: 0; transform: translateY(8px) scale(.98); } }
.adm-dialog__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.adm-dialog__title{ font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 2rem; line-height: 1; }
.adm-dialog__sub{ margin-top: 6px; max-width: 52ch; font-size: 0.86rem; line-height: 1.45; color: var(--adm-muted); }
.adm-dialog__kide{ margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--adm-line); }
.adm-dialog__foot{ display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.adm-dialog__foot .adm-btn{ min-height: 44px; padding: 0 20px; }
#newEventMsg{ margin-top: 14px; }
.field__label small{ font-weight: 500; color: var(--adm-muted); }
.field__error{ font-size: 0.76rem; line-height: 1.4; color: #FF6B6B; }

/* --- toasts: confirmations that go away on their own ------------------------- */
.admin-toasts{
  position: fixed; z-index: 60; right: 24px; bottom: 84px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none;
}
.admin-toast{
  max-width: min(380px, calc(100vw - 40px)); padding: 12px 16px;
  background: #17191C; color: var(--paper); font-size: 0.9rem;
  border: 1px solid var(--adm-line-2); border-left: 3px solid var(--acid); border-radius: var(--adm-r-sm);
  box-shadow: 0 12px 32px rgb(0 0 0 / .5); animation: toastIn .18s ease-out;
}
.admin-toast--error{ border-left-color: var(--danger); }
@keyframes toastIn{ from{ opacity: 0; transform: translateY(8px); } }

/* --- image picker --------------------------------------------------------- */
.image-picker{ display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.image-picker__preview{
  width: 132px; aspect-ratio: 4 / 5; flex: 0 0 auto;
  background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: 10px;
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.image-picker__preview img{ width: 100%; height: 100%; object-fit: cover; }
.image-picker__empty{ color: var(--adm-muted); font-size: 0.78rem; }
.image-picker__controls{ display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

/* --- ticket link check: one line that says what the site will do ---------------- */
.ticket-check{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; padding: 10px 12px;
  background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); font-size: 0.85rem;
}
.ticket-check[hidden]{ display: none; }
/* a phone: the mark beside the words, the link under them */
@media (max-width: 560px){
  .ticket-check{ grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .ticket-check__open{ grid-column: 2; justify-self: start; }
}
.ticket-check__mark{ font-weight: 700; }
.ticket-check[data-tone="ok"] .ticket-check__mark{ color: var(--acid); }
.ticket-check[data-tone="warn"] .ticket-check__mark{ color: #FFC14D; }
.ticket-check[data-tone="error"] .ticket-check__mark{ color: var(--danger); }
.ticket-check__text{ flex: 1 1 auto; }
.ticket-check__open{ color: var(--paper); border-bottom: 1px solid var(--acid); }
.ticket-check__open:hover{ color: var(--acid); }

/* back to the list, above the event's header on every screen */
.admin-back{
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px;
  background: none; border: 0; cursor: pointer; padding: 6px 0;
  color: var(--adm-muted); font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  text-decoration: none;
}
.admin-back:hover{ color: var(--paper); }
.adm-scrim{ position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .6); touch-action: none; }
/* the phone menu open: the page behind does not scroll; only the menu does */
html.is-side-open, html.is-side-open body{ overflow: hidden; overscroll-behavior: none; }

/* --- responsive ----------------------------------------------------------------
   <= 1279: the preview goes under the event, full width, a phone beside the
            list of what is missing.
   <=  900: the sidebar slides in from the left (the menu button), the stats
            fold to two columns, one column of fields. */
@media (max-width: 1279px){
  .adm-work{ grid-template-columns: minmax(0, 1fr); }
  .adm-rail{ position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .adm-live{ grid-row: span 2; }
}
@media (max-width: 1100px){
  .grid--4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the numbers two by two, and the night cards' description first to go */
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px){
  .admin-app{ grid-template-columns: minmax(0, 1fr); }
  .adm-side{
    position: fixed; left: 0; top: 0; bottom: 0; width: min(320px, 86vw); height: auto;
    transform: translateX(-102%); transition: transform .22s var(--snap);
    /* Kirjaudu ulos clear of the phone's home bar when scrolled to the end */
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  .adm-side.is-open{ transform: none; box-shadow: 20px 0 60px rgb(0 0 0 / .6); }
  .adm-top{ padding: 12px 16px 6px; gap: 10px; }
  .adm-top__menu{ display: inline-grid; }
  .adm-user__text, .adm-user__chev{ display: none; }
  .crumbs{ font-size: 0.78rem; }
  /* a page's head and its numbers on a phone (2026-09-27) */
  .pg{ margin-bottom: 16px; }
  .pg__title{ font-size: 2.1rem; }
  .pg__hello{ font-size: 1.35rem; }
  .adm-page__cta, .pg > .adm-btn--primary{ flex: 1 1 100%; justify-content: center; }
  .kpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
  /* compact: the icon beside its name, the number under both */
  .kpi{ display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px 10px; padding: 12px; }
  .kpi__text{ display: contents; }
  .kpi .tile{ width: 28px; height: 28px; border-radius: 7px; }
  .kpi .tile svg{ width: 16px; height: 16px; }
  .kpi__label{ font-size: 0.64rem; letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .kpi__value, .kpi__state, .kpi__sub{ grid-column: 1 / -1; margin: 0; }
  .kpi__value{ font-size: 1.5rem; }
  .kpi__state{ font-size: 0.86rem; }
  .kpi__go{ display: none; }
  .kpis--list{ display: none; }   /* the list pages: the tabs carry the same counts */
  .dash{ grid-template-columns: minmax(0, 1fr); }
  .next{ grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }
  .next__title{ font-size: 1.5rem; }
  .next__act{ grid-column: 1 / -1; flex-direction: row; min-width: 0; }
  .next__act .adm-btn{ flex: 1 1 0; }
  .mini__row{ grid-template-columns: 48px minmax(0, 1fr) auto; }
  .mini__row .badge, .mini__go{ display: none; }
  .mini__thumb{ width: 48px; height: 48px; }
  .panel{ padding: 16px 14px; }
  .panel__more-long{ display: none; }
  .panel__more{ text-transform: capitalize; }
  /* the list's tools: the tabs on their own row, the search and the order's icon beside it */
  .toolbar{ gap: 10px; }
  .ltabs{ margin-right: 0; width: 100%; }
  .ltab{ padding: 0 9px; font-size: 0.84rem; }
  .toolbar__search{ flex: 1 1 0; width: auto; min-width: 0; }
  .sortsel__text{ display: none; }
  /* a night on a phone: the card opens it, "⋯" in its corner */
  .erow{ grid-template-columns: 76px minmax(0, 1fr); gap: 8px 14px; padding: 12px; align-items: start; }
  .erow .poster{ grid-row: span 2; }
  .erow__title{ font-size: 1.25rem; padding-right: 40px; }

  .erow__facts{ grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
  .erow__money{ flex-direction: row; align-items: baseline; gap: 8px; }
  .erow__act{ position: absolute; top: 10px; right: 10px; }
  .erow__act .adm-btn--edit{ display: none; }
  .erow__act .adm-btn--icon{ width: 34px; min-height: 34px; }
  .adm-dialog--form{ padding: 18px 16px 14px; }
  .adm-dialog__foot .adm-btn{ flex: 1 1 0; }
  .adm-work{ padding: 0 16px 20px; }
  .adm-rail{ grid-template-columns: minmax(0, 1fr); }
  .adm-head{ padding: 14px; gap: 12px; }
  .adm-head__thumb{ width: 52px; height: 52px; align-self: flex-start; }
  .adm-head__actions{ width: 100%; }
  .adm-head__actions .adm-btn{ flex: 1 1 auto; }
  .adm-head__actions .adm-pophost{ flex: none; }
  .grid--2, .grid--3, .grid--4{ grid-template-columns: minmax(0, 1fr); }
  .adm-theme{ flex-wrap: wrap; }
  .adm-card{ padding: 16px 14px; }

  .adm-savebar{ padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .adm-savebar .adm-btn{ flex: 1 1 0; padding: 0 12px; }
  .adm-savebar .adm-btn--primary{ flex-grow: 1.5; }
  .adm-savebar__delete{ order: 5; margin-right: 0; flex-basis: 100%; justify-content: center; }
  .adm-dirty{ flex-basis: 100%; }
  .admin-toasts{ left: 16px; right: 16px; bottom: calc(130px + env(safe-area-inset-bottom)); align-items: center; }
  /* 16px text in every field: below that, iOS zooms the page on focus */
  .field input, .field select, .field textarea, .adm-chips input, .adm-search input{ font-size: 16px; }

}
@media (prefers-reduced-motion: reduce){
  .admin-toast{ animation: none; }
  .adm-dialog--form[open]{ animation: none; }
  .adm-side{ transition: none; }
}

/* --- Hallinto: Huoltotila (js/admin-maintenance.js; the card redone 2026-09-27) ---
   The page visitors will see, the settings (how long, when), the buttons; its
   state as a pill: Pois päältä (green), Päällä (red), Ajastettu (amber) */
.hm-head{ display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.hm-head__text{ flex: 1 1 0; min-width: 0; }
.hm-state{ flex: none; text-align: right; }
.hm-state small{ display: block; margin-top: 6px; font-size: 0.78rem; color: var(--adm-muted); }
.hm-pill{
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--adm-line-2); background: #1A1C1F;
  font-size: 0.74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #C9CCD2;
}
.hm-pill::before{ content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #8C9098; }
.hm-state[data-state="off"] .hm-pill{ color: #5BE38F; border-color: rgb(54 210 122 / .45); background: rgb(54 210 122 / .08); }
.hm-state[data-state="off"] .hm-pill::before{ background: #36D27A; }
.hm-state[data-state="on"] .hm-pill{ color: #FF6B6B; border-color: rgb(255 42 42 / .5); background: rgb(255 42 42 / .1); }
.hm-state[data-state="on"] .hm-pill::before{ background: var(--danger); box-shadow: 0 0 0 3px rgb(255 42 42 / .2); }
.hm-state[data-state="scheduled"] .hm-pill{ color: #FFC14D; border-color: rgb(255 193 77 / .45); background: rgb(255 193 77 / .08); }
.hm-state[data-state="scheduled"] .hm-pill::before{ background: #FFC14D; }
.hm{ display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 260px); gap: 16px; align-items: start; }
.hm .huolto-dur .adm-seg__btn{ padding: 6px 2px; font-size: 0.8rem; white-space: nowrap; }
.hm__box{ min-width: 0; margin: 0; padding: 14px; background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: 10px; }
/* the settings are a fieldset (off while a break runs or waits); its legend sits in the box, not on its border */
.hm__settings{ min-inline-size: 0; }
.hm__settings > legend{ float: left; width: 100%; padding: 0; }
.hm__settings > .hm__field{ clear: both; }
.hm__settings:disabled{ opacity: .45; }
.hm__title{ margin-bottom: 12px; font-size: 0.86rem; font-weight: 800; }
.hm__preview{ position: relative; padding: 0; overflow: hidden; aspect-ratio: 1280 / 810; }
.hm__preview iframe{
  position: absolute; left: 0; top: 0; width: 1280px; height: 810px; border: 0;
  transform-origin: 0 0; transform: scale(.234); pointer-events: none;
}
.hm__preview figcaption{
  position: absolute; left: 8px; bottom: 8px; padding: 3px 8px; border-radius: 6px;
  background: rgb(0 0 0 / .72); font-size: 0.7rem; font-weight: 700; color: #C9CCD2;
}
.hm__field + .hm__field{ margin-top: 14px; }
.hm__label{ display: block; margin-bottom: 7px; font-size: 0.78rem; font-weight: 600; color: #C9CCD2; }
.huolto-when{ grid-template-columns: 1fr 1fr; }
.huolto-at{ margin-top: 8px; }
.hm__act{ display: flex; flex-direction: column; gap: 10px; }
.rowbtn{
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--adm-line-2); border-radius: 8px;
  font-size: 0.86rem; font-weight: 700; color: var(--paper); text-decoration: none;
}
.rowbtn > svg:first-child{ color: var(--adm-muted); }
.rowbtn > svg:last-child{ margin-left: auto; color: var(--adm-muted); }
.rowbtn:hover{ border-color: #4A4E55; background: #121416; }
.hm__go{ min-height: 48px; font-size: 0.9rem; }
.hm__row{ display: flex; flex-wrap: wrap; gap: 8px; }
.hm__row .adm-btn{ flex: 1 1 auto; }
.hm__note{ font-size: 0.76rem; line-height: 1.45; color: var(--adm-muted); }
@media (max-width: 1279px){
  .hm{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm > .hm__box:last-child{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .hm{ grid-template-columns: minmax(0, 1fr); }
  .hm-head{ flex-wrap: wrap; }
  .hm-state{ width: 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; text-align: left; }
  .hm-state small{ margin: 0; }
}
.huolto-go{ background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
.huolto-go:hover{ background: #ff4a4a; border-color: #ff4a4a; }
#huoltoMsg{ margin-top: 14px; }
.huolto-strip{
  display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
  padding: 12px 24px; background: rgb(255 42 42 / .14); border-bottom: 1px solid rgb(255 42 42 / .5);
  font-size: 0.92rem;
}
.huolto-strip[hidden]{ display: none; }
.huolto-strip b{ color: #FF6B6B; text-transform: uppercase; letter-spacing: .06em; font-size: 0.82rem; }
.huolto-strip__text{ display: inline-flex; align-items: center; gap: 10px; }
.huolto-strip__text > i{ flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 4px rgb(255 42 42 / .2); }
.huolto-strip__act{ display: flex; gap: 8px; flex-wrap: wrap; }
.adm-dialog--huolto{ width: min(520px, calc(100vw - 32px)); }
.huolto-dur{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 520px){ .huolto-dur{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.huolto-own{ display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.huolto-own[hidden]{ display: none; }
.huolto-own input{ width: 110px; }
.huolto-own span{ color: var(--adm-muted); font-size: 0.9rem; }
.huolto-pw{ margin-top: 16px; }
#huoltoError{ margin-top: 12px; }

/* --- Hallinto: Työntekijät, Loki, the bell's worker alerts (js/admin-workers.js) --- */
.adm-nav__item[hidden]{ display: none; }
.huolto-strip__act[hidden]{ display: none; }
.adm-dialog--narrow{ width: min(520px, calc(100vw - 32px)); }
.adm-hallinto > .adm-card + .adm-card{ margin-top: 18px; }
.tt-head{ justify-content: space-between; flex-wrap: wrap; }
.tt-head__text{ display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.tt-count{ margin-left: 6px; font-weight: 600; font-size: .9rem; color: var(--adm-muted); }
/* the workers and the log as tables (2026-09-27, Kevin's mockup); a card each on a phone */
.dtable{ width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.dtable th{
  padding: 9px 12px; text-align: left; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--adm-muted); background: #121315;
}
.dtable th:first-child{ border-radius: 8px 0 0 8px; }
.dtable th:last-child{ border-radius: 0 8px 8px 0; }
.dtable td{ padding: 12px; border-top: 1px solid var(--adm-line); vertical-align: middle; }
.dtable tbody tr:first-child td{ border-top: 0; }
.dtable td.admin-empty{ padding: 18px 12px; }
.dt-muted{ color: var(--adm-muted); }
.dtable--workers th:last-child, .dt-act{ text-align: right; }
.who{ display: flex; align-items: center; gap: 10px; min-width: 0; }
.who b{ font-weight: 700; overflow-wrap: anywhere; }
.who .adm-user__avatar{ width: 34px; height: 34px; font-size: 0.74rem; }
.me{ padding: 2px 8px; border-radius: 999px; background: var(--adm-acid-soft); color: var(--acid); font-size: 0.7rem; font-weight: 800; }
.role{ display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--adm-line-2); font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.role--admin{ border-color: rgb(232 255 46 / .4); color: var(--acid); }
.dot{ display: inline-flex; align-items: center; gap: 7px; font-weight: 600; white-space: nowrap; }
.dot::before{ content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot--ok{ color: #5BE38F; }
.dot--locked{ color: #FF6B6B; }
.dt-act .adm-pophost{ display: inline-block; }
.dtable--log td{ padding: 9px 12px; }
.dtable--log td:first-child{ color: var(--adm-muted); white-space: nowrap; }
.dtable--log td:last-child{ color: #D5D7DC; overflow-wrap: anywhere; }
.dtable--log td.none{ color: var(--adm-muted); }
.dtable--log .is-big{ color: #FFB86B; font-weight: 700; }
.tt-filters{ display: flex; gap: 8px; flex-wrap: wrap; }
.tt-filter select{ width: 190px; }
.tt-more{ margin-top: 12px; }
.tt-field{ margin-top: 14px; }
.tt-pw{ display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.tt-pw code{ font-family: ui-monospace, Consolas, monospace; font-size: 1.35rem; letter-spacing: .06em; padding: 10px 14px; border-radius: 10px; background: #0D0F11; border: 1px solid var(--adm-line-2); }
.tt-note{ margin-top: 12px; font-size: .86rem; color: #FFB86B; }
.bell-sub{ margin: 4px 0 8px; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--adm-muted); }
.bell-group{ margin-bottom: 8px; padding: 10px 12px; border-left: 3px solid #FFB86B; border-radius: 8px; background: #15181B; font-size: .88rem; line-height: 1.45; }
.bell-group b{ display: block; margin-bottom: 2px; }
.bell-log{ width: 100%; margin: 2px 0 10px; }
@media (max-width: 720px){
  /* a table on a phone: a card per row, the headings go */
  .dtable thead{ display: none; }
  .dtable, .dtable tbody, .dtable tr, .dtable td{ display: block; width: 100%; }
  .dtable tr{ position: relative; padding: 12px 0; border-top: 1px solid var(--adm-line); }
  .dtable tbody tr:first-child{ border-top: 0; }
  .dtable td{ padding: 2px 0; border: 0; text-align: left; }
  /* a person: the name, then the login, the role and state side by side, then the last login; ⋯ in the corner */
  .dtable--workers td:nth-child(2), .dtable--workers td:nth-child(5){ padding-left: 44px; font-size: 0.8rem; }
  .dtable--workers td:nth-child(3), .dtable--workers td:nth-child(4){ display: inline-block; width: auto; margin: 6px 10px 2px 0; }
  .dtable--workers td:nth-child(3){ margin-left: 44px; }
  .dtable--workers td:nth-child(5)::before{ content: 'Viimeksi kirjautunut: '; }
  .dtable--workers .dt-act{ position: absolute; top: 10px; right: 0; width: auto; }
  /* a log line: when and who, then what on what */
  .dtable--log tr{ padding: 10px 0; line-height: 1.5; }
  .dtable--log td{ display: inline; width: auto; padding: 0; }
  .dtable--log td:nth-child(1){ margin-right: 8px; }
  .dtable--log td:nth-child(2)::after{ content: '\A'; white-space: pre; }
  .dtable--log td:nth-child(3){ margin-right: 6px; }
  .dtable--log td:last-child{ color: var(--adm-muted); }
  .dtable--log td.none{ display: none; }
  .dtable td.admin-empty{ display: block; }
  .tt-filters{ width: 100%; }
  .tt-filter{ flex: 1 1 100%; }   /* one under the other: side by side the words were cut */
  .tt-filter, .tt-filter select{ width: 100%; }
}

/* ===========================================================================
   Sivuston kuvat and Oikeudet (Kevin, 2026-09-28): each changeable picture as
   a small card (what shows now, where, the buttons); the rights a worker is
   given, one box each
   =========================================================================== */
.sm-list{ display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.sm-slot{ display: flex; flex-direction: column; min-width: 0; background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); overflow: hidden; }
.sm-slot.is-custom{ border-color: rgb(232 255 46 / .45); }
.sm-slot__preview{ position: relative; aspect-ratio: 16 / 9; background: #1C1E22; }
.sm-slot__preview img, .sm-slot__preview video{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* the backgrounds show black and white on the site, so here too */
.sm-slot__preview.is-bw img{ filter: grayscale(1); }
.sm-slot__preview.is-broken::after{
  content: 'Tiedosto ei lataudu: sivusto näyttää alkuperäisen.'; position: absolute; inset: 0; display: grid; place-items: center;
  padding: 12px; text-align: center; font-size: .8rem; color: #FF6B6B; background: rgb(14 15 17 / .88);
}
.sm-slot__tag{ position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgb(10 10 10 / .8); color: var(--paper); font-size: .72rem; font-weight: 700; }
.sm-slot.is-custom .sm-slot__tag{ background: var(--acid); color: #0A0A0A; }
.sm-slot__body{ display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 12px 14px 14px; }
.sm-slot__title{ font-size: .98rem; font-weight: 800; color: var(--paper); }
.sm-slot__where{ font-size: .8rem; line-height: 1.45; color: var(--adm-muted); }
.sm-slot__where a{ color: var(--paper); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sm-slot__note{ margin-top: 6px; font-size: .76rem; line-height: 1.45; color: var(--adm-muted); }
.sm-slot__actions{ display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.sm-slot__busy{ font-size: .85rem; font-weight: 700; color: var(--paper); }

.rights{ display: grid; gap: 10px; margin: 6px 0 12px; padding: 0; border: 0; min-width: 0; }
.right{
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: var(--adm-field);
}
.right input{ flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acid); }
.right b{ display: block; font-size: .92rem; color: var(--paper); }
.right small{ display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; color: var(--adm-muted); }
.right:has(input:checked){ border-color: rgb(232 255 46 / .5); }
.right:has(input:focus-visible){ outline: 2px solid var(--paper); outline-offset: 2px; }
.role-extra{ display: block; margin-top: 5px; font-size: .74rem; line-height: 1.35; color: var(--adm-muted); }

/* "Ikäraja muuttuu illan aikana" (2026-09-28): the switch, then the time and
   the later limit on one line */
/* S-keikka, sitten K-18 (Kevin, 2026-09-28): each part's hours on its own line */
.age-split{ display: grid; gap: 8px; padding: 12px 14px; background: var(--adm-field); border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); }
.age-split__part{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: .9rem; }
.age-split__who{ min-width: 76px; font-weight: 800; color: var(--paper); }
.age-split__time{ color: var(--adm-muted); font-weight: 600; }
.age-split__time b{ color: var(--paper); }
.field .age-split__part input{ width: 92px; min-height: 38px; padding: 6px 10px; text-align: center; }
.age-change{ display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.age-change__row{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.age-change__row[hidden]{ display: none; }
.age-change__time{ display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; font-weight: 600; color: var(--paper); }
.age-change__time input{ width: 124px; }
.age-change__arrow{ color: var(--adm-muted); }

@keyframes tkt-new{
  0%, 45%{ box-shadow: 0 0 0 3px var(--acid), 0 0 32px rgb(232 255 46 / .25); background: #23261C; }
  100%{ box-shadow: 0 0 0 0 transparent; background: #1B1D21; }
}

/* the Uusi tapahtuma dialog: the age limit and its change beside each other */
.nt-age{ grid-column: 2 / -1; justify-content: flex-end; }
@media (max-width: 900px){ .nt-age{ grid-column: auto; } }
.admin-preview__ages{ display: flex; flex-wrap: wrap; gap: 6px; }

/* Yhteystiedot (2026-10-04): the site's social links, email and phone (js/admin-contacts.js) */
.contacts-form{ display: grid; gap: 18px; }

/* Sivuston kuvat -> Käyttämättömät kuvat (2026-10-18) */
.cleanup{ margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--adm-line); }
.cleanup__title{ font-size: 15px; font-weight: 800; }
.cleanup__text{ margin-top: 6px; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--adm-muted); }
.cleanup__act{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
#cleanupMsg{ margin-top: 12px; }
.cleanup__list{ display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; max-width: 560px; }
.cleanup__row{ display: grid; grid-template-columns: minmax(0, 1fr) auto 72px; gap: 12px; align-items: center; padding: 9px 12px; border: 1px solid var(--adm-line); border-radius: var(--adm-r-sm); background: var(--adm-card); font-size: 14px; }
.cleanup__name{ font-weight: 600; overflow-wrap: anywhere; }
.cleanup__count, .cleanup__size{ color: var(--adm-muted); text-align: right; }


/* Tapahtumat -> a night -> Kuvat ja aftermovie (2026-10-14; FOMO's photos
   since 2026-10-09): the YouTube link with the video's picture beside it, a
   place to drop photos, then the grid with ★ and × */
.nm__open{ margin-left: auto; }
.nm__lead{ margin: -8px 0 18px; font-size: 14px; line-height: 1.5; color: var(--adm-muted); }
.nm__movie{ display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; align-items: start; }
.nm__movie:has(.nm__thumb[hidden]){ grid-template-columns: minmax(0, 1fr); }
.nm__thumb{ aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1C1E22; margin-top: 24px; }
.nm__thumb img{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* Kevin, 2026-10-19: "Näytä etusivulla" and the picture of the video: YouTube's
   frames and one's own as small 16:9 buttons, the chosen one ringed */
.nm__home, .nm__pic{ margin-top: 16px; }
.nm__pic .field__label small{ margin-left: 6px; color: var(--adm-muted); font-weight: 600; }
.nm__frames{ display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; margin: 8px 0; padding: 0; list-style: none; }
.nm__frame{
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: 8px; background: #1C1E22; color: inherit; cursor: pointer;
}
.nm__frame img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.nm__frame:hover{ border-color: var(--adm-line-2); }
.nm__frame:focus-visible{ outline: 2px solid var(--acid); outline-offset: 2px; }
.nm__frame[aria-pressed="true"]{ border-color: var(--acid); }
.nm__frame__label{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 4px; font-size: 11px; font-weight: 700; text-align: left;
  color: #fff; background: linear-gradient(to top, rgb(0 0 0 / .78), rgb(0 0 0 / 0));
}
.nm__frame--add{ display: grid; place-items: center; border-style: dashed; border-color: var(--adm-line-2); font-size: 13px; font-weight: 700; color: var(--adm-muted); }
.nm__frame--add:hover{ color: inherit; }
.nm__photos{ margin-top: 20px; }
.nm__photos .field__label small{ margin-left: 6px; color: var(--adm-muted); font-weight: 600; }
.nm__photos .album-drop{ margin-top: 8px; }
@media (max-width: 600px){
  .nm__movie{ grid-template-columns: minmax(0, 1fr); }
  .nm__thumb{ margin-top: 0; max-width: 260px; }
  /* three a row on a phone, so a long night's photos stay a short scroll */
  .nm__photos .album-photos{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
.album-drop{
  display: grid; justify-items: center; gap: 10px; margin-top: 16px; padding: 26px 16px;
  border: 2px dashed var(--adm-line-2); border-radius: var(--adm-radius); background: var(--adm-field); text-align: center;
}
.album-drop.is-over{ border-color: var(--acid); background: var(--adm-acid-soft); }
.album-drop__text{ font-size: 15px; }
.album-drop__hint{ font-size: 13px; color: var(--adm-muted); }
.album-progress{ margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--acid); }
.album-photos{
  display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px;
  margin: 16px 0 0; padding: 0; list-style: none; max-height: min(52vh, 560px); overflow-y: auto;
}
.album-photos__wait{ grid-column: 1 / -1; padding: 18px 0; color: var(--adm-muted); }
.ph{ position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #1C1E22; }
.ph img{ display: block; width: 100%; height: 100%; object-fit: cover; }
.ph.is-cover{ box-shadow: 0 0 0 3px var(--acid); }
.ph__cover, .ph__remove{
  position: absolute; top: 6px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(10 10 10 / .72); color: var(--paper); font-size: 17px; line-height: 1; cursor: pointer;
}
.ph__cover{ left: 6px; }
.ph__cover[aria-pressed="true"]{ background: var(--acid); color: #0A0A0A; }
.ph__remove{ right: 6px; font-size: 20px; }
.ph__remove:hover{ background: var(--danger); }
:is(.ph__cover, .ph__remove):focus-visible{ outline: 2px solid var(--acid); outline-offset: 2px; }

/* Teema (2026-10-09): the site's colour as three cards to choose from, and a
   sample of the header logo, LIPUT, a date and a button in it (js/admin-theme.js) */
.theme-form{ display: grid; gap: 20px; }
.theme-opts{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.theme-opt{
  position: relative; display: flex; align-items: flex-start; gap: 14px;
  padding: 16px; border: 1px solid var(--adm-line); border-radius: var(--adm-radius);
  background: var(--adm-field); cursor: pointer;
}
.theme-opt input{ position: absolute; opacity: 0; pointer-events: none; }
.theme-opt:has(input:checked){ border-color: var(--acid); box-shadow: inset 0 0 0 1px var(--acid); }
.theme-opt:has(input:focus-visible){ outline: 2px solid var(--acid); outline-offset: 2px; }
.theme-opt__swatch{
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: #F2F1EC; border: 1px solid rgba(255, 255, 255, .2);
}
.theme-opt__text{ display: grid; gap: 4px; min-width: 0; }
.theme-opt__text b{ font-size: 15px; }
.theme-opt__text small{ font-size: 13px; line-height: 1.4; color: var(--adm-muted); }
.theme-own{ max-width: 640px; }
.theme-own input[type="color"]{ width: 100%; height: 44px; padding: 4px; border-radius: var(--adm-r-sm); }
.theme-sample{
  --sample: #F2F1EC;
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px;
  padding: 22px 24px; border-radius: var(--adm-radius); background: #0A0A0A; border: 1px solid var(--adm-line);
}
.theme-sample__logo{ display: inline-flex; align-items: center; gap: 10px; }
.theme-sample__mark{
  width: 54px; height: 30px; background: var(--sample-logo, var(--sample));
  -webkit-mask: url('/photos/mark-white.webp') center / contain no-repeat;
  mask: url('/photos/mark-white.webp') center / contain no-repeat;
}
.theme-sample__logo b{ font-size: 20px; font-weight: 900; text-transform: uppercase; color: var(--sample-logo, var(--sample)); }
/* Kuvioitu: the logo in the colour's shades and pattern, as the header draws it */
.theme-sample.is-gradient[data-theme] .theme-sample__mark{ background: var(--theme-fill); }
.theme-sample.is-gradient[data-theme] .theme-sample__logo b{
  background: var(--theme-fill); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.theme-sample__pill{
  padding: 10px 22px; border: 2px solid var(--sample); border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sample);
}
.theme-sample__date{ font-family: var(--font-display); font-size: 40px; line-height: .9; color: var(--paper); }   /* dates white (2026-10-10) */
.theme-sample__btn{
  padding: 14px 26px; border-radius: 999px; background: var(--sample); color: #0A0A0A;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
@media (max-width: 900px){ .theme-opts{ grid-template-columns: minmax(0, 1fr); } }

/* Analytiikka (2026-10-07): Umami's dashboard, tall enough to read without much inner scrolling */
.an-actions{ display: flex; flex-wrap: wrap; gap: 8px; }
.an-form{ display: grid; gap: 12px; max-width: 560px; margin-bottom: 16px; }
.an-form .adm-btn{ justify-self: start; }
.an-frame{ border: 1px solid var(--adm-line); border-radius: 10px; overflow: hidden; background: #1a1a1a; }
.an-frame__view{ display: block; width: 100%; height: max(720px, calc(100vh - 240px)); border: 0; }
.contacts-form__foot{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

/* Kumppanit (2026-10-04): each logo on black, at its size on the site's wall */
.mcard--partner{ grid-template-columns: 200px minmax(0, 1fr) auto; }
.mcard--partner .mcard__desc a{ color: inherit; }
.pthumb{
  width: 100%; height: 96px; display: grid; place-items: center;
  border-radius: 10px; background: #0A0A0A; border: 1px solid var(--adm-line, rgba(255,255,255,.1)); overflow: hidden;
}
.pthumb img{ max-width: 170px; max-height: 72px; width: auto; height: auto; object-fit: contain; }
.pt-logo{ display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pt-logo__preview{
  width: 220px; height: 110px; display: grid; place-items: center; flex: none;
  border-radius: 10px; background: #0A0A0A; border: 1px solid var(--adm-line, rgba(255,255,255,.1));
}
.pt-logo__preview img{ max-width: 200px; max-height: 90px; object-fit: contain; }
.pt-logo__empty{ font-size: .8rem; color: var(--adm-muted); }
@media (max-width: 720px){
  .mcard--partner{ grid-template-columns: minmax(0, 1fr); }
  .pthumb{ height: 88px; }
}