/* Directory and profile pages. Rendered by the profiles service, styled with
   the same tokens as everything else. */

.dir__filters {
  margin-top: var(--s-6);
  display: grid;
  gap: var(--s-4);
  align-items: end;
  padding-bottom: var(--s-5);
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 52rem) {
  .dir__filters { grid-template-columns: 1fr 14rem 12rem auto; }
}
select.field__input { border-bottom: 2px solid var(--rule-strong); padding-block: var(--s-2); }

.dir__count { margin-top: var(--s-4); font-size: 0.84rem; color: var(--ink-faint);
              font-variant-numeric: tabular-nums; }

.dir__list { margin-top: var(--s-3); padding: 0; list-style: none;
             border-top: 2px solid var(--ink); }
.dir__row { border-bottom: var(--rule-w) solid var(--rule); }
.dir__link { display: block; padding-block: var(--s-4); text-decoration: none; color: inherit;
             transition: background var(--t-fast) var(--ease); }
.dir__link:hover { background: var(--surface-sunk); }
.dir__name { font-weight: var(--w-strong); font-size: 1.04rem; }
.dir__link:hover .dir__name { text-decoration: underline;
  text-decoration-color: var(--accent); text-underline-offset: 3px; }
.dir__meta { margin-top: 0.15rem; font-size: 0.82rem; color: var(--ink-faint); }
.dir__desc { margin-top: var(--s-2); font-size: 0.94rem; color: var(--ink-secondary);
             max-width: 60ch; line-height: 1.55; }
.dir__certs { margin-top: var(--s-2); font-size: 0.8rem; color: var(--ink-muted); }
.dir__empty { padding-block: var(--s-7); color: var(--ink-muted); }
.dir__add { margin-top: var(--s-6); }
a.btn { text-decoration: none; }

/* --- profile -------------------------------------------------------------- */

.profile { padding-block: var(--s-8) var(--s-9); max-width: 52rem; }
.profile__meta { margin-top: var(--s-4); font-size: 0.86rem; color: var(--ink-faint); }

/* The honesty notice. It is the single most important element on the page:
   without it every self-declared field reads as something Rekaro stands behind. */
.profile__flag {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: var(--rule-w) solid var(--mark);
  border-radius: var(--r-sm);
  background: var(--surface-sunk);
}
.profile__flag-title { font-weight: var(--w-strong); font-size: 0.92rem; }
.profile__flag-body { margin-top: var(--s-2); font-size: 0.9rem; color: var(--ink-secondary);
                      max-width: 60ch; line-height: 1.6; }

.profile__desc { margin-top: var(--s-5); font-size: 1.06rem; line-height: 1.7;
                 color: var(--ink-secondary); max-width: 44rem; }

