.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    object-fit: contain;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 8rem + 0.75rem) 0 auto 0;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ==========================================================================
   Strikkeboka design tokens and login-area styling, ported verbatim from
   design-reference/Strikkeboka_mock.html (the binding visual reference).
   See CLAUDE.md "The binding rule" — inspect the mock's actual CSS before
   changing anything here, don't just edit from this paraphrase.

   One deliberate, flagged deviation (Milepæl 6c, K-074): --muted fails WCAG AA
   text contrast (4.5:1) against --paper-deep in the mock's own warm/forest/ocean/berry
   values — confirmed with an axe-core scan of the ribbon nav (color-contrast, serious) and
   verified this is inherited from the mock itself, not introduced by the port. Each affected
   theme's --muted is darkened by the smallest amount that clears 4.5:1 against --paper-deep
   (same hue/saturation, lower lightness only — computed, not eyeballed). light/dark already
   passed and are untouched.
   ========================================================================== */
:root{
  --desk:#ded6ca; --paper:#f6f1e7; --paper-deep:#eee7dc; --ink:#2c2925;
  --muted:#6c665e; --line:#d8cfc1; --accent:#7a5746; --accent-soft:#e5d7cc;
  --tab:#ece4d8; --shadow:0 24px 70px rgba(55,43,33,.16);
  --note-yellow:#f1e6b9; --note-blue:#dce8e7;
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px; --radius-full:50%;
}

html[data-theme="light"]{
  --desk:#ececec; --paper:#ffffff; --paper-deep:#f7f7f5; --ink:#242321;
  --muted:#73716d; --line:#deddd9; --accent:#765443; --accent-soft:#eee5df;
  --tab:#f1f0ed; --shadow:0 24px 70px rgba(34,33,31,.12);
  --note-yellow:#fff4bd; --note-blue:#e4f0f1;
}
html[data-theme="dark"]{
  --desk:#171513; --paper:#26221e; --paper-deep:#211e1b; --ink:#eee7dd;
  --muted:#aaa097; --line:#413a34; --accent:#c39178; --accent-soft:#49372f;
  --tab:#302b27; --shadow:0 24px 70px rgba(0,0,0,.38);
  --note-yellow:#514829; --note-blue:#304140;
}
html[data-theme="forest"]{
  --desk:#d7ded2; --paper:#f3f6ee; --paper-deep:#e7ede0; --ink:#26302a;
  --muted:#606c62; --line:#cdd8c5; --accent:#3f6b4a; --accent-soft:#dbe7dc;
  --tab:#e3ebde; --shadow:0 24px 70px rgba(30,45,33,.16);
  --note-yellow:#f1e6b9; --note-blue:#d8e6df;
}
html[data-theme="ocean"]{
  --desk:#d6dfe3; --paper:#f1f6f8; --paper-deep:#e6eef1; --ink:#1f2f36;
  --muted:#5a6e74; --line:#c9d8dd; --accent:#2c7a8c; --accent-soft:#d9ebef;
  --tab:#e1edf0; --shadow:0 24px 70px rgba(20,50,60,.16);
  --note-yellow:#f1e6b9; --note-blue:#cfe6ec;
}
html[data-theme="berry"]{
  --desk:#e6d9d9; --paper:#faf2f2; --paper-deep:#f2e5e5; --ink:#352026;
  --muted:#7c6165; --line:#e0cbcd; --accent:#a13d5c; --accent-soft:#f2dde3;
  --tab:#f0e2e3; --shadow:0 24px 70px rgba(60,20,35,.16);
  --note-yellow:#f1e6b9; --note-blue:#ecd9de;
}

/* K-074 skalerbar tekst: appens typografi er stort sett px, ikke rem, så en
   rot-font-size-endring ville ikke kaskadert til de fleste tekststørrelser. `zoom`
   skalerer i stedet hele boksmodellen proporsjonalt, samme prinsipp som nettleserens
   egen sidezoom, uavhengig av px/rem-blandingen. */
html[data-font-scale="1.15"]{zoom:1.15}
html[data-font-scale="1.3"]{zoom:1.3}

*{box-sizing:border-box}

html,body{margin:0;min-height:100%;background:var(--desk);color:var(--ink)}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;font-weight:500}

.primary-button{border:1px solid var(--accent);background:var(--accent);color:white;border-radius:var(--radius-lg);padding:10px 17px;cursor:pointer}
.secondary-button{border:1px solid var(--line);background:transparent;border-radius:var(--radius-lg);padding:10px 17px;cursor:pointer}
.danger-button{border:1px solid #9a554b;background:#9a554b;color:white;border-radius:var(--radius-lg);padding:10px 17px;cursor:pointer}
.link{border:0;background:transparent;color:var(--accent);font-weight:700;cursor:pointer;padding:0}

.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,18px);background:var(--ink);color:var(--paper);padding:10px 15px;border-radius:var(--radius-lg);font-size:13px;opacity:0;pointer-events:none;transition:.2s;z-index:120}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.toast{bottom:92px;white-space:nowrap}}

/* ---------- Systemvarsler: tilkobling og ny versjon (Milepæl 7b, K-104/K-105) — ingen
   presedens i mocken (se CLAUDE.md "Den bindende regel"): mockens .toast er en 2,2s
   selvutslettende bekreftelse nederst, feil form for en vedvarende status øverst i vinduet.
   Bruker de samme --note-yellow/--ink-tokenene som postit-notatene (Milepæl 4) i stedet for nye,
   uverifiserte varsel-farger — kontrasten er allerede bevist i produksjon der, og den varme,
   gule "obs-lapp"-tonen passer bedre til notatbok-metaforen enn en skarp alarmrød ville gjort. */
.system-banners{position:fixed;top:0;left:0;right:0;z-index:130;display:flex;flex-direction:column;pointer-events:none}
.system-banner{display:flex;align-items:center;justify-content:center;gap:14px;padding:11px 20px;background:var(--note-yellow);color:var(--ink);font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.12);text-align:center;pointer-events:auto}
.system-banner .link{color:var(--ink);text-decoration:underline;font-weight:700}
@media(max-width:760px){.system-banner{padding:10px 14px;font-size:12.5px}}

