/* ═══════════════════════════════════════════════════════════════════════════
   OBJEKTDEMOT — formatmallen

   Samma fönster som marknads- och uppföljningsdemot, ur css/systemskal.css.
   Det som är eget här är inklistringsrutan och formuläret under den.

   INKLISTRINGSRUTAN ÄR TONAD, formuläret är vitt. Produkten gör samma sak med
   sina AI-hjälpare: den tonade ytan säger att det som står i den är ett
   verktyg som skriver i fälten under, inte ett fält bland dem.

   TREDJE KOPIAN AV SKALETS FLIKAR OCH PULS. Puls och ram delas nu av tre
   demon, och regeln som stod i de två första gäller: nästa gång något av det
   här behövs på ett fjärde ställe ska det brytas ut. Ramen är redan utbruten.
   ═══════════════════════════════════════════════════════════════════════ */

.obd{position:relative;display:flex;flex-direction:column;margin-top:1rem;
  min-height:1635px;border-radius:16px}
.obd:empty{border:1px solid var(--line);background:
  radial-gradient(300px 200px at 15% 110%, rgba(79,195,255,.2), transparent 60%),
  radial-gradient(300px 200px at 85% -10%, rgba(127,176,255,.15), transparent 60%),
  #eaeff9}

.ob{position:relative;flex:1;min-height:0;display:flex;overflow:hidden;
  border:1px solid var(--line);border-radius:16px;background:#e9eef9;
  box-shadow:0 22px 50px -44px rgba(10,24,84,.6)}

.ob-panel{background:#fff;border:1px solid var(--line2);border-radius:12px;
  padding:clamp(.8rem,1.8vw,1.15rem)}

/* ── Inklistringen ─────────────────────────────────────────────────────── */
.ob-huvud{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  justify-content:space-between}
.ob-rub{font-family:var(--display);font-size:1.06rem;font-weight:600;
  letter-spacing:-.01em;color:var(--text);margin:0}
.ob-ing{font-size:.74rem;line-height:1.5;color:var(--muted);margin:.15rem 0 .45rem;
  max-width:76ch}
.ob-text{width:100%;font-family:inherit;font-size:.76rem;line-height:1.55;
  color:var(--text);background:#fbfcff;border:1px solid rgba(92,141,255,.42);
  border-radius:10px;padding:.5rem .65rem;resize:vertical;min-height:76px}
.ob-text:focus{outline:none;border-color:var(--g3);
  box-shadow:0 0 0 3px rgba(92,141,255,.16)}
.ob-kn{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;margin-top:.6rem}
.ob-las{position:relative;font-size:.8rem;font-weight:700;color:#fff;
  background:#1c3f9e;border:1px solid #1c3f9e;border-radius:9px;
  padding:.5rem 1.05rem;cursor:pointer;transition:background .2s,transform .15s}
.ob-las:hover:not([aria-disabled="true"]){background:var(--g2)}
.ob-las:active:not([aria-disabled="true"]){transform:translateY(1px)}
.ob-las[aria-disabled="true"]{opacity:.65;cursor:default}
.ob-las:focus-visible{outline:2px solid var(--g3);outline-offset:2px}
.ob-egen{font-size:.72rem;color:var(--faint)}
.ob-kvitto{margin-top:.6rem;font-size:.78rem;font-weight:650;color:var(--g2);
  padding-left:.8rem;border-left:2px solid rgba(92,141,255,.5)}
/* Raden om det som INTE blev ett fält. Den står i mässing och inte i blått:
   den säger något om vad verktyget avstår från, och det är en annan sorts
   upplysning än den om vad det gjorde. */
.ob-kvar{margin-top:.35rem;font-size:.72rem;color:var(--massing)}

/* ── Formuläret ────────────────────────────────────────────────────────── */
.ob-form{margin-top:.7rem;padding-top:.65rem;border-top:1px solid var(--line2);
  display:grid;gap:.7rem}
.ob-gr{font-family:var(--display);font-size:.86rem;font-weight:600;
  color:var(--text);margin:0 0 .32rem}
.ob-rutnat{display:grid;gap:.5rem}
.ob-falt{display:grid;gap:.14rem;min-width:0}
.ob-et{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.ob-in{display:flex;align-items:center;gap:.45rem;min-height:27px;
  padding:.2rem .5rem;border:1px solid var(--line);border-radius:8px;
  background:#fbfcff;transition:border-color .25s var(--ease-solutra,ease),
  background .25s var(--ease-solutra,ease)}
.ob-v{flex:1;min-width:0;font-size:.8rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Ett fyllt fält byter kant och får en bock. Färgen är samma gröna som
   kvittona i marknadsdemot: den betyder samma sak, något gick igenom. */
.ob-falt--fylld .ob-in{border-color:rgba(47,125,74,.4);background:rgba(47,125,74,.045)}
.ob-bock{flex:none;display:grid;place-items:center;color:#2f7d4a;
  animation:ob-in .3s var(--ease-solutra,ease) both}
@keyframes ob-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}

.ob-not{flex:none;margin:.45rem 0 0;padding-top:.42rem;border-top:1px dashed var(--line);
  font-size:.74rem;line-height:1.55;color:var(--muted)}
.ob-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

.ob-pulsar::before,.ob-pulsar::after{content:"";position:absolute;inset:-3px;
  border-radius:inherit;border:2px solid var(--g3);opacity:0;pointer-events:none;
  animation:ob-puls 1.9s var(--ease-solutra,ease) infinite}
.ob-pulsar::after{animation-delay:1.05s}
@keyframes ob-puls{
  0%{opacity:.85;transform:scale(1)}
  65%{opacity:0;transform:scale(1.11)}
  100%{opacity:0;transform:scale(1.11)}}

/* RESERVERNA MÄTTES OM 6 SEPTEMBER 2026, efter hopkrympningen och trespalten.
   Måtten är tagna vid den SMALASTE bredden i varje spann, för det är där rutan
   är som högst: 1633 px vid 390, 1186 vid 625, 952 vid 765 och 714 vid 1280.
   Fönstret gick från 1130 till 714 px på en laptop.
   Formuläret har fjorton fält och blir därför långt på en telefon, och det är i
   sin ordning: det är ett formulär. Reserven ligger strax över det uppmätta i
   varje spann, aldrig under. */
@media(min-width:620px){
  .obd{min-height:1200px}
  .ob-rutnat{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .7rem}
}
@media(min-width:760px){
  .obd{min-height:970px}
  .ob-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem}
}
/* TRE FÄLT I BREDD FRÅN 1000 px. Egenskaper har åtta fält och tog fyra rader
   i tvåspalt; i trespalt tar den tre. Grunduppgifter går från två rader till
   en. Fälten är korta, ett tal eller ett ord, och tål den smalare spalten. */
@media(min-width:1000px){
  .obd{min-height:730px}
  .ob-rutnat{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(prefers-reduced-motion:reduce){
  .ob-pulsar::before,.ob-pulsar::after{display:none}
  .ob-bock{animation:none}
  .ob-in{transition:none}
}