/* Grundstil för fristående Textaren. */
/* Uppdaterad: 2026-06-08. */

/* =========================================================
   1) Bas / Variabler
   ========================================================= */
:root{
  /* Höjder */
  --header-height: 0px;       /* headern är dold just nu */
  --footer-height: 34px;      /* höjden på footern */

  /* Färger */
  --page-bg: #F7E9D0;
  --container-bg: #E6CFA2;
  --text-color: #222;
  --header-bg: #111827;

  /* Skugga / ramar */
  --shadow: 0 5px 10px rgba(0,0,0,0.15);

  /* Luft mellan headern och innehållskortet (.container) */
  --content-offset: 1rem;
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

body{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;

  font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New",
               system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  color: var(--text-color);
  background: var(--page-bg);
}

/* =========================================================
   2) Header
   ========================================================= */
.site-header{
  display: none;
}

.site-header-title{
  color: #fff;
  font-size: clamp(2.4rem, 7vw, 4.8rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 3px 12px rgba(0,0,0,.6);
}


/* Sidomslaget används av fristående PHP-sidor. */
.page{
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-content{
  flex: 1;
}

/* =========================================================
   3) Main / Container (sidans "kort")
   ========================================================= */
.container{
  width: 94%;
  max-width: 1440px;

  /* Luft mellan header och innehåll styrs här */
  margin: var(--content-offset) auto 1.2rem auto;

  background: var(--container-bg);
  padding: 20px;
  border-radius: 12px;

  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,0.06);

  /* gör att footern hamnar längst ner även om lite innehåll */
  flex: 1;
}

/* =========================================================
   4) Typografi / rubriker (stabila regler)
   ========================================================= */
h1, h4, h5{
  margin: 0.2rem 0 0.6rem 0;
}

h2, h3 {
  margin: 0 0 0 0.5rem;
}

h1{
  font-size: 2.45rem;     /* ~36px */
  line-height: 1.15;
  font-weight: 900;
  color: #111;
}

h2{
  font-size: 1.1rem;      /* ~28.8px */
  line-height: 1.1;
  font-weight: 400;
  color: #111;
}

h3{
  font-size: 1.2rem;     /* ~21.6px */
  line-height: 0;
  font-weight: 700;
  color: #111;
}

/* OBS: h4 var tidigare vit – det kan göra rubriker osynliga på ljus bakgrund.
   Här gör vi h4 "normal" och lägger separat klass för mörka kort senare. */
h4{
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 700;
  color: #111;
}

h5{
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 600;
  color: #111;
}

p{
  line-height: 1.55;
  margin: 0.5rem 0 1rem 0;
}

/* Indenter (om du vill ha textindrag på vissa texter) */
.indent-1{ text-indent: 1ch; }
.indent-2{ text-indent: 6ch; }

/* =========================================================
   5) Footer
   ========================================================= */
.site-footer{
  min-height: var(--footer-height);
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  background: #FEE4B4;
  color: #000;
  font-weight: bold;
  border-top: 1px solid rgba(0,0,0,0.08);
}

/* =========================================================
   6) App/Textmaskin — isolerad stil
   Lägg appens innehåll i <div class="app-scope"> ... </div>
   så påverkas inte resten av sidan.
   ========================================================= */
.app-scope .card,
.app-scope .row,
.app-scope .stack,
.app-scope .grid-top{
  min-width: 0;
}

.app-scope .grid-top{
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px){
  .app-scope .grid-top{ grid-template-columns: 1fr 1fr; }
}

.app-scope .card{
  background: #171a21;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  color: #e9eef5;
}

/* Rubrik på mörkt kort */
.app-scope .card h4,
.app-scope .card h3,
.app-scope .card h2,
.app-scope .card h1{
  color: #fff;
}

/* Layout helpers */
.app-scope .row{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.app-scope .stack{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-scope .flex{ display: flex; gap: 8px; }

.app-scope label{
  font-size: 18px;
  color: #ffffff;
  font-weight: 800;
}

.app-scope .col-left{ min-width: 260px; }

.app-scope input[type="file"]{
  padding: 6px;
  background: #0b0d12;
  border: 1px solid #20242c;
  border-radius: 10px;
  color: #e9eef5;
}

.app-scope #txt,
.app-scope #txt::placeholder{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight: 400;
}

.app-scope textarea#txt{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: block;
  min-height: 260px;
  background: #0b0d12;
  color: #e9eef5;
  border: 1px solid #20242c;
  border-radius: 12px;
  padding: 10px;
  resize: vertical;
}

.app-scope audio#player{ flex: 1; min-width: 280px; }

/* Knappar */
.app-scope .btn{
  appearance: none;
  border: none;
  background: #1f2836;
  color: #e9eef5;
  padding: 10px 14px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 700;
}

.app-scope .btn:hover{ filter: brightness(1.1); }
.app-scope .btn.primary{ background:#00e0ff; color:#01252b; }
.app-scope .btn.ok{ background:#75f94c; color:#052e00; }
.app-scope .btn.warn{ background:#ffb74d; color:#2b1a00; }
.app-scope .btn.ghost{ background: transparent; border: 1px dashed #3a4352; }

.app-scope .mini{ font-size: 12px; color:#9aa4af; }

/* Textrader */
.app-scope .lyrics{
  max-height: 46vh;
  overflow: auto;
  border: 1px solid #20242c;
  border-radius: 12px;
  padding: 8px;
  background: #0b0d12;
}

.app-scope .line{
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .15s;
  white-space: pre-wrap;
}

.app-scope .line.current{ background:#0a2b33; outline: 1px solid #123d46; }
.app-scope .line.done{ color:#7bd8ff; }

.app-scope .mono{
  font-family: Consolas,"Courier New",ui-monospace,monospace;
}

/* Små badges */
.app-scope .badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #0b0d12;
  border: 1px solid #20242c;
}

.app-scope .time{ font-weight: 800; color:#7bd8ff; }
.app-scope .hint{ color:#b6c1cc; }

.app-scope .kbd{
  font: 600 12px/1 Consolas,"Courier New",ui-monospace,monospace;
  background: #0b0d12;
  border: 1px solid #3a4352;
  border-bottom-width: 3px;
  padding: 3px 6px;
  border-radius: 6px;
}

/* Progress */
.app-scope .progress{
  height: 6px;
  background: #0b0d12;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #20242c;
}

.app-scope .bar{
  height: 100%;
  background: linear-gradient(90deg,#00e0ff,#75f94c);
  width: 0%;
}

/* =========================================================
   7) Modal (instruktioner) — isolerad
   ========================================================= */
.app-scope .help-link{
  display: inline-block;
  margin-left: .35rem;
  text-decoration: underline;
  cursor: pointer;
}

.app-scope .modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.app-scope .modal.is-open{ display: block; }

.app-scope .modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.60);
}

.app-scope .modal-box{
  position: relative;
  width: min(900px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  overflow: auto;
  margin: 12px auto;
  border-radius: 14px;
  background: #BF8C1D;
  box-shadow: 0 12px 50px rgba(0,0,0,.35);
  padding: 14px;
}

.app-scope .modal-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.app-scope .modal-title{
  font-weight: 700;
  font-size: 18px;
}

.app-scope .modal-body{ padding-top: 12px; }

.app-scope .help-steps{
  margin: 0;
  padding-left: 20px;
  line-height: 1.5;
}

.app-scope .help-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
}

/* =========================================================
   8) Mobilanpassning
   ========================================================= */
@media (max-width: 640px){
  :root{
    --content-offset: 1.4rem;
  }

  .container{
    width: 96%;
    margin: var(--content-offset) auto 0.9rem auto;
  }
}

@media (max-width: 420px){
  .app-scope audio#player{ min-width: 0; width: 100%; }
  .app-scope .col-left{ min-width: 0; }
}