/* ============================================================
   ORON — SEKSJON: automatisert
   En loddrett tidslinje inne i ett produktpanel: «Planen din».
   Ryggraden går ovenfra og ned — natt øverst, morgen nederst —
   og hver takt henger på den med en glyfnode. Til venstre for
   ryggraden står tidspunktet, til høyre setningen og selve
   produktraden: samme artikkel som beveger seg fra «I kø» til
   «Skrives» til «Publisert».
   Formen er identisk på alle bredder; bare tidsspalten felles inn.
   Oransje brukes to steder: eyebrow-prikken og noden for
   publiseringen.
   ============================================================ */

.s-automatisert {
  /* ---- lokale mål (alt annet kommer fra --s-*) ---- */
  --aut-label: clamp(150px, 13vw, 184px);   /* høyrestilt tidsspalte */
  --aut-chip: var(--s-7);                   /* 28px nodering på ryggraden */
  --aut-glyph: 18px;
  --aut-content: 800px;                     /* målelinje for setning + rad */
  --aut-col-gap: var(--s-6);
  --aut-row-gap: clamp(var(--s-10), 3.2vw, var(--s-14));
  --aut-pad: clamp(var(--s-5), 4.2vw, var(--s-16));
  --aut-spine: var(--or-border-strong);
  --aut-switch-w: 30px;
  --aut-switch-h: var(--s-4);
  --aut-switch-inset: 2px;
  --aut-day-w: var(--s-1);
  --aut-day-h: var(--s-4);
}

.s-automatisert .aut-head {
  margin-bottom: clamp(var(--s-12), 5.2vw, var(--s-20));
}
.s-automatisert .aut-head .lead { text-wrap: balance; }

/* ------------------------------------------------------------
   PANELET — natt øverst, morgen nederst
   EN gradient. Ingen vask, ingen flekk, ingen glød på flaten:
   overflaten stopper på krem, aldri på hvitt, slik at alle fire
   kanter av kortet er synlige mot den hvite siden.
   ------------------------------------------------------------ */
.s-automatisert .aut-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--or-border-strong);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-md);
  background: linear-gradient(180deg,
      var(--or-sand-50) 0%,
      var(--or-cream) 58%,
      var(--or-cream) 100%);
}

/* ---------- Panelkrom ---------- */
.s-automatisert .aut-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--aut-pad);
  border-bottom: 1px solid var(--or-border-soft);
}
.s-automatisert .aut-bar__id {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  min-width: 0;
}
.s-automatisert .aut-bar__title {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: -0.014em;
  color: var(--or-ink-900);
}
.s-automatisert .aut-bar__sub {
  font-size: var(--fs-small);
  color: var(--or-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-automatisert .aut-bar__sub::before {
  content: "·";
  margin-right: var(--s-2);
  color: var(--or-ink-300);
}
.s-automatisert .aut-bar__tag {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: var(--s-7);
  padding-inline: var(--s-3);
  border: 1px solid var(--or-border-strong);
  border-radius: var(--r-xs);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  line-height: 1;
  color: var(--or-ink-500);
}

/* ------------------------------------------------------------
   TAKTENE — en loddrett ryggrad
   ------------------------------------------------------------ */
.s-automatisert .aut-beats {
  position: relative;
  z-index: 1;
  display: grid;
  row-gap: var(--aut-row-gap);
  padding: clamp(var(--s-8), 3vw, var(--s-12)) var(--aut-pad)
           clamp(var(--s-10), 3.6vw, var(--s-14));
}

.s-automatisert .aut-beat {
  display: grid;
  grid-template-columns: var(--aut-label) var(--aut-chip) minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--aut-col-gap);
  row-gap: var(--s-4);
  min-width: 0;
}

/* Noden og ryggraden. Segmentet henger under hver node og stopper
   ved neste — den siste takten har ingen hale. */
.s-automatisert .aut-mark {
  position: relative;
  grid-column: 2;
  grid-row: 1 / -1;
  width: var(--aut-chip);
  align-self: stretch;
}
.s-automatisert .aut-mark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--aut-chip);
  bottom: calc(-1 * var(--aut-row-gap));
  width: 1px;
  transform: translateX(-50%);
  background: var(--aut-spine);
}
.s-automatisert .aut-beat:last-child .aut-mark::after { display: none; }

