/* Tessir: felles stil (README avsnitt 5). Foreløpig brukt av Tessir Publish; Studio og Plan tar den i bruk når de bygges om.
   Alt er avgrenset til .t-app, så editoren (Inter, app.css) ikke påvirkes. Farger brukes ALLTID via variablene under,
   aldri som faste verdier i publish.css eller andre områders CSS. Limegrønt brukes aldri som tekst på lys bakgrunn. */

.t-app {
  /* ── Flater og linjer ── */
  --t-bg: #f4f3ee;
  --t-card: #fff;
  --t-line: #e6e4dc;
  --t-divider: #eceae3;
  --t-soft-1: #f8f7f3;
  --t-soft-2: #f1efe8;
  --t-soft-3: #ebe9e1;
  /* ── Tekst og mørk flate («ink», skoggrønn) ── */
  --t-ink: #1f3a34;
  --t-ink-hover: #2c4f47;
  --t-on-ink: #fff;
  --t-text-2: #4a524f;
  --t-text-3: #6b7177;
  --t-text-4: #9a9d97;
  /* ── Aksenter ── */
  --t-lime: #d4ff3f;
  --t-mint: #6fdcae;
  --t-mint-tint: #e3f7ee;
  --t-product: #0f8a5f;
  --t-link: #0f6b4c;
  /* ── Status ── */
  --t-green-bg: #e5f5ec;  --t-green: #12804a;
  --t-amber-bg: #fff8e6;  --t-amber: #6b4e00;  --t-amber-line: #e0b64a;
  --t-red-bg: #fde9ed;    --t-red: #c0264a;    --t-red-text: #b42318;
  --t-weak-bg: #ffe3d9;   --t-weak: #9a2d0e;
  /* Signalprikker på mørk flate (stripen på Status): lysere enn statusfargene, så de synes mot skoggrønt */
  --t-sig-green: #6fdcae; --t-sig-amber: #ffd36b; --t-sig-red: #ff8a7a;
  --t-on-ink-line: rgba(255, 255, 255, .16);
  /* ── Kampanjene A, B, C (bakgrunn / tekst / kant) ── */
  --t-camp-a-bg: #eefbc4; --t-camp-a: #3d4a00; --t-camp-a-line: #c9ec4a;
  --t-camp-b-bg: #e5f5ec; --t-camp-b: #12804a; --t-camp-b-line: #a9dcbf;
  --t-camp-c-bg: #f1efe8; --t-camp-c: #5d6360; --t-camp-c-line: #dcd9cf;
  /* ── Form ── */
  --t-r-card: 18px;
  --t-r-surface: 14px;
  --t-r-input: 12px;
  --t-r-pill: 99px;
  --t-shadow-line: 0 0 0 1px var(--t-line);
  --t-shadow-hover: 0 2px 8px rgba(31, 58, 52, .14);
  --t-shadow-menu: 0 16px 40px rgba(31, 58, 52, .16);
  --t-shadow-panel: -12px 0 32px rgba(31, 58, 52, .14), -1px 0 0 var(--t-line);
  --t-scrim: rgba(31, 58, 52, .55);
  --t-top-h: 64px;
  --t-font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  font-family: var(--t-font);
  font-size: 14px;
  line-height: 1.45;
  color: var(--t-ink);
  background: var(--t-bg);
  -webkit-font-smoothing: antialiased;
}
.t-app *, .t-app *::before, .t-app *::after { box-sizing: border-box; }
.t-app [hidden] { display: none !important; }
.t-app button { font: inherit; color: inherit; }
.t-app :focus-visible { outline: 2px solid var(--t-product); outline-offset: 2px; }
.t-app .t-panel:focus, .t-app .t-modal-card:focus { outline: none; }   /* panelet får fokus når det åpnes (for Esc og skjermlesere), men skal ikke få en ramme */

/* ── Typografi ── */
.t-app .t-h1 { margin: 0; font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; color: var(--t-ink); }
.t-app .t-h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--t-ink); }
.t-app .t-lead { margin: 0; font-size: 13.5px; color: var(--t-text-3); }
.t-app .t-small { font-size: 12px; color: var(--t-text-3); }
.t-app .t-num { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.04em; }
.t-app a { color: var(--t-link); }

