/* Samljóð — tætt útsjónd
 *
 * Ein skinn oman á portal.css, ikki ein umskriving av honum. Alt her kann
 * takast av aftur við einum vali í wp-admin, og tá stendur gamli stílurin
 * óbroyttur eftir — tí einki er strikað, bert lagt oman á.
 *
 * Trý grundleggjandi val, tikin úr Citius og Ráðstevnu:
 *   1. Navigatiónin flytur í ein loddrættan stólpa. Hon tekur so onga hædd.
 *   2. Radius fer úr 999px niður í 6px. Pillur eru til støður, ikki til alt.
 *   3. Tekstur og millumrúm minka eitt sindur, so fleiri røðir sleppa fram.
 */

.choir-portal {
  --choir-paper:#f6f4ef;
  --choir-line:#e2ddd2;
  --choir-surface:#ffffff;
  --choir-ink:#1f2126;
  --choir-muted:#6b6a63;
  --choir-field-border:#d5cfc2;
  --tt-side:#17181c;
  --tt-side2:#23252b;
  --tt-side-ink:#c3c0b8;
  --tt-r:6px;
  --tt-rail:172px;
  /* One definition, used by the header row and by every piece. The header and
     the rows are separate grids, so a track that sizes itself to its content
     (`auto`) resolves to a different width in each and the columns drift apart.
     Every track here is either fixed or flexible — none content-sized — which is
     what actually keeps a heading above its column. */
  --tt-cols:
    2.6rem                  /* nr. */
    minmax(11rem, 2.6fr)    /* heiti */
    6.4rem                  /* the three media icons */
    minmax(6.5rem, 1.2fr)   /* tónaskald · útsetari */
    8.5rem                  /* savn */
    7.2rem                  /* røddir */
    17.5rem                 /* nótar, skrá, set á skrá */
    7rem;                   /* spælisøga */

  /* portal.css caps the portal at 980px. On a laptop that leaves a third of the
     screen empty and squeezes every row — the single biggest cause of the
     cramped feeling, and no amount of tightening rows can undo it. With the
     navigation in a rail there is no reason to stay narrow. */
  max-width: min(1560px, 96vw);
  margin: 1rem auto;
  font-size: 13.5px;
}

/* ---- stólpin ---------------------------------------------------------- */

@media (min-width: 900px) {
  .choir-portal {
    display: grid;
    grid-template-columns: var(--tt-rail) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  /* alt uttan flipar fer í høgru teig */
  .choir-portal > * { grid-column: 2; }

  .choir-portal > .choir-tabs {
    grid-column: 1;
    grid-row: 1 / span 30;
    position: sticky;
    top: 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 8px 0;
    background: var(--tt-side);
    border-radius: var(--tt-r);
    overflow: hidden;
  }
  .choir-portal > .choir-tabs button {
    justify-content: flex-start;
    width: 100%;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: 7px 11px;
    background: none;
    color: var(--tt-side-ink);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    box-shadow: none;
  }
  .choir-portal > .choir-tabs button:hover { background: var(--tt-side2); color: #efece5; }
  /* The nsm.fo skin fills the selected tab with the band's red and marks it
     !important. That is the brand doing its job and it reads well on a dark
     rail, so this does not fight it — it only squares the corners and keeps the
     text white. Fighting an !important with another one would make the two
     stylesheets enemies for no gain. */
  .choir-portal > .choir-tabs button[aria-selected="true"],
  .choir-portal > .choir-tabs button.is-active {
    border-left-color: transparent;
    color: #ffffff;
    font-weight: 600;
  }
  /* …and where no skin recolours it, the rail supplies its own mark */
  .choir-portal > .choir-tabs button.is-active:not([style]) {
    border-left-color: var(--choir-green);
  }
  .choir-portal > .choir-tabs .choir-tab-icon svg { width: 15px; height: 15px; }

  /* The tooltip hangs BELOW its button, which in a vertical rail drops it on
     top of the next item. In the rail it belongs to the side. */
  /* portal.css pins the first and last tooltips with `button:first-child`,
     which carries an element selector — so these must name `button` too, or
     they lose the tie on specificity and the tooltip stays at left:0. */
  .choir-portal > .choir-tabs button .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:first-child .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:last-child .choir-tab-tooltip {
    top: 50%;
    left: calc(100% + .5rem);
    right: auto;
    transform: translateY(-50%) translateX(-4px);
  }
  .choir-portal > .choir-tabs button:hover .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:focus-visible .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:first-child:hover .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:last-child:hover .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:first-child:focus-visible .choir-tab-tooltip,
  .choir-portal > .choir-tabs button:last-child:focus-visible .choir-tab-tooltip {
    transform: translateY(-50%) translateX(0);
  }
  /* the rail must not clip it away */
  .choir-portal > .choir-tabs { overflow: visible; }
}

/* Á telefon er stólpin skeivur: har er ein linja, sum kann rullast. */
@media (max-width: 899px) {
  .choir-portal > .choir-tabs {
    gap: 4px;
    margin: .5rem 0;
    overflow-x: auto;
    padding-bottom: 2px;
  }
  .choir-portal > .choir-tabs button { border-radius: var(--tt-r); white-space: nowrap; }
}

/* ---- hallið ------------------------------------------------------------ */

.choir-portal .choir-hero {
  gap: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--tt-r);
  align-items: center;
}
.choir-portal .choir-hero h2 { font-size: 1.15rem; margin: 0; }
.choir-portal .choir-hero .choir-kicker { font-size: .68rem; letter-spacing: .12em; }
/* The member card was a tall stack — avatar, name, role, two photo buttons, an
   instrument row, a tick and a password panel, one under the other — and since
   the hero is a flex row, that stack set the height of the whole header. Laid
   out across instead, the same controls cost a third of the space. */
.choir-portal .choir-member-profile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: .3rem .6rem;
  min-width: 0;
  max-width: 30rem;
  padding: .5rem .6rem;
  border-radius: var(--tt-r);
}
.choir-portal .choir-member-profile > * { grid-column: 2; }
.choir-portal .choir-profile-avatar {
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: start;
}
.choir-portal .choir-profile-avatar img { width: 46px; height: 46px; }
.choir-portal .choir-profile-avatar-actions { display: flex; gap: .25rem; }
.choir-portal .choir-profile-avatar-actions > *,
.choir-portal .choir-avatar-upload { padding: .18rem .45rem; font-size: .7rem; }
.choir-portal .choir-user-role { margin: 0 0 .15rem; padding: .1rem .4rem; font-size: .64rem; }
.choir-portal .choir-member-profile label {
  margin: 0;
  font-size: .64rem;
  letter-spacing: .08em;
}
.choir-portal .choir-member-profile form { margin: 0; }
.choir-portal .choir-member-profile form > div { gap: .3rem; }
.choir-portal .choir-member-profile select,
.choir-portal .choir-member-profile button { padding: .3rem .5rem; font-size: .84rem; }
/* These two sit on the hero's dark card, but portal.css colours them with
   --choir-muted, a grey meant for light backgrounds — so on the brown they were
   nearly unreadable. The portal already carries the right token for text on a
   dark ground; it simply was not used here. */
