/* Kalkylatorn: flikar, fällbara paneler och fältrutnät. */

/* --------------------------------------------------------------- flikar - */

.tabs {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface);
  border-bottom: 1px solid var(--hairline-strong);
}
.tabs__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; gap: 2px; padding: 0 12px;
  overflow-x: auto; scrollbar-width: none;
}
.tabs__inner::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 14px 11px; border: 0; background: none; cursor: pointer;
  font: 400 14px/1 var(--font); color: var(--ink-secondary); white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab .icon { font-size: 16px; color: var(--ink-muted); }
.tab:hover { color: var(--ink-strong); background: var(--surface-sunken); }
.tab[aria-selected='true'] { color: var(--accent-strong); font-weight: 500; border-bottom-color: var(--accent-line); }
.tab[aria-selected='true'] .icon { color: var(--accent-line); }

/* --------------------------------------------------- sammanfattningsrad - */

/*
 * Svaret ligger på marinblått och inte på ljusblått.
 *
 * Raden delade tidigare yta med vägvisarrutan strax under, som också är
 * ljusblå, och de två gled ihop till ett fält. Uppmärksamhetskontrast är att
 * det viktigaste skiljer sig mest från sin omgivning, och här är omgivningen
 * pappersvit. Då är mörkt det som sticker ut, inte en nyans till av samma
 * ljusa ton. Greppet är lånat från snabbkalkylens svarsruta, som gör exakt
 * det här och gör det bra.
 */
.summary {
  position: sticky; top: 45px; z-index: 25;
  background: var(--surface-invert);
  color: var(--ink-invert);
}
.summary__inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 4px 16px;
  padding: 9px 18px;
}
@media (min-width: 760px) {
  .summary__inner { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: center; }
}
/*
 * Grundfärgen är för ljus botten. Klassen används även utanför raden, i
 * fördelningen per person och i sparandeöversikten, och där ligger den på
 * papper. De inverterade tonerna gäller därför bara inuti .summary: en mätning
 * fångade fyra etiketter på 1,91 mot kravet 4,5 när de delade färg.
 */
.kpi__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-secondary); }
.summary .kpi__label { color: var(--on-invert-soft); }
/* De två första talen är svaret på frågan, de två andra är bankens diagnos.
   Svaret ska vara störst på sidan, annars får ögat leta efter det. */
