/* ============================================================================
 * Det lugna utseendet (okt 2026, admin docs/NU.md leverans 3) — gäller bara under <html data-look="lugn"> (js/myceon-look.js).
 * ============================================================================
 * Färre former, mer luft: ett typsnitt med karaktär (Schibsted Grotesk), en varm ljus grund, bläck i stället för blått,
 * och EN accent — lingon — för det som kräver dig (Att göra, det första i Nu). Grunden skiftar svagt med dagen
 * (data-daypart). Mörkt läge behåller sin palett; där byts bara typsnittet och accenten för det som kräver dig.
 * Tokens: datorns (app.css: --bg-*, --text-*, --border-*, --accent*) och mobilens (m.css: --bg, --surface, --ink …). */

/* ── Typsnittet (ljust och mörkt) ── */
html[data-look="lugn"] {
  --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --lugn-lingon: #A8324A;
  --lugn-lingon-hover: #8F2A3F;
}
html[data-look="lugn"] body { font-family: var(--font-sans); }

/* ── Datorn, ljust ── */
html[data-look="lugn"]:not([data-theme="dark"]) {
  --bg-base: #F3F5F0; --bg-elevated: #F7F8F4; --bg-surface: #FBFCFA; --bg-inset: #E9EDE5; --bg-hover: #E9EDE5; --bg-active: #E2E7DD;
  --border-hairline: rgba(31, 36, 32, .04); --border-subtle: rgba(31, 36, 32, .07); --border-default: rgba(31, 36, 32, .12); --border-strong: rgba(31, 36, 32, .2);
  /* Kontrasten höjd 28 okt 2026: dämpad text ≥ 7:1 och den svagaste ≥ 5:1 mot grunden. */ --text-primary: #161A17; --text-secondary: #2F352E; --text-muted: #495047; --text-faint: #5C6359;
  --accent: #2E3B33; --accent-hover: #1F2420; --accent-light: #4A5A4F; --accent-subtle: rgba(46, 59, 51, .08); --accent-wash: rgba(46, 59, 51, .04);
  --accent-hover-color: var(--accent-hover);
  --shadow-sm: 0 1px 0 rgba(31, 36, 32, .04); --shadow-md: 0 2px 10px rgba(31, 36, 32, .06); --shadow-lg: 0 8px 24px rgba(31, 36, 32, .08);
  background: var(--bg-base);
}
/* Grunden skiftar med dagen — så lite att man märker det först när man jämför. */
html[data-look="lugn"]:not([data-theme="dark"])[data-daypart="dag"] { --bg-base: #F3F4F0; }
html[data-look="lugn"]:not([data-theme="dark"])[data-daypart="eftermiddag"] { --bg-base: #F1F1F2; --bg-elevated: #F6F6F7; }
html[data-look="lugn"]:not([data-theme="dark"])[data-daypart="kvall"],
html[data-look="lugn"]:not([data-theme="dark"])[data-daypart="natt"] { --bg-base: #EEEDF2; --bg-elevated: #F4F3F7; --bg-hover: #E5E4EB; --bg-inset: #E5E4EB; }

/* ── Mobilen, ljust (m.css har mörkt i en mediafråga — den lämnas orörd) ── */
@media not all and (prefers-color-scheme: dark) {
  html[data-look="lugn"] {
    --bg: #F3F5F0; --surface: #FBFCFA; --raise: #FBFCFA; --ink: #161A17; --soft: #2F352E; --faint: #495047;
    --line: rgba(31, 36, 32, .08); --line-strong: rgba(31, 36, 32, .16);
    --accent: #2E3B33; --accent-ink: #ffffff; --accent-text: #2E3B33; --accent-soft: rgba(46, 59, 51, .08);
    --shadow: 0 8px 28px rgba(31, 36, 32, .10);
  }
  html[data-look="lugn"][data-daypart="kvall"], html[data-look="lugn"][data-daypart="natt"] { --bg: #EEEDF2; --surface: #F8F7FA; --raise: #F8F7FA; }
}
html[data-look="lugn"][data-theme="dark"] { --lugn-lingon: #E07A90; --lugn-lingon-hover: #EB93A6; }
@media (prefers-color-scheme: dark) { html[data-look="lugn"]:not([data-theme="light"]) .m-todo { --lugn-lingon: #E07A90; --lugn-lingon-hover: #EB93A6; } }

/* ── Att göra och Nu: lingon för det som kräver dig, inga versaler, inga ramar ── */
html[data-look="lugn"] .att { --att-accent: var(--lugn-lingon); gap: 26px; }
html[data-look="lugn"] .att-act.is-primary:hover { background: var(--lugn-lingon-hover); border-color: var(--lugn-lingon-hover); color: #fff; }
html[data-look="lugn"] .att-gh { text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 600; }
html[data-look="lugn"] .att-grp.is-approval .att-gh, html[data-look="lugn"] .att-grp.is-confirm .att-gh { color: var(--att-muted); }
html[data-look="lugn"] .att-row { border-radius: 12px; }
html[data-look="lugn"] .att-what { font-size: 15px; }
html[data-look="lugn"] .att-focus .att-row.is-focus { box-shadow: none; border-radius: 20px; padding: 24px 26px 20px; }
html[data-look="lugn"] .att-row.is-focus .att-what { font-size: 20px; letter-spacing: -0.01em; }
html[data-look="lugn"] .att-row.is-focus .att-f-meta .att-f-kind::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lugn-lingon); margin-right: 8px; vertical-align: 1px; }
html[data-look="lugn"] .att-row.is-focus .att-act { height: 44px; border-radius: 12px; padding: 0 20px; font-size: 15px; }
html[data-look="lugn"] .att-row.is-focus .att-act:not(.is-primary) { border-color: transparent; background: transparent; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 4px; }
html[data-look="lugn"] .att-calm-h { font-size: 20px; font-weight: 500; }

/* ── Hem (datorn): meningen är det enda stora ── */
html[data-look="lugn"] .ms-nu { gap: 34px; padding-top: 48px; }
html[data-look="lugn"] .ms-nu .nu-lead { font-size: 30px; line-height: 1.28; font-weight: 500; letter-spacing: -0.015em; }
html[data-look="lugn"] .ms-nu .nu-hello { font-weight: 500; }
html[data-look="lugn"] .ms-nu .nu-head.is-calm .nu-lead { font-size: 44px; line-height: 1.12; letter-spacing: -0.025em; }
@media (max-width: 640px) { html[data-look="lugn"] .ms-nu .nu-lead { font-size: 22px; } html[data-look="lugn"] .ms-nu .nu-head.is-calm .nu-lead { font-size: 28px; } }

/* ── Mobilens hem ── */
html[data-look="lugn"] .mh-lead { font-size: 1.3rem; line-height: 1.3; letter-spacing: -0.01em; }
html[data-look="lugn"] .mh-lead.is-calm { font-size: 1.6rem; }

@media (prefers-reduced-motion: no-preference) {
  html[data-look="lugn"] body { transition: background-color .6s ease; }
}

/* Raderna under det första: knapparna tysta (bläck), lingon bara i det första. */
html[data-look="lugn"] .att-grp .att-act { background: transparent; border-color: var(--att-line2); color: var(--att-text); }
html[data-look="lugn"] .att-grp .att-act.is-primary { background: transparent; border-color: var(--att-line2); color: var(--att-text); font-weight: 600; }
html[data-look="lugn"] .att-grp .att-act:hover, html[data-look="lugn"] .att-grp .att-act.is-primary:hover { background: var(--att-hover); border-color: var(--att-line2); color: var(--att-text); }
html[data-look="lugn"] .att-grp .att-row.is-late .att-when { color: var(--lugn-lingon); }

/* Leverans 8 (admin docs/NU.md): sidomenyns räknare blir prickar — talet syns när man håller över (och för skärmläsare). */
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) .ms-badge { min-width: 0; width: 7px; height: 7px; padding: 0; font-size: 0; line-height: 0; color: transparent; background: var(--text-muted); box-shadow: none; }
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) .ms-item[data-place="hem"] .ms-badge { background: var(--lugn-lingon); }
/* Leverans 14 (admin docs/NU.md): bara den röda pricken (något väntar på dig) syns i vila — de andra platsernas prickar
   när pekaren eller fokus är i kolumnen (talet på raden som förut). Uppläsningen säger antalet som förut. */
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) #ms-nav:not(:hover):not(:focus-within) .ms-item:not([data-place="hem"]) .ms-badge { opacity: 0; }
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) .ms-badge { transition: opacity .15s ease; }
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) .ms-item:hover .ms-badge,
html[data-look="lugn"] #myceon-shell:not([data-rail="icons"]) .ms-item:focus-visible .ms-badge { width: auto; min-width: 20px; height: 18px; padding: 0 6px; font-size: 11px; line-height: 18px; color: #fff; background: var(--text-secondary); }
/* Mobilens nedre rad (leverans 10): prickar i stället för tal (talet läses fortfarande upp — data-badge-vh). */
html[data-look="lugn"] .m-badge { min-width: 0; width: 0.5rem; height: 0.5rem; padding: 0; border-radius: 50%; font-size: 0; line-height: 0; color: transparent; background: var(--faint, #6b7280); top: 0.5rem; left: calc(50% + 0.75rem); }
html[data-look="lugn"] .m-badge[data-badge="myceon"] { background: var(--lugn-lingon); }
html[data-look="lugn"] .mh-todo .att-focus .att-act.is-primary { background: var(--lugn-lingon); border-color: var(--lugn-lingon); color: #fff; }

/* ════════════════════════════════════════════════════════════════════════════
 * Det gemensamma (inventeringen 20 okt 2026, admin docs/NU.md leverans 15): det som gick igen i alla vyer.
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Lägena inom paletten: fel är lingon, varning en dämpad ockra, bra en mossgrön — aldrig signalorange eller -grönt.
 *    Alla klarar 4,5:1 mot grunden. Mörkt läge: bläckgrön accent i stället för blått (vit text 4,8:1). ── */
html[data-look="lugn"]:not([data-theme="dark"]) {
  --success: #3E6B4F; --success-subtle: rgba(62, 107, 79, .09);
  --warning: #7A5C22; --warning-subtle: rgba(122, 92, 34, .09);
  --error: #A8324A; --error-subtle: rgba(168, 50, 74, .08);
  --gold: #7A5C22; --gold-subtle: rgba(122, 92, 34, .09); --gold-wash: rgba(122, 92, 34, .05); --gold-light: rgba(122, 92, 34, .22);
}
html[data-look="lugn"][data-theme="dark"] {
  --bg-base: #121513; --bg-elevated: #171a18; --bg-surface: #1b1f1c; --bg-inset: #232824; --bg-hover: #232824; --bg-active: #2a302b;
  --text-primary: #F0F2EE; --text-secondary: #D2D7CF; --text-muted: #B0B7AD; --text-faint: #899086;
  --accent: #5A7A67; --accent-hover: #6B8A77; --accent-light: #9DBBA6; --accent-subtle: rgba(157, 187, 166, .14); --accent-wash: rgba(157, 187, 166, .07);
  --accent-hover-color: var(--accent-hover);
  --success: #9DBBA6; --success-subtle: rgba(157, 187, 166, .14);
  --warning: #D9A35B; --warning-subtle: rgba(217, 163, 91, .14);
  --error: #E07A90; --error-subtle: rgba(224, 122, 144, .14);
  --gold: #D9A35B; --gold-subtle: rgba(217, 163, 91, .14); --gold-wash: rgba(217, 163, 91, .07); --gold-light: rgba(217, 163, 91, .28);
}
/* Mobilen sätter inget data-theme: i mörkt läge får de delade delarna (Att göra, Strömmen) datorns mörka toner, inte de
   ljusa — förut blev kortet i Nu nästan osynligt (1,6:1). */
@media (prefers-color-scheme: dark) {
  html[data-look="lugn"]:not([data-theme]) {
    --bg-base: #121513; --bg-elevated: #171a18; --bg-surface: #1b1f1c; --bg-inset: #232824; --bg-hover: #232824; --bg-active: #2a302b;
    --border-hairline: rgba(255, 255, 255, .05); --border-subtle: rgba(255, 255, 255, .09); --border-default: rgba(255, 255, 255, .14); --border-strong: rgba(255, 255, 255, .22);
    --text-primary: #F0F2EE; --text-secondary: #D2D7CF; --text-muted: #B0B7AD; --text-faint: #899086;
    --accent: #9DBBA6; --accent-hover: #B3CBBA; --accent-light: #9DBBA6; --accent-subtle: rgba(157, 187, 166, .14); --accent-wash: rgba(157, 187, 166, .07);
    --text-on-accent: #121513;
    --success: #9DBBA6; --success-subtle: rgba(157, 187, 166, .14); --warning: #D9A35B; --warning-subtle: rgba(217, 163, 91, .14);
    --error: #E07A90; --error-subtle: rgba(224, 122, 144, .14);
    /* mobilens egna */
    --bg: #121513; --surface: #1b1f1c; --raise: #202521; --ink: #F0F2EE; --soft: #D2D7CF; --faint: #B0B7AD;
    --accent-ink: #121513; --accent-text: #9DBBA6; --accent-soft: rgba(157, 187, 166, .14);
    --warn: #D9A35B; --warn-ink: #D9A35B; --warn-soft: rgba(217, 163, 91, .14); --good: #9DBBA6; --good-soft: rgba(157, 187, 166, .14);
    --danger: #E07A90; --read: #9DBBA6; --snooze: #D9A35B;
  }
  /* Mobilens accent är ljus i mörkt läge: texten på den mörk (förut vit, 2:1) — rummen, inläggen, Arbete, mötena, Tid. */
  html[data-look="lugn"]:not([data-theme]) .rm-jump, html[data-look="lugn"]:not([data-theme]) .rm-send, html[data-look="lugn"]:not([data-theme]) .rm-btn-primary,
  html[data-look="lugn"]:not([data-theme]) .rm-badge, html[data-look="lugn"]:not([data-theme]) .so-btn.is-primary, html[data-look="lugn"]:not([data-theme]) .ar-tl-bar,
  html[data-look="lugn"]:not([data-theme]) .mt-ring-av, html[data-look="lugn"]:not([data-theme]) .mr-ai-av { color: #121513 !important; }
}
/* Datorns mörka läge: knappen i Nu på det ljusa lingon har mörk text (vit gav 2,6:1). */
html[data-look="lugn"][data-theme="dark"] .att-act.is-primary, html[data-look="lugn"][data-theme="dark"] .att-act.is-primary:hover { color: #121513; }
/* Mobilen ljust: samma lägen som datorn. */
@media not all and (prefers-color-scheme: dark) {
  html[data-look="lugn"]:not([data-theme]) { --warn: #7A5C22; --warn-ink: #7A5C22; --warn-soft: rgba(122, 92, 34, .09); --good: #3E6B4F; --good-soft: rgba(62, 107, 79, .09); --danger: #A8324A; --read: #2E3B33; --snooze: #7A5C22; }
}

/* De som hade egna färger: väntar svar, sena uppgifter, Tid och Arbete. */
html[data-look="lugn"] .pc-awaiting { color: var(--warning) !important; background: transparent !important; }
html[data-look="lugn"] .ar-late, html[data-look="lugn"] .ar-bad { color: var(--error); }
html[data-look="lugn"] { --ar-bad: var(--error); }
html[data-look="lugn"] .tv-root,
html[data-look="lugn"] .tv-dialog-wrap,
html[data-look="lugn"] .tv-peek,
html[data-look="lugn"] .bk-admin {
  --tv-accent: var(--accent); --tv-meet: var(--text-secondary); --tv-mine: var(--text-secondary); --tv-theirs: var(--text-muted); --tv-eco: var(--warning);
  --tv-appr: var(--text-secondary); --tv-book: var(--text-secondary); --tv-good: var(--success); --tv-full: var(--error); --tv-sugg: var(--text-muted);
  --tv-fam: var(--text-secondary); --tv-need: var(--error); --tv-focus: var(--text-muted);
}
/* Sidomenyns räknare i ikonläget (Bygg): lingonprick, aldrig signalröd. */
html[data-look="lugn"] #myceon-shell[data-rail="icons"] .ms-badge { background: var(--text-muted); }
html[data-look="lugn"] #myceon-shell[data-rail="icons"] .ms-item[data-place="hem"] .ms-badge { background: var(--lugn-lingon); }

/* ── Belopp: typsnittets jämnbreda siffror gav kommat en hel siffras bredd ("050 , 00"). Jämnbreda bara i tabeller. ── */
html[data-look="lugn"] body *:not(td):not(th):not(td *):not(th *):not(.tv-root *):not(.tv-peek *):not(.mtid-ev-time):not(.lg-h-day) { font-variant-numeric: normal !important; }

/* ── Ett typsnitt: Tid, möten, profilbildens initialer, villkorsdialogen. ── */
html[data-look="lugn"] .tv-root,
html[data-look="lugn"] .tv-peek,
html[data-look="lugn"] .tv-toast,
html[data-look="lugn"] .tv-help,
html[data-look="lugn"] .mt-overlay,
html[data-look="lugn"] .mr-ai-av,
html[data-look="lugn"] .user-initials,
html[data-look="lugn"] .legal-gate,
html[data-look="lugn"] .legal-gate *,
html[data-look="lugn"] .mt-overlay * { font-family: var(--font-sans); }
html[data-look="lugn"] .legal-gate-box a { color: var(--text-primary); text-underline-offset: 3px; }
html[data-look="lugn"] .legal-gate-box { border-radius: 18px; box-shadow: var(--shadow-lg); }
html[data-look="lugn"] .legal-gate-error { color: var(--error); }

/* ── Inga VERSALER: rubrikerna skrivs som text (och utan den glesa spärren som hörde till versalerna). ── */
html[data-look="lugn"] body * { text-transform: none !important; }
html[data-look="lugn"] #reg-pilot,
html[data-look="lugn"] .acct-section-title,
html[data-look="lugn"] .aicfg-section-title,
html[data-look="lugn"] .ar-side-h,
html[data-look="lugn"] .att-gh,
html[data-look="lugn"] .badge,
html[data-look="lugn"] .badge-beta,
html[data-look="lugn"] .btn.btn-publish,
html[data-look="lugn"] .buglist-detail-label,
html[data-look="lugn"] .buglist-filter-label,
html[data-look="lugn"] .buglist-sev,
html[data-look="lugn"] .buglist-triage label,
html[data-look="lugn"] .cmdk-g,
html[data-look="lugn"] .ct-col-stage h5,
html[data-look="lugn"] .ct-sec h4,
html[data-look="lugn"] .dc-label,
html[data-look="lugn"] .dc-sub-h,
html[data-look="lugn"] .dp-cat-label,
html[data-look="lugn"] .dp-dtab,
html[data-look="lugn"] .dp-grid th,
html[data-look="lugn"] .dp-group-title,
html[data-look="lugn"] .dp-layer > summary,
html[data-look="lugn"] .dp-schema-table th,
html[data-look="lugn"] .dp-tree-title,
html[data-look="lugn"] .dv-h3,
html[data-look="lugn"] .dv-slide-n,
html[data-look="lugn"] .filter-tab,
html[data-look="lugn"] .form-label,
html[data-look="lugn"] .fp-tree-section,
html[data-look="lugn"] .group-member-count,
html[data-look="lugn"] .info-label,
html[data-look="lugn"] .ip-rel-type,
html[data-look="lugn"] .ip-section-header h4,
html[data-look="lugn"] .ip-section-sub,
html[data-look="lugn"] .ip-type,
html[data-look="lugn"] .linked-item .linked-type-badge,
html[data-look="lugn"] .m-group,
html[data-look="lugn"] .m-section h2,
html[data-look="lugn"] .m-summary small,
html[data-look="lugn"] .message-role,
html[data-look="lugn"] .mh-earlier h2,
html[data-look="lugn"] .mig-dns-op,
html[data-look="lugn"] .mig-section-title,
html[data-look="lugn"] .mr-pbody h4,
html[data-look="lugn"] .mr-sh-b h4,
html[data-look="lugn"] .ms-sec h3,
html[data-look="lugn"] .mt-list-h,
html[data-look="lugn"] .mt-side h4,
html[data-look="lugn"] .mt-view-body h4,
html[data-look="lugn"] .mtid-fs legend,
html[data-look="lugn"] .mtid-psec h3,
html[data-look="lugn"] .mtid-sub,
html[data-look="lugn"] .org-doc-vis-tag,
html[data-look="lugn"] .org-modal-nav .org-nav-group,
html[data-look="lugn"] .org-rule-type-badge,
html[data-look="lugn"] .pa-nav-head,
html[data-look="lugn"] .pc-addr-tag,
html[data-look="lugn"] .pc-assist-kind,
html[data-look="lugn"] .pc-ctx-sec h4,
html[data-look="lugn"] .pc-delib-stance label,
html[data-look="lugn"] .pc-invite-section-label,
html[data-look="lugn"] .pc-pop-title,
html[data-look="lugn"] .pc-rail .rm-rail-h,
html[data-look="lugn"] .pc-rcpt-head,
html[data-look="lugn"] .pc-state-sub,
html[data-look="lugn"] .pc-who-cc,
html[data-look="lugn"] .pc-zone-header,
html[data-look="lugn"] .pcb-sec h3,
html[data-look="lugn"] .plan-badge,
html[data-look="lugn"] .platform-chat-sidebar-header,
html[data-look="lugn"] .preview-tab,
html[data-look="lugn"] .projects-group-header,
html[data-look="lugn"] .rm-side-h,
html[data-look="lugn"] .section-title,
html[data-look="lugn"] .settings-section-title,
html[data-look="lugn"] .share-invite-label,
html[data-look="lugn"] .sn-attn-kind,
html[data-look="lugn"] .ss-block-h,
html[data-look="lugn"] .ss-nav-group,
html[data-look="lugn"] .stat-label,
html[data-look="lugn"] .status-grid-label,
html[data-look="lugn"] .svc-table th,
html[data-look="lugn"] .tb-name-zone .project-label,
html[data-look="lugn"] .tv-mo-wd span,
html[data-look="lugn"] .tv-pk-h3,
html[data-look="lugn"] .tv-rail-sec h3,
html[data-look="lugn"] .tv-wg-wd,
html[data-look="lugn"] .vm-section-title,
html[data-look="lugn"] .wv-dimlab { letter-spacing: normal !important; }

/* ── Interna saker syns inte: Strömmens taggar (#relation, #kund:adress) är för sökningen, inte för ögat. ── */
html[data-look="lugn"] .org-stream-event-tags, html[data-look="lugn"] .mh-ev-tags { display: none; }
/* Strömmens Samtala-knapp: tyst, inte en svart flytande knapp. */
html[data-look="lugn"] body .org-chat-fab { background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); }
html[data-look="lugn"] body .org-chat-fab:hover { background: var(--bg-hover); }

/* ════════════════════════════════════════════════════════════════════════════
 * Vy för vy (inventeringen 20 okt 2026)
 * ════════════════════════════════════════════════════════════════════════════ */

/* ── Samtal: raderna utan kanalfärgade kanter, initialer i bläck, ingen färg i "väntar svar" utöver texten. ── */
html[data-look="lugn"] .pc-ch-item { border-left-color: transparent; }
html[data-look="lugn"] .pc-ch-item.active { border-left-color: transparent; }
html[data-look="lugn"] .pc-ch-icon, html[data-look="lugn"] .pc-avatar { background: var(--bg-inset); color: var(--text-secondary); }
html[data-look="lugn"] .pc-awaiting { font-weight: 500; }
/* Ytan bredvid listan när ingen tråd är vald: en mening. */
html[data-look="lugn"] .pc-calm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 60vh; text-align: center; }
html[data-look="lugn"] .pc-calm-t { margin: 0; font-size: 15px; color: var(--text-muted); }
html[data-look="lugn"] .pc-calm-link { border: 0; background: none; padding: 8px 6px; min-height: 40px; font: inherit; font-size: 15px; color: var(--text-primary); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 4px; cursor: pointer; }
/* Filterknappen i listans huvud. */
html[data-look="lugn"] .plh-filter { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); }
html[data-look="lugn"] .plh-filter.is-on { color: var(--text-primary); border-color: var(--border-strong); }

/* ── Nu (dator och mobil): "Allt annat" är en länk också när den är öppen; inga röda länkar i listan. ── */
html[data-look="lugn"] .att-rest { width: auto; align-self: flex-start; }
html[data-look="lugn"] .att-rest:focus-visible { outline-color: var(--text-muted); outline-offset: 4px; }
html[data-look="lugn"] .att-all { color: var(--text-secondary); }
html[data-look="lugn"] .att-grp .att-row .att-when { color: var(--text-muted); }
/* "I dag · uppdateras… · Uppdatera" under kortet: maskineriet syns inte i det lugna. */
html[data-look="lugn"] .ms-nu .tv-brief-upd, html[data-look="lugn"] .ms-nu .tv-brief-ref { display: none !important; }

/* ── Mobilens Nu som ritningen: flikarna som text, kortet över hela bredden, ingen svart ruta. ── */
html[data-look="lugn"] .mh-tabs { gap: 4px; border-bottom: 1px solid var(--line); }
html[data-look="lugn"] .mh-tab { min-height: 44px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--faint); }
html[data-look="lugn"] .mh-tab[aria-selected="true"] { background: transparent; border-color: var(--ink); color: var(--ink); font-weight: 600; }
html[data-look="lugn"] .mh-now { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
html[data-look="lugn"] .mh-now-b { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); font-weight: 600; }
html[data-look="lugn"] .mh-todo .att-focus .att-row.is-focus.mh-swr { padding: 0; border-radius: 18px; }
html[data-look="lugn"] .mh-todo .att-focus .mh-sw { padding: 20px; border-radius: 18px; border-color: transparent; gap: 10px; }

/* ── Tid: neutrala belastningsstaplar (bara en full dag i lingon). ── */
html[data-look="lugn"] .tv-load span, html[data-look="lugn"] .tv-day.is-calm .tv-load span, html[data-look="lugn"] .tv-wg-dh.is-calm .tv-load span, html[data-look="lugn"] .tv-wg-dh.is-normal .tv-load span { background: var(--text-faint); }
html[data-look="lugn"] .tv-day.is-full .tv-load span, html[data-look="lugn"] .tv-wg-dh.is-full .tv-load span { background: var(--error); }


/* ── Kontakter: relationerna i bläck, Obetalt som en vanlig siffra (fakturan står redan under Nu med …). ── */
html[data-look="lugn"] .ct-rel, html[data-look="lugn"] .ct-rel-leverantor, html[data-look="lugn"] .ct-rel-radgivare, html[data-look="lugn"] .ct-rel-partner { background: var(--bg-inset); color: var(--text-secondary); }
html[data-look="lugn"] .ct-stat.is-warn { background: var(--bg-surface); border-color: var(--border-subtle); }
html[data-look="lugn"] .ct-stat.is-warn strong { color: var(--error); }

/* ── Ekonomi: inga signalfärger i siffrorna; lägena som text. ── */
html[data-look="lugn"] .eco-stat strong.is-in, html[data-look="lugn"] .bank-tx-amt.is-in { color: var(--text-primary); }
html[data-look="lugn"] .svc-pill { background: transparent; padding-inline: 0; }
html[data-look="lugn"] .svc-ok { color: var(--text-muted); }
html[data-look="lugn"] .svc-warn { color: var(--error); }
html[data-look="lugn"] .eco-calm-note { margin: 18px 0 0; color: var(--text-secondary); font-size: 14.5px; }
html[data-look="lugn"] .m-pa-big { color: var(--ink) !important; }

/* ── Inställningar: farozonen är en tyst ruta, inte ett rött block (knappen själv är fortfarande tydlig). ── */
html[data-look="lugn"] .danger-zone { background: transparent; border-color: var(--border-default); }
html[data-look="lugn"] .danger-zone .settings-section-title { color: var(--text-secondary); }
html[data-look="lugn"] .btn-danger { background: var(--error); border-color: var(--error); }
html[data-look="lugn"] .btn-danger-outline { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }

/* ── Väven: dimensionerna i dämpade toner ur paletten (formen skiljer dem också åt), brott i lingon. ── */
html[data-look="lugn"]:not([data-theme="dark"]) .wv,
html[data-look="lugn"]:not([data-theme="dark"]) .wv-peek,
html[data-look="lugn"]:not([data-theme="dark"]) .wv-overlay,
html[data-look="lugn"]:not([data-theme="dark"]) .wv-scrim {
  --wv-t-line: #8A8F86; --wv-t-fill: #F1F2EE; --wv-t-ink: #2E3330;
  --wv-i-line: #6F8796; --wv-i-fill: #EEF2F4; --wv-i-ink: #2C3B44;
  --wv-n-line: #8E7A93; --wv-n-fill: #F3F0F4; --wv-n-ink: #3F3343;
  --wv-f-line: #9A7B52; --wv-f-fill: #F5F1EA; --wv-f-ink: #4A3A22;
  --wv-r-line: #6E8A78; --wv-r-fill: #EEF3EF; --wv-r-ink: #2D4134;
  --wv-thread: #9AA79E; --wv-break: var(--lugn-lingon); --wv-badge: var(--lugn-lingon);
  --wv-lens-bg: var(--bg-inset); --wv-lens-ink: var(--text-primary); --wv-accent: var(--accent);
}
html[data-look="lugn"][data-theme="dark"] .wv,
html[data-look="lugn"][data-theme="dark"] .wv-peek,
html[data-look="lugn"][data-theme="dark"] .wv-overlay,
html[data-look="lugn"][data-theme="dark"] .wv-scrim {
  --wv-t-line: #8A8F86; --wv-t-fill: #20241f; --wv-t-ink: #DADDD7;
  --wv-i-line: #8BA2B0; --wv-i-fill: #1d2427; --wv-i-ink: #D3DEE5;
  --wv-n-line: #A894AD; --wv-n-fill: #241f26; --wv-n-ink: #E3D9E6;
  --wv-f-line: #B8996F; --wv-f-fill: #26211a; --wv-f-ink: #EADCC8;
  --wv-r-line: #8BA996; --wv-r-fill: #1c241f; --wv-r-ink: #D3E3D8;
  --wv-thread: #6F7C73; --wv-break: #E07A90; --wv-badge: #E07A90;
}

/* ── Sociala medier: länken i bläck (inte webbläsarens blå). ── */
html[data-look="lugn"] .so-dim a, html[data-look="lugn"] .so-settings a { color: var(--text-primary); text-underline-offset: 3px; }

/* ── Länkar utan egen stil (förut webbläsarens blå #0000ee): bläck med understrykning. ── */
html[data-look="lugn"] a:not([class]):not(.message-content a):not(.wn-item a):not(.lg-xorg a) { color: var(--text-primary); text-decoration-line: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
html[data-look="lugn"] a:not([class]):not(.message-content a):not(.wn-item a):not(.lg-xorg a):hover { text-decoration-color: currentColor; }

/* Tid: raden om posten när den inte har något nytt att säga — bara en tyst länk "Läs in igen". */
html[data-look="lugn"] .tv-status.is-quiet { border: 0; background: transparent; padding: 0; min-height: 0; justify-content: flex-end; margin-bottom: 6px; }

/* Leverans 16 (admin docs/NU.md): raderna bryts i stället för att sluta i "…" — hela meningen syns. */
html[data-look="lugn"] .att-what, html[data-look="lugn"] .att-sub, html[data-look="lugn"] .pcb-what, html[data-look="lugn"] .pcb-sub,
html[data-look="lugn"] .tv-flag-t, html[data-look="lugn"] .tv-card .tv-s { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }