/* Utseendet bygger på de gemensamma tokens i /design/buildable-variables.css och Buildables komponenter (buildable-components.css).
   Färg, typsnitt, radier, vikter och skuggor kommer från tokens, så kundens tema (--kund-accent) och mörkt läge följer med.
   Signaturytan är det enda undantaget: den är alltid ljus eftersom namnteckningen ritas med mörk färg. */
:root{--signature-paper:#ffffff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--text-md)/var(--leading) var(--font-ui)}
.shell{width:min(var(--shell),calc(100% - 2 * var(--gutter)));margin:0 auto}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--accent);padding:var(--space-3) var(--space-4);z-index:10;font-weight:var(--weight-bold)}
.skip:focus{left:var(--space-3);top:var(--space-3)}

/* Sidhuvud: vitt, logotypen till vänster (kundens när tema finns) och en linje under */
.top{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.bar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-5);min-height:68px;padding:var(--space-2) 0}
.brand{display:flex;align-items:center;gap:var(--space-3);font-weight:var(--weight-bold);color:var(--ink);white-space:nowrap}
.brand img{display:block;height:32px;width:auto}
.brand img.kundlogo{height:36px;max-width:160px;object-fit:contain}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-5);font-size:var(--text-sm)}
.nav a,.nav .link{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font:inherit;font-weight:var(--weight-medium);text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);text-decoration:underline;text-underline-offset:6px}
.nav .link{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
form.inline{display:inline;margin:0}

main{padding:var(--space-6) 0 var(--space-7);outline:0}
h1{font-size:clamp(1.8rem,5vw,2.5rem);line-height:1.1;letter-spacing:-.04em;font-weight:var(--weight-bold);margin:0 0 var(--space-4)}
h2{font-size:var(--text-lg);line-height:1.25;font-weight:var(--weight-bold);margin:0 0 var(--space-3)}
h3{font-size:var(--text-md);font-weight:var(--weight-medium);margin:0 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
a{color:var(--accent)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.1rem,4vw,1.75rem);margin:0 0 var(--space-5)}
.muted,.hint{color:var(--ink-2)}
.hint{font-size:var(--text-sm);margin:0 0 var(--space-1)}
.mono{font-family:var(--font-mono);overflow-wrap:anywhere;word-break:break-all}
.pre{white-space:pre-wrap;overflow-wrap:anywhere}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
html:not(.js) .js-only{display:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Knappar: en primär per vy */
.button,button.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:var(--weight-bold);text-decoration:none;cursor:pointer;transition:background .12s,box-shadow .12s}
.button:hover,button.button:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.button.secondary{background:var(--surface);color:var(--accent);border-color:var(--line-strong)}
.button.secondary:hover{background:var(--accent-soft);border-color:var(--line-strong)}
.button.danger{background:var(--bad);border-color:var(--bad);color:var(--surface)}
.button[disabled]{opacity:.5;cursor:not-allowed}
.button.add-recipient{width:100%;min-height:56px;border-style:dashed;border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.button.add-recipient:hover{border-style:solid}
.button.add-recipient .plus{font-size:1.5rem;line-height:1}
.actions:has(> .add-recipient){margin:0 0 var(--space-5)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4)}

/* Formulär */
.field{margin:0 0 var(--space-4)}
label{display:block;font-weight:var(--weight-medium);margin:0 0 var(--space-1)}
input[type=text],input[type=email],input[type=number],input[type=file],input[type=search],input[type=date],textarea,select{display:block;width:100%;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:inherit}
textarea{min-height:7rem;resize:vertical}
.filter-more{margin:0 0 var(--space-4)}.filter-more summary{min-height:44px;display:flex;align-items:center;font-weight:var(--weight-medium);cursor:pointer}
.check{display:flex;align-items:flex-start;gap:var(--space-3);margin:0 0 var(--space-3)}
.check input{width:24px;height:24px;margin:2px 0 0;flex:none}
.check label{margin:0;font-weight:var(--weight-medium)}
fieldset{border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4)}
legend{font-weight:var(--weight-bold);padding:0 var(--space-2)}