/* ── Toppmeny (64 px, sticky) ── */
.t-app .t-top { position: sticky; top: 0; z-index: 50; flex: none; display: flex; align-items: center; gap: 20px; height: var(--t-top-h); padding: 0 32px; background: var(--t-bg); box-shadow: inset 0 -1px 0 var(--t-line); }
.t-app .t-spacer { flex: 1; }

/* Områdeknappen: logo, ordmerket «tessir» og produktnavnet under */
.t-app .t-area { position: relative; flex: none; }
.t-app .t-area-toggle { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 10px 0 4px; border: none; border-radius: var(--t-r-pill); background: none; color: var(--t-ink); cursor: pointer; }
.t-app .t-area.has-areas .t-area-toggle:hover, .t-app .t-area.is-open .t-area-toggle { background: var(--t-soft-3); }
.t-app .t-area:not(.has-areas) .t-area-toggle { cursor: default; }
.t-app .t-area:not(.has-areas) .t-area-caret { display: none; }
.t-app .t-logo { width: 30px; height: 30px; display: block; flex: none; }
.t-app .t-area-name { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.t-app .t-wordmark { font-size: 19px; font-weight: 800; letter-spacing: -0.04em; color: var(--t-ink); }
.t-app .t-product { font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--t-product); }
.t-app .t-area-caret { font-size: 10px; color: var(--t-text-4); }

/* Områdemenyen (320 px) */
.t-app .t-area-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 71; width: 320px; padding: 8px; border-radius: var(--t-r-card); background: var(--t-card); box-shadow: var(--t-shadow-line), var(--t-shadow-menu); display: flex; flex-direction: column; gap: 2px; }
.t-app .t-area-menu-head { padding: 6px 10px 8px; font-size: 15px; font-weight: 800; letter-spacing: -0.03em; color: var(--t-ink); }
.t-app .t-area-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: none; border-radius: var(--t-r-surface); background: none; color: var(--t-ink); text-align: left; cursor: pointer; }
.t-app .t-area-row:hover, .t-app .t-area-row:focus-visible { background: var(--t-bg); }
.t-app .t-area-row.is-current { background: var(--t-soft-1); }
.t-app .t-area-row.is-soon { cursor: default; }
.t-app .t-area-row.is-soon:hover { background: none; }
.t-app .t-area-icon { width: 36px; height: 36px; flex: none; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; background: var(--t-soft-2); color: var(--t-ink); }
.t-app .t-area-row.is-current .t-area-icon { background: var(--t-ink); color: var(--t-lime); }
.t-app .t-area-row.is-soon .t-area-icon { color: var(--t-text-4); }
.t-app .t-area-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.t-app .t-area-title { font-size: 14px; font-weight: 700; color: var(--t-product); }
.t-app .t-area-row.is-soon .t-area-title { color: var(--t-text-3); }
.t-app .t-area-desc { font-size: 12px; color: var(--t-text-3); }
.t-app .t-area-check { width: 22px; height: 22px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; background: var(--t-lime); color: var(--t-ink); }
.t-app .t-soon { height: 20px; padding: 0 8px; flex: none; border-radius: var(--t-r-pill); display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; background: var(--t-soft-2); color: var(--t-text-3); }

/* Fanene: piller i en hvit pille. Antallet vises bare på valgt fane. */
.t-app .t-tabs { display: flex; gap: 2px; padding: 4px; min-width: 0; flex: 0 1 auto; overflow-x: auto; scrollbar-width: none; border-radius: var(--t-r-pill); background: var(--t-card); box-shadow: var(--t-shadow-line); }
.t-app .t-tabs::-webkit-scrollbar { display: none; }
.t-app .t-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: none; border-radius: var(--t-r-pill); background: none; color: var(--t-ink); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.t-app .t-tab:hover { background: var(--t-soft-2); }
.t-app .t-tab[aria-selected="true"] { background: var(--t-ink); color: var(--t-on-ink); }
.t-app .t-tab-count { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--t-lime); }
.t-app .t-tab:not([aria-selected="true"]) .t-tab-count, .t-app .t-tab-count:empty { display: none; }

