/* Formuläret Ny idé (R160): idelada-spec.md §5.10, §9 och §10. Dialog på dator, helskärm under
   640 px. Dialogen ligger i <body> (det översta lagret), inte i #s-ideas, så färgerna i spec §9.1
   står här en gång till som samma variabler; stjärnorna och statusetiketterna är listans egna
   klasser ur ideas.css. Byggs av static/ideas_form.js. */

.ideaformdlg{
  --i-surface:#FFFFFF;
  --i-line:#E4DED6;
  --i-line-ctl:#D9D2C9;
  --i-system:#F0EBE4;
  --i-text:#2A2421;
  --i-text-2:#4A433E;
  --i-dim:#5E5751;
  --i-accent:#7A2E27;
  --i-accent-hover:#5C211C;
  --i-accent-ink:#FFFFFF;
  --i-accent-text:#7A2E27;
  --i-accent-tone:#F4E9E6;
  --i-star-empty:#8A817A;
  --i-similar:#FDF6E8;
  --i-similar-line:#E8D9B8;
  --i-err:#A1260D;
  --i-st-received:#ECE8E2;--i-st-received-ink:#3F3935;--i-st-received-dot:#8A817A;
  --i-st-consider:#FAEBD3;--i-st-consider-ink:#6E4306;--i-st-consider-dot:#C98A1E;
  --i-st-planned:#E2EBF6;--i-st-planned-ink:#1D4673;--i-st-planned-dot:#3C73B5;
  --i-st-done:#DFEFE3;--i-st-done-ink:#1E5530;--i-st-done-dot:#3E8E57;
  --i-st-not:#FFFFFF;--i-st-not-ink:#5E5751;--i-st-not-dot:#8A817A;
  width:min(640px,calc(100vw - 32px));max-width:none;max-height:calc(100vh - 48px);margin:auto;padding:0;
  border:0;border-radius:16px;background:var(--i-surface);color:var(--i-text);font-family:var(--font-sans);
  box-shadow:0 24px 60px rgba(42,36,33,.28);overflow:auto
}
.ideaformdlg::backdrop{background:rgba(42,36,33,.45)}
html[data-theme="dark"] .ideaformdlg{
  --i-surface:var(--color-surface);--i-line:var(--color-border);--i-line-ctl:#4A4541;--i-system:var(--color-surface-2);
  --i-text:var(--color-text);--i-text-2:#D6CFC7;--i-dim:var(--color-muted);--i-accent:#7B2D2A;--i-accent-hover:#963A35;
  --i-accent-text:var(--color-accent-text);--i-accent-tone:#3A2523;--i-star-empty:#9A938C;
  --i-similar:#2E2618;--i-similar-line:#5A4A2C;--i-err:#F29B85;
  --i-st-received:#2A2725;--i-st-received-ink:#CFC7BE;--i-st-consider:#33250F;--i-st-consider-ink:#F2C185;
  --i-st-planned:#1C2938;--i-st-planned-ink:#A9C8F0;--i-st-done:#1B2D1E;--i-st-done-ink:#9ED7A4;
  --i-st-not:transparent;--i-st-not-ink:#CFC7BE
}
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .ideaformdlg{
    --i-surface:var(--color-surface);--i-line:var(--color-border);--i-line-ctl:#4A4541;--i-system:var(--color-surface-2);
    --i-text:var(--color-text);--i-text-2:#D6CFC7;--i-dim:var(--color-muted);--i-accent:#7B2D2A;--i-accent-hover:#963A35;
    --i-accent-text:var(--color-accent-text);--i-accent-tone:#3A2523;--i-star-empty:#9A938C;
    --i-similar:#2E2618;--i-similar-line:#5A4A2C;--i-err:#F29B85;
    --i-st-received:#2A2725;--i-st-received-ink:#CFC7BE;--i-st-consider:#33250F;--i-st-consider-ink:#F2C185;
    --i-st-planned:#1C2938;--i-st-planned-ink:#A9C8F0;--i-st-done:#1B2D1E;--i-st-done-ink:#9ED7A4;
    --i-st-not:transparent;--i-st-not-ink:#CFC7BE
  }
}
.ideaformdlg :focus-visible{outline:2px solid var(--i-accent);outline-offset:2px}
html[data-theme="dark"] .ideaformdlg :focus-visible{outline-color:var(--color-accent-text)}