/* Meddelanden och etiketter */
.notice{border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4);font-weight:var(--weight-medium)}
.notice-error{background:var(--bad-soft);color:var(--bad)}
.notice-info{background:var(--info-soft);color:var(--info)}
.notice-ok{background:var(--ok-soft);color:var(--ok)}
.notice-warn{background:var(--warn-soft);color:var(--warn)}
.badge{display:inline-block;border-radius:var(--radius-pill);padding:3px var(--space-3);font-size:var(--text-xs);font-weight:var(--weight-bold);white-space:nowrap}
.badge-neutral{background:var(--surface-2);color:var(--ink)}
.badge-info{background:var(--info-soft);color:var(--info)}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-bad{background:var(--bad-soft);color:var(--bad)}

/* Tabeller och listor */
.scroll{overflow-x:auto;margin:0 0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:520px;font-size:var(--text-sm)}
th,td{text-align:left;vertical-align:top;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--line)}
th{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--accent-soft)}
dl{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:var(--space-2) var(--space-5);margin:0 0 var(--space-4)}
dt{font-weight:var(--weight-bold)}
dd{margin:0;overflow-wrap:anywhere}
.signature-canvas{display:block;width:100%;max-width:600px;aspect-ratio:15/4;background:var(--signature-paper);border:2px dashed var(--line-strong);border-radius:var(--radius-md);touch-action:none;cursor:crosshair}
.signature-preview{display:block;max-width:100%;height:auto;background:var(--signature-paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-2)}
.copybox{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:stretch}
.copybox input{flex:1 1 280px}
details{margin:var(--space-4) 0 0}
summary{cursor:pointer;font-weight:var(--weight-bold);min-height:44px;display:flex;align-items:center}
.foot{color:var(--ink-2);font-size:var(--text-sm);padding-bottom:var(--space-6)}

/* Ärendesidan: statistikrutor. Första barnet är etiketten, sista barnet är talet. */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-4);margin:0 0 var(--space-6)}
.stat{display:grid;gap:var(--space-1);padding:var(--space-4) var(--space-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);color:var(--ink);text-decoration:none}
a.stat:hover{box-shadow:var(--shadow-2)}
.stat > :first-child{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--ink-2)}
.stat > :last-child{font-size:2.25rem;font-weight:var(--weight-bold);letter-spacing:-.03em;line-height:1.1}
.stat-attention{background:var(--accent-2-soft);border-color:color-mix(in oklab,var(--accent-2) 25%,var(--accent-2-soft))}
.stat-attention > :first-child,.stat-attention > :last-child{color:var(--accent-2)}
.stat-attention > :first-child{font-weight:var(--weight-bold)}

/* Behöver åtgärd: en rad per ärende med ikon, orsak och en knapp */
.attention-list{list-style:none;margin:0 0 var(--space-6);padding:0;background:var(--surface);border:1px solid color-mix(in oklab,var(--accent-2) 25%,var(--accent-2-soft));border-radius:var(--radius-lg)}
.attention-list li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5)}
.attention-list li + li{border-top:1px solid color-mix(in oklab,var(--accent-2) 25%,var(--accent-2-soft))}
.attention-list .icon{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--radius-md);background:var(--accent-2-soft);color:var(--accent-2)}
.attention-list li > div{flex:1 1 320px;min-width:0}
.attention-list p{margin:0}
.attention-list p:first-child{font-weight:var(--weight-bold)}
.attention-list p + p{font-size:var(--text-sm);color:var(--ink-2)}

/* Verktygsrad: sök, statuschips och växel mellan lista och tavla */
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin:0 0 var(--space-6)}.page-head h1{margin:0}
#atgard > h2{margin:0 0 var(--space-3)}
.toolbar{margin:0 0 var(--space-4)}.toolbar > .actions{align-items:center;justify-content:space-between}
.chips{display:inline-flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;cursor:pointer}
.chip:hover{background:var(--accent-soft)}
.chip[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--surface);font-weight:var(--weight-bold)}
.view-toggle{display:inline-flex;gap:var(--space-1);border-radius:var(--radius-md);background:var(--surface-2)}
.view-toggle a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-md);color:var(--ink-2);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none}
.view-toggle a[aria-current]{background:var(--surface);color:var(--ink);font-weight:var(--weight-bold);box-shadow:var(--shadow-1)}