.kpi__value { font-size: 15px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.summary .kpi__value { color: var(--ink-invert); }
.kpi--lead .kpi__value { font-size: 22px; }
@media (min-width: 760px) {
  .kpi__value { font-size: 17px; }
  .kpi--lead .kpi__value { font-size: 26px; }
}
.kpi__value small { font-size: 12px; font-weight: 400; color: var(--ink-secondary); }
.summary .kpi__value small { color: var(--on-invert-soft); }
.kpi__value.is-critical { color: var(--critical); }
.kpi__value.is-warning { color: var(--warning); }
.kpi__value.is-good { color: var(--good); }
/* Egna toner för mörk botten. Statusfärgerna för ljus yta blir gröt på marinblått. */
.summary .kpi__value.is-critical { color: var(--on-invert-critical); }
.summary .kpi__value.is-warning { color: var(--on-invert-warning); }
.summary .kpi__value.is-good { color: var(--on-invert-good); }

/* Underlaget är poängen med sidan och ska nås även på telefon. Där står knappen
   till höger om de fyra talen, i kort form. */
.summary__actions { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.summary__actions .btn { padding: 9px 12px; font-size: 13.5px; }
/*
 * Knappen är den enda ljusa ytan på den mörka raden och blir primär av det,
 * utan att behöva bli större. Samma vändning som uppmaningsrutan på startsidan.
 * Lägena klart och fel bär sin egen färg och får tillbaka vit text.
 */
.summary__actions .btn--underlag {
  background: var(--page); border-color: var(--page); color: var(--accent-strong);
}
.summary__actions .btn--underlag:hover {
  background: var(--surface); border-color: var(--surface); color: var(--accent-strong);
}
.summary__actions .btn--underlag[data-lage='klart'],
.summary__actions .btn--underlag[data-lage='fel'] { color: var(--ink-invert); }
.btn__long { display: none; }
@media (min-width: 760px) {
  .summary__actions { grid-column: auto; grid-row: auto; }
  .summary__actions .btn { padding: 10px 16px; font-size: 14px; }
  .btn__long { display: inline; }
  .btn__short { display: none; }
}

/* --------------------------------------------------------------- sidan -- */

.shell { max-width: var(--maxw); margin: 0 auto; padding: 18px 18px 80px; }
/* Rutnätsbarn krymper inte under sitt innehåll om man inte säger till. Utan
   min-width: 0 spränger en bred tabell hela sidan i stället för att rulla i sin
   egen ruta, vilket syns som att telefonen kan dras i sidled. */
.panel-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.panel-stack > *, .grid > *, .result > *, .tiles > *, .person-grid > * { min-width: 0; }
.panel, .panel__body, .table__scroll, .card { min-width: 0; }

/* fällbar panel */
.panel { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); }
.panel > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; cursor: pointer; list-style: none;
}
.panel > summary::-webkit-details-marker { display: none; }
.panel__caret { color: var(--ink-muted); transition: transform .18s ease; font-size: 14px; }
.panel[open] .panel__caret { transform: rotate(90deg); }
.panel__title { font-size: 15px; font-weight: 600; color: var(--ink-strong); margin: 0; letter-spacing: -0.01em; }
.panel__meta { margin-left: auto; font-size: 12.5px; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.panel__body { padding: 0 18px 18px; }
.panel[open] > summary { border-bottom: 1px solid var(--hairline); margin-bottom: 16px; }

/* vägvisare högst upp i en flik */
.guide {
  background: var(--surface-tint); border-left: 3px solid var(--accent-line);
  border-radius: 0 var(--r-card) var(--r-card) 0; padding: 14px 18px; margin-bottom: 14px;
}
.guide__lede { font-size: 13.5px; color: var(--accent-strong); line-height: 1.55; max-width: 78ch; }
.guide__lede strong { font-weight: 600; }
.guide__steps { display: grid; gap: 8px; margin-top: 12px; }
/* Orienteringen står som en rad text i stället för fyra kort, på alla bredder.
   Fyra kort läses inte som fyra val utan som fyra saker att läsa, och de
   konkurrerar med det som faktiskt ska fyllas i strax under. Raden säger samma
   sak på en femtedel av ytan. */
.guide__oneline { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; margin-top: 8px; }
/*
 * Introt tog nästan hela första skärmen på telefon, och det som stod under var
 * det som faktiskt skulle fyllas i. Meningen som säger vad man ska göra står
 * kvar, resten ligger ett tryck bort. Summeringen är en kontroll och håller
 * 36 px, praxismåttet för en sekundär väg.
 */
.guide__mer > summary {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 0;
  font-size: 13px; font-weight: 500; color: var(--accent);
  cursor: pointer; list-style: none;
}
.guide__mer > summary::-webkit-details-marker { display: none; }
.guide__mer > summary::after {
  content: ''; width: 6px; height: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.guide__mer[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.guide__mer > summary:hover { text-decoration: underline; }
.guide__mer > .guide__oneline { margin-top: 2px; }
/* Korten används fortfarande där de bär innehåll, till exempel amorteringströsklarna. */
@media (min-width: 700px) {
  .guide__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guide__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.guide__step { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-control); padding: 10px 12px; }
.guide__step b { display: block; font-size: 12.5px; color: var(--ink-strong); margin-bottom: 2px; }
.guide__step span { font-size: 12px; color: var(--ink-secondary); line-height: 1.45; }

/* Lägesväljaren ovanför rutnätet: etikett, val och följdtexten på en rad. */
.typeval {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--hairline);
}
.typeval .field__hint { flex: 1 1 22ch; margin: 0; }

/* --------------------------------------------------------- fältrutnät --- */

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px 18px; }

/*
 * Fältrutnät med fyra fasta rader: etikett, kontroll, reglage, hjälptext.
 * Varje fält är ett subgrid och lånar radernas höjder av föräldern, så att en
 * cell utan hjälptext ändå lämnar plats för raden och nästa cells reglage
 * hamnar på exakt samma nivå. Det är det som gör att raden ser byggd ut i
 * stället för hoprörd, och det gäller även när en etikett radbryter.
 */
/* En kolumn har inget att rätta in sig efter, så där gäller vanlig packning
   och tomma rader tar ingen plats. Rutnätet slår till först när det finns en
   granne i samma rad. */
@media (min-width: 620px) {
  .grid--falt > .field { grid-row: span 4; row-gap: 6px; }
  .grid--falt > .field > * { min-width: 0; }
  .grid--falt > .field > .field__top { grid-row: 1; }
  .grid--falt > .field > .input-wrap,
  .grid--falt > .field > .segmented,
  .grid--falt > .field > .input { grid-row: 2; align-self: start; }
  .grid--falt > .field > input[type='range'] { grid-row: 3; align-self: center; }
  .grid--falt > .field > .field__hint { grid-row: 4; align-self: start; }

  @supports (grid-template-rows: subgrid) {
    .grid--falt > .field { grid-template-rows: subgrid; }
  }
  /* Utan subgrid faller det tillbaka på start-packning, vilket räcker så länge
     ingen etikett radbryter. Ingen webbläsare från 2023 hamnar här. */
  @supports not (grid-template-rows: subgrid) {
    .grid--falt > .field { grid-row: auto; }
    .grid--falt > .field > * { grid-row: auto; }
  }
}
@media (min-width: 620px) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 920px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 620px) and (max-width: 919px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 620px) { .grid--halv { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid__full { grid-column: 1 / -1; }

.notice {
  display: flex; gap: 10px; padding: 11px 14px;
  border-radius: var(--r-control); font-size: 13px; line-height: 1.5;
  background: var(--warning-wash); color: var(--warning);
}
.notice--critical { background: var(--critical-wash); color: var(--critical); }
.notice--info { background: var(--accent-soft); color: var(--accent-strong); }
.notice .icon { font-size: 16px; flex: none; margin-top: 2px; }

/* ------------------------------------------------------------ resultat -- */

.result { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .result { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.result__figure {
  font-size: clamp(32px, 6vw, 40px); font-weight: 600; color: var(--ink-strong);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.05;
}
.result__figure small { font-size: 16px; font-weight: 400; color: var(--ink-secondary); margin-left: 5px; }
.result__label { font-size: 12.5px; color: var(--ink-secondary); }
.result__sub { font-size: 13px; color: var(--ink-secondary); line-height: 1.55; margin-top: 8px; }

.split-line {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--hairline);
}
.split-line__value { font-size: 20px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; }
.split-line__value.is-critical { color: var(--critical); }
.split-line__value.is-warning { color: var(--warning); }

/* ------------------------------------------------------- person och rad - */

.person-grid { display: grid; gap: 14px; }
@media (min-width: 820px) { .person-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.person-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 16px; }
.person-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.person-card__name { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.person-card__kvar { text-align: right; }
.person-card__kvar b { display: block; font-size: 20px; color: var(--good); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.person-card__kvar.is-critical b { color: var(--critical); }
.person-card__income { margin-top: 8px; display: flex; align-items: baseline; gap: 10px; }
.person-card__income b { font-size: 22px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.person-card__income span { font-size: 12.5px; color: var(--ink-muted); }

.stackbar { display: flex; height: 26px; border-radius: var(--r-control); overflow: hidden; gap: 2px; margin: 12px 0 6px; }
.stackbar span {
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; overflow: hidden; white-space: nowrap;
  /* Textfärgen sätts per stapeldel i app.js, eftersom den beror på fyllningen. */
  color: var(--ink-invert);
  font-variant-numeric: tabular-nums; transition: width .25s ease;
}
.stackbar .is-light { color: var(--ink-strong); }
.stackbar__scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.compare { display: grid; gap: 10px; }
.compare__row { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 10px; }
.compare__name { font-size: 12.5px; color: var(--ink-secondary); }
.compare__track { display: flex; height: 30px; border-radius: var(--r-control); overflow: hidden; gap: 2px; }
.compare__track span { display: flex; align-items: center; padding: 0 8px; font-size: 11.5px; color: var(--ink-invert); white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }

/* poster med ägare */
.item-row {
  display: grid; grid-template-columns: 1fr 118px auto auto; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--hairline);
}
.item-row:last-of-type { border-bottom: 0; }
@media (max-width: 700px) {
  .item-row { grid-template-columns: 1fr auto; grid-template-areas: 'namn ta' 'belopp agare'; }
  .item-row > :nth-child(1) { grid-area: namn; }
  .item-row > :nth-child(2) { grid-area: belopp; }
  .item-row > :nth-child(3) { grid-area: agare; justify-self: end; }
  .item-row > :nth-child(4) { grid-area: ta; justify-self: end; }
}
.item-row .input { min-height: 36px; }
.item-total {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--hairline-strong);
  font-size: 13.5px; color: var(--ink-secondary);
}
.item-total b { font-size: 17px; color: var(--ink-strong); font-variant-numeric: tabular-nums; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--r-control);
  border: 1px solid transparent; background: transparent; color: var(--ink-muted);
  cursor: pointer; font-size: 15px;
}
.icon-btn:hover { background: var(--critical-wash); color: var(--critical); }

/* --------------------------------------------------------------- skala -- */

.gauge__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gauge__value { font-size: 30px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.gauge__track { position: relative; height: 12px; margin: 20px 0 6px; border-radius: var(--r-pill); overflow: hidden; display: flex; gap: 2px; }
.gauge__zone { height: 100%; }
.gauge__marker { position: absolute; top: -8px; bottom: -8px; width: 3px; background: var(--ink-strong); border-radius: 2px; transition: left .25s ease; }
.gauge__ticks { position: relative; height: 16px; font-size: 11px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.gauge__ticks span { position: absolute; transform: translateX(-50%); }
.gauge__ticks span:first-child { transform: none; }
.gauge__ticks span:last-child { transform: translateX(-100%); }
.gauge__note { margin-top: 10px; font-size: 13px; color: var(--ink-secondary); line-height: 1.55; }

/* ------------------------------------------------------------ stresstest */

.stress-list { display: grid; gap: 8px; }
.stress-row {
  display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--r-control); background: var(--surface-sunken); font-size: 13px;
}
.stress-row.is-current { background: var(--accent-soft); }
.stress-row__rate, .stress-row__cost { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stress-row__kvar { text-align: right; font-size: 12.5px; color: var(--ink-secondary); }
.stress-row__kvar b { font-family: var(--mono); font-weight: 500; color: var(--ink-strong); }
.stress-row.is-fail .stress-row__kvar b { color: var(--critical); }

/* ------------------------------------------------------------ hävstänger */

.lever { display: grid; gap: 5px; padding: 12px 0; border-top: 1px solid var(--hairline); }
.lever:first-child { border-top: 0; }
.lever__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lever__title { font-size: 14px; font-weight: 600; color: var(--ink-strong); }
.lever__gain { font-family: var(--mono); font-weight: 500; color: var(--good); white-space: nowrap; }
.lever__text { font-size: 12.5px; color: var(--ink-secondary); line-height: 1.55; }

.questions { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.questions li { display: flex; gap: 9px; font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }
.questions .icon { color: var(--accent-line); font-size: 15px; flex: none; margin-top: 2px; }

/* --------------------------------------------------------------- rutor -- */

.tiles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .tiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .tiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.tile { padding: 12px 14px; border-radius: var(--r-control); background: var(--surface-sunken); }
.tile--tint { background: var(--accent-soft); }
.tile__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-secondary); }
.tile__value { margin-top: 3px; font-size: 19px; font-weight: 600; color: var(--ink-strong); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.tile__note { margin-top: 2px; font-size: 11.5px; color: var(--ink-muted); }

/* ------------------------------------------------------------- diagram -- */

.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); fill: var(--ink-muted); font-size: 11px; }
.chart .grid-line { stroke: var(--grid); stroke-width: 1; }
.chart .axis-line { stroke: var(--hairline-strong); stroke-width: 1; }
.chart .value-label { fill: var(--ink-secondary); font-size: 10.5px; }

.chart-tip[hidden] { display: none; }
.chart-tip {
  position: absolute; top: 6px; transform: translateX(-50%);
  display: grid; gap: 2px; padding: 8px 11px;
  background: var(--surface); border: 1px solid var(--hairline-strong);
  border-radius: var(--r-control); box-shadow: var(--shadow-pop);
  font-size: 12.5px; color: var(--ink-secondary); pointer-events: none; white-space: nowrap;
}
.chart-tip strong { color: var(--ink-strong); font-weight: 600; }

/* -------------------------------------------------------------- regler -- */

.rule { padding: 12px 0; border-top: 1px solid var(--hairline); }
.rule:first-child { border-top: 0; }
.rule__title { font-size: 13.5px; font-weight: 600; color: var(--ink-strong); }
.rule__body { margin-top: 3px; font-size: 12.5px; color: var(--ink-secondary); line-height: 1.6; }
.rule__source { margin-top: 4px; font-size: 11px; color: var(--ink-muted); }

.footnote { margin-top: 22px; font-size: 12px; color: var(--ink-muted); line-height: 1.6; }
.status-line { min-height: 16px; font-size: 12.5px; color: var(--ink-muted); }
.status-line[data-state='error'] { color: var(--critical); }
.status-line[data-state='klart'] { color: var(--good); font-weight: 500; }

[hidden] { display: none !important; }

/* --------------------------------------------------------- sparandeposter */

.spar-post { padding: 14px; }
.spar-post .input[data-role='belopp'] { font-size: 19px; }
.spar-post .bar { background: var(--surface-sunken); }

/* --------------------------------------------------------- amortering --- */

.amort-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.threshold-line { stroke: var(--hairline-strong); stroke-width: 1; stroke-dasharray: 4 4; }
.threshold-label { fill: var(--ink-muted); font-size: 10.5px; }

/* ------------------------------------------------------------- dellån --- */

.dellan-item { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.dellan-item:last-of-type { border-bottom: 0; }
.dellan-item__detalj {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px;
  padding: 7px 11px; border-radius: var(--r-control);
  background: var(--surface-sunken); font-size: 12.5px; color: var(--ink-secondary);
}
.dellan-item__detalj b { font-family: var(--mono); font-weight: 500; color: var(--ink-strong); }
.dellan-item__detalj .total { margin-left: auto; }

/* ------------------------------------------------------------- sidfot -- */

.app-footer {
  max-width: var(--maxw);
  margin: 32px auto 40px;
  padding: 18px 18px 0;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-muted);
}

/* Vägen till snabbkalkylen. Syns tydligast på telefon, där den gör mest nytta. */
/* Vägen till snabbkalkylen var en textlänk på 17 px höjd, alltså under WCAG 2.2
   kravet på 24. Den är nu en knapp, och står bredvid meningen i stället för i den. */
.guide__snabb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 13px; color: var(--ink-secondary); margin-top: 12px;
}

/* ------------------------------------------------------- hämta annonsen -- */

.import {
  background: var(--surface-sunken); border: 1px solid var(--hairline);
  border-radius: var(--r-control); padding: 14px 16px; margin-top: 18px;
  display: grid; gap: 8px;
}
.import__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.import__row .input { flex: 1 1 240px; min-width: 0; }
.import__row .btn { flex: 0 0 auto; }
.import [data-role='status'] { font-size: 13px; color: var(--ink-secondary); }
/*
 * En textruta och inte en rad, eftersom det som klistras in är ett stycke ur
 * en annons och inte en adress. Den växer inte av sig själv: en ruta som
 * hoppar i höjd medan man klistrar in flyttar knappen under fingret.
 */
.import__falt {
  width: 100%; min-height: 76px; resize: vertical;
  font-family: inherit; font-size: 14px; line-height: 1.5;
  padding: 10px 12px;
}
.import__vag { flex: 1 1 200px; min-width: 0; }