/* ============================================================
   Poliglot4you — shared styles (public site + admin)
   Visual identity: quiet university-press textbook page.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#F1EFE7;
  --ink:#20242B;
  --muted:#5B5B52;
  --accent:#8B2E2E;
  --accent-soft:#F4E9E7;
  --rule:#D3CEBF;
  --ok:#3E6B4A;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'PT Serif', Georgia, serif;
  line-height:1.6;
  min-height:100vh;
}

h1,h3{ font-family:'PT Serif', Georgia, serif; font-weight:700; margin:0 0 0.4em; color:var(--ink); }
h2{ font-family:'PT Serif', Georgia, serif; font-weight:700; margin:0 0 0.4em; color:var(--accent); }
.mono{font-family:'IBM Plex Mono', monospace;}
a{color:var(--accent);}
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

.wrap{ max-width:900px; margin:0 auto; padding:2.5rem 1.25rem 5rem; }

/* Header */
.masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  border-bottom:4px solid var(--accent); padding-bottom:0.9rem; margin-bottom:2.4rem; flex-wrap:wrap;
}
.masthead .title-block h1{ font-size:clamp(1.6rem, 4.5vw, 2.3rem); margin-bottom:0.2em; }
.masthead .subtitle{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.09em; color:var(--accent); text-transform:uppercase; }
.back-link{ font-family:'IBM Plex Mono', monospace; font-size:0.75rem; text-decoration:none; color:var(--muted); white-space:nowrap; border-bottom:1px solid var(--rule); padding-bottom:2px; }
.back-link:hover{color:var(--accent); border-color:var(--accent);}

/* Card */
.card{ background:transparent; color:var(--ink); padding:0.1rem 0 1.8rem 1.1rem; margin-bottom:2.2rem; border-bottom:1px solid var(--rule); border-left:3px solid var(--accent); }
.card .eyebrow{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--accent); margin-bottom:0.6rem; }
.card h2{ font-size:1.3rem; padding-bottom:0.5rem; border-bottom:1px solid var(--rule); margin-bottom:0.9rem; }
.card p{color:var(--ink); margin:0 0 0.7rem;}
.card p:last-child{margin-bottom:0;}

/* Language grid (public homepage) */
.lang-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:1rem; }
.lang-card{ display:block; text-decoration:none; color:var(--ink); background:var(--accent-soft); border-left:3px solid var(--accent); padding:1.1rem 1.2rem 1.3rem; transition:transform .12s ease; }
.lang-card:hover{transform:translateY(-2px);}
.lang-card .tag{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-bottom:0.5rem; }
.lang-card h2{ font-size:1.35rem; margin-bottom:0.3rem; border:none; padding:0; }
.lang-card p{ color:var(--muted); font-size:0.92rem; margin:0 0 0.9rem; }
.lang-card .action{ font-family:'IBM Plex Mono', monospace; font-size:0.74rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.lang-card--locked{ background:transparent; border-left:3px solid var(--rule); cursor:default; }
.lang-card--locked .tag{color:var(--muted);}
.lang-card--locked h2{color:var(--muted);}
.lang-card--locked .action{color:var(--muted);}

footer{ margin-top:3rem; padding-top:1.2rem; border-top:1px solid var(--rule); font-family:'IBM Plex Mono', monospace; font-size:0.76rem; color:var(--muted); }

/* Install / login card */
.install-body{ display:flex; align-items:center; justify-content:center; min-height:100vh; }
.install-card{ background:var(--accent-soft); border-left:3px solid var(--accent); padding:2rem 2.2rem; width:min(380px, 92vw); }
.install-card label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.74rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); margin:0.9rem 0 0.3rem; }
.install-card input{ width:100%; padding:0.5rem 0.6rem; border:1px solid var(--rule); background:var(--paper); font-family:'PT Serif', Georgia, serif; font-size:1rem; color:var(--ink); }
.install-card button{ margin-top:1.3rem; width:100%; background:var(--ink); color:var(--paper); border:none; padding:0.65rem; font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-size:0.78rem; letter-spacing:0.05em; cursor:pointer; }
.install-card button:hover{background:var(--accent);}
.notice{ background:var(--paper); border-left:3px solid var(--accent); padding:0.6rem 0.8rem; font-size:0.9rem; margin-top:1rem; }
.notice.ok{border-color:var(--ok); color:var(--ok);}

/* Admin dashboard */
.admin-body{ margin:0; background:var(--paper); font-family:'PT Serif', Georgia, serif; color:var(--ink); }
.admin-wrap{ max-width:1100px; margin:0 auto; padding:2rem 1.25rem 4rem; }
.admin-top{ display:flex; justify-content:space-between; align-items:center; border-bottom:4px solid var(--accent); padding-bottom:0.9rem; margin-bottom:2rem; flex-wrap:wrap; gap:0.8rem; }
.admin-top a.brand{ font-size:1.2rem; font-weight:700; text-decoration:none; color:var(--ink); }
.admin-top small{ font-family:'IBM Plex Mono', monospace; color:var(--muted); }
.admin-top small a{ margin-left:0.8rem; }

.admin-columns{ display:grid; grid-template-columns:280px 1fr; gap:1.5rem; align-items:start; }
@media (max-width:760px){ .admin-columns{grid-template-columns:1fr;} }

.admin-list{ display:flex; flex-direction:column; gap:0.3rem; }
.admin-list a{ display:block; text-decoration:none; color:var(--ink); padding:0.55rem 0.7rem; border-left:3px solid transparent; border-bottom:1px solid var(--rule); font-size:0.92rem; }
.admin-list a:hover{border-left-color:var(--rule);}
.admin-list a.selected{border-left-color:var(--accent); background:var(--accent-soft);}
.admin-list small{ display:block; font-family:'IBM Plex Mono', monospace; color:var(--muted); font-size:0.72rem; margin-top:0.15rem; text-transform:uppercase; }
.admin-list .new-link{ font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-size:0.76rem; color:var(--accent); border:1px solid var(--accent); text-align:center; padding:0.5rem; margin-bottom:0.5rem; }

.editor{ background:var(--accent-soft); border-left:3px solid var(--accent); padding:1.4rem 1.5rem; }
.editor .fields{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem 1.2rem; }
.editor label{ display:block; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
.editor label.wide{grid-column:1/-1;}
.editor input[type=text], .editor input[type=number], .editor textarea, .editor select{
  display:block; width:100%; margin-top:0.3rem; padding:0.5rem 0.6rem; border:1px solid var(--rule);
  background:var(--paper); font-family:'PT Serif', Georgia, serif; font-size:0.96rem; color:var(--ink);
}
.editor textarea{resize:vertical;}
.editor input[type=file]{ margin-top:0.4rem; font-family:'IBM Plex Mono', monospace; font-size:0.82rem; }
.editor .upload-status{ font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--muted); margin-top:0.3rem; display:block; }
.editor footer{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--rule); display:flex; gap:0.7rem; flex-wrap:wrap; }
.editor button{ font-family:'IBM Plex Mono', monospace; text-transform:uppercase; font-size:0.76rem; letter-spacing:0.04em; padding:0.55rem 1rem; border:1px solid var(--ink); background:transparent; color:var(--ink); cursor:pointer; }
.editor button.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.editor button.primary:hover{background:var(--accent); border-color:var(--accent);}
.editor button.danger{ border-color:var(--accent); color:var(--accent); }
.editor button.danger:hover{background:var(--accent); color:var(--paper);}
.editor-message{ font-family:'IBM Plex Mono', monospace; font-size:0.82rem; margin-bottom:1rem; color:var(--ink); }
.editor-message.err{color:var(--accent);}
.editor-message.ok{color:var(--ok);}

.status-dot{ display:inline-block; width:0.5em; height:0.5em; border-radius:50%; margin-right:0.4em; }
.status-dot.available{background:var(--ok);}
.status-dot.in_progress{background:#B8862E;}
.status-dot.soon{background:var(--muted);}