.welcome-empty{border:1.5px dashed var(--line);border-radius:var(--radius-md);padding:26px 24px;text-align:center}
.welcome-empty h3{font-size:22px;margin:0 0 10px}
.welcome-empty p{color:var(--muted);margin:0 0 18px;line-height:1.6}
.welcome-empty button{margin:0 auto}

/* ---------- Innlogging / registrering / passord: forsiden av notatboka ---------- */
/* min-height repeated with 100dvh: another deliberate mock deviation (see the
   cover-header/cover-label-slot note below). Plain 100vh is the *largest* possible
   viewport on a mobile browser — the one you get once the address bar has scrolled
   away — so on first paint (address bar still showing) the cover is sized taller
   than what's actually visible, pushing the login button below the fold. 100dvh
   tracks the viewport that's actually visible right now; browsers without dvh
   support just keep the vh value above. */
.login-screen{min-height:100vh;min-height:100dvh;background:var(--desk)}
.cover-notebook{
  width:min(1180px,calc(100% - 32px));min-height:calc(100vh - 32px);margin:16px auto;
  min-height:calc(100dvh - 32px);
  display:grid;grid-template-columns:14px 1fr;
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);
}
.cover-spine{background:rgba(0,0,0,.28);box-shadow:inset -3px 0 6px rgba(0,0,0,.3)}
.cover-face{
  position:relative;padding:6% 8%;
  background:
    radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.10),transparent 55%),
    linear-gradient(155deg,var(--accent) 0%,#5c4234 100%);
  display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--paper);
}
.cover-face:before{
  content:"";position:absolute;inset:18px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius-sm);pointer-events:none;
}
/* cover-header/cover-label-slot: deliberate deviation from the mock (see CLAUDE.md
   "The binding rule" — this is a documented exception, not an oversight). The mock
   positions .cover-label absolutely against the whole .cover-face, centered at 50%
   of its height; on a short viewport that 50% point creeps up over the emblem/title,
   hiding them. Wrapping the header in its own flow block and laying the label out as
   a normal (non-absolute) flex child right after it means the label can never render
   above the header — and because it's back in normal flow, an unusually short window
   simply makes the cover (and page) taller and scrollable rather than clipping or
   overlapping anything.
   The label sits at a fixed distance below the header (`flex-start`, not centered in
   the leftover space) on purpose: mobile browsers resize the *visible* viewport at
   runtime as their address bar shows/hides — even 100dvh isn't a fixed number, it can
   change a moment after first paint. Anything positioned by centering-in-remaining-
   space recalculates off that changed number and visibly jumps. Anchoring to the
   header instead of the viewport means the label's position never depends on viewport
   height at all, so it can't move once the page has rendered. */
.cover-header{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;margin-bottom:14px}
.cover-label-slot{display:flex;flex-direction:column;align-items:center;width:100%}
.cover-emblem{
  width:64px;height:64px;border-radius:var(--radius-full);
  display:grid;place-items:center;
  margin-bottom:18px;
}
.cover-title{font-family:Georgia,"Times New Roman",serif;font-size:2.4rem;font-weight:500;line-height:1}
.cover-subtitle{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-top:8px}
.cover-label{
  position:relative;transform:rotate(-2.5deg);
  width:88%;max-width:340px;background:var(--paper);color:var(--ink);
  border-radius:var(--radius-md);padding:22px 22px 18px;
  box-shadow:0 10px 22px rgba(0,0,0,.35);
}
.cover-label:before{
  content:"";position:absolute;inset:6px;border:1px dashed var(--line);border-radius:var(--radius-sm);pointer-events:none;
}
.cover-label-field{margin-bottom:12px;text-align:left}
.cover-label-field label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}
.cover-label-field input{
  width:100%;border:0;border-bottom:1.5px solid var(--line);background:transparent;
  font-family:Georgia,"Times New Roman",serif;font-size:17px;color:var(--ink);padding:2px 0 5px;
}
.cover-label-field input:focus{outline:none;border-bottom-color:var(--accent)}
.cover-login-button{width:100%;margin-top:6px;justify-content:center}
.cover-label-hint{font-size:10.5px;color:var(--muted);margin-top:10px;line-height:1.5}
.cover-label-links{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.cover-label-links .link{font-size:12px;padding:0}
.cover-divider{display:flex;align-items:center;gap:10px;margin:16px 0 14px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em}
.cover-divider:before,.cover-divider:after{content:'';flex:1;height:1px;background:var(--line)}
.cover-social-buttons{display:grid;gap:9px}
.cover-social-button{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:9px;font-size:14px}
.cover-social-button svg{width:17px;height:17px;flex:none}
.cover-dev-callout{
  margin-top:14px;border:1px dashed var(--line);border-radius:var(--radius-md);padding:10px 12px;
  font-size:12px;color:var(--muted);text-align:left;word-break:break-all;
}
.cover-dev-callout a{color:var(--accent);font-weight:700}
@media(max-width:760px){
  .cover-notebook{width:100%;margin:0;min-height:100vh;min-height:100dvh;border-radius:0}
  .cover-label{transform:rotate(-1.5deg)}
}

/* ---------- App-skallet etter innlogging (.app/.ribbon/.book/.top) — verbatim fra mocken.
   Ribbonen er en ekte venstre-marg (samme rolle som notatblokkens marg), telleren monteres
   inne i .book (position:absolute er relativ til .book, ikke viewport), og .top sin
   border-bottom er den horisontale linjen typisk for en notatblokk-header. ---------- */
.app{
  width:min(1180px,calc(100% - 32px));min-height:calc(100vh - 32px);margin:16px auto;
  min-height:calc(100dvh - 32px);
  display:grid;grid-template-columns:84px minmax(0,1fr);background:var(--paper);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line)
}
.ribbon{background:var(--paper-deep);border-right:1px solid var(--line);padding:18px 12px;display:flex;flex-direction:column;align-items:center;gap:14px}
.logo{width:46px;height:46px;border-radius:var(--radius-full);display:grid;place-items:center;flex:none}
.logo-art{width:100%;height:100%;object-fit:contain}
.logo-art-dark{display:none}
html[data-theme="dark"] .logo-art-light{display:none}
html[data-theme="dark"] .logo-art-dark{display:block}
.nav{display:flex;flex-direction:column;gap:10px;margin-top:10px;width:100%}
.nav a{border:0;background:transparent;border-radius:var(--radius-lg);padding:11px 6px;display:grid;place-items:center;gap:5px;font-size:10px;color:var(--muted);cursor:pointer;text-decoration:none}
.nav a.active{background:var(--accent-soft);color:var(--accent);font-weight:700}
.nav svg{width:20px;height:20px}
/* Ribbonens ene verktøyknapp (Milepæl 6g, K-075) — mockens #themeButton ("Fargemodus") er
   bevisst IKKE portet hit; det valget flyttet til Profil-sidens svatsjer i stedet. */