.profile__grid { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
@media (min-width: 44rem) { .profile__grid { grid-template-columns: 1fr 1fr; } }
.profile__grid > div { padding-top: var(--s-3); border-top: var(--rule-w) solid var(--rule); }
.profile__label { font-size: 0.74rem; font-weight: var(--w-strong); letter-spacing: 0.02em;
                  color: var(--ink-faint); margin-bottom: var(--s-2); }
.profile__list { list-style: none; padding: 0; font-size: 0.94rem; color: var(--ink-secondary); }
.profile__list li { margin-top: var(--s-1); }
.profile__none { color: var(--ink-faint); }
.profile__claim { margin-top: var(--s-6); font-size: 0.92rem; color: var(--ink-muted); }

/* --- registration --------------------------------------------------------- */

.reg { padding-block: var(--s-8) var(--s-9); max-width: 46rem; }
.reg__form { margin-top: var(--s-6); display: grid; gap: var(--s-5); }
.reg__row { display: grid; gap: var(--s-4); }
@media (min-width: 40rem) { .reg__row { grid-template-columns: 1fr 1fr; } }
.reg__help { margin-top: var(--s-1); font-size: 0.8rem; color: var(--ink-faint); }
.reg__err { margin-top: var(--s-1); font-size: 0.82rem; color: var(--error); }
.reg__err:empty { display: none; }
textarea.field__input { min-height: 7rem; resize: vertical; line-height: 1.6;
                        border: 0; border-bottom: 2px solid var(--rule-strong); }
.reg__checks { display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.reg__check { display: flex; gap: var(--s-2); align-items: baseline; font-size: 0.92rem;
              color: var(--ink-secondary); }
.reg__check input { accent-color: var(--accent); }
.reg__status { font-size: 0.94rem; padding-left: var(--s-4); border-left: 2px solid var(--accent); }
.reg__status:empty { display: none; }
.reg__status[data-tone='error'] { border-left-color: var(--error); color: var(--error); }

/* --- filters, people and reviews ------------------------------------------ */

/* Six controls, not three. They wrap into a grid rather than a row: five selects
   side by side is a horizontal scrollbar on anything narrower than a laptop. */
.dir__filters {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
}
@media (min-width: 34rem) { .dir__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .dir__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.dir__clear { align-self: center; font-size: 0.88rem; color: var(--ink-muted); }
.dir__clear:hover { color: var(--accent); }

.profile__h2 {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 2px solid var(--ink);
  font-size: 0.78rem;
  font-weight: var(--w-strong);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.person__list { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .person__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.person { border-top: var(--rule-w) solid var(--rule); padding-top: var(--s-3); }
/* The role first and in the mark colour, because a buyer writing a complaint
   needs to know before they start whether they are writing to the supplier's
   own salesperson or to ours. */
.person__role { font-size: 0.7rem; font-weight: var(--w-strong); letter-spacing: 0.08em;
                text-transform: uppercase; color: var(--mark); }
.person__name { margin-top: var(--s-2); font-weight: var(--w-strong); font-size: 1.02rem; }
.person__title { color: var(--ink-secondary); font-size: 0.92rem; }
.person p { margin-top: var(--s-1); font-size: 0.92rem; }
.person__meta { color: var(--ink-muted); font-size: 0.86rem; }

/* Per dimension, never one blended star. The count under each is what lets a
   reader weigh a 4.8 from three people against a 4.2 from ninety. */
.dims { margin-top: var(--s-4); display: grid; gap: var(--s-5);
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.dim { border-top: var(--rule-w) solid var(--rule); padding-top: var(--s-3); }
.dim__label { font-size: 0.78rem; color: var(--ink-muted); }
.dim__value { margin-top: var(--s-1); font-family: var(--f-display); font-size: 1.7rem;
              line-height: 1; font-variant-numeric: tabular-nums; }
.dim__of { font-family: var(--f-text); font-size: 0.8rem; color: var(--ink-faint); }
.dim__count { margin-top: var(--s-1); font-size: 0.78rem; color: var(--ink-faint); }

.profile__basis { margin-top: var(--s-4); font-size: 0.86rem; color: var(--ink-muted);
                  padding-left: var(--s-4); border-left: 2px solid var(--mark); max-width: 42rem; }

.review__list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-5); }
.review { border-top: var(--rule-w) solid var(--rule); padding-top: var(--s-3); max-width: 46rem; }
.review__id { font-size: 0.7rem; font-weight: var(--w-strong); letter-spacing: 0.06em;
              color: var(--ink-faint); }
.review__text { margin-top: var(--s-2); line-height: 1.6; }
.review__meta { margin-top: var(--s-2); font-size: 0.82rem; color: var(--ink-muted); }
.review__reply { margin-top: var(--s-3); padding-left: var(--s-4);
                 border-left: 2px solid var(--accent); }
.review__reply-who { font-size: 0.7rem; font-weight: var(--w-strong); letter-spacing: 0.06em;
                     text-transform: uppercase; color: var(--accent); }
.review__reply p { margin-top: var(--s-1); font-size: 0.92rem; color: var(--ink-secondary); }

.profile__reply-right { margin-top: var(--s-5); font-size: 0.86rem; color: var(--ink-muted); }
.profile__none { color: var(--ink-muted); margin-top: var(--s-4); }

/* --- placement ------------------------------------------------------------ */

/* Both sides of the row hover together. The score is not inside the anchor,
   because a number is not a link, but it belongs to the same company, and lighting up
   half a row is how a reader learns to think the two halves are separate rows. */
.dir__row:hover { background: var(--surface-sunk); }
.dir__link:hover { background: none; }

/* The placement and the ratings share a column but are two different claims, so
   the padding belongs to the column and not to either of them. */
.dir__signals { padding-bottom: var(--s-4); }
.dir__rank { color: var(--ink-faint); font-size: 0.78rem; }
.dir__rankval { font-family: var(--f-display); font-size: 1.35rem; line-height: 1;
                color: var(--ink); font-variant-numeric: tabular-nums; }
.dir__ranklabel { margin-left: var(--s-2); }
.dir__flag { display: block; margin-top: var(--s-1); color: var(--mark); }

@media (min-width: 46rem) {
  .dir__row { display: grid; grid-template-columns: minmax(0, 1fr) 12rem;
              gap: var(--s-5); align-items: start; }
  .dir__signals { padding-top: var(--s-4); text-align: right; }
  .dir__rankval { display: block; font-size: 1.9rem; }
  .dir__ranklabel { display: block; margin-left: 0; margin-top: var(--s-1);
                    line-height: 1.35; }
}

/* The whole formula, on the page whose order it decides. Collapsed by default
   because most visitors want the list; one click away because the ones who
   don't are the ones the register exists for. */
.rank__note { margin-top: var(--s-5); font-size: 0.88rem; }
.rank__note > summary { cursor: pointer; color: var(--ink-muted);
                        padding-block: var(--s-2); }
.rank__note > summary:hover { color: var(--accent); }
.rank__note[open] > summary { font-weight: var(--w-strong); color: var(--ink); }
.rank__noteBody { padding: var(--s-4) 0 var(--s-2); max-width: 46rem; }
.rank__noteBody > p { color: var(--ink-secondary); line-height: 1.6; max-width: 60ch; }

.profile__section { margin-top: var(--s-2); }
.profile__lead { margin-top: var(--s-3); font-size: 0.9rem; color: var(--ink-secondary);
                 max-width: 58ch; line-height: 1.6; }

.rank__score { margin-top: var(--s-4); display: flex; gap: var(--s-3);
               align-items: baseline; flex-wrap: wrap; }
.rank__scoreval { font-family: var(--f-display); font-size: 3rem; line-height: 1;
                  font-variant-numeric: tabular-nums; }
.rank__scorelabel { font-size: 0.86rem; color: var(--ink-faint); }

/* A table of numbers is the one thing on this site allowed to scroll sideways,
   and it scrolls inside its own box so the page never does. */
.rank__scroll { margin-top: var(--s-5); overflow-x: auto; }
.rank__table { width: 100%; border-collapse: collapse; font-size: 0.86rem;
               font-variant-numeric: tabular-nums; }
.rank__table th, .rank__table td { padding: var(--s-2) var(--s-3);
                                   border-bottom: var(--rule-w) solid var(--rule);
                                   text-align: right; white-space: nowrap; }
.rank__table thead th { font-size: 0.72rem; letter-spacing: 0.06em;
                        text-transform: uppercase; color: var(--ink-faint); }
/* The column header sits over left-aligned row headers, so it is left too.
   A heading that does not line up with its column is a heading for the wrong
   column as far as a quick reader is concerned. */
.rank__table thead th:first-child, .rank__table tfoot th { text-align: left; }
.rank__table th[scope='row'] { text-align: left; font-weight: var(--w-body);
                               color: var(--ink-secondary); white-space: normal;
                               min-width: 14rem; }
.rank__table tfoot th, .rank__table tfoot td { border-bottom: 0; border-top: 2px solid var(--ink);
                                               font-weight: var(--w-strong); }
.rank__w { color: var(--ink-muted); }
.rank__c { font-weight: var(--w-strong); }

.rank__warn { margin-top: var(--s-4); padding: var(--s-3) var(--s-4);
              border-left: 2px solid var(--error); color: var(--error);
              font-size: 0.88rem; line-height: 1.6; max-width: 58ch; }
.rank__note-line { margin-top: var(--s-3); font-size: 0.84rem; color: var(--ink-muted); }
.rank__id { margin-top: var(--s-4); font-size: 0.8rem; color: var(--ink-faint);
            line-height: 1.7; }
.rank__id code { font-size: 0.92em; color: var(--ink-muted); }

/* Kept, never merged away, and the page has to look like it means it. */
.profile__conflicts { margin-top: var(--s-3); padding-left: var(--s-4);
                      border-left: 2px solid var(--mark); list-style: none;
                      font-size: 0.88rem; color: var(--ink-secondary);
                      max-width: 58ch; }
.profile__conflicts li { margin-top: var(--s-2); line-height: 1.55; }
.profile__flag[data-state='verifierad'] { border-color: var(--accent); }

/* --- stars, the card strip and the badge ---------------------------------- */

/* Colour lives here and nowhere else. The page's CSP is style-src 'self', so a
   fill set from Python is a fill that never arrives, and stars.py deliberately
   emits no style attribute and no colour: two classes and the stylesheet owns
   them. They are SVG shapes, so it is fill and not background. */
.stars { display: block; width: 5.4rem; height: auto; }
.stars__on { fill: var(--mark); }
.stars__off { fill: var(--rule); }

.dim__stars { margin-top: var(--s-2); }
.dim__empty { margin-top: var(--s-2); font-size: 0.86rem; color: var(--ink-faint);
              line-height: 1.5; }
.dim__bound { margin-top: var(--s-1); font-size: 0.78rem; color: var(--ink-muted);
              font-variant-numeric: tabular-nums; }
.dim__help { margin-top: var(--s-2); font-size: 0.76rem; color: var(--ink-faint);
             line-height: 1.45; }

/* Five counts, never five widths. A proportional bar here would need a width per
   dimension, and a width from Python is dropped by the CSP; a rounded step class
   would round a distribution, which is the one thing a distribution is for. */
.dist__scroll { margin-top: var(--s-3); overflow-x: auto; }
.dist { border-collapse: collapse; font-size: 0.76rem;
        font-variant-numeric: tabular-nums; }
.dist th, .dist td { padding: 0.1rem var(--s-2); text-align: right;
                     white-space: nowrap; }
.dist thead th { font-size: 0.68rem; letter-spacing: 0.06em;
                 text-transform: uppercase; color: var(--ink-faint);
                 border-bottom: var(--rule-w) solid var(--rule); }
.dist th[scope='row'] { color: var(--ink-muted); font-weight: var(--w-body);
                        padding-left: 0; }
.dist__n { color: var(--ink-secondary); }

.profile__note { margin-top: var(--s-3); font-size: 0.84rem; color: var(--ink-muted);
                 max-width: 58ch; line-height: 1.6; }
.profile__badge-link { margin-top: var(--s-4); font-size: 0.88rem; }

/* The card strip. Five bars, one per dimension, because a card is where a single
   blended bar is most tempting and most wrong: the reader is comparing companies
   at a glance, which is the comparison an average makes look easy. */
.strip { margin-top: var(--s-4); }
.strip__label, .strip__count { font-size: 0.72rem; color: var(--ink-faint); }
.strip__label { letter-spacing: 0.04em; text-transform: uppercase; }
/* The line under the bars is a sentence and not always a figure. When the five
   dimensions do not rest on the same number of reviews it says so as a span, so
   it has to be allowed to wrap and to sit under a chart it is wider than: a
   nowrap here would clip the half of it that carries the qualification. */
.strip__count { margin-top: var(--s-2); font-variant-numeric: tabular-nums;
                max-width: 22ch; line-height: 1.4; text-wrap: pretty; }
.strip__chart { display: block; width: 100%; max-width: 7.5rem; height: auto;
                margin-top: var(--s-2); }
/* var(--rule) rather than the sunk surface the stars.py docstring suggests: the
   directory row's own hover state is the sunk surface, so a track painted in it
   disappears under the pointer, which reads as five empty ratings. */
.strip__track { fill: var(--rule); }
.strip__bar { fill: var(--mark); }
.strip__none { color: var(--ink-faint); }

@media (min-width: 46rem) {
  .strip__chart { margin-left: auto; }
  .strip__count { margin-left: auto; text-align: right; }
}

.dir__legend { margin-top: var(--s-4); font-size: 0.88rem; color: var(--ink-secondary);
               max-width: 62ch; line-height: 1.6; }

/* --- the badge page ------------------------------------------------------- */

.badge-page { padding-block: var(--s-8) var(--s-9); max-width: 52rem; }

/* The badge carries its own background, and it follows the operating system's
   colour preference rather than the site's toggle: it is a separate document in
   an <img>, so it cannot see this page's theme. The frame is neutral in both so
   the preview never sits on a background that fights it. */
.badge__preview { margin-top: var(--s-4); padding: var(--s-4);
                  border: var(--rule-w) solid var(--rule); border-radius: var(--r-sm);
                  background: var(--surface-sunk); overflow-x: auto; }
.badge__img { display: block; max-width: 100%; height: auto; }

/* Code to copy, so it has to be readable and it has to be selectable in one
   swipe. It scrolls inside its own box; the page never scrolls sideways. */
.snippet { margin-top: var(--s-2); padding: var(--s-3) var(--s-4);
           overflow-x: auto; border: var(--rule-w) solid var(--rule);
           border-radius: var(--r-sm); background: var(--surface-sunk);
           font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
           font-size: 0.78rem; line-height: 1.6; color: var(--ink-secondary);
           white-space: pre; -webkit-overflow-scrolling: touch; }
.snippet code { font: inherit; color: inherit; }

.badge__url { margin-top: var(--s-3); font-size: 0.8rem; color: var(--ink-faint);
              overflow-wrap: anywhere; }
.badge__url code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
                   font-size: 0.92em; color: var(--ink-muted); }

.badge__list { margin-top: var(--s-4); padding-left: var(--s-4);
               list-style: none; border-left: 2px solid var(--mark);
               max-width: 60ch; }
.badge__list li { margin-top: var(--s-3); font-size: 0.92rem; line-height: 1.6;
                  color: var(--ink-secondary); }

/* Bevisliggaren. Tabellerna bär sidans hela argument, så de är satta för att
   läsas noggrant och inte skummas: luft mellan raderna, och skälstexten i
   samma kolumnbredd som brödtexten i stället för hopklämd längst ut. */
.bevis__stamp { margin-top: var(--s-4); font-size: 0.85rem;
                color: var(--ink-secondary); font-variant-numeric: tabular-nums; }
.bevis__table { width: 100%; border-collapse: collapse; margin: var(--s-5) 0;
                font-size: 0.94rem; }
.bevis__table th { text-align: left; padding: var(--s-3) var(--s-3) var(--s-3) 0;
                   border-bottom: 2px solid var(--mark); font-weight: 600;
                   color: var(--ink-secondary); font-size: 0.82rem;
                   letter-spacing: 0.04em; text-transform: uppercase; }
.bevis__table td { padding: var(--s-3) var(--s-3) var(--s-3) 0; vertical-align: top;
                   border-bottom: 1px solid var(--rule); line-height: 1.6; }
.bevis__num { font-variant-numeric: tabular-nums; }
.bevis__note { color: var(--ink-secondary); font-size: 0.88rem; line-height: 1.65;
               max-width: 68ch; }
/* Nejet är avsiktligt inte rött. Att vägra publicera en andel är sidans
   normaltillstånd vid litet underlag, inte ett fel, och en varningsfärg skulle
   läsa som att något gått sönder. */
.bevis__nej { color: var(--ink-secondary); font-size: 0.86rem; }
.bevis__niva { display: inline-block; min-width: 1.6em; font-variant-numeric: tabular-nums;
               color: var(--ink-secondary); }
/* Tabeller får inte tvinga sidan att scrolla i sidled på en telefon. */
@media (max-width: 34rem) {
  .bevis__table, .bevis__table tbody, .bevis__table tr, .bevis__table td { display: block; }
  .bevis__table thead { display: none; }
  .bevis__table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
  .bevis__table td { border: 0; padding: 0 0 var(--s-2) 0; }
}

/* The theme choice on the badge page. Three states, and the current one is not
   a link, because a link to the page you are on is a link that does nothing and
   reads as a fourth option. */
.badge__themes { margin-top: var(--s-6); }
.badge__themelist { margin-top: var(--s-4); padding: 0; list-style: none;
                    display: grid; gap: var(--s-2); max-width: 44rem; }
.badge__themelist li { padding: var(--s-3) var(--s-4); font-size: 0.9rem;
                       border: var(--rule-w) solid var(--rule);
                       border-radius: var(--r-sm); }
.badge__themelist a { display: block; color: var(--ink-secondary);
                      text-decoration: none; }
.badge__themelist a:hover { color: var(--accent); }
.badge__themelist li[aria-current] { border-color: var(--accent);
                                     background: var(--surface-sunk);
                                     font-weight: var(--w-strong); }

/* Sorting the directory. The control is a select in the same grid as the
   filters, because it is the same kind of thing: a statement about which
   companies you want to see first. */
.dir__sortnote { margin-top: var(--s-2); font-size: 0.8rem; color: var(--ink-faint);
                 line-height: 1.6; max-width: 60ch; }

/* The hover targets sit above the bars and paint nothing. transparent rather
   than fill:none, because fill:none is not a hit target and the title would
   never open. */
.strip__hit { pointer-events: all; }

/* Demonstration records. Loud on purpose: an invented company in a supplier
   register is the one piece of fiction on this site somebody could act on. */
.profile__demo { margin-top: var(--s-5); padding: var(--s-4);
                 border: 2px dashed var(--mark); border-radius: var(--r-sm); }
.profile__demo-title { font-size: 0.7rem; font-weight: var(--w-strong);
                       letter-spacing: 0.12em; text-transform: uppercase;
                       color: var(--mark); }
.profile__demo-body { margin-top: var(--s-2); font-size: 0.92rem;
                      color: var(--ink-secondary); line-height: 1.6;
                      max-width: 58ch; }
.dir__demo { margin-left: var(--s-2); padding: 0.1em 0.5em; font-size: 0.62rem;
             font-weight: var(--w-strong); letter-spacing: 0.1em;
             text-transform: uppercase; vertical-align: 0.2em;
             color: var(--mark); border: 1px solid var(--mark);
             border-radius: 999px; }

/* --- Verktygsrad, vyval, sidindelning ---------------------------------- */
/*
 * Tre vyer over samma trafflista. Vyn ligger i adressen, sa en delad lank
 * oppnar samma bild som avsandaren sag, och den som byter vy behaller sina
 * filter. Det aktiva valet ar en <span> och inte en lank, eftersom en lank
 * till sidan man redan star pa ar en atergang utan verkan.
 */
.dir__toolbar { display: flex; flex-wrap: wrap; gap: var(--s-3);
                align-items: baseline; justify-content: space-between;
                margin-top: var(--s-4); }
.dir__views { display: flex; gap: var(--s-2); align-items: center; }
.dir__view { display: inline-block; padding: 0.35rem 0.7rem;
             border: var(--rule-w) solid var(--rule); border-radius: 3px;
             font-size: 0.85rem; text-decoration: none; color: var(--ink-secondary);
             transition: background 120ms ease, color 120ms ease,
                         border-color 120ms ease; }
.dir__view:hover { background: var(--surface-sunk); color: var(--ink);
                   border-color: var(--rule-strong); }
.dir__view--on { background: var(--ink); color: var(--surface);
                 border-color: var(--ink); }

.dir__more { margin-top: var(--s-5); display: flex; gap: var(--s-3);
             align-items: baseline; }
.dir__morecount { font-size: 0.85rem; color: var(--ink-faint); }

/* --- Rutnatsvyn --------------------------------------------------------- */
/*
 * auto-fill med minmax later antalet kolumner folja bredden i stallet for ett
 * brytvarde per skarmstorlek. Rutorna blir aldrig smalare an 17rem, vilket ar
 * den bredd dar ett tvaradigt foretagsnamn fortfarande far plats utan avstavning.
 */
.dir__grid { list-style: none; padding: 0; margin-top: var(--s-3);
             display: grid; gap: var(--s-3);
             grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.dir__tile { border: var(--rule-w) solid var(--rule); border-radius: 3px;
             transition: border-color 140ms ease, transform 140ms ease,
                         box-shadow 140ms ease; }
.dir__tile:hover { border-color: var(--rule-strong); transform: translateY(-2px);
                   box-shadow: 0 6px 20px rgb(0 0 0 / 0.07); }
.dir__tilelink { display: block; padding: var(--s-3); text-decoration: none;
                 color: inherit; height: 100%; }
.dir__tilerank { margin-top: var(--s-3); font-variant-numeric: tabular-nums; }

/* --- Tabellvyn ---------------------------------------------------------- */
/*
 * Rullrutan ar fokuserbar med tabindex och har en synlig ring, eftersom en
 * tabell som bara gar att rulla med fingret ar otillganglig for den som
 * navigerar med tangentbord. Samma losning som figurerna anvander.
 */
.dir__tablewrap { margin-top: var(--s-3); overflow-x: auto;
                  overscroll-behavior-x: contain; }
.dir__tablewrap:focus-visible { outline: 2px solid var(--accent);
                                outline-offset: 2px; }
.dir__table { width: 100%; border-collapse: collapse; min-width: 46rem; }
.dir__table th, .dir__table td { text-align: left; padding: var(--s-2) var(--s-3);
                                 border-bottom: var(--rule-w) solid var(--rule);
                                 font-size: 0.9rem; vertical-align: top; }
.dir__table th { font-weight: 600; color: var(--ink-secondary);
                 white-space: nowrap; position: sticky; top: 0;
                 background: var(--surface); }
.dir__trow { transition: background 120ms ease; }
.dir__trow:hover { background: var(--surface-sunk); }
.dir__tnum { text-align: right; font-variant-numeric: tabular-nums; }
.dir__saknas { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
  .dir__tile, .dir__trow, .dir__view { transition: none; }
  .dir__tile:hover { transform: none; }
}