.s-automatisert .aut-chip {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--aut-chip);
  border: 1px solid var(--or-border-strong);
  border-radius: 50%;
  background: var(--or-white);
  box-shadow: var(--sh-xs);
  color: var(--or-ink-500);
}
.s-automatisert .aut-chip svg {
  width: var(--aut-glyph);
  height: var(--aut-glyph);
}
/* Publiseringen — det ene oransje øyeblikket i seksjonen.
   Daggryet ligger som en myk ring rundt selve noden, ikke som en
   vask over flaten: den har kant, den har mening, den flekker ikke. */
.s-automatisert .aut-beat--peak .aut-chip {
  border-color: var(--or-orange-tint-2);
  background: var(--or-orange-tint);
  color: var(--or-orange-deep);
  box-shadow: 0 0 0 5px var(--or-orange-tint);
}

/* ---------- Tidspunktet — kun relative merkelapper ---------- */
.s-automatisert .aut-when {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  font-size: var(--fs-h4);
  line-height: 1.35;
  letter-spacing: -0.02em;
  font-weight: var(--fw-bold);
  color: var(--or-ink-900);
  text-wrap: balance;
}

.s-automatisert .aut-what {
  grid-column: 3;
  grid-row: 1;
  max-width: min(52ch, var(--aut-content));
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--or-ink-700);
  text-wrap: pretty;
}

/* ------------------------------------------------------------
   PRODUKTRADEN — samme artikkel gjennom tre tilstander
   ------------------------------------------------------------ */
.s-automatisert .aut-rec {
  grid-column: 3;
  grid-row: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;   /* brytes raden, faller detaljen til venstre */
  gap: var(--s-3) var(--s-5);
  min-width: 0;
  /* Raden fyller spalten, slik at høyrekanten treffer nøyaktig samme
     loddrett som «Eksempel» i toppen og bryteren i bunnen. */
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--or-border);
  border-radius: var(--r-md);
  background: var(--or-white);
  box-shadow: var(--sh-xs);
}
.s-automatisert .aut-rec__lead {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1 1 auto;
  min-width: 0;
}
.s-automatisert .aut-rec__ico {
  flex: none;
  color: var(--or-ink-400);
}
.s-automatisert .aut-rec__main {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: -0.012em;
  color: var(--or-ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s-automatisert .aut-rec__aside {
  flex: none;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--or-ink-500);
}
.s-automatisert .aut-rec__url {
  font-family: var(--or-mono);
  font-size: var(--fs-small);
  letter-spacing: -0.02em;
  color: var(--or-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Statusmerkene — tre trinn, null farge. «I kø» er stille,
   «Skrives» er våken, «Publisert» er ferdig og fylt. */
.s-automatisert .aut-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  height: var(--s-7);
  padding-inline: var(--s-3);
  border-radius: var(--r-xs);
  border: 1px solid var(--or-border);
  background: var(--or-gray-100);
  color: var(--or-ink-500);
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  line-height: 1;
  white-space: nowrap;
}
.s-automatisert .aut-pill--live {
  border-color: var(--or-border-strong);
  background: var(--or-white);
  color: var(--or-ink-900);
}
.s-automatisert .aut-pill--ok {
  border-color: var(--or-ink-900);
  background: var(--or-ink-900);
  color: var(--or-white);
}
.s-automatisert .aut-pill svg { flex: none; }

/* Arbeidsstegene i takt 2 */
.s-automatisert .aut-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
}
.s-automatisert .aut-step {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--or-ink-500);
}
.s-automatisert .aut-step.is-now { color: var(--or-ink-900); }
.s-automatisert .aut-step svg { flex: none; }
.s-automatisert .aut-dot {
  width: var(--s-2);
  height: var(--s-2);
  flex: none;
  border-radius: 50%;
  background: var(--or-ink-900);
  animation: or-pulse 2.6s var(--e-inout) infinite;
  animation-play-state: paused;
}
.s-automatisert .aut-panel.is-live .aut-dot { animation-play-state: running; }