/* Tannhjul og avatar */
.t-app .t-gear { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: none; color: var(--t-ink); font-size: 15px; cursor: pointer; }
.t-app .t-gear:hover { background: var(--t-soft-3); }
.t-app .t-gear[aria-pressed="true"] { background: var(--t-ink); color: var(--t-lime); }
.t-app .t-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; background: var(--t-mint); color: var(--t-ink); overflow: hidden; }

/* ── Knapper ── */
.t-app .t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: none; border-radius: var(--t-r-pill); font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; background: var(--t-card); color: var(--t-ink); box-shadow: var(--t-shadow-line); }
.t-app .t-btn:hover { background: var(--t-soft-1); }
.t-app .t-btn--primary { background: var(--t-ink); color: var(--t-on-ink); box-shadow: none; }
.t-app .t-btn--primary:hover { background: var(--t-ink-hover); }
.t-app .t-btn:disabled { opacity: .5; cursor: default; }

/* ── Filterpiller (32 px). «Alle» valgt er mørk; andre valgte er lime. ── */
.t-app .t-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: none; border-radius: var(--t-r-pill); background: var(--t-card); color: var(--t-ink); box-shadow: var(--t-shadow-line); font-size: 13px; font-weight: 600; cursor: pointer; }
.t-app .t-pill[aria-pressed="true"] { background: var(--t-lime); box-shadow: none; }
.t-app .t-pill--all[aria-pressed="true"] { background: var(--t-ink); color: var(--t-on-ink); }

/* ── Segmentvalg: hvit pille med kant; valgt verdi er lime ── */
.t-app .t-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--t-r-pill); background: var(--t-card); box-shadow: var(--t-shadow-line); }
.t-app .t-seg button { height: 30px; padding: 0 12px; border: none; border-radius: var(--t-r-pill); background: none; color: var(--t-text-2); font-size: 13px; font-weight: 600; cursor: pointer; }
.t-app .t-seg button[aria-checked="true"] { background: var(--t-lime); color: var(--t-ink); }

/* ── Avkrysning ── */
.t-app .t-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; }
.t-app .t-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.t-app .t-check-box { width: 22px; height: 22px; flex: none; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--t-card); color: transparent; box-shadow: 0 0 0 1.5px var(--t-line); }
.t-app .t-check input:checked + .t-check-box { background: var(--t-ink); color: var(--t-lime); box-shadow: none; }
.t-app .t-check input:focus-visible + .t-check-box { outline: 2px solid var(--t-product); outline-offset: 2px; }

/* ── Sidepanel (480 px, AI-chat 560 px), starter under toppmenyen ── */
.t-app .t-panel { position: fixed; top: var(--t-top-h); right: 0; bottom: 0; z-index: 60; width: min(480px, 100vw); display: flex; flex-direction: column; background: var(--t-card); box-shadow: var(--t-shadow-panel); }
.t-app .t-panel--wide { width: min(560px, 100vw); }
.t-app .t-panel-head { height: 52px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; box-shadow: inset 0 -1px 0 var(--t-divider); }
.t-app .t-panel-title { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-app .t-panel-body { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
.t-app .t-ibtn { width: 32px; height: 32px; flex: none; border: none; border-radius: 50%; background: none; color: var(--t-ink); cursor: pointer; }
.t-app .t-ibtn:hover { background: var(--t-soft-2); }

/* ── Modal ── */
.t-app .t-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--t-scrim); }
.t-app .t-modal-card { width: 100%; max-width: 760px; max-height: 100%; overflow: auto; border-radius: var(--t-r-card); background: var(--t-card); box-shadow: var(--t-shadow-menu); padding: 20px; }

/* ── Toast: nederst i midten, mørk, lime hake ── */
.t-app .t-toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: var(--t-r-pill); background: var(--t-ink); color: var(--t-on-ink); font-size: 13.5px; font-weight: 600; box-shadow: var(--t-shadow-menu); }
.t-app .t-toast i { color: var(--t-lime); }

