/* Writers of Light — collaborative writing chamber */

.wol-hero .container { max-width: 1080px; }
.wol-hero-mark {
    display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
    padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
    color: var(--gold); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
}
.wol-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }

.wol-principle-strip {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-top:34px;
}
.wol-principle {
    padding:20px; border:1px solid var(--line); border-radius:var(--radius-md);
    background:color-mix(in srgb, var(--bg-card) 72%, transparent); backdrop-filter:blur(14px);
}
.wol-principle strong { display:block; margin-bottom:6px; font-family:var(--font-serif); font-size:1.08rem; }
.wol-principle span { color:var(--muted); font-size:.9rem; line-height:1.55; }

.wol-workbench {
    display:grid; grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr); gap:22px; align-items:start;
}
.wol-panel {
    border:1px solid var(--line-strong); border-radius:var(--radius-lg); overflow:hidden;
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb,var(--gold) 8%,transparent), transparent 34%),
      color-mix(in srgb,var(--bg-card) 82%,transparent);
    box-shadow:var(--shadow); backdrop-filter:blur(18px);
}
.wol-panel-head {
    padding:22px 24px 18px; border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--bg-elev) 66%,transparent);
}
.wol-panel-kicker {
    display:block; margin-bottom:5px; color:var(--teal); font-family:var(--font-mono);
    font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
}
.wol-panel-head h2,.wol-panel-head h3 { margin:0; font-family:var(--font-heading); }
.wol-panel-head p { margin:7px 0 0; color:var(--muted); font-size:.93rem; }
.wol-form { padding:24px; display:flex; flex-direction:column; gap:18px; }
.wol-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wol-field { display:flex; flex-direction:column; gap:7px; }
.wol-field.full { grid-column:1 / -1; }
.wol-field label {
    color:var(--muted); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.055em; text-transform:uppercase;
}
.wol-field input,.wol-field select,.wol-field textarea {
    width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
    background:var(--bg-elev); color:var(--ink); padding:12px 14px; outline:none;
    transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
.wol-field textarea { min-height:118px; resize:vertical; line-height:1.6; }
.wol-field input:focus,.wol-field select:focus,.wol-field textarea:focus {
    border-color:var(--gold); box-shadow:0 0 0 3px var(--glow); background:var(--bg-card-hover);
}
.wol-help { color:var(--dim); font-size:.8rem; line-height:1.5; }

.wol-help-types { display:flex; flex-wrap:wrap; gap:8px; }
.wol-help-chip {
    position:relative; display:inline-flex; align-items:center; gap:6px; cursor:pointer;
}
.wol-help-chip input { position:absolute; opacity:0; pointer-events:none; }
.wol-help-chip span {
    display:inline-flex; padding:8px 11px; border:1px solid var(--line); border-radius:999px;
    background:var(--bg-elev); color:var(--muted); font-size:.84rem; transition:all var(--ease);
}
.wol-help-chip input:checked + span {
    border-color:var(--gold); color:var(--gold-2); background:var(--glow); box-shadow:0 0 18px color-mix(in srgb,var(--glow) 46%,transparent);
}
.wol-form-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.wol-save-state { color:var(--teal); font-family:var(--font-mono); font-size:.72rem; margin-left:auto; }

.wol-preview { position:sticky; top:calc(var(--nav-height) + 22px); }
.wol-preview-body { padding:24px; }
.wol-letter {
    position:relative; min-height:430px; padding:28px;
    border:1px solid var(--line); border-radius:var(--radius-md);
    background:
      linear-gradient(180deg,color-mix(in srgb,var(--bg-elev) 88%,transparent),color-mix(in srgb,var(--bg-card) 90%,transparent));
}
.wol-letter::before {
    content:"✦"; position:absolute; right:22px; top:18px; color:var(--gold); opacity:.65;
}
.wol-letter-label {
    display:block; color:var(--gold); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.12em; text-transform:uppercase;
}
.wol-letter h3 { margin:10px 0 6px; font-family:var(--font-heading); font-size:1.8rem; line-height:1.08; }
.wol-letter-meta { color:var(--dim); font-size:.82rem; margin-bottom:20px; }
.wol-letter-section { margin-top:18px; }
.wol-letter-section strong {
    display:block; margin-bottom:6px; color:var(--teal); font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
}
.wol-letter-section p {
    margin:0; color:var(--muted); font-family:var(--font-serif); font-size:1rem; line-height:1.68; white-space:pre-wrap;
}
.wol-empty { color:var(--dim)!important; font-style:italic; }
.wol-count { margin-top:16px; color:var(--dim); font-family:var(--font-mono); font-size:.68rem; }

.wol-how-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:28px; }
.wol-step {
    position:relative; padding:24px 20px; border:1px solid var(--line); border-radius:var(--radius-md); background:color-mix(in srgb,var(--bg-card) 74%,transparent); backdrop-filter:blur(12px);
}
.wol-step-num {
    display:inline-grid; place-items:center; width:38px; height:38px; margin-bottom:16px;
    border:1px solid var(--line-strong); border-radius:50%; color:var(--gold); font-family:var(--font-mono); font-size:.72rem;
    box-shadow:0 0 20px var(--glow);
}
.wol-step h3 { margin:0 0 8px; font-family:var(--font-serif); font-size:1.15rem; }
.wol-step p { margin:0; color:var(--muted); font-size:.9rem; line-height:1.6; }

.wol-promise {
    margin-top:28px; padding:28px 30px; border-left:2px solid var(--gold);
    border-radius:0 var(--radius-lg) var(--radius-lg) 0;
    background:linear-gradient(90deg,var(--glow),transparent);
}
.wol-promise p { margin:0; max-width:900px; font-family:var(--font-heading); font-size:clamp(1.35rem,2.4vw,1.9rem); line-height:1.45; }

@media (max-width:980px){
  .wol-workbench{grid-template-columns:1fr;}
  .wol-preview{position:static;}
  .wol-how-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:700px){
  .wol-principle-strip,.wol-form-grid,.wol-how-grid{grid-template-columns:1fr;}
  .wol-form{padding:18px;}
  .wol-preview-body{padding:18px;}
  .wol-letter{padding:22px;}
  .wol-save-state{width:100%; margin-left:0;}
}