/* Månedsjobbene i takt 4 */
.s-automatisert .aut-jobs {
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-6);
}
.s-automatisert .aut-job {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: -0.008em;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--or-ink-700);
}
.s-automatisert .aut-job svg { flex: none; color: var(--or-ink-400); }

/* ------------------------------------------------------------
   STATUSLINJEN — planen for de neste 7 dagene
   ------------------------------------------------------------ */
.s-automatisert .aut-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-4) var(--aut-pad);
  border-top: 1px solid var(--or-border-soft);
}
.s-automatisert .aut-foot__group {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-width: 0;
}
.s-automatisert .aut-foot__group--end { margin-left: auto; }
.s-automatisert .aut-foot__label {
  font-size: var(--fs-small);
  font-weight: var(--fw-semi);
  letter-spacing: -0.008em;
  color: var(--or-ink-900);
  white-space: nowrap;
}
.s-automatisert .aut-foot__note {
  font-size: var(--fs-small);
  color: var(--or-ink-500);
  white-space: nowrap;
}
.s-automatisert .aut-days {
  display: flex;
  align-items: flex-end;
  gap: var(--s-2);
  flex: none;
}
.s-automatisert .aut-day {
  display: block;
  width: var(--aut-day-w);
  height: var(--aut-day-h);
  border-radius: var(--r-pill);
  background: var(--or-border-strong);
}
.s-automatisert .aut-day.is-next { background: var(--or-ink-900); }

.s-automatisert .aut-switch {
  position: relative;
  display: block;
  flex: none;
  width: var(--aut-switch-w);
  height: var(--aut-switch-h);
  border-radius: var(--r-pill);
  background: var(--or-ink-900);
}
.s-automatisert .aut-switch::after {
  content: "";
  position: absolute;
  top: var(--aut-switch-inset);
  right: var(--aut-switch-inset);
  width: var(--s-3);
  height: var(--s-3);
  border-radius: 50%;
  background: var(--or-white);
}

/* ------------------------------------------------------------
   SLUTTLINJEN — samme venstrekant som alt annet i seksjonen
   ------------------------------------------------------------ */
.s-automatisert .aut-close {
  margin-top: clamp(var(--s-12), 4.6vw, var(--s-20));
  max-width: 30ch;
  text-align: left;
  font-size: var(--fs-h3);
  line-height: 1.22;
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-semi);
  color: var(--or-ink-900);
  text-wrap: balance;
}

/* ============================================================
   RESPONSIVT — samme form, tidsspalten felles inn
   ============================================================ */

@media (max-width: 899px) {
  .s-automatisert {
    --aut-col-gap: var(--s-4);
    --aut-row-gap: clamp(var(--s-8), 5vw, var(--s-12));
  }

  .s-automatisert .aut-beat {
    grid-template-columns: var(--aut-chip) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    row-gap: var(--s-2);
  }
  .s-automatisert .aut-mark { grid-column: 1; }

  .s-automatisert .aut-when {
    grid-column: 2;
    grid-row: 1;
    text-align: left;
  }
  .s-automatisert .aut-what {
    grid-column: 2;
    grid-row: 2;
    max-width: 46ch;
  }
  .s-automatisert .aut-rec {
    grid-column: 2;
    grid-row: 3;
    margin-top: var(--s-2);
  }

  .s-automatisert .aut-close { max-width: 20ch; }
}

@media (max-width: 560px) {
  .s-automatisert { --aut-col-gap: var(--s-3); }

  .s-automatisert .aut-rec {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
  }
  .s-automatisert .aut-rec__aside {
    flex: 1 1 auto;
    max-width: 100%;
  }

  /* Tittelen skal brytes, ikke kappes, når raden er smal */
  .s-automatisert .aut-rec__lead {
    align-items: flex-start;
    gap: var(--s-2);
  }
  .s-automatisert .aut-rec__main {
    white-space: normal;
    overflow: visible;
    line-height: 1.4;
  }
  .s-automatisert .aut-pill,
  .s-automatisert .aut-rec__ico { margin-top: var(--s-1); }

  .s-automatisert .aut-foot { row-gap: var(--s-4); }
  .s-automatisert .aut-foot__group--end { margin-left: 0; }
  .s-automatisert .aut-foot__note { display: none; }
}