/* ── Kort og tom tilstand ── */
.t-app .t-card { border-radius: var(--t-r-card); background: var(--t-card); box-shadow: var(--t-shadow-line); padding: 18px 20px; }
.t-app .t-empty { display: flex; flex-direction: column; gap: 6px; }

/* ── Felt og merkelapper ── */
.t-app .t-input, .t-app .t-select { width: 100%; height: 38px; padding: 0 12px; border: none; border-radius: var(--t-r-input); background: var(--t-card); color: var(--t-ink); font: inherit; font-size: 13.5px; box-shadow: 0 0 0 1.5px var(--t-line); }
.t-app .t-input:disabled, .t-app .t-select:disabled { background: var(--t-soft-1); color: var(--t-text-3); }
.t-app .t-input:focus-visible, .t-app .t-select:focus-visible { outline: 2px solid var(--t-product); outline-offset: 1px; }
.t-app .t-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: var(--t-r-pill); background: var(--t-soft-2); color: var(--t-text-2); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.t-app .t-tag[data-camp="A"] { background: var(--t-camp-a-bg); color: var(--t-camp-a); box-shadow: inset 0 0 0 1px var(--t-camp-a-line); }
.t-app .t-tag[data-camp="B"] { background: var(--t-camp-b-bg); color: var(--t-camp-b); box-shadow: inset 0 0 0 1px var(--t-camp-b-line); }
.t-app .t-tag[data-camp="C"] { background: var(--t-camp-c-bg); color: var(--t-camp-c); box-shadow: inset 0 0 0 1px var(--t-camp-c-line); }
.t-app .t-tag--warn { background: var(--t-amber-bg); color: var(--t-amber); box-shadow: inset 0 0 0 1px var(--t-amber-line); }
.t-app .t-tag--ai { background: var(--t-mint-tint); color: var(--t-link); }
.t-app .t-tag--ok { background: var(--t-green-bg); color: var(--t-green); }
.t-app .t-tag--bad { background: var(--t-red-bg); color: var(--t-red-text); }
.t-app .t-error { margin: 0; padding: 10px 14px; border-radius: var(--t-r-surface); background: var(--t-red-bg); color: var(--t-red-text); font-size: 13px; font-weight: 600; }

/* ── Smal skjerm: fanene ruller sideveis, ordmerket blir mindre ── */
@media (max-width: 820px) {
  .t-app .t-top { gap: 10px; padding: 0 12px; }
  .t-app .t-wordmark { font-size: 17px; }
  .t-app .t-area-menu { width: min(320px, calc(100vw - 24px)); }
}

/* ── Datovelger (ui/datovelger.js, steg 8): norsk, mandag først. Legger seg i nærmeste .t-panel eller .t-app. ── */
.t-app .t-datepick { position: absolute; z-index: 80; width: 284px; padding: 12px; border-radius: var(--t-r-surface); background: var(--t-card); box-shadow: var(--t-shadow-menu), var(--t-shadow-line); }
.t-app .t-datepick-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.t-app .t-datepick-title { font-size: 13.5px; font-weight: 700; color: var(--t-ink); }
.t-app .t-datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.t-app .t-datepick-wd { text-align: center; font-size: 11px; font-weight: 700; color: var(--t-text-4); padding: 4px 0; }
.t-app .t-datepick-day { height: 34px; border: none; border-radius: 50%; background: none; color: var(--t-ink); font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.t-app .t-datepick-day:hover:not([disabled]) { background: var(--t-soft-2); }
.t-app .t-datepick-day.is-today { box-shadow: inset 0 0 0 1.5px var(--t-ink); font-weight: 700; }
.t-app .t-datepick-day.is-sel { background: var(--t-ink); color: var(--t-on-ink); font-weight: 700; }
.t-app .t-datepick-day[disabled] { color: var(--t-text-4); cursor: default; text-decoration: line-through; text-decoration-color: var(--t-line); }
.t-app .t-datepick-day:focus-visible { outline: 2px solid var(--t-product); outline-offset: 1px; }
.t-app .t-datepick-foot { display: flex; justify-content: flex-end; margin-top: 6px; min-height: 4px; }
.t-app .t-link { border: none; background: none; padding: 0; color: var(--t-link); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.t-app .t-link:hover { text-decoration: underline; }