.utility-controls{margin-top:auto;display:grid;gap:9px}
.utility-button{border:1px solid var(--line);background:transparent;width:42px;height:42px;border-radius:var(--radius-full);cursor:pointer;display:grid;place-items:center;color:var(--muted);position:relative;transition:.18s}
.utility-button:hover{background:var(--accent-soft);color:var(--accent)}
/* Milepæl 6g-oppfølging (30.08.2026): mockens opprinnelige .on-stil (samme svake accent-soft-
   tinting som :hover) ga ingen synlig forskjell på om «Hold skjermen på» faktisk var på eller
   av uten å holde musepekeren over knappen — grunnlegger flagget dette etter egen testing. Et
   solid, mettet --accent-fyll (samme "på"-språk som .compact-nav-toggle[aria-pressed="true"]
   og .text-scale-group button[aria-pressed="true"] allerede bruker andre steder i appen) gir en
   alltid synlig, WCAG-sjekket kontrast i alle seks temaer (--paper-tekst mot --accent-bakgrunn,
   laveste beregnet kontrast ~4.6:1 i Hav-temaet). Portet til mocken først, deretter hit. */
.utility-button.on,.utility-button.on:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.utility-button svg{width:20px;height:20px}
.utility-button .utility-label{position:absolute;left:52px;white-space:nowrap;background:var(--ink);color:var(--paper);font-size:11px;padding:6px 8px;border-radius:var(--radius-md);opacity:0;pointer-events:none;transform:translateX(-4px);transition:.18s;z-index:30}
.utility-button:hover .utility-label{opacity:1;transform:none}
.book{min-width:0;background:linear-gradient(to right,rgba(0,0,0,.025),transparent 28px),var(--paper);position:relative;display:flex;flex-direction:column}
.book:before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:rgba(0,0,0,.06)}
.top{padding:28px 42px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.top button{white-space:nowrap}
.brandline small{color:var(--muted);letter-spacing:.08em;text-transform:uppercase;display:block}
.brandline strong{font-family:Georgia,serif;font-size:18px}
.page{padding:48px 58px 70px;animation:fade .22s ease;flex:1}
@keyframes fade{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}
/* Generisk flex-rad ("space-between") for sideinnhold — samme rolle som mockens .top hadde
   INNE i en side (søkefelt+knapp-rad m.m.), omdøpt for å ikke krysse med .top ovenfor, som nå
   er den globale, faste boksidetoppen. */
.row-split{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row-split button{white-space:nowrap}
@media(max-width:760px){
  .app{width:100%;margin:0;min-height:100vh;min-height:100dvh;border-radius:0;border:0;display:block}
  .ribbon{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;flex-direction:row;
    justify-content:center;border-right:0;border-top:1px solid var(--line);
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));gap:0}
  .ribbon .logo{display:none}
  .ribbon .nav{flex-direction:row;justify-content:space-around;margin-top:0;gap:4px}
  /* Matches the mock's own behavior: its separate .mobile-nav bottom bar (shown when .ribbon
     is hidden) never had a wake-lock button either — only the Profil toggle reaches "Hold
     skjermen på" on mobile, same as in the mock. */
  .ribbon .utility-controls{display:none}
  .top{padding:18px 18px 14px}
  .page{padding:34px 20px calc(96px + env(safe-area-inset-bottom))}
}

/* K-073 kompakte menyer: en brukerstyrt preferanse, uavhengig av (ikke en erstatning
   for) den responsive mobil-layouten over — begge kan være aktive samtidig. */
html[data-compact-nav] .app{grid-template-columns:54px minmax(0,1fr)}
html[data-compact-nav] .ribbon{padding:18px 4px}
html[data-compact-nav] .ribbon .nav span{display:none}