/* Tavlan: en kolumn per steg. Raden scrollar i sidled på smal skärm. */
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-2);margin:0 0 var(--space-4)}
.board-col{display:grid;align-content:start;gap:var(--space-3);background:var(--surface-2);border-radius:var(--radius-lg);padding:var(--space-3)}
.board-col h2{display:flex;justify-content:space-between;gap:var(--space-2);margin:0;padding:var(--space-1) var(--space-1) 0;font-size:var(--text-sm)}
.board-col h2 > :last-child{color:var(--ink-2);font-weight:var(--weight-medium)}
.board-col > p{margin:0;padding:var(--space-2) var(--space-1);font-size:var(--text-sm);color:var(--ink-2)}
.board-card{display:grid;gap:var(--space-2);padding:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);color:var(--ink);text-decoration:none;box-shadow:var(--shadow-1)}
.board-card:hover{box-shadow:var(--shadow-2)}
.board-card > :first-child{font-size:var(--text-sm);font-weight:var(--weight-bold);line-height:1.3}
.board-card > :nth-child(n+2){font-size:var(--text-xs);color:var(--ink-2)}
.board-card > :last-child{display:flex;justify-content:space-between;align-items:center;gap:var(--space-2)}
.avatars{display:inline-flex;padding-right:var(--space-2)}
.avatar{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;margin-right:calc(-1 * var(--space-2));border-radius:var(--radius-pill);border:2px solid var(--surface);background:var(--surface-2);color:var(--ink-2);font-size:var(--text-xs);font-weight:var(--weight-bold)}
.avatar-ok{background:var(--ok-soft);color:var(--ok)}
.avatar-wait{background:var(--surface-2);color:var(--ink-2)}
.avatar-bad{background:var(--bad-soft);color:var(--bad)}

/* Mottagarsidan: dokumentet till vänster, en panel till höger */
.sign-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:var(--space-5);align-items:start}
.sign-document{min-width:0}

/* Dokumentvisaren: en vit sida per PDF-sida med rätt proportioner redan före rendering. Modulen sätter --page-ratio och --total-scale-factor. */
.pdf-viewer{margin:var(--space-4) 0 0}
.pdf-viewer-status{margin:0 0 var(--space-3);color:var(--ink-2);font-size:var(--text-sm)}
.pdf-viewer-status:empty{display:none}
.pdf-pages{display:grid;gap:var(--space-3);min-width:0}
.pdf-page{--scale-round-x:1px;--scale-round-y:1px;position:relative;width:100%;aspect-ratio:1 / var(--page-ratio);overflow:hidden;background:var(--signature-paper);border-radius:var(--radius-sm);box-shadow:var(--shadow-1)}
.pdf-page canvas{display:block;width:100%;height:100%}