.choir-portal .choir-presence-toggle {
  margin-top: .15rem;
  color: var(--choir-on-dark-muted, #c8cdd6);
}
.choir-portal .choir-member-profile label { color: var(--choir-on-dark-muted, #c8cdd6); }
.choir-portal .choir-member-profile .choir-pass > summary {
  background: rgba(255, 255, 255, .18);
  color: #ffffff;
}
.choir-portal .choir-member-profile .choir-pass > summary:hover { background: rgba(255, 255, 255, .28); }
.choir-portal .choir-pass { margin-top: .3rem; }
.choir-portal .choir-pass > summary { padding: .2rem .5rem; font-size: .76rem; }

/* with the card no longer tall, the hero can sit on one line */
.choir-portal .choir-hero { align-items: center; }

/* ---- kassar verða røðir ------------------------------------------------ */

.choir-portal .choir-piece {
  padding: .42rem .6rem;
  border-radius: var(--tt-r);
  gap: .55rem;
}
.choir-portal .choir-piece + .choir-piece { margin-top: 2px; }
.choir-portal .choir-piece h3,
.choir-portal .choir-piece h4 { font-size: .92rem; margin: 0; }

.choir-portal .choir-offline,
.choir-portal .choir-notify,
.choir-portal .choir-live-panel {
  gap: .7rem;
  margin: .5rem 0;
  padding: .55rem .75rem;
  border-radius: var(--tt-r);
  font-size: .86rem;
}

/* ---- radius: pillur bert har, ið tær hoyra heima --------------------- */

.choir-portal .choir-card,
.choir-portal .choir-panel,
.choir-portal .choir-box,
.choir-portal .choir-event,
.choir-portal .choir-message,
.choir-portal .choir-recording,
.choir-portal input,
.choir-portal select,
.choir-portal textarea,
.choir-portal button,
.choir-portal summary,
.choir-portal .choir-avatar-upload,
.choir-portal .choir-profile-avatar-actions > * { border-radius: var(--tt-r); }

/* status- og bólkapillur halda sína rundu form — tær eru merki, ikki flatir */
.choir-portal .choir-pill,
.choir-portal .choir-badge,
.choir-portal .choir-chip,
.choir-portal .choir-status,
.choir-portal .choir-tag,
.choir-portal .choir-count,
.choir-portal [class*="-pill"],
.choir-portal [class*="-badge"],
.choir-portal .choir-avatar,
.choir-portal .choir-profile-avatar,
.choir-portal .choir-tab-count { border-radius: 999px; }

/* ---- tekstur og millumrúm --------------------------------------------- */

.choir-portal h2 { font-size: 1.12rem; }
.choir-portal h3 { font-size: .98rem; }
.choir-portal h4 { font-size: .88rem; }
.choir-portal .choir-search input,
.choir-portal input,
.choir-portal select { padding: .32rem .5rem; font-size: .88rem; }
.choir-portal table { font-size: .88rem; }
.choir-portal table th,
.choir-portal table td { padding: .34rem .5rem; }
.choir-portal table th {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--choir-muted);
}

/* Lesarin skal ikki rørast: hann er ein skíggi fyri seg og hevur sína egnu
   stødd á nótunum. */
.choir-reader,
.choir-reader * { font-size: revert; }

/* ---- nótasavnið: kort verða røðir ------------------------------------- */

/* Each piece is an <article> holding a wrapper div, then the actions. Marking
   that wrapper `display:contents` lifts its children into the same grid, so the
   heading, the credits and the collection badges become columns — a row that
   reads across, without a line of markup changing. */
/* A table, not a stack of cards. One container carries the border; the rows
   inside are parted by a hairline and lightly striped, so the eye runs down a
   column instead of stepping over a box edge on every line. */
.choir-portal .choir-grid {
  display: block;
  border: 1px solid var(--choir-line);
  border-top: 0;
  border-radius: 0 0 var(--tt-r) var(--tt-r);
  background: var(--choir-surface);
  overflow: hidden;
}
.choir-portal .choir-lib-head {
  display: grid;
  grid-template-columns: var(--tt-cols);
  gap: .1rem .7rem;
  align-items: center;
  padding: .3rem .55rem;
  border: 1px solid var(--choir-line);
  border-radius: var(--tt-r) var(--tt-r) 0 0;
  background: var(--choir-paper);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--choir-muted);
}
/* Hvør yvirskrift fær sín stólpa við navni. Áðrenn hetta hevði bert "Heiti"
   eina grid-column, og hinar lótu grid finna sær pláss sjálvar — so tá ið
   "Tónaskald" fór av á 1200px, flutti "Savn" upp í hansara stólpa og "Røddir"
   upp í hennara. Yvirskriftirnar stóðu tá yvir skeivum stólpum. */
.choir-portal .choir-lib-head span:nth-child(1) { grid-column: 1; }
.choir-portal .choir-lib-head span:nth-child(2) { grid-column: 2 / span 2; }
.choir-portal .choir-lib-head span:nth-child(3) { grid-column: 4; }
.choir-portal .choir-lib-head span:nth-child(4) { grid-column: 5; }
.choir-portal .choir-lib-head span:nth-child(5) { grid-column: 6; }

.choir-portal .choir-piece {
  margin: 0;
  padding: .25rem .55rem;
  border: 0;
  border-bottom: 1px solid var(--choir-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.choir-portal .choir-piece:nth-child(even) { background: rgba(0, 0, 0, .018); }
.choir-portal .choir-piece:last-child { border-bottom: 0; }
.choir-portal .choir-piece:hover { background: var(--choir-tint); }

.choir-portal .choir-piece-no {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  color: var(--choir-muted);
}

/* Two levels of wrapper are dissolved, not one: the piece itself becomes the
   grid, and both `.choir-piece-main` and the div inside it turn into `contents`.
   That brings the heading, the credits, the badges, the buttons AND the
   Spælisøga line onto a single row — otherwise the play history sits on a line
   of its own and costs as much as the piece. */
.choir-portal .choir-piece {
  display: grid;
  /* The title carries a floor. `minmax(0, …fr)` let it collapse to nothing once
     the actions column filled up with Nótar, the concert picker and Set á skrá —
     and a library you cannot read the titles in is no library. */
  grid-template-columns: var(--tt-cols);
  align-items: center;
  gap: .1rem .7rem;
}
.choir-portal .choir-piece-main,
.choir-portal .choir-piece-main > div:first-child { display: contents; }

/* Only the columns were pinned, so the badges, buttons and history auto-placed
   onto rows of their own and the "row" was four rows tall. Everything sits on
   row 1; only the note gets row 2. */
/* One more wrapper dissolved: the heading held the title AND the three media
   icons, so the icons were eating 90px out of the title's column. As separate
   grid items the title gets the whole column. */
.choir-portal .choir-piece-heading { display: contents; }

.choir-portal .choir-piece-heading h3,
.choir-portal .choir-piece-no,
.choir-portal .choir-piece .choir-media-strip,
.choir-portal .choir-piece-credits,
.choir-portal .choir-collection-badges,
.choir-portal .choir-piece .choir-actions,
.choir-portal .choir-piece > .choir-history { grid-row: 1; }
.choir-portal .choir-piece .choir-catalog-note { grid-row: 2; }

.choir-portal .choir-piece-heading h3 {
  grid-column: 2;
  /* temað setur h3 í smalum stórstøvum — rætt á einari plakatsíðu, ov hart
     í einum lista við hundraðtals røðum */
  font-family: inherit;
  font-size: .94rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.choir-portal .choir-piece .choir-media-strip { grid-column: 3; }
.choir-portal .choir-piece-credits {
  grid-column: 4;
  display: flex;
  flex-wrap: nowrap;        /* it is a flex row; without this the two credits stack */
  gap: .55rem;
  margin: 0;
  min-width: 0;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
}
.choir-portal .choir-piece-credits span {
  overflow: hidden;
  text-overflow: ellipsis;
}
/* "Tónaskald:" and "Útsetari:" cost about 70px each and left the names
   themselves as "Útsetari: Ra…". The column IS the label, so the words go and a
   middot separates the two names — composer first, arranger second. */
.choir-portal .choir-piece-credits strong { display: none; }
.choir-portal .choir-piece-credits span + span::before {
  content: "· ";
  opacity: .5;
}
.choir-portal .choir-collection-badges { grid-column: 5; margin: 0; }
.choir-portal .choir-collection-badges { min-width: 0; flex-wrap: nowrap; }
/* a long collection name wrapped to two lines and made the whole row taller */
.choir-portal .choir-collection-badges span {
  max-width: 11rem;
  font-size: .68rem;
  padding: .1rem .45rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choir-portal .choir-piece .choir-actions {
  grid-column: 7;
  flex-wrap: nowrap;
  gap: .3rem;
  margin: 0;
  justify-content: flex-end;
}
.choir-portal .choir-piece .choir-actions button,
.choir-portal .choir-piece .choir-actions a { padding: .22rem .55rem; font-size: .78rem; }
/* the concert picker is the widest thing in the row; cap it so it cannot eat
   the title, and let its own text ellipsis instead */
.choir-portal .choir-piece .choir-skra-set { display: inline-flex; gap: .3rem; align-items: center; }
.choir-portal .choir-piece .choir-skra-set select {
  max-width: 10rem;
  padding: .2rem 1.3rem .2rem .4rem;
  font-size: .76rem;
  text-overflow: ellipsis;
}

.choir-portal .choir-media-strip { gap: .2rem; }
.choir-portal .choir-media-icon { width: 1.5rem; height: 1.5rem; }

/* The catalogue note is the same sentence on every piece in a collection, so at
   full height it repeated a paragraph down the whole list. One line keeps the
   warning without letting it own the page. */
.choir-portal .choir-piece .choir-catalog-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: .1rem 0 0;
  border: 0;
  background: none;
  font-size: .72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.choir-portal .choir-piece > .choir-history {
  grid-column: 8;
  margin: 0;
  justify-self: end;
}
.choir-portal .choir-piece > .choir-history > summary {
  font-size: .74rem;
  white-space: nowrap;
}
/* opened, the history needs the full width rather than a narrow last column */
.choir-portal .choir-piece > .choir-history[open] {
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: stretch;
}
.choir-portal .choir-piece-main > div:first-child > p:not([class]) {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .78rem;
}


/* ---- hinar síðurnar: sama tilgongd ------------------------------------ */

/* Skráir og konsertir: kortið heldur seg, men hættir at vera ein plakat.
   1.4rem um alt og radius 18 gjørdi hvørja skrá til eina síðu fyri seg. */
.choir-portal .choir-event {
  margin: .35rem 0;
  padding: .6rem .75rem;
  border-radius: var(--tt-r);
}
.choir-portal .choir-event-heading { gap: .4rem; align-items: baseline; }
.choir-portal .choir-event-heading h3 { font-size: 1rem; margin: 0; }
.choir-portal .choir-event > p { margin: .15rem 0; font-size: .82rem; }

/* Lagalistin í eini skrá: ein linja um lagið, ikki eitt kort. */
.choir-portal .choir-setlist { margin: .35rem 0 0; padding-left: 1.15rem; }
.choir-portal .choir-setlist > li { margin: 0; }
.choir-portal .choir-setlist-row {
  gap: .45rem;
  padding: .16rem 0;
  font-size: .86rem;
}
.choir-portal .choir-setlist-row button { padding: .16rem .5rem; font-size: .78rem; }
.choir-portal .choir-setlist-link { font-size: .88rem; }

.choir-portal .choir-attendance { gap: .3rem; margin-top: .35rem; }
.choir-portal .choir-attendance button { padding: .22rem .6rem; font-size: .8rem; }

.choir-portal .choir-concert { margin: 0 0 .7rem; padding: 0 0 .6rem; }
.choir-portal .choir-concert-section { margin: .3rem 0; }
.choir-portal .choir-concert-pieces { margin: .25rem 0; }
.choir-portal .choir-concert-piece { padding: .14rem 0; font-size: .86rem; }
.choir-portal .choir-concert-when,
.choir-portal .choir-concert-with,
.choir-portal .choir-concert-note { font-size: .82rem; margin: .1rem 0; }

/* Boð er vísvitandi ikki rørt. Tað er ikki ein listi av kortum, men ein
   prát-flata við egnum stíli í messenger.css: .choir-thread er eitt rutunet við
   `height:100%`, og at leggja rúm afturat gjørdi hana hægri, ikki tættari.
   Hon fær sín egna umgang, við tí stílblaðnum fyri eygunum. */

/* Upptøkur: tríggjar í røð heldur enn tvær, tá plássið er til tað. */
.choir-portal .choir-recording-grid {
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  gap: .5rem;
}
.choir-portal .choir-recordings > li,
.choir-portal .choir-recording-grid > * { padding: .45rem .6rem; border-radius: var(--tt-r); }
.choir-portal .choir-recording-filters { gap: .35rem; }

/* Umsiting: kortini eru fold-út, so tey mugu ikki taka pláss lokað. */
.choir-portal .choir-manager-card { border-radius: var(--tt-r); }
.choir-portal .choir-manager-card > summary { padding: .45rem .6rem; font-size: .9rem; }
.choir-portal .choir-manager-form { padding: .6rem; }
.choir-portal .choir-form-grid { gap: .45rem; }

/* ---- røddir ------------------------------------------------------------ */
/* Ein strika um hvønn bólk, fylt ella tóm. Tveir støður, ikki tríggjar: tað
   sæst í einum eygnabragði, og tað er satt — antin er ein partur, ella ikki. */
.choir-portal .choir-piece-voices {
  grid-column: 6;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
}
.choir-portal .choir-voice-bar { display: flex; gap: 2px; }
.choir-portal .choir-voice {
  width: 7px;
  height: 12px;
  border-radius: 1px;
  background: var(--choir-line);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.choir-portal .choir-voice.is-on { background: #2f7d4f; box-shadow: none; }
.choir-portal .choir-piece-voices em {
  font-style: normal;
  font-size: .72rem;
  font-variant-numeric: tabular-nums;
  color: var(--choir-muted);
}
.choir-portal .choir-piece-voices.is-complete em { color: #2f7d4f; font-weight: 600; }

/* ---- stólpar á smalari skermum ---------------------------------------- */
/* --tt-cols stendur á .choir-portal, ikki á røðini: yvirskriftin og røðirnar eru
   tvær ymiskar grid, og standa tey ikki saman um somu breiddir, so rennur
   yvirskriftin av stað frá stólpanum. Fyrr stóð hon bert á røðini, og undir
   1280px lógu "Tónaskald" og "Savn" omaná hvørjum øðrum. Ein stólpi, sum fer,
   tekur yvirskriftina við sær. */
@media (max-width: 1279px) {
  .choir-portal {
    --tt-cols: 2.5rem minmax(10rem, 3fr) 6.4rem 0 8rem 7.2rem 16.5rem 6.5rem;
  }
  .choir-portal .choir-piece-credits,
  .choir-portal .choir-lib-head span:nth-child(3) { display: none; }
}
@media (max-width: 1079px) {
  .choir-portal {
    --tt-cols: 2.5rem minmax(9rem, 3fr) 6.4rem 0 0 7.2rem 15rem 6rem;
  }
  .choir-portal .choir-collection-badges,
  .choir-portal .choir-lib-head span:nth-child(4) { display: none; }
}

/* Undir 900px er ein tabell ikki longur ein tabell. Røðin brotnar upp í tvær
   linjur. .choir-piece-main var sett til `contents` omanfyri, og tá gjørdi eingin
   grid-template-columns á henni nakað — tí hon var ikki longur ein kassi. */
@media (max-width: 899px) {
  .choir-portal .choir-lib-head { display: none; }
  .choir-portal .choir-piece {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: .1rem .5rem;
    padding: .45rem .55rem;
  }
  .choir-portal .choir-piece-main { display: contents; }
  .choir-portal .choir-piece-main > div:first-child { display: contents; }
  .choir-portal .choir-piece-heading { display: contents; }
  .choir-portal .choir-piece-no { grid-column: 1; grid-row: 1; }
  .choir-portal .choir-piece-heading h3 { grid-column: 2; grid-row: 1; }
  .choir-portal .choir-piece .choir-media-strip { grid-column: 3; grid-row: 1; }
  .choir-portal .choir-piece-credits {
    grid-column: 2; grid-row: 2; display: block; white-space: normal;
  }
  .choir-portal .choir-collection-badges { grid-column: 2; grid-row: 3; display: flex; }
  .choir-portal .choir-piece-voices { grid-column: 2; grid-row: 4; }
  .choir-portal .choir-piece .choir-actions {
    grid-column: 1 / -1; grid-row: 5; justify-content: flex-start;
  }
  .choir-portal .choir-piece .choir-catalog-note { grid-column: 1 / -1; grid-row: 6; }
  .choir-portal .choir-piece > .choir-history { grid-column: 1 / -1; grid-row: 7; }
}

/* ---- navnið ovast í stólpanum ----------------------------------------- */
/* Mockupið hevur felagsnavnið ovast í svarta stólpanum og onga stóra
   yvirskrift á síðuni. Tað sparir eina heila skermhædd, og navnið stendur
   einaferð í staðin fyri trímæt. */
.choir-portal-page .wp-block-post-title,
.choir-portal-page .entry-title,
.choir-portal-page .page-title,
.choir-portal-page h1.wp-block-heading:first-child { display: none; }

/* Klassin á <body> kemr av shortcode-inum. Verður portalurin settur inn á ein
   annan hátt — við einum blokki ella beinleiðis í eini template — er hann ikki
   har. :has() spyr eftir portalinum sjálvum og er tí óheft av tí. */
body:has(.choir-portal) .wp-block-post-title,
body:has(.choir-portal) .entry-title,
body:has(.choir-portal) .page-title { display: none; }

.choir-portal .choir-rail-brand { display: none; }

@media (min-width: 900px) {
  .choir-portal .choir-rail-brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: -8px 0 4px;
    padding: .45rem .7rem .5rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    background: var(--tt-side2);
  }
  .choir-portal .choir-rail-mark {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 4px;
    /* Ikki --choir-lime: hann er reyður á nsm.fo, men bleikur lime á teimum
       óbundnu bygningunum, og hvítur tekstur hvarv tá. Ein dempaður reitur
       les í øllum trimum. Hevur síðan eitt site icon, verður tað brúkt í
       staðin, og tá kemur liturin av sær sjálvum. */
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .04em;
    object-fit: contain;
  }
  .choir-portal .choir-rail-name {
    min-width: 0;
    font-size: .72rem;
    line-height: 1.25;
    color: var(--tt-side-ink);
  }
  /* Stólpin ber navnið nú, so brúna kortið sleppur at endurtaka tað. */
  .choir-portal .choir-hero .choir-hero-brand { display: none; }
}

/* ---- stólpin: bólkar, tøl og mál ------------------------------------- */
/* Mockupið skilir flipar sundur í trý: tónleikur, fólk, umsiting. Bólkarnir
   verða settir við `order`, so PHP heldur sína raðfylgju og sínar
   rættindiskanningar — ein knappur, sum ein brúkari ikki hevur, er einki har,
   og bólkurin lyklast tá saman av sær sjálvum. */
.choir-portal .choir-rail-group { display: none; }

@media (min-width: 900px) {
  .choir-portal > .choir-tabs { display: flex; flex-direction: column; }
  .choir-portal .choir-rail-group {
    display: block;
    margin: .55rem 0 .1rem;
    padding: 0 .78rem;
    color: rgba(255, 255, 255, .32);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
  }
  .choir-portal .choir-rail-brand   { order: 0; }
  .choir-portal .choir-rail-group[data-group="music"]  { order: 1; }
  .choir-portal > .choir-tabs button[data-choir-tab="programmes"] { order: 3; }
  .choir-portal > .choir-tabs button[data-choir-tab="library"]    { order: 2; }
  .choir-portal > .choir-tabs button[data-choir-tab="recordings"] { order: 4; }
  .choir-portal > .choir-tabs button[data-choir-tab="concerts"]   { order: 5; }
  .choir-portal .choir-rail-group[data-group="people"] { order: 6; }
  .choir-portal > .choir-tabs button[data-choir-tab="messages"]    { order: 7; }
  .choir-portal > .choir-tabs button[data-choir-tab="instruments"] { order: 8; }
  .choir-portal > .choir-tabs button[data-choir-tab="profile"]     { order: 9; }
  .choir-portal .choir-rail-group[data-group="admin"] { order: 10; }
  .choir-portal > .choir-tabs button[data-choir-tab="streaming"]  { order: 11; }
  .choir-portal > .choir-tabs button[data-choir-tab="books"]      { order: 12; }
  .choir-portal > .choir-tabs button[data-choir-tab="management"] { order: 13; }
  .choir-portal > .choir-tabs .choir-language-switcher { order: 20; }

  /* Tølini standa til høgru og eru bert tøl — ikki reyðar pillur. Ein pilla
     um hvønn flipa gjørdi tey øll til ávaring. */
  .choir-portal > .choir-tabs .choir-tab-count {
    margin-left: auto;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, .45);
    font-size: .7rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
  }
  .choir-portal > .choir-tabs button.is-active .choir-tab-count { color: rgba(255, 255, 255, .8); }

  /* Málskiftarin niðast. Ringurin og pillurnar hoyra til eina linju, sum
     hann ikki er longur — í stólpanum er hann ein stapul, og tá skal hann
     síggja út sum flipurnar rétt omanfyri, ikki sum ein pilluhópur. */
  .choir-portal > .choir-tabs .choir-language-switcher {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 1px;
    margin: .5rem 0 .15rem;
    padding: .3rem .5rem 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, .09);
    border-radius: 0;
    background: none;
    font-size: .72rem;
  }
  .choir-portal > .choir-tabs .choir-language-switcher a {
    gap: .45rem;
    justify-content: flex-start;
    border-radius: 4px;
    padding: .26rem .28rem;
    color: var(--tt-side-ink);
    text-decoration: none;
  }
  .choir-portal > .choir-tabs .choir-language-switcher a span { font-size: .85rem; }
  .choir-portal > .choir-tabs .choir-language-switcher a:hover,
  .choir-portal > .choir-tabs .choir-language-switcher a:focus-visible {
    background: rgba(255, 255, 255, .06);
  }
  .choir-portal > .choir-tabs .choir-language-switcher a.is-active {
    background: rgba(255, 255, 255, .12);
    color: #ffffff;
    font-weight: 600;
  }
}

/* ---- bjálkin omanfyri nótasavnið -------------------------------------- */
.choir-portal .choir-lib-bar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .45rem .1rem .5rem;
}
.choir-portal .choir-lib-title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
}
.choir-portal .choir-lib-title span { color: var(--choir-muted); font-weight: 400; }
.choir-portal .choir-lib-bar-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .45rem;
  /* uttan flex var kassin sjálvur innihaldsbreiður, og tá kundi leititeigurin
     inni í honum ikki vaksa, hvat sum helst flex hann fekk */
  flex: 1 1 auto;
  margin-left: auto;
  min-width: 0;
}
/* Merkiseturin yvir teigunum er óneyðugur, tá ið teir standa í bjálkanum og
   hava eitt placeholder — hann tók eina linju um hvørja. */
.choir-portal .choir-lib-bar-tools .choir-search > span,
.choir-portal .choir-lib-bar-tools .choir-collection-filter > span { display: none; }
.choir-portal .choir-lib-bar-tools .choir-search {
  flex: 0 1 34rem;
  min-width: 11rem;
}
.choir-portal .choir-lib-bar-tools .choir-search input { width: 100%; }
.choir-portal .choir-lib-bar-tools input,
.choir-portal .choir-lib-bar-tools select { padding: .3rem .55rem; font-size: .8rem; }

/* Søvnini sum pillur. Tær skrulla til viðar heldur enn at brotna í fleiri
   linjur — nótasavnið hjá NSM hevur nógv søvn, og tríggjar linjur av pillum
   eru tað sama sum tað, ið vit júst tóku burtur. */
.choir-portal .choir-lib-chips {
  display: flex;
  gap: .3rem;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 0 0 .45rem;
}
.choir-portal .choir-lib-chips button {
  flex: 0 0 auto;
  border: 1px solid var(--choir-line);
  border-radius: 999px;
  padding: .22rem .6rem;
  background: var(--choir-surface);
  color: var(--choir-ink);
  font-size: .76rem;
  cursor: pointer;
  white-space: nowrap;
}
.choir-portal .choir-lib-chips button em {
  font-style: normal;
  color: var(--choir-muted);
  font-variant-numeric: tabular-nums;
}
.choir-portal .choir-lib-chips button.is-active {
  border-color: transparent;
  background: var(--choir-lime-wash);
  color: var(--choir-ink);
  font-weight: 600;
}
.choir-portal .choir-lib-chips button.is-active em { color: inherit; }

/* Statuslinjan var ein sjálvstøðug linja; nú stendur hon við endan á
   pilluvrøðini, sum í mockupinum. */
.choir-portal .choir-library-status {
  margin: 0 0 .45rem;
  text-align: right;
  color: var(--choir-muted);
  font-size: .74rem;
}
.choir-portal .choir-library-filters { display: none; }

/* ---- listi og teigur síða um síðu ------------------------------------- */
.choir-portal .choir-lib-layout { display: block; }
.choir-portal .choir-lib-main { min-width: 0; }

@media (min-width: 1280px) {
  .choir-portal .choir-lib-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: .75rem;
    align-items: start;
  }
}
/* Undir 1280px er ikki pláss fyri tveimum teigum. Røðin hevur sínar egnu
   knappar, so einki hvarv — teigurin er ein umframt leið, ikki tann einasta. */
@media (max-width: 1279px) {
}

.choir-portal .choir-detail-empty { color: var(--choir-muted); font-size: .8rem; }
.choir-portal .choir-detail-sub { margin: 0 0 .6rem; color: var(--choir-muted); font-size: .8rem; }
.choir-portal .choir-detail-facts {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: .18rem .5rem;
  margin: 0 0 .7rem;
  font-size: .8rem;
}
.choir-portal .choir-detail-facts dt { color: var(--choir-muted); }
.choir-portal .choir-detail-facts dd { margin: 0; }
.choir-portal .choir-detail-voice {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .09rem 0;
  font-size: .8rem;
}
.choir-portal .choir-detail-voice i {
  flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #2f7d4f;
}
.choir-portal .choir-detail-voice em {
  margin-left: auto; font-style: normal; font-size: .74rem;
  color: var(--choir-muted); font-variant-numeric: tabular-nums;
}
.choir-portal .choir-detail-missing { margin: .4rem 0 0; font-size: .74rem; color: var(--choir-muted); }
.choir-portal .choir-detail-actions { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.choir-portal .choir-detail-actions button:empty { display: none; }

.choir-portal .choir-piece { cursor: pointer; }
.choir-portal .choir-piece.is-selected { background: var(--choir-lime-wash); }
.choir-portal .choir-piece.is-selected h3 { color: var(--choir-lime); }

/* ---- fimm dálkar á breiðum skermi ------------------------------------- */
/* Sami stigmark sum teigurin (1280px): har teigurin ber knapparnar, tørvar
   røðin teir ikki. Undir 1280px er einki av hesum galdandi. */
@media (min-width: 1280px) {
  /* Listin hevur alla breiddina, nú lýsikassin hevur tikið teigin av. */
  .choir-portal {
    --tt-cols:
      2.6rem                  /* nr. */
      minmax(12rem, 3fr)      /* heiti */
      0                       /* miðlamerki — í lýsikassanum */
      minmax(8rem, 1.5fr)     /* tónaskald */
      12rem                   /* savn */
      8rem                    /* røddir */
      0                       /* knappar — í lýsikassanum */
      0;                      /* spælisøga — í lýsikassanum */
  }
  .choir-portal .choir-piece .choir-media-strip,
  .choir-portal .choir-piece .choir-actions,
  .choir-portal .choir-piece > .choir-history { display: none; }
}

/* ---- spælisøga í teiginum --------------------------------------------- */
.choir-portal .choir-detail-history { margin: .55rem 0 0; }
.choir-portal .choir-detail-history div {
  display: flex;
  gap: .5rem;
  padding: .09rem 0;
  font-size: .78rem;
}
.choir-portal .choir-detail-history time { color: var(--choir-muted); flex: 0 0 6.2rem; }
.choir-portal .choir-detail-history span { min-width: 0; }
.choir-portal .choir-detail-empty-history { margin: .4rem 0 0; font-size: .76rem; color: var(--choir-muted); }

/* ---- pláss til báðar teigar ------------------------------------------- */
/* Teigurin er smalari, til skermurin er breiður nóg. Áðrenn hetta klipti
   .choir-grid (overflow:hidden) Røddir-dálkin av millum 1280 og 1365px. */
@media (min-width: 1280px) and (max-width: 1439px) {
}

/* Valmyndin við søvnum gjørdi tað sama sum pillurnar. Hon stendur eftir í
   DOM-inum — pillurnar stýra henni — men skal ikki síggjast tvífalt. */
@media (min-width: 900px) {
  .choir-portal .choir-lib-bar-tools .choir-collection-filter { display: none; }
}

/* Temað gjørdi h2 til stórar stavir. Í bjálkanum skal hon vera ein linja
   tekstur, ikki ein plakat. */
.choir-portal .choir-lib-title {
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.3;
}

/* Portalurin liggur tætt upp at toppinum, tá ið yvirskriftin er farin. */
.choir-portal { margin-top: .35rem; }

/* ---- teigurin skrullar ------------------------------------------------ */
/* Eitt lag við 27 røddum var longri enn skermurin, og tá var Nótar-knappurin
   ikki at røkka — teigurin er sticky, so síðan skrullar ikki hann av stað.
   Hann fær tí eina hægstu hædd og skrullar sjálvur. */
@media (min-width: 1280px) {
  /* Knapparnir standa fastir í botninum á teiginum, so tey eru altíð eitt
     klikk burtur, hvussu long røddarøðin so er. */
  .choir-portal .choir-detail-actions {
    position: sticky;
    bottom: 0;
    margin-top: .7rem;
    padding: .5rem 0 .1rem;
    background: var(--choir-surface);
    box-shadow: 0 -8px 10px -8px rgba(0, 0, 0, .16);
  }
}

/* ---- beinir kantar allastaðni ---------------------------------------- */
/* Pillurnar vóru tað einasta, ið var eftir av gomlu útsjóndini, og tá ið
   helvtin av síðuni er bein og helvtin kringlað, sæst tað sum ósemja. */
.choir-portal .choir-lib-chips button,
.choir-portal .choir-collection-badges span,
.choir-portal .choir-tab-count,
.choir-portal .choir-badge,
.choir-portal .choir-user-role,
.choir-portal .choir-pill,
.choir-portal .choir-chip,
.choir-portal .choir-status,
.choir-portal .choir-tag,
.choir-portal .choir-count,
.choir-portal .choir-search input,
.choir-portal .choir-collection-filter select,
.choir-portal .choir-library-more,
.choir-portal .choir-event-edit,
.choir-portal .choir-event-recordings,
.choir-portal .choir-setlist-drop,
.choir-portal .choir-live-piece,
.choir-portal .choir-media-badge,
.choir-portal .choir-notify-enable,
.choir-portal .choir-manager-submit,
.choir-portal .choir-health-more,
.choir-portal .choir-offline-actions button { border-radius: var(--tt-r); }

/* Rund form hoyra til tey, ið veruliga eru rund: myndir og punkt. */
.choir-portal .choir-avatar,
.choir-portal .choir-detail-voice i,
.choir-portal .choir-beat-light { border-radius: 50%; }

/* ---- lagalistin í einari skrá ----------------------------------------- */
/* Heitið tekur tað, ið er eftir, so valmyndin og knappurin standa við sama
   enda í hvørjari røð. Fyrr fylgdu tey heitinum og stóðu tí sagartent. */
.choir-portal .choir-setlist-row {
  display: flex;
  align-items: center;
}
.choir-portal .choir-setlist-link,
.choir-portal .choir-setlist-row > span:not([class]) {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  text-decoration: none;
}
.choir-portal .choir-setlist-link:hover { text-decoration: underline; }
.choir-portal .choir-setlist-row .choir-skra-set { flex: 0 0 auto; margin-left: auto; }
.choir-portal .choir-setlist-row .choir-skra-set select { width: 12.5rem; }

/* ---- Boð fær sama skinn sum alt annað --------------------------------- */
/* Hetta var einasta økið, ið stóð eftir í gomlu útsjóndini: ein yvirskrift
   upp í 2.5rem og 18px radius, meðan alt annað var .95rem og 6px.
   Válararnir eru settir høgt nóg til at vinna á messenger.css, hvat sum
   helst raðfylgjan á stílfílunum er. */
.choir-portal [data-choir-panel="messages"] .choir-messenger-heading {
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  padding: .5rem .75rem;
  border-radius: var(--tt-r);
}
.choir-portal [data-choir-panel="messages"] .choir-messenger-heading h2 {
  margin: 0;
  font-size: 1rem;
}
.choir-portal [data-choir-panel="messages"] .choir-messenger-heading p {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
}
.choir-portal [data-choir-panel="messages"] .choir-messenger-heading > button {
  flex: 0 0 auto;
  margin-left: auto;
  border-radius: var(--tt-r);
  padding: .3rem .6rem;
  font-size: .76rem;
}

/* ---- útgávan niðast í stólpanum --------------------------------------- */
.choir-portal .choir-rail-version { display: none; }

@media (min-width: 900px) {
  .choir-portal > .choir-tabs .choir-rail-version {
    display: block;   /* uttan hetta stóð `display:none` omanfyri óbroytt */
    order: 21;
    margin: .15rem 0 0;
    padding: .3rem .78rem .35rem;
    color: rgba(255, 255, 255, .28);
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
  }
}

/* ---- lýsikassin ------------------------------------------------------- */
.choir-piece-dialog {
  box-sizing: border-box;
  width: min(34rem, 92vw);
  max-height: min(80vh, 46rem);
  overflow-y: auto;
  border: 1px solid var(--choir-line);
  border-radius: var(--tt-r);
  padding: 1rem 1.15rem;
  background: var(--choir-surface);
  color: var(--choir-ink);
  font-size: 13.5px;
}
.choir-piece-dialog::backdrop { background: rgba(23, 18, 16, .45); }
.choir-dialog-close {
  float: right;
  margin: -.35rem -.4rem 0 .5rem;
  border: 0;
  border-radius: var(--tt-r);
  padding: .1rem .4rem;
  background: none;
  color: var(--choir-muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.choir-dialog-close:hover { background: var(--choir-tint); }
.choir-piece-dialog h3 { margin: 0 0 .1rem; font-size: 1.05rem; line-height: 1.25; }
.choir-piece-dialog .choir-detail-sub { margin: 0 0 .7rem; color: var(--choir-muted); font-size: .82rem; }
.choir-piece-dialog .choir-detail-facts {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .2rem .6rem;
  margin: 0 0 .8rem;
  font-size: .84rem;
}
.choir-piece-dialog .choir-detail-facts dt { color: var(--choir-muted); }
.choir-piece-dialog .choir-detail-facts dd { margin: 0; }
.choir-piece-dialog h4 {
  margin: 0 0 .3rem;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--choir-muted);
}
.choir-piece-dialog .choir-detail-voices { columns: 2; column-gap: 1.2rem; margin-bottom: .8rem; }
.choir-piece-dialog .choir-detail-voice {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .1rem 0;
  font-size: .82rem;
  break-inside: avoid;
}
.choir-piece-dialog .choir-detail-voice i {
  flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #2f7d4f;
}
.choir-piece-dialog .choir-detail-voice em {
  margin-left: auto; font-style: normal; font-size: .76rem;
  color: var(--choir-muted); font-variant-numeric: tabular-nums;
}
.choir-piece-dialog .choir-detail-history div { display: flex; gap: .5rem; padding: .1rem 0; font-size: .8rem; }
.choir-piece-dialog .choir-detail-history time { flex: 0 0 6.5rem; color: var(--choir-muted); }
.choir-piece-dialog .choir-detail-actions {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .9rem; padding-top: .7rem;
  border-top: 1px solid var(--choir-line);
}

/* Listin fær alla breiddina aftur, tá ið teigurin er farin. */
.choir-portal .choir-lib-layout { display: block; }

/* ---- hvør flipi byrjar í somu hædd sum stólpin ------------------------ */
/* Fyrsta elementið í hvørjum flipa hevði sítt egna loft — ein hædd í
   Sending, ein onnur í Skráum — so innihaldið sat lægri enn stólpin, og
   ymiskt frá flipa til flipa. */
.choir-portal > [data-choir-panel] > :first-child,
.choir-portal > [data-choir-panel] > :first-child > :first-child { margin-top: 0; }

.choir-portal > [data-choir-panel] > h2:first-child,
.choir-portal > [data-choir-panel] > :first-child > h2:first-child {
  margin: 0 0 .45rem;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* ---- Konsertir -------------------------------------------------------- */
/* Myndin flýtur ikki og stendur ikki í einum dálki — hon er ein breið mynd
   millum spælaralistan og tónleikin. Raðfylgjan kemur av `order`, tí í PHP
   stendur hon fremst. Sama `order` á sektiónum og listum heldur teirra
   innbyrðis raðfylgju, tí grid brúkar keldu-raðfylgju, tá ið tølini eru eins. */
.choir-portal .choir-concert {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.choir-portal .choir-concert > * { order: 5; min-width: 0; }
.choir-portal .choir-concert > h3 { order: 1; }
.choir-portal .choir-concert-when,
.choir-portal .choir-concert-with { order: 2; }
.choir-portal .choir-concert-players { order: 3; }
.choir-portal .choir-concert-photo {
  order: 4;
  float: none;
  width: 100%;
  max-width: none;
  margin: .55rem 0 .7rem;
}
.choir-portal .choir-concert-photo img {
  display: block;
  width: 100%;
  height: auto;
  /* Einki `max-height` við `object-fit: cover` — tað skar orkestrið av,
     tí tey standa niðast í myndini. Ein tíðindamynd verður ikki klipt;
     hon heldur sínum lutfalli og tekur ta hædd, hon hevur. */
  border-radius: var(--tt-r);
}
.choir-portal .choir-concert-photo-open { border-radius: var(--tt-r); }

/* ---- Konsertir: listin er ein tabellur -------------------------------- */
/* Ein grid um allan listan, ikki ein um hvørja røð. Tá standa allar røðir í
   somu dálkum — líka sum nótasavnið — og hárlinjan gongur tvørtur um.
   `display: contents` loysir <li> upp, so hylkini verða børn av listanum. */
.choir-portal .choir-concert-pieces {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 15rem) 16.5rem;
  gap: 0 .7rem;
  margin: .25rem 0 .6rem;
  padding-left: 0;
  list-style: none;
}
.choir-portal .choir-concert-pieces > li { display: contents; }

.choir-portal .choir-concert-pieces > li > * {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 1.9rem;
  padding: .1rem 0;
  border-bottom: 1px solid var(--choir-line);
}
.choir-portal .choir-concert-piece,
.choir-portal .choir-concert-pieces > li > span:not([class]) {
  grid-column: 1;
  border: 0;
  border-bottom: 1px solid var(--choir-line);
  padding: .1rem 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.choir-portal .choir-concert-pieces > li > span:not([class]) { cursor: default; }
.choir-portal .choir-concert-piece > * ,
.choir-portal .choir-concert-piece { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Ein løtt strika sigur, at lagið er at opna. Hon stendur altíð — annars var
   einki at síggja fyrr enn músin var yvir henni, og á einum iPad aldri. */
.choir-portal .choir-concert-piece {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, .3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.choir-portal .choir-concert-piece:hover,
.choir-portal .choir-concert-piece:focus-visible {
  text-decoration-color: currentColor;
}

.choir-portal .choir-concert-meta {
  grid-column: 2;
  justify-content: flex-end;
  /* Nøvnini á solistunum kunnu vera long. Tey brótu ikki um, og tí
     hvarv byrjanin av tekstinum út um vinstra kantin. */
  white-space: normal;
  overflow-wrap: anywhere;
  align-items: center;
  padding: .25rem 0;
  line-height: 1.35;
  text-align: right;
  color: var(--choir-muted);
  font-size: .78rem;
}
.choir-portal .choir-concert-meta em { font-style: italic; }
.choir-portal .choir-concert-gap { grid-column: 3; }
.choir-portal .choir-concert-pieces .choir-skra-set {
  grid-column: 3;
  /* portal.css hevur flex-wrap:wrap; í einum føstum dálki fór knappurin tá
     niður á næstu linju undir valmyndina */
  flex-wrap: nowrap;
  gap: .3rem;
  margin-left: 0;
}
.choir-portal .choir-concert-pieces .choir-skra-set select {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.choir-portal .choir-concert-pieces .choir-skra-set button { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1099px) {
  .choir-portal .choir-concert-pieces { grid-template-columns: minmax(0, 1fr) 16.5rem; }
  .choir-portal .choir-concert-meta {
    grid-column: 1;
    justify-content: flex-start;
    text-align: left;
    border-bottom: 0;
    min-height: 0;
    padding: 0 0 .2rem;
  }
  .choir-portal .choir-concert-piece,
  .choir-portal .choir-concert-pieces > li > span:not([class]) { border-bottom: 0; }
  .choir-portal .choir-concert-gap,
  .choir-portal .choir-concert-pieces .choir-skra-set { grid-column: 2; grid-row: span 2; }
}

/* ---- viðmerkingin: bert í lýsikassanum -------------------------------- */
/* Hon stóð sum onnur linja undir hvørjari røð — ofta sami setningur um alt
   savnið — og tók helvtina av listanum. Klikk á røðina vísir hana. */
.choir-portal .choir-piece .choir-catalog-note { display: none; }

/* ---- merkið er vegurin heim aftur ------------------------------------- */
.choir-portal .choir-rail-brand { color: inherit; text-decoration: none; }
.choir-portal .choir-rail-brand:hover { background: rgba(255, 255, 255, .05); }
.choir-portal .choir-rail-brand:hover .choir-rail-name { color: #ffffff; }

/* ---- síðuhøvdið meðan Samljóð er frammi ------------------------------- */
/* Samljóð er ein portalur, ikki ein síða at blaða um. Høvdið, valmyndin og
   loftið omanfyri tóku eina tríðing av skerminum. Merkið í stólpanum er
   vegurin út. Skinnið kann takast av, og tá er alt sum áður. */
body:has(.choir-portal) > header,
body:has(.choir-portal) [role="banner"],
body:has(.choir-portal) .site-header,
body:has(.choir-portal) .wp-site-blocks > header { display: none; }

.choir-portal { margin-top: .25rem; }

/* Raðfylgjan er ikki bert fyri stólpan — á smalum skermi er hetta ein
   vatnrøtt rað, og nótasavnið skal standa fremst har eisini. */
.choir-portal > .choir-tabs { display: flex; }
.choir-portal > .choir-tabs button[data-choir-tab="library"]     { order: 2; }
.choir-portal > .choir-tabs button[data-choir-tab="programmes"]  { order: 3; }
.choir-portal > .choir-tabs button[data-choir-tab="recordings"]  { order: 4; }
.choir-portal > .choir-tabs button[data-choir-tab="concerts"]    { order: 5; }
.choir-portal > .choir-tabs button[data-choir-tab="messages"]    { order: 7; }
.choir-portal > .choir-tabs button[data-choir-tab="instruments"] { order: 8; }
.choir-portal > .choir-tabs button[data-choir-tab="profile"]     { order: 9; }
.choir-portal > .choir-tabs button[data-choir-tab="streaming"]   { order: 11; }
.choir-portal > .choir-tabs button[data-choir-tab="books"]       { order: 12; }
.choir-portal > .choir-tabs button[data-choir-tab="management"]  { order: 13; }

/* ---- klokkan ---------------------------------------------------------- */
.choir-portal .choir-bell { display: none; }

@media (min-width: 900px) {
  .choir-portal > .choir-tabs .choir-bell {
    order: 0;
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    padding: .34rem .75rem;
    background: none;
    color: var(--tt-side-ink);
    font: inherit;
    font-size: .78rem;
    text-align: left;
    cursor: pointer;
  }
  .choir-portal > .choir-tabs .choir-bell:hover { background: rgba(255, 255, 255, .06); color: #fff; }
  .choir-portal .choir-bell-icon svg { width: 15px; height: 15px; display: block; }
  .choir-portal .choir-bell-count {
    margin-left: auto;
    min-width: 1.15rem;
    padding: 0 .3rem;
    border-radius: var(--tt-r);
    background: var(--choir-lime);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
  .choir-portal .choir-bell-count[hidden] { display: none; }
}

.choir-bell-dialog {
  box-sizing: border-box;
  width: min(28rem, 92vw);
  max-height: min(70vh, 34rem);
  overflow-y: auto;
  border: 1px solid var(--choir-line);
  border-radius: var(--tt-r);
  padding: .9rem 1rem;
  background: var(--choir-surface);
  color: var(--choir-ink);
  font-size: 13.5px;
}
.choir-bell-dialog::backdrop { background: rgba(23, 18, 16, .45); }
.choir-bell-dialog h3 { margin: 0 0 .6rem; font-size: 1rem; }
.choir-bell-dialog .choir-bell-row {
  display: block;
  width: 100%;
  margin: 0 0 2px;
  border: 0;
  border-radius: var(--tt-r);
  padding: .4rem .5rem;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.choir-bell-dialog .choir-bell-row:hover { background: var(--choir-tint); }
.choir-bell-dialog .choir-bell-row strong { display: block; font-size: .88rem; }
.choir-bell-dialog .choir-bell-row span { color: var(--choir-muted); font-size: .78rem; }
.choir-bell-empty { margin: 0; color: var(--choir-muted); font-size: .84rem; }

/* ---- [hidden] vinnur ---------------------------------------------------- */
/* `[hidden]` fær `display:none` úr UA-stílinum, og hann hevur lægstu vekt.
   Skrivar skinnið `display` á ein klassa — t.d. `.choir-concert { display: grid }`
   — so hvørvur `[hidden]`, og alt, ið JS fjalir, verður standandi. Tað var
   orsøkin til, at pillurnar í Konsertum ikki síladu. */
.choir-portal [hidden] { display: none !important; }
.choir-portal .choir-setlist-added,
.choir-portal .choir-manager-piece-log { font-size: .7rem; margin: 0 0 .18rem; }