.ideaformx{display:flex;flex-direction:column;min-height:100%;margin:0}
.ideaform-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 24px 6px}
.ideaform-h{font-family:var(--font-serif);font-weight:600;font-size:28px;line-height:1.2;margin:0;color:var(--i-text)}
.ideaform-x{flex:0 0 44px;width:44px;height:44px;margin:-6px -10px 0 0;border:0;border-radius:10px;background:none;color:var(--i-text-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.ideaform-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.ideaform-x:hover{background:var(--i-system);color:var(--i-text)}
.ideaform-body{padding:8px 24px 4px;display:flex;flex-direction:column;gap:16px}

/* ID-44: the warning on the system surface */
.ideaform-warning{margin:0;background:var(--i-system);border-radius:12px;padding:12px 14px;font-size:15px;line-height:1.5;color:var(--i-text-2)}

.ideaform-field{display:flex;flex-direction:column;gap:6px}
.ideaform-label{font-size:15px;font-weight:600;color:var(--i-text);padding:0}
.ideaform-help{margin:0;font-size:14px;color:var(--i-dim)}
.ideaform-input,.ideaform-select{min-height:44px;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--i-line-ctl);border-radius:10px;
  background:var(--i-surface);color:var(--i-text);font:inherit;font-size:16px}
.ideaform-area{min-height:120px;resize:vertical;line-height:1.5}
.ideaform-input[aria-invalid="true"],.ideaform-select[aria-invalid="true"]{border-color:var(--i-err);box-shadow:0 0 0 1px var(--i-err)}
.ideaform-under{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:18px}
.ideaform-count{margin-inline-start:auto;font-size:13px;color:var(--i-dim);font-variant-numeric:tabular-nums;white-space:nowrap}
.ideaform-err{margin:0;font-size:14px;font-weight:600;color:var(--i-err)}
.ideaform-err[hidden]{display:none}

.ideaform-display{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.ideaform-display legend{margin-bottom:4px}
.ideaform-radio{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--i-text);cursor:pointer}
.ideaform-radio input{width:20px;height:20px;margin:0;accent-color:var(--i-accent)}
.ideaform-mail{margin:0;font-size:14px;color:var(--i-text-2)}

.ideaform-btns{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:16px 24px 22px}
.ideaform-btns[hidden]{display:none}
.ideaform-btns .btn{min-height:48px;padding:0 20px;border-radius:12px;font-size:16px;font-weight:600}
.ideaform-btns .btn.primary{background:var(--i-accent);border-color:var(--i-accent);color:var(--i-accent-ink)}
.ideaform-btns .btn.primary:hover{background:var(--i-accent-hover);border-color:var(--i-accent-hover)}
.ideaform-btns .btn:not(.primary){background:var(--i-surface);border-color:var(--i-line-ctl);color:var(--i-text)}

/* ID-48: Vill du slänga utkastet? in place of the buttons */
.ideaform-discard{margin:12px 24px 0;border-top:1px solid var(--i-line);padding-top:12px}
.ideaform-discard[hidden]{display:none}
.ideaform-discard-text{margin:0;font-size:16px;font-weight:600;color:var(--i-text)}
.ideaform-discard .ideaform-btns{padding:12px 0 22px}

/* ID-46: Det finns redan en liknande idé */
.ideasimilar{background:var(--i-similar);border:1px solid var(--i-similar-line);border-radius:12px;padding:14px 16px}
.ideasimilar[hidden]{display:none}
.ideasimilar-h{margin:0 0 4px;font-size:16px;font-weight:700;color:var(--i-text)}
.ideasimilar-text{margin:0 0 8px;font-size:14px;color:var(--i-text-2);line-height:1.5}
.ideasimilar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ideasim{padding:10px 0;border-top:1px solid var(--i-similar-line)}
.ideasim-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ideasim-title{margin:0;font-family:var(--font-serif);font-weight:600;font-size:17px;line-height:1.3;color:var(--i-text);overflow-wrap:anywhere}
.ideasim-top .ideasim-title{flex:1 1 12em}
/* Poängen i rutan (CONTRACT-similar.md §52): listans poängruta, mindre, till höger om rubriken. */
.ideasim-top .ideascore{flex:0 0 auto;width:auto;min-width:56px;height:auto;padding:6px 8px;margin-left:auto}
.ideasim-top .ideascore-val{font-size:15px}
.ideasim-desc{margin:4px 0 6px;font-size:14px;color:var(--i-dim);line-height:1.45;overflow-wrap:anywhere}
.ideasim-vote{border-color:var(--i-similar-line)}
.ideasim .ideaerr{margin:4px 0 0;font-size:14px;font-weight:600;color:var(--i-err)}
.ideasim .ideaerr[hidden]{display:none}
.ideasim-open{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--i-accent-text);text-underline-offset:3px}
.ideasim-open:hover{color:var(--i-accent-hover)}

.ideaformtoast{position:fixed;inset-block-end:24px;inset-inline-start:50%;transform:translateX(-50%);background:#2A2421;color:#F8F6F2;padding:12px 18px;border-radius:12px;font-size:15px;z-index:50;max-width:min(560px,90vw)}

/* Mobile: a full-screen view (ID-43) */
@media (max-width:640px){
  .ideaformdlg{width:100vw;height:100vh;height:100dvh;max-height:none;border-radius:0;margin:0;inset:0}
  .ideaform-head{padding:16px 16px 4px}
  .ideaform-body{padding:8px 16px 4px}
  .ideaform-btns{padding:14px 16px 18px}
  .ideaform-btns .btn{flex:1 1 140px}
  .ideaform-discard{margin:12px 16px 0}
  .ideaform-discard .ideaform-btns{padding:12px 0 18px}
}