/* ---------- Oppskriftskort i listen (Milepæl 2, K-010) — verbatim fra mocken ---------- */
.kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:800;margin-bottom:12px}
.meta{color:var(--muted);font-size:14px}
.action-button{border:1px solid var(--line);background:transparent;border-radius:var(--radius-lg);padding:9px 14px;cursor:pointer;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.pattern-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}
.pattern{position:relative;padding:20px 0;border-top:1px solid var(--line);cursor:pointer;display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center}
.pattern:hover h3{color:var(--accent)}
.pattern h3{margin:0 0 7px;font-size:22px}
.pattern-copy{min-width:0}
.pattern-title-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title-link{color:inherit;text-decoration:none}
.pattern-favorite{display:none;color:var(--accent);font-size:20px;line-height:1;flex:none}
.pattern[data-favorite="true"] .pattern-favorite{display:inline-block}
.card-actions-col{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.pattern-thumb{
  width:76px;height:92px;border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(145deg,#b59686,#7b5b4e)
}
.pattern-thumb.green{background:linear-gradient(145deg,#aab8ad,#607465)}
.pattern-thumb.blue{background:linear-gradient(145deg,#c0ccd0,#728890)}
.pattern-thumb.sand{background:linear-gradient(145deg,#d1bfa9,#9c8269)}
.pattern-thumb:after{
  content:"";position:absolute;left:27%;top:20%;width:46%;height:58%;
  border-radius:45% 45% 26% 26%;background:rgba(255,255,255,.76)
}
@media(max-width:760px){
  .pattern-list{grid-template-columns:1fr}
  .pattern{grid-template-columns:64px minmax(0,1fr)}
  .pattern-thumb{width:64px;height:78px}
}

/* ---------- Opprett ny oppskrift: mockens ekte chooser-modal, verbatim ---------- */
.modal-backdrop{position:fixed;inset:0;background:rgba(24,20,17,.38);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal-backdrop.open{display:flex}
.modal{width:min(520px,100%);max-height:90vh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:27px}
.modal-head{display:flex;justify-content:space-between;align-items:start;gap:18px;margin-bottom:22px}
.modal h2{margin:0}
.modal-close{border:0;background:transparent;font-size:24px;color:var(--muted);cursor:pointer}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:24px}
.creation-options{display:grid;gap:10px}
.creation-option{border:1px solid var(--line);background:transparent;border-radius:var(--radius-md);padding:15px;text-align:left;cursor:pointer;display:grid;grid-template-columns:22px 1fr;gap:12px}
.creation-option:hover,.creation-option.selected{background:var(--tab);border-color:var(--accent)}
.creation-option strong{display:block;margin-bottom:4px}
.creation-option small{color:var(--muted);line-height:1.45}
@media(max-width:760px){
  .modal{padding:22px}
}

/* ---------- Manuell opprettelse (egen side, ikke i mocken selv — se app.css-kommentar
   i CreateRecipe.razor for begrunnelse) og oppskrift-detaljvisning, verbatim CSS ---------- */
.creation-form{display:grid;gap:17px;margin-top:18px}
.creation-field{display:grid;gap:7px}
.creation-field label{font-size:12px;letter-spacing:.04em;color:var(--muted)}
.creation-field input,.creation-field select,.creation-field textarea{width:100%;border:1px solid var(--line);background:var(--paper-deep);color:var(--ink);border-radius:var(--radius-md);padding:12px 13px;font:inherit;outline:none}
.creation-field textarea{min-height:86px;resize:vertical}
.creation-field input:focus,.creation-field select:focus,.creation-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

.recipe-shell{max-width:900px}
.recipe-hero{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);gap:44px;align-items:start;margin-top:28px}
.recipe-cover-col{display:flex;flex-direction:column;gap:10px}
.recipe-cover-col .kicker{margin:0}
.recipe-cover{border:1px solid var(--line);background:var(--paper-deep);overflow:hidden;aspect-ratio:3/4}
.recipe-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.recipe-cover.sand{background:linear-gradient(145deg,#d1bfa9,#9c8269)}
.recipe-cover.blue{background:linear-gradient(145deg,#c0ccd0,#728890)}
.recipe-cover.green{background:linear-gradient(145deg,#aab8ad,#607465)}
.recipe-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}
.recipe-summary{color:var(--muted);font-size:16px;line-height:1.7}
.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 30px;margin:30px 0}
.fact{border-top:1px solid var(--line);padding-top:12px}
.fact small{display:block;color:var(--muted);margin-bottom:5px}
/* Deliberate deviation from the mock: recipe-nav is plain <a href="#id"> anchors here
   (CSS-only scroll via .recipe-section's scroll-margin-top below), not the mock's
   JS-driven active-tab-highlight + fade-edge scroll shadows — see RecipeNav.razor for
   why. The selector below is extended to cover both button (mock) and a (ours). */
.recipe-nav{display:flex;gap:8px;overflow:auto;padding:18px 0 10px;margin:34px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);scrollbar-width:thin}
.recipe-nav button,.recipe-nav a{white-space:nowrap;border:0;background:transparent;color:var(--muted);padding:8px 10px;border-radius:var(--radius-lg);cursor:pointer;text-decoration:none}
.recipe-nav button:hover,.recipe-nav a:hover{background:var(--tab);color:var(--accent)}
.recipe-section{padding:34px 0;border-top:1px solid var(--line);scroll-margin-top:24px}
.recipe-section:first-of-type{border-top:0}
.recipe-section h2{display:flex;align-items:center;gap:12px}
.chapter-number{font-family:Inter,sans-serif;font-size:11px;letter-spacing:.12em;color:var(--accent);font-weight:800}
.recipe-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px}
.recipe-card{border-top:1px solid var(--line);padding-top:14px}
.recipe-card small{display:block;color:var(--muted);margin-bottom:5px}
.size-table{width:100%;border-collapse:collapse;font-size:14px}
.size-table th,.size-table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.size-table th{color:var(--muted);font-weight:600}
.instruction{max-width:760px}
.instruction p{margin:0 0 16px}
@media(max-width:760px){
  .recipe-hero{grid-template-columns:1fr;gap:26px}
  .recipe-cover{max-width:330px}
  .recipe-grid{grid-template-columns:1fr}
}

/* Skriftstørrelse/kompakt-meny-kontrollene (K-073/K-074) — app-only, no mock precedent.
   Milepæl 6g moved them from a fixed-corner .preferences-switcher (now deleted, along with
   PreferencesSwitcher.razor) into .setting rows on the Profil page instead; the controls'
   own look is unchanged. */
.text-scale-group{display:flex;border:1px solid var(--accent);border-radius:var(--radius-lg);overflow:hidden}
.text-scale-group button{background:var(--paper);color:var(--ink);border:0;border-right:1px solid var(--accent);padding:4px 8px;font-size:11px;cursor:pointer}
.text-scale-group button:last-child{border-right:0}
.text-scale-group button[aria-pressed="true"]{background:var(--accent);color:#fff}
.compact-nav-toggle{background:var(--paper);color:var(--ink);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:4px 8px;font-size:12px;cursor:pointer}
.compact-nav-toggle[aria-pressed="true"]{background:var(--accent);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Bibliotek: søk, filtertabs, tag-facetter, arkiv (Milepæl 3, K-011/012/030/031)
   — verbatim fra mocken (search-box/tabs/craft-tabs/filter-group/tag-facets/tag-chip/
   archive-row/quick-trigger/context-menu), except .context-menu is repositioned to an
   absolute dropdown anchored under the card's ⋯ button instead of the mock's
   viewport-clamped fixed popup — see Milepæl 3 plan for why (no right-click/long-press). ---------- */
.search-box{min-width:260px;flex:1;max-width:520px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:10px 2px;color:var(--muted)}
.search-box svg{width:19px;height:19px;flex:none}
.search-box input{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit}
.search-box input::placeholder{color:var(--muted)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0}
.tab{border:1px solid var(--line);background:transparent;padding:9px 14px;border-radius:var(--radius-lg);cursor:pointer;color:var(--muted)}
.tab.active{background:var(--tab);color:var(--ink)}
.filter-group{margin:22px 0 6px}
.filter-label{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.filter-group .tabs{margin:0 0 4px}
.craft-tabs{padding:6px;background:var(--paper-deep);border-radius:var(--radius-lg);display:inline-flex;margin-bottom:4px}
.craft-tabs .tab{border:0;padding:7px 13px;font-size:13px}
.craft-tabs .tab.active{background:var(--paper);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.tag-facets{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 2px}
.tag-chip{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:var(--radius-lg);padding:6px 13px;font-size:12.5px;cursor:pointer}
.tag-chip:hover{border-color:var(--accent);color:var(--accent)}
.tag-chip.active{background:var(--accent);border-color:var(--accent);color:var(--paper)}
.empty-result{padding:24px 0}
.archive-list{margin-top:8px}
.archive-row{display:flex;justify-content:space-between;gap:20px;padding:17px 0;border-bottom:1px solid var(--line)}
.archive-row small{color:var(--muted);display:block;margin-top:4px}
.card-actions-col{position:relative}
.quick-trigger{width:26px;height:26px;border-radius:var(--radius-full);border:1px solid var(--line);background:transparent;color:var(--muted);display:grid;place-items:center;font-size:15px;line-height:1;cursor:pointer;padding:0}
.quick-trigger:hover{background:var(--accent-soft);color:var(--accent);border-color:transparent}
.context-menu{position:absolute;right:0;top:100%;z-index:20;width:190px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow);padding:8px}
.context-menu button{width:100%;border:0;background:transparent;text-align:left;padding:11px;border-radius:var(--radius-md);cursor:pointer;font:inherit;color:var(--ink)}
.context-menu button:hover{background:var(--tab);color:var(--accent)}
.context-menu .danger{color:#9a554b}
.context-separator{height:1px;background:var(--line);margin:5px 7px}
.tag-chip-remove{border:0;background:transparent;color:inherit;cursor:pointer;margin-left:6px;font-size:13px;padding:0;line-height:1}
.target-audience-picker{display:flex;flex-wrap:wrap;gap:14px 20px}
.target-audience-option{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:14px}
.target-audience-option input{margin:0}
@media(max-width:760px){
  .search-box{min-width:100%;max-width:none}
}

/* ---------- Milepæl 4: teller, notater, avkrysningsrad/statuslinje, "I dag" og
   arbeidskort — verbatim CSS fra mocken. (Ribbon/nav-shellet flyttet opp til app.css'
   .app/.ribbon/.nav-blokk sammen med resten av boksjallet.) ---------- */

/* ---------- Teller (.counter-dock/.counter-panel) — verbatim fra mocken. Montert inne i
   .book (se CounterDock.razor), så position:absolute er relativ til boken, ikke viewport —
   nøyaktig som i mocken, teller "inni boka" i stedet for flytende over hele skjermen. ---------- */
.counter-dock{position:absolute;right:22px;bottom:22px;z-index:20;display:flex;align-items:flex-end;gap:10px}
.counter-tab{border:1px solid var(--line);background:var(--paper-deep);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm);min-width:82px;padding:10px 13px 9px;box-shadow:0 8px 22px rgba(55,43,33,.12);cursor:pointer;text-align:center;color:var(--ink)}
.counter-tab strong{font-family:Georgia,serif;font-size:25px;font-weight:500;display:block;line-height:1}
.counter-tab small{display:block;color:var(--muted);font-size:10px;margin-top:4px;letter-spacing:.04em}
.counter-panel{width:310px;border:1px solid var(--line);background:var(--paper-deep);border-radius:var(--radius-lg);padding:18px;box-shadow:0 18px 45px rgba(55,43,33,.18);display:none}
.counter-dock.open .counter-panel{display:block}
.counter-dock.open .counter-tab{display:none}
.counter-head{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:16px}
.counter-head h3{margin:0;font-size:22px}
.counter-close{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:21px;padding:0 3px}
.counter-context{font-size:12px;color:var(--muted);margin-top:3px}
.counter-value{font-family:Georgia,serif;font-size:72px;text-align:center;line-height:1;margin:18px 0 8px}
.counter-actions{display:grid;grid-template-columns:72px 1fr;gap:10px}
.counter-action{height:58px;border:1px solid var(--line);border-radius:var(--radius-md);background:transparent;cursor:pointer;font-size:26px}
.counter-action.plus{background:var(--accent);color:white;border-color:var(--accent);font-size:31px}
.counter-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:12px;color:var(--muted)}
.counter-foot button{border:0;background:transparent;color:var(--accent);cursor:pointer;padding:0;margin-left:0}
.counter-foot button.danger{color:#9a554b;font-weight:600}
.counter-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:6px 0 4px}
.counter-metric{text-align:center}
.counter-metric-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.counter-metric .counter-value{font-size:40px;margin:2px 0 10px}
.counter-metric .counter-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.counter-metric .counter-action{height:44px;border-radius:var(--radius-md);font-size:20px}
.counter-metric .counter-action.plus{font-size:22px}
.counter-panel .creation-field select{width:100%}
@media(max-width:760px){
  .counter-dock{right:14px;bottom:14px}
}

/* ---------- Avkrysningsrad og statuslinje (K-048) — verbatim fra mocken ---------- */
.step-row{display:flex;align-items:flex-start;gap:10px;margin:0 0 16px}
.step-row input[type=checkbox]{margin-top:5px;width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:none}
.step-row p{margin:0}
.step-row.done p{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.section-progress{font-size:12px;color:var(--muted);margin:-6px 0 14px}
.ai-safety-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);line-height:1.55}
.source-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--radius-lg);padding:4px 10px;margin-bottom:10px}
.source-badge b{color:var(--accent);font-weight:700}

/* ---------- Notatlapper (postit, "I dag") og notatlogg (oppskrift/arbeid) — verbatim fra
   mocken (.note/.note-log-*), inkludert mobil-omorganiseringen av #homeNotesStack. ---------- */
.note{padding:22px 22px 26px;box-shadow:0 10px 25px rgba(0,0,0,.08);color:var(--ink);position:relative;border:1px solid rgba(0,0,0,.04)}
.note.yellow{background:var(--note-yellow);transform:rotate(1.2deg)}
.note.blue{background:var(--note-blue);transform:rotate(-.8deg)}
.note.sand{background:var(--accent-soft);transform:rotate(.6deg)}
.note-label{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:7px;font-weight:700}
.note-slot-header{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.note-clear-btn{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:0 2px}
.note-clear-btn:hover{color:var(--ink)}
.note-title-input{display:block;width:100%;border:none;background:transparent;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:21px;color:var(--ink);margin-bottom:10px;padding:0}
.note-body-textarea{display:block;width:100%;border:none;background:transparent;resize:vertical;min-height:64px;font:inherit;font-size:15px;line-height:1.7;color:var(--ink);padding:0}
.note .note-body-textarea{height:76.5px;overflow-y:hidden;resize:none;transition:height .18s ease}
.note.expanded .note-body-textarea{height:200px;overflow-y:auto;resize:vertical}
.note-expand-toggle{display:block;margin-top:8px;border:0;background:none;padding:0;font-size:12px;color:var(--muted);cursor:pointer;text-decoration:underline}
.note-expand-toggle:hover{color:var(--ink)}
.note-title-input:focus,.note-body-textarea:focus{outline:none}
.note-title-input::placeholder,.note-body-textarea::placeholder{color:var(--muted);opacity:.7}
.notes-stack{display:grid;gap:24px}
.notes-log-header{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:12px 0 4px}
.notes-log-header h2{margin:0}
.note-log-row{padding:18px 0;border-top:1px dashed var(--line)}
.note-log-row:first-child{border-top:0;padding-top:0}
.note-log-toprow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}
.note-log-date{font-size:12px;color:var(--muted)}
.note-pin-check{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;white-space:nowrap}
.note-pin-check input{margin:0;accent-color:var(--accent);cursor:pointer}
.note-log-title-input{display:block;width:100%;border:0;background:transparent;font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:18px;color:var(--ink);margin-bottom:6px;padding:0}
.note-log-body-textarea{display:block;width:100%;border:0;background:transparent;resize:vertical;min-height:52px;font:inherit;font-size:15px;line-height:1.65;color:var(--ink);padding:0}
.note-log-title-input:focus,.note-log-body-textarea:focus{outline:none}
.note-log-title-input::placeholder,.note-log-body-textarea::placeholder{color:var(--muted);opacity:.7}
.note-log-delete{font-size:12px;color:var(--muted);background:none;border:0;cursor:pointer;margin-top:8px;padding:0;text-decoration:underline}
.note-log-delete:hover{color:#9a554b}
@media(max-width:760px){
  #homeNotesStack{order:-1;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:2px 20px 10px}
  #homeNotesStack::-webkit-scrollbar{display:none}
  #homeNotesStack .note{flex:0 0 78%;scroll-snap-align:start}
}

/* ---------- "I dag" (spread/entry) og arbeidskort (.project/.status) — verbatim fra mocken ---------- */
.spread{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.72fr);gap:54px;align-items:start}
.spread.no-notes{grid-template-columns:1fr}
.spread.no-notes #homeNotesStack{display:none}
.entry{padding:24px 0;border-top:1px solid var(--line)}
.entry:first-child{border-top:0;padding-top:0}
.entry-head{display:flex;justify-content:space-between;gap:20px}
.entry h3{font-size:24px;margin:0 0 7px}
.rule-dashed{border:0;border-top:1px dashed var(--line);margin:22px 0}
.status{display:inline-block;margin-top:10px;padding:5px 9px;border-radius:var(--radius-lg);background:var(--tab);font-size:12px;color:var(--muted)}
.project-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 44px}
.project{border-top:1px solid var(--line);padding-top:22px;cursor:pointer}
.project[data-favorite="true"] .pattern-favorite{display:inline-block}
.project-head{display:grid;grid-template-columns:108px minmax(0,1fr);gap:18px;align-items:start}
.project-photo{width:108px;height:126px;border:1px solid var(--line);background:linear-gradient(145deg,#b9c3bc,#6c7c71);position:relative;overflow:hidden}
.project-photo:after{content:"";position:absolute;left:24%;top:18%;width:52%;height:60%;border-radius:42% 42% 24% 24%;background:rgba(255,255,255,.7)}
.pattern-multiselect{border:1px solid var(--line);background:var(--paper-deep);border-radius:var(--radius-md);max-height:160px;overflow-y:auto;padding:6px}
.pattern-multiselect label{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px}
.pattern-multiselect label:hover{background:var(--tab)}
.pattern-multiselect input[type="checkbox"]{width:16px;height:16px;flex:none;margin:0;padding:0;border-radius:var(--radius-lg);background:var(--paper);accent-color:var(--accent);cursor:pointer}
.pattern-multiselect .empty{padding:8px 9px;color:var(--muted);font-size:13px}
.recipient-select-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.recipient-select-row .creation-field{margin:0}
.small-action{border:1px solid var(--line);background:transparent;color:var(--accent);border-radius:var(--radius-lg);padding:10px 13px;cursor:pointer;white-space:nowrap}
@media(max-width:760px){
  .project-list{grid-template-columns:1fr}
  .note.yellow,.note.blue{transform:none}
  .spread{grid-template-columns:1fr}
  .recipient-select-row{grid-template-columns:1fr}
  .small-action{justify-self:start}
}

/* ---------- Milepæl 5: oppskriftsvisning-faner, original/referanse-visning og
   Strikkebok-diagram (native, ikke bilde) — verbatim fra mocken (recipe-view-switch/
   recipe-view-button/recipe-view-panel, original-preview/original-sheet, reference-card/
   reference-note, diagram-frame/diagram-caption, native-diagram*), except:
   - RecipeDetail.razor renders only the ACTIVE tab panel via @if/@else (CLAUDE.md: "CSS owns
     display, not JS" asks for conditional markup in Blazor over inline/JS display flips), so
     .recipe-view-panel's display:none default is effectively unused here — kept anyway for
     visual-reference fidelity and because the active panel still carries both classes.
   - .diagram-frame's mock background (#f5f2e9, a hardcoded hex) is replaced with the
     equivalent design token var(--paper-deep) — CLAUDE.md forbids hardcoded hex values for
     anything that isn't user-authored diagram-legend color data. This class is unused until a
     future Kind=Image diagram exists (not created by this milestone) but is ported now so
     that path needs no CSS work later. ---------- */
.recipe-view-switch{display:flex;gap:8px;flex-wrap:wrap;margin:34px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.recipe-view-button{border:1px solid var(--line);background:transparent;border-radius:var(--radius-lg);padding:9px 14px;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.recipe-view-button:hover,.recipe-view-button.active{background:var(--tab);color:var(--ink);border-color:var(--accent)}
.recipe-view-button svg{width:17px;height:17px;color:var(--accent)}
.recipe-view-panel{display:none}.recipe-view-panel.active{display:block}

.original-preview{border:1px solid var(--line);background:var(--paper-deep);border-radius:var(--radius-md);padding:24px;display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:start}
.original-sheet{aspect-ratio:3/4;border:1px solid var(--line);background:var(--paper);padding:12px;box-shadow:0 6px 16px rgba(0,0,0,.06)}
.original-sheet span{display:block;height:3px;border-radius:var(--radius-sm);background:var(--line);margin-bottom:7px}
.original-sheet span:nth-child(2){width:72%}
.original-sheet span:nth-child(3){width:86%}
.original-sheet span:nth-child(4){width:58%}

.reference-card{border:1px solid var(--line);background:var(--paper-deep);border-radius:var(--radius-md);padding:26px}
.reference-card p{color:var(--muted)}
.reference-card .primary-button{margin-top:6px}
.reference-note{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-md);padding:14px 16px;margin-top:18px;background:var(--paper)}
.reference-note svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:1px}

.diagram-frame{border:1px solid var(--line);background:var(--paper-deep);overflow:auto;padding:18px;border-radius:var(--radius-md)}
.diagram-frame img{display:block;width:100%;min-width:640px;height:auto}
.diagram-caption{display:flex;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px;margin-top:10px}
.native-diagram{margin:18px 0}
.native-diagram-band{margin-bottom:26px}
.native-diagram-band-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.native-diagram-grid{display:inline-grid;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.native-diagram-cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;box-sizing:border-box;line-height:1}
.native-diagram-legend{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line)}
.native-diagram-legend-item{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.native-diagram-legend-swatch{width:22px;height:22px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;box-sizing:border-box}
.native-diagram-note{font-size:12px;color:var(--muted);font-style:italic;margin-top:8px;max-width:520px}
@media(max-width:760px){
  .original-preview{grid-template-columns:82px 1fr}
  .diagram-frame{padding:10px}
}

/* ---------- Milepæl 6b: minimal Profil-side og Statistikk (K-060/K-061) — verbatim fra
   mocken (.profile-section/.profile-tools/.profile-tool, .statistics-*/.recipient-*/
   .year-*), except .year-strip uses repeat(auto-fit,...) instead of the mock's hardcoded
   repeat(5,...): real "Fullført per år" data won't always span exactly 5 years, so the
   column count must follow the actual data (see StatisticsService/Statistics.razor). Not
   ported at the time: .theme-choices/.subscription-grid/.stats-row/.stat-paper — those
   belong to parts of the mock's full Profil page (settings/theme/subscription) this
   milestone deliberately didn't build, and .stats-row/.stat-paper are unused dead CSS in
   the mock itself.

   Milepæl 6d addendum (samme dag): Profile.razor's nye kontoinnstillinger-seksjon bruker
   mockens .settings/.setting-klasser (Navn/E-post/Plan-radene), men disse ble aldri portet
   hit i selve Milepæl 6d — kun .profile-section/.profile-tools var det, fra 6b. Rettet her,
   verbatim fra mocken, samme runde som Milepæl 6e-scopet ble utvidet til å dekke 6d.
   .setting-fields har ingen mock-presedens (mockens døde "Navn"-rad har ikke noe e-postfelt
   å gruppere med) — et nytt lite hjelpeklasse-par som lar Navn og E-post dele én rad og én
   "Endre"-lenke i stedet for én lenke hver, siden begge uansett åpner samme redigeringsform. */
.profile-section{padding:30px 0;border-top:1px solid var(--line)}
.profile-section:first-child{border-top:0;padding-top:0}
.profile-section-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}
.profile-section-head h2{margin:0}
.profile-section-head .meta{max-width:440px;text-align:right}
.profile-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}
.profile-tool{padding:20px 0;border-top:1px solid var(--line)}
.profile-tool h3{font-size:21px;margin:0 0 7px}
.profile-tool p{font-size:14px;color:var(--muted);margin:0 0 16px}
.settings{max-width:720px}
.setting{display:flex;justify-content:space-between;gap:22px;padding:21px 0;border-top:1px solid var(--line)}
.setting:first-of-type{border-top:0}
.setting-fields{display:grid;gap:14px}
.toggle{width:50px;height:28px;border:0;border-radius:var(--radius-lg);background:var(--line);position:relative;cursor:pointer;flex:none}
.toggle:after{content:"";position:absolute;width:22px;height:22px;border-radius:var(--radius-full);background:var(--paper);left:3px;top:3px;transition:.2s}
.toggle.on{background:var(--accent)}
.toggle.on:after{left:25px}

/* Milepæl 6g: Profil-sidens fargemodus-/språkvalg (K-071), verbatim fra mocken. Fargeverdiene
   i .theme-preview.* er bevisst hardkodet, ikke CSS-tokens — hver svatsj skal alltid vise SIN
   EGEN fargemodus' faktiske farger uansett hvilket tema som er aktivt nå (poenget er å forhåndsvise
   de andre fem modiene), så de kan ikke følge --paper/--ink slik resten av appen skal. */
.theme-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.theme-choice{border:1px solid var(--line);background:transparent;border-radius:var(--radius-md);padding:12px;text-align:left;cursor:pointer;transition:.18s}
.theme-choice:hover,.theme-choice.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.theme-preview{height:108px;border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;display:grid;grid-template-columns:24px 1fr;margin-bottom:11px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.theme-preview .preview-rail{border-right:1px solid rgba(80,70,60,.14)}
.theme-preview .preview-page{padding:12px 11px}
.theme-preview .preview-line{display:block;height:3px;border-radius:var(--radius-sm);margin-bottom:7px;width:72%;background:currentColor;opacity:.32}
.theme-preview .preview-line.short{width:44%}
.theme-preview.warm{background:#f6f1e7;color:#2c2925}.theme-preview.warm .preview-rail{background:#eee7dc}
.theme-preview.light{background:#fff;color:#242321}.theme-preview.light .preview-rail{background:#f3f3f1}
.theme-preview.dark{background:#26221e;color:#eee7dd}.theme-preview.dark .preview-rail{background:#211e1b;border-color:#413a34}
.theme-preview.forest{background:#f3f6ee;color:#26302a}.theme-preview.forest .preview-rail{background:#e7ede0}
.theme-preview.ocean{background:#f1f6f8;color:#1f2f36}.theme-preview.ocean .preview-rail{background:#e6eef1}
.theme-preview.berry{background:#faf2f2;color:#352026}.theme-preview.berry .preview-rail{background:#f2e5e5}
.theme-choice-copy{display:flex;justify-content:space-between;gap:10px;align-items:center}
.theme-choice-copy strong{font-family:Georgia,"Times New Roman",serif;font-size:17px;font-weight:500}
.theme-check{width:18px;height:18px;border-radius:var(--radius-full);border:1px solid var(--line);display:grid;place-items:center;font-size:11px;color:transparent}
.theme-choice.active .theme-check{background:var(--accent);border-color:var(--accent);color:white}
@media(max-width:760px){
  .profile-tools,.theme-choices{grid-template-columns:1fr}
  .profile-section-head{display:block}.profile-section-head .meta{text-align:left;margin-top:7px}
}

.statistics-shell{max-width:900px}
.statistics-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:34px}
.statistics-period{display:flex;gap:8px;flex-wrap:wrap}
.statistics-period button{border:1px solid var(--line);background:transparent;padding:8px 13px;border-radius:var(--radius-lg);color:var(--muted);cursor:pointer}
.statistics-period button.active{background:var(--tab);color:var(--ink)}
.statistics-overview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:28px 0 42px}
.statistics-number{border-top:1px solid var(--line);padding-top:13px}
.statistics-number strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:31px;font-weight:500;margin-bottom:3px}
.statistics-number small{color:var(--muted)}
.statistics-section{padding:32px 0;border-top:1px solid var(--line)}
.statistics-section-head{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:18px}
.statistics-section-head h2{margin:0}
.recipient-list{display:grid;gap:0}
.recipient-row{display:grid;grid-template-columns:minmax(150px,.72fr) minmax(180px,1.2fr) auto;gap:18px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.recipient-row:first-child{border-top:0}
.recipient-person strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:20px;font-weight:500}
.recipient-person small{color:var(--muted)}
.recipient-track{height:5px;background:var(--line);border-radius:var(--radius-sm);overflow:hidden}
.recipient-track span{display:block;height:100%;background:var(--accent);border-radius:inherit}
.recipient-count{font-family:Georgia,"Times New Roman",serif;font-size:21px;white-space:nowrap}
.recipient-extra[hidden]{display:none}
.statistics-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
.statistics-list{display:grid;gap:0}
.statistics-list-row{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-top:1px solid var(--line)}
.statistics-list-row:first-child{border-top:0}
.statistics-list-row span{color:var(--muted)}
.year-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(46px,1fr));gap:12px;align-items:end;min-height:150px;padding-top:14px}
.year-column{display:grid;gap:8px;justify-items:center;height:100%;align-content:end}
.year-bar{width:100%;max-width:46px;min-height:12px;background:var(--accent-soft);border:1px solid var(--line);border-radius:var(--radius-md) var(--radius-md) 1px 1px;position:relative}
.year-bar.current{background:var(--accent)}
.year-column strong{font-family:Georgia,"Times New Roman",serif;font-size:18px;font-weight:500}
.year-column small{color:var(--muted)}
.statistics-note{margin-top:30px;padding:18px 20px;border-left:2px solid var(--accent);background:var(--paper-deep);color:var(--muted);line-height:1.6}
@media(max-width:760px){
  .statistics-top{display:block}.statistics-period{margin-top:18px}
  .statistics-overview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .recipient-row{grid-template-columns:1fr auto}.recipient-track{grid-column:1/-1}
  .statistics-columns{grid-template-columns:1fr}.year-strip{min-height:125px}
}