/* Textlagret ur pdf.js 6.3.289 (web/pdf_viewer.css), Apache-2.0. */
.textLayer{
  color-scheme:only light;

  position:absolute;
  text-align:initial;
  inset:0;
  overflow:clip;
  opacity:1;
  line-height:1;
  letter-spacing:normal;
  word-spacing:normal;
  -webkit-text-size-adjust:none;
     -moz-text-size-adjust:none;
          text-size-adjust:none;
  forced-color-adjust:none;
  transform-origin:0 0;
  caret-color:CanvasText;
  z-index:0;

  &.highlighting{
    touch-action:none;
  }

  :is(span, br){
    color:transparent;
    position:absolute;
    white-space:pre;
    cursor:text;
    transform-origin:0% 0%;
    -webkit-user-select:text;
       -moz-user-select:text;
            user-select:text;
  }
  --min-font-size:1;
  --text-scale-factor:calc(var(--total-scale-factor) * var(--min-font-size));
  --min-font-size-inv:calc(1 / var(--min-font-size));

  > :not(.markedContent),
  .markedContent span:not(.markedContent){
    z-index:1;

    --font-height:0;
    font-size:calc(var(--text-scale-factor) * var(--font-height));

    --scale-x:1;
    --rotate:0deg;
    transform:rotate(var(--rotate)) scaleX(var(--scale-x)) scale(var(--min-font-size-inv));
  }

  .markedContent{
    display:contents;
  }

  span[role="img"]{
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
    cursor:default;
  }

  .highlight{
    --highlight-bg-color:rgb(180 0 170 / 0.25);
    --highlight-selected-bg-color:rgb(0 100 0 / 0.25);
    --highlight-backdrop-filter:none;
    --highlight-selected-backdrop-filter:none;

    @media screen and (forced-colors: active){
      --highlight-bg-color:transparent;
      --highlight-selected-bg-color:transparent;
      --highlight-backdrop-filter:var(--hcm-highlight-filter);
      --highlight-selected-backdrop-filter:var(
        --hcm-highlight-selected-filter
      );
    }

    margin:-1px;
    padding:1px;
    background-color:var(--highlight-bg-color);
    backdrop-filter:var(--highlight-backdrop-filter);
    border-radius:4px;

    &.appended{
      position:initial;
    }

    &.begin{
      border-radius:4px 0 0 4px;
    }

    &.end{
      border-radius:0 4px 4px 0;
    }

    &.middle{
      border-radius:0;
    }

    &.selected{
      background-color:var(--highlight-selected-bg-color);
      backdrop-filter:var(--highlight-selected-backdrop-filter);
      scroll-margin-top:50px;
    }
  }

  ::-moz-selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in srgb, AccentColor, transparent 50%);
    color:transparent;
  }

  ::selection{
    background:rgba(0 0 255 / 0.25);
    background:color-mix(in oklab, var(--accent) 30%, transparent);
    color:transparent;
  }

  &.selectionRendering{
    ::-moz-selection{
      background:transparent;
      color:transparent;
    }
    ::selection{
      background:transparent;
      color:transparent;
    }
  }
  br::-moz-selection{
    background:transparent;
  }
  br::selection{
    background:transparent;
  }

  .endOfContent{
    display:block;
    position:absolute;
    inset:100% 0 0;
    z-index:0;
    cursor:default;
    -webkit-user-select:none;
       -moz-user-select:none;
            user-select:none;
  }

  &.selecting .endOfContent{
    top:0;
  }
}
.sign-panel{position:sticky;top:var(--space-4);display:grid;gap:var(--space-5);padding:var(--space-5);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow-wrap:anywhere}
.sign-panel > *{margin:0}
.sign-panel h2.panel-label{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2)}
.signers,.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3)}
.signers li{display:flex;align-items:center;gap:var(--space-3)}
.signers li > :first-child{flex:1 1 auto;min-width:0}
.signers li > :last-child:not(:first-child){margin-left:auto;font-size:var(--text-xs);color:var(--ink-2);font-weight:var(--weight-medium);text-align:right}
.steps{counter-reset:steg}
.steps li{counter-increment:steg;display:flex;align-items:center;gap:var(--space-3);color:var(--ink-2)}
.steps li::before{content:counter(steg);display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:var(--radius-pill);border:2px solid var(--line-strong);font-size:var(--text-xs);font-weight:var(--weight-bold)}
.steps li[aria-current="step"]{color:var(--ink);font-weight:var(--weight-bold)}
.steps li[aria-current="step"]::before{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.sticky-cta{display:none}

/* Bred layout: panelen ligger bredvid dokumentet och scrollar inuti sig själv när den är högre än fönstret */
@media (min-width:761px){
  .sign-panel{max-height:calc(100vh - 2 * var(--space-4));overflow-y:auto}
}
@media (max-width:760px){
  .sign-layout{grid-template-columns:1fr}
  .sign-panel{position:static;padding:var(--space-4)}
  .button.sticky-cta{display:flex;position:sticky;bottom:var(--space-3);z-index:5;width:100%;min-height:52px;margin:var(--space-4) 0 0;box-shadow:0 0 0 var(--space-3) var(--surface),var(--shadow-2)}
}
@media (max-width:640px){dl{grid-template-columns:1fr}.button,button.button{width:100%}.actions .button{width:100%}.bar{padding:var(--space-3) 0}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Hamburgermeny på smal skärm, utan JavaScript */
.bd-menu-toggle{display:none}
.bd-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);cursor:pointer}
.bd-burger i,.bd-burger i::before,.bd-burger i::after{display:block;width:20px;height:2px;background:var(--ink);position:relative;content:""}
.bd-burger i::before{position:absolute;top:-6px}.bd-burger i::after{position:absolute;top:6px}
.bd-menu-toggle:focus-visible+.bd-burger{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:760px){.bd-menu-toggle{display:block;position:absolute;opacity:0;width:44px;height:44px;margin:0;right:0;top:12px}.bd-burger{display:inline-flex;margin-left:auto}.bd-menu-toggle~.nav{display:none;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;padding-bottom:var(--space-3)}.bd-menu-toggle:checked~.nav{display:flex}.bd-menu-toggle~.nav a,.bd-menu-toggle~.nav .link{border-top:1px solid var(--line);min-height:48px}}