/* ─────────────────────────────────────────────────────────────
ARBETSSTILEN PÅ KUNDSIDORNA — Mina sidor och kundformulären (docs/plattform/stilprofil-backend.md steg 3).
Samma delar och klasser som backend (hn-admin.css), men varje färg och typsnitt bundet mot kitet (4987).
Allt gäller BARA inuti .hn-arbetsyta — publika sidor (Kust och land) rörs aldrig.
… hn-ruta, hn-faltrad, hn-falt, hn-knapp--klar …
Ingen egen bredd (Aline 2026-10-20 i bild «kör»): ytan följer spalten den står i — Mina sidor bred mitt + högerspalt,
kundens formulär full bredd, besökarens formulär sidans spalt. Mobil först: 16 px kant, knapparna i full bredd under 768 px.
Laddas av hn_arbetsstil_ladda() (includes/arbetsstil.php).
───────────────────────────────────────────────────────────── */
.hn-arbetsyta {
--hn-as-vit: var(--e-global-color-accent);
--hn-as-marin: var(--e-global-color-primary);
--hn-as-hover: var(--e-global-color-hnhover);
--hn-as-granit: var(--e-global-color-hngranit);
--hn-as-dampad: var(--e-global-color-hndampad);
--hn-as-vinrod: var(--e-global-color-hnvinrod);
--hn-as-havsgron: var(--e-global-color-hngron);
--hn-as-plommon: var(--e-global-color-hnplommon);
--hn-as-fjard: var(--e-global-color-hnfjard);
--hn-as-skog: var(--e-global-color-hnskog);
--hn-as-gra: var(--e-global-color-hngra);
--hn-as-rod: var(--e-global-color-hnrod);
--hn-as-kant: var(--e-global-color-hnaskant);
--hn-as-faltkant: var(--e-global-color-hnfaltkant);
--hn-as-visa: var(--e-global-color-hnvisa);
--hn-as-visa-text: var(--e-global-color-hnvisatext);
--hn-as-stang: var(--e-global-color-hnstang);
--hn-as-stang-text: var(--e-global-color-hnstangtext);
--hn-as-ring: color-mix(in srgb, var(--hn-as-marin) 15%, transparent);
background: var(--hn-as-vit);
box-sizing: border-box;
color: var(--hn-as-granit);
font-family: var(--e-global-typography-text-font-family), sans-serif;
font-size: 18px;
line-height: 1.5;
margin: 0 auto;
padding: 0 16px;
width: 100%;
}
.hn-arbetsyta *, .hn-arbetsyta *::before, .hn-arbetsyta *::after { box-sizing: border-box; }
.hn-arbetsyta h1 { color: var(--hn-as-granit); font-family: var(--e-global-typography-hnserif2-font-family), serif; font-size: 28px; font-weight: 500; line-height: 1.2; margin: 0 0 16px; }
/* Ikonerna är masker (inga dashicons för besökare) — de tar textens färg. */
.hn-arbetsyta .hn-notis::before, .hn-arbetsyta .hn-valjare__ruta::before, .hn-arbetsyta .hn-steg__steg.is-gjort::before {
background: currentColor; content: ""; flex: none; height: 22px; width: 22px;
-webkit-mask: var(--hn-ikon) center / contain no-repeat; mask: var(--hn-ikon) center / contain no-repeat;
}
.hn-arbetsyta { --hn-ikon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
--hn-ikon-bock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
--hn-ikon-fel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
--hn-ikon-sok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.8l-.3-.3A6.5 6.5 0 1 0 9.5 16a6.5 6.5 0 0 0 4.2-1.6l.3.3v.8l5 5 1.5-1.5-5-5zm-6 0a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9z'/%3E%3C/svg%3E"); }
/* ── Ruta: vit, 2 px kant, rubrikraden fylld i sortens färg, vita knappar till höger. */
.hn-arbetsyta .hn-ruta { --hn-ruta: var(--hn-as-marin); background: var(--hn-as-vit); border: 2px solid var(--hn-as-gra); border-radius: 8px; margin: 0 0 20px; overflow: hidden; }
.hn-arbetsyta .hn-ruta__topp { align-items: center; background: var(--hn-ruta); color: var(--hn-as-vit); display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; }
.hn-arbetsyta .hn-ruta__topp :is(h2, h3), .hn-arbetsyta .hn-ruta__rubrik { color: var(--hn-as-vit); font-family: inherit; font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0; }
.hn-arbetsyta .hn-ruta__topp svg, .hn-arbetsyta .hn-ruta__topp i { color: var(--hn-as-vit); font-size: 20px; height: 20px; width: 20px; }
.hn-arbetsyta .hn-ruta__knappar { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.hn-arbetsyta .hn-ruta__inne { padding: 16px; }
.hn-arbetsyta .hn-ruta--kontakt { --hn-ruta: var(--hn-as-marin); }
.hn-arbetsyta .hn-ruta--anteckning { --hn-ruta: var(--hn-as-vinrod); }
.hn-arbetsyta .hn-ruta--pengar { --hn-ruta: var(--hn-as-havsgron); }
.hn-arbetsyta .hn-ruta--kalender { --hn-ruta: var(--hn-as-plommon); }
.hn-arbetsyta .hn-ruta--historik { --hn-ruta: var(--hn-as-gra); }
.hn-arbetsyta .hn-grupp { color: var(--hn-as-dampad); font-size: 16px; font-weight: 600; letter-spacing: .04em; margin: 16px 0 6px; text-transform: uppercase; }
/* ── Fältrad: etikett grå till vänster 170 px, värdet till höger, tunt streck — under varandra på mobil. */
.hn-arbetsyta .hn-faltrad { border-bottom: 1px solid var(--hn-as-kant); display: grid; gap: 2px 16px; grid-template-columns: 1fr; padding: 8px 0; }
.hn-arbetsyta .hn-faltrad:last-child { border-bottom: 0; }
.hn-arbetsyta .hn-faltrad > :first-child { color: var(--hn-as-dampad); }
/* ── Fält: etikett ovanför, kant, radie 8 px, fokus marinblå + ljus ring; fel bara när skicket inte gick igenom. */
.hn-arbetsyta .hn-falt { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; }
.hn-arbetsyta .hn-falt > label { color: var(--hn-as-marin); font-size: 20px; font-weight: 600; }
.hn-arbetsyta .hn-falt :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
background: var(--hn-as-vit); border: 2px solid var(--hn-as-stang-text); border-radius: 8px; box-shadow: none; color: var(--hn-as-granit);
font-family: inherit; font-size: 18px; line-height: 1.4; max-width: 100%; padding: 10px 12px; width: 100%;
}
.hn-arbetsyta .hn-falt :is(input, select, textarea):focus { border-color: var(--hn-as-marin); box-shadow: 0 0 0 3px var(--hn-as-ring); outline: none; }
.hn-arbetsyta .hn-falt__hjalp { color: var(--hn-as-stang-text); font-size: 18px; margin: 0; }
.hn-arbetsyta .hn-falt__fel { color: var(--hn-as-rod); display: none; font-size: 18px; font-weight: 500; margin: 0; }
.hn-arbetsyta .hn-falt.is-fel .hn-falt__fel { display: block; }
.hn-arbetsyta .hn-falt.is-fel :is(input, select, textarea) { border-color: var(--hn-as-rod); }
/* Rubriken när fältet är en label med texten i en span, en fieldset med legend eller en grupp (kundformulären, steg 6). */
.hn-arbetsyta :is(label.hn-falt > span:first-child, .hn-falt > legend, .hn-falt__rubrik) { color: var(--hn-as-marin); font-size: 20px; font-weight: 600; }
/* Kundens formulär: korta fält två i bredd från 768 px, långa (hn-faltgrid__bred) över hela raden. */
.hn-arbetsyta .hn-faltgrid { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
.hn-arbetsyta .hn-fot { align-items: center; border-top: 1px solid var(--hn-as-kant); display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; }
/* ── Status = prick + text. Bricka (filter) = radie 6 px, vald fylld. */
.hn-arbetsyta .hn-prick { --hn-prick: var(--hn-as-gra); align-items: center; display: inline-flex; gap: 8px; }
.hn-arbetsyta .hn-prick::before { background: var(--hn-prick); border-radius: 50%; content: ""; flex: none; height: 10px; width: 10px; }
.hn-arbetsyta .hn-prick--klar { --hn-prick: var(--hn-as-havsgron); }
.hn-arbetsyta .hn-prick--vantar { --hn-prick: var(--hn-as-vinrod); }
.hn-arbetsyta .hn-prick--fel { --hn-prick: var(--hn-as-rod); }
.hn-arbetsyta .hn-prick--pagar { --hn-prick: var(--hn-as-marin); }
/* ── Notis/kvitto: vit, 2 px kant och ikon i sin färg, ingen platta. */
.hn-arbetsyta .hn-notis { --hn-notis: var(--hn-as-marin); --hn-ikon: var(--hn-ikon-info); align-items: flex-start; background: var(--hn-as-vit); border: 2px solid var(--hn-notis); border-radius: 8px; display: flex; gap: 10px; margin: 0 0 18px; padding: 12px 14px; }
.hn-arbetsyta .hn-notis::before { color: var(--hn-notis); margin-top: 2px; }
.hn-arbetsyta .hn-notis p { margin: 0 0 6px; }
.hn-arbetsyta .hn-notis > :last-child { margin-bottom: 0; }
.hn-arbetsyta .hn-notis--klar { --hn-notis: var(--hn-as-havsgron); --hn-ikon: var(--hn-ikon-bock); }
.hn-arbetsyta .hn-notis--fel { --hn-notis: var(--hn-as-rod); --hn-ikon: var(--hn-ikon-fel); }
.hn-arbetsyta .hn-notis[hidden] { display: none; }
/* ── Tabell: 2 px kant, små grå rubriker, belopp högerställda; rullar i sidled på mobil. */
.hn-arbetsyta .hn-tabell { background: var(--hn-as-vit); border: 2px solid var(--hn-as-kant); border-collapse: separate; border-radius: 8px; border-spacing: 0; display: block; margin: 0 0 20px; overflow-x: auto; width: 100%; }
.hn-arbetsyta .hn-tabell :is(th, td) { border-bottom: 1px solid var(--hn-as-kant); padding: 10px 14px; text-align: left; vertical-align: middle; }
.hn-arbetsyta .hn-tabell thead th { color: var(--hn-as-gra); font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hn-arbetsyta .hn-tabell tbody tr:last-child > * { border-bottom: 0; }
.hn-arbetsyta .hn-tabell .hn-tabell__belopp { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
/* ── Sök/väljare: EN ruta med förstoringsglas och antal, träffarna direkt under. */
.hn-arbetsyta .hn-valjare { margin: 0 0 18px; position: relative; }
.hn-arbetsyta .hn-valjare__ruta { --hn-ikon: var(--hn-ikon-sok); align-items: center; background: var(--hn-as-vit); border: 2px solid var(--hn-as-stang-text); border-radius: 8px; color: var(--hn-as-gra); display: flex; gap: 8px; padding: 0 12px; }
.hn-arbetsyta .hn-valjare__ruta:focus-within { border-color: var(--hn-as-marin); box-shadow: 0 0 0 3px var(--hn-as-ring); }
.hn-arbetsyta .hn-valjare__ruta input { background: none; border: 0; box-shadow: none; color: var(--hn-as-granit); flex: 1; font: inherit; min-width: 0; outline: none; padding: 10px 0; }
.hn-arbetsyta .hn-valjare__antal { flex: none; font-size: 16px; white-space: nowrap; }
.hn-arbetsyta .hn-valjare__lista { background: var(--hn-as-vit); border: 1.5px solid var(--hn-as-faltkant); border-radius: 8px; list-style: none; margin: 4px 0 0; max-height: 320px; overflow-y: auto; padding: 4px; }
.hn-arbetsyta .hn-valjare__traff { align-items: baseline; background: none; border: 0; border-radius: 6px; color: var(--hn-as-granit); cursor: pointer; display: flex; flex-wrap: wrap; font: inherit; gap: 4px 10px; padding: 10px; text-align: left; width: 100%; }
.hn-arbetsyta .hn-valjare__namn { font-weight: 500; }
.hn-arbetsyta .hn-valjare__ort { color: var(--hn-as-gra); font-size: 16px; }
@media (hover: hover) { .hn-arbetsyta .hn-valjare__traff:hover { background: color-mix(in srgb, var(--hn-as-gra) 8%, var(--hn-as-vit)); } }
.hn-arbetsyta .hn-valjare__traff:focus-visible { outline: 3px solid var(--hn-as-marin); outline-offset: -3px; }
.hn-arbetsyta .hn-valjare__traff:is(.is-vald, [aria-selected="true"]) { background: color-mix(in srgb, var(--hn-as-gra) 15%, var(--hn-as-vit)); }
/* ── Nyckeltal: vita rutor i rad, siffran stor i sortens färg, etiketten grå under. */
.hn-arbetsyta .hn-tal { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0 0 20px; }
.hn-arbetsyta .hn-tal__ruta { --hn-tal: var(--hn-as-marin); border: 2px solid var(--hn-as-kant); border-radius: 8px; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.hn-arbetsyta .hn-tal__siffra { color: var(--hn-tal); font-size: 28px; font-variant-numeric: tabular-nums; font-weight: 600; line-height: 1.15; }
.hn-arbetsyta .hn-tal__etikett { color: var(--hn-as-gra); font-size: 16px; }
.hn-arbetsyta .hn-tal__ruta--anteckning { --hn-tal: var(--hn-as-vinrod); }
.hn-arbetsyta .hn-tal__ruta--pengar { --hn-tal: var(--hn-as-havsgron); }
.hn-arbetsyta .hn-tal__ruta--kalender { --hn-tal: var(--hn-as-plommon); }
.hn-arbetsyta .hn-tal__ruta--historik { --hn-tal: var(--hn-as-gra); }
/* ── Kort, tomt läge, «Inte sparat än», steg. */
.hn-arbetsyta .hn-listkort { align-items: center; border: 2px solid var(--hn-as-kant); border-radius: 8px; display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 0 0 10px; padding: 12px 14px; }
.hn-arbetsyta .hn-listkort__bild { align-items: center; background: var(--hn-as-marin); border-radius: 8px; color: var(--hn-as-vit); display: inline-flex; flex: none; font-weight: 600; height: 48px; justify-content: center; overflow: hidden; width: 48px; }
.hn-arbetsyta .hn-listkort__bild img { background: var(--hn-as-vit); height: 100%; object-fit: contain; width: 100%; }
.hn-arbetsyta .hn-listkort__text { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 180px; }
.hn-arbetsyta .hn-listkort__namn { font-weight: 600; }
.hn-arbetsyta .hn-listkort__rad { align-items: center; color: var(--hn-as-gra); display: flex; flex-wrap: wrap; font-size: 16px; gap: 4px 8px; }
.hn-arbetsyta .hn-tomt { align-items: center; border: 2px dashed var(--hn-as-faltkant); border-radius: 8px; color: var(--hn-as-gra); display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 0 0 16px; padding: 16px; }
.hn-arbetsyta .hn-tomt p { flex: 1; margin: 0; min-width: 160px; }
.hn-arbetsyta .hn-osparat { align-items: center; color: var(--hn-as-vinrod); display: inline-flex; font-size: 16px; font-weight: 500; gap: 8px; }
.hn-arbetsyta .hn-osparat::before { background: currentColor; border-radius: 50%; content: ""; height: 10px; width: 10px; }
.hn-arbetsyta .hn-osparat[hidden] { display: none; }
.hn-arbetsyta .hn-steg { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.hn-arbetsyta .hn-steg__steg { --hn-ikon: var(--hn-ikon-bock); align-items: center; border: 2px solid var(--hn-as-kant); border-radius: 8px; color: var(--hn-as-gra); display: inline-flex; font-size: 16px; font-weight: 500; gap: 6px; margin: 0; padding: 6px 12px; }
.hn-arbetsyta .hn-steg__steg.is-gjort { border-color: var(--hn-as-havsgron); color: var(--hn-as-havsgron); }
.hn-arbetsyta .hn-steg__steg.is-gjort::before { height: 18px; width: 18px; }
.hn-arbetsyta .hn-steg__steg:is(.is-nu, [aria-current]) { background: var(--hn-as-marin); border-color: var(--hn-as-marin); color: var(--hn-as-vit); }
/* ── Hopfällbar: namnet till vänster, riktiga Öppna/Stäng-knappar till höger (ordet byts med display, aldrig ::after).
Namn ÖppnaStäng
…