/* ZenPens submission form. Uses the theme's colours and fonts (tokens.css), with fallbacks so it never looks broken.
   Every rule starts with .zps so nothing here can change another part of the site. Ported from the prototype's form styles. */
.zps{--z-line:var(--line,#E3DECF);--z-surface:var(--surface,#fff);--z-bg:var(--bg,#FBF9F4);--z-text:var(--text,#111A15);--z-muted:var(--muted,#55625A);--z-accent:var(--accent-text,#0A7A42);--z-focus:var(--focus,#0A7A42);--z-btn:var(--btn-bg,#0A7A42);--z-btnfg:var(--btn-fg,#fff);
  color:var(--z-text);font-family:var(--font-ui,system-ui,sans-serif);padding-bottom:var(--s-7,3rem);max-width:760px}
.zps *,.zps *::before,.zps *::after{box-sizing:border-box}
.zps [hidden]{display:none!important}
.zps .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.zps-lede{font-family:var(--font-read,Georgia,serif);font-size:var(--fs-2,1.125rem);color:var(--z-muted);max-width:56ch;margin:0 0 var(--s-5,1.5rem)}
.zps a{color:var(--z-accent)}
.zps-note{padding:var(--s-4,1rem);border:1px solid var(--z-line);border-radius:var(--r-md,12px);background:var(--z-surface)}
.zps-restore{margin:0 0 var(--s-4,1rem);padding:var(--s-3,.75rem) var(--s-4,1rem);border:1px solid var(--z-line);border-left:3px solid var(--z-accent);border-radius:var(--r-md,12px);background:var(--z-surface);font-size:var(--fs-0,.875rem)}
.zps-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Steps */
.zps-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-2,.5rem);list-style:none;margin:0 0 var(--s-5,1.5rem);padding:0;counter-reset:none}
.zps-steps button{width:100%;display:flex;align-items:center;gap:var(--s-2,.5rem);padding:.6rem .7rem;min-height:44px;border:1px solid var(--z-line);border-radius:var(--r-pill,999px);background:var(--z-surface);color:var(--z-muted);font:600 var(--fs-0,.875rem)/1.1 var(--font-ui,system-ui);cursor:pointer;text-align:left}
.zps-steps button:disabled{opacity:.6;cursor:default}
.zps-n{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;border:1.5px solid currentColor;font-size:.8rem}
.zps-steps .is-current button{border-color:var(--z-accent);color:var(--z-accent);background:var(--surface-2,#F3EFE4)}
.zps-steps .is-current .zps-n{background:var(--z-accent);border-color:var(--z-accent);color:var(--z-bg)}
.zps-steps .is-done button{color:var(--z-text)}
.zps-steps .is-done .zps-n{background:var(--z-accent);border-color:var(--z-accent);color:var(--z-bg)}
.zps-steps .is-done .zps-n::before{content:"\2713"}
.zps-steps .is-done .zps-n{font-size:0}.zps-steps .is-done .zps-n::before{font-size:.85rem}
@media (max-width:560px){.zps-steps .zps-t{display:none}.zps-steps .is-current .zps-t{display:inline}.zps-steps{grid-template-columns:1fr 1fr 1fr 1fr}.zps-steps .is-current{grid-column:span 1}}

/* Fieldsets and fields */
.zps .sf-set{border:1px solid var(--z-line);border-radius:var(--r-lg,20px);background:var(--z-surface);padding:var(--s-5,1.5rem) var(--s-6,2rem) var(--s-6,2rem);margin:0 0 var(--s-5,1.5rem);min-width:0}
.zps .sf-set legend{padding:0 var(--s-2,.5rem);font:600 var(--fs-2,1.125rem)/1.2 var(--font-display,Georgia,serif)}
.zps .sf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5,1.5rem)}
.zps .fld{margin-top:var(--s-4,1rem);min-width:0;border:0;padding:0}
.zps fieldset.fld{margin-left:0;margin-right:0}
.zps .fld label:not(.chk):not(.zps-opt){display:block;font-weight:600;font-size:var(--fs-0,.875rem);margin-bottom:var(--s-2,.5rem)}
.zps .req,.zps .opt{font-weight:500;font-size:.75rem;color:var(--z-muted);margin-left:var(--s-1,.25rem)}
.zps .req{color:var(--z-accent)}
.zps input:not([type=checkbox]):not([type=radio]):not([type=file]),.zps select,.zps textarea{width:100%;font:500 var(--fs-1,1rem)/1.3 var(--font-ui,system-ui);color:var(--z-text);background:var(--z-bg);border:1px solid var(--z-line);border-radius:var(--r-md,12px);padding:.75rem .9rem;min-height:44px}
.zps textarea{font-family:var(--font-read,Georgia,serif);line-height:1.55;resize:vertical}
.zps input[type=file]{max-width:100%;font:500 var(--fs-0,.875rem) var(--font-ui,system-ui)}
.zps input:focus-visible,.zps select:focus-visible,.zps textarea:focus-visible,.zps .ed:focus-visible,.zps button:focus-visible,.zps summary:focus-visible,.zps .zps-link:focus-visible{outline:3px solid var(--z-focus);outline-offset:2px}
.zps [aria-invalid="true"]{border-color:#C0392B}
.zps .hint{margin:var(--s-2,.5rem) 0 0;font-size:var(--fs-0,.875rem);color:var(--z-muted)}
.zps .hint.over{color:#B3261E;font-weight:600}
.zps .err{margin:var(--s-2,.5rem) 0 0;font-size:var(--fs-0,.875rem);font-weight:600;color:#B3261E}
:root[data-theme="dark"] .zps .err,:root[data-theme="dark"] .zps .hint.over{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .zps .err,:root:not([data-theme="light"]) .zps .hint.over{color:#FF8A80}}
.zps .zps-fail{padding:var(--s-3,.75rem) var(--s-4,1rem);border:1px solid #C0392B;border-radius:var(--r-md,12px);background:var(--z-surface)}
.zps .chk{display:flex;gap:var(--s-3,.75rem);align-items:flex-start;margin-top:var(--s-4,1rem);font-size:var(--fs-1,1rem);cursor:pointer}
.zps .chk input{width:1.2rem;height:1.2rem;flex:none;margin-top:.15rem;accent-color:var(--z-accent)}
.zps #sf-cn-wrap{margin-top:var(--s-3,.75rem)}
.zps .lbl-like{display:block;font-weight:600;font-size:var(--fs-0,.875rem)}
.zps .zps-legend{display:block;padding:0;margin:0 0 var(--s-2,.5rem);font-weight:600;font-size:var(--fs-0,.875rem)}

/* Submitting for */
.zps .zps-opt{display:flex;gap:var(--s-3,.75rem);align-items:flex-start;padding:var(--s-3,.75rem) var(--s-4,1rem);margin-top:var(--s-2,.5rem);border:1px solid var(--z-line);border-radius:var(--r-md,12px);background:var(--z-bg);cursor:pointer;font-size:var(--fs-1,1rem)}
.zps .zps-opt:has(input:checked){border-color:var(--z-accent);background:var(--surface-2,#F3EFE4)}
.zps .zps-opt input{width:1.2rem;height:1.2rem;flex:none;margin-top:.2rem;accent-color:var(--z-accent)}
.zps .zps-opt .hint{display:block;margin-top:2px}
.zps .zps-kind{display:inline-block;margin-left:.4rem;font:600 .68rem/1 var(--font-ui,system-ui);letter-spacing:.09em;text-transform:uppercase;padding:.28rem .5rem;border-radius:var(--r-pill,999px);border:1px solid var(--z-line);color:var(--z-accent);vertical-align:middle}

/* Writing box */
.zps .ed-bar{display:flex;flex-wrap:wrap;gap:var(--s-2,.5rem);padding:var(--s-2,.5rem);border:1px solid var(--z-line);border-bottom:0;border-radius:var(--r-md,12px) var(--r-md,12px) 0 0;background:var(--surface-2,#F3EFE4)}
.zps .ed-bar button{min-width:2.4rem;height:2.2rem;padding:0 .7rem;border:1px solid var(--z-line);border-radius:var(--r-sm,6px);background:var(--z-bg);color:var(--z-text);font:600 var(--fs-0,.875rem) var(--font-ui,system-ui);cursor:pointer}
.zps .ed-bar button:hover{border-color:var(--z-accent);color:var(--z-accent)}
.zps .ed{min-height:18rem;max-height:70vh;overflow:auto;padding:var(--s-4,1rem);border:1px solid var(--z-line);border-radius:0 0 var(--r-md,12px) var(--r-md,12px);background:var(--z-bg);color:var(--z-text);font-family:var(--font-read,Georgia,serif);font-size:var(--fs-2,1.125rem);line-height:1.6;position:relative}
.zps .ed.is-empty::before{content:attr(data-ph);color:var(--z-muted);pointer-events:none;position:absolute;left:var(--s-4,1rem);right:var(--s-4,1rem)}
.zps .ed p{margin:0 0 1em}
.zps .ed hr{border:0;text-align:center;margin:1.4em 0}
.zps .ed hr::after{content:"\2022  \2022  \2022";color:var(--z-muted);letter-spacing:.4em}
.zps .ed[aria-invalid="true"]{border-color:#C0392B}

/* Poems */
.zps .pm,.zps .sp,.zps .co{margin:var(--s-4,1rem) 0;padding:var(--s-4,1rem) var(--s-5,1.5rem) var(--s-5,1.5rem);border:1px solid var(--z-line);border-left:3px solid var(--z-accent);border-radius:var(--r-lg,20px);background:var(--z-surface)}
.zps .pm-head,.zps .sp-head,.zps .co-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3,.75rem);margin-bottom:var(--s-3,.75rem)}
.zps .pm-n,.zps .sp-n,.zps .co-n{margin:0;font:600 var(--fs-2,1.125rem) var(--font-display,Georgia,serif)}
.zps .pm .ed,.zps .sp .ed{min-height:9rem;max-height:50vh}
.zps .pm-foot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-4,1rem);margin-top:var(--s-3,.75rem)}
.zps .pm-foot .hint{margin:0}

/* Pictures */
.zps .cov-up{display:flex;gap:var(--s-5,1.5rem);align-items:flex-start;flex-wrap:wrap}
.zps .cov-prev{width:110px;flex:none}
.zps .cov-prev img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:3px 8px 8px 3px;box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.15))}
.zps .ph-prev{width:84px;flex:none}
.zps .ph-prev img{display:block;width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:var(--shadow,0 6px 20px rgba(0,0,0,.15))}
.zps .cov-up>div:last-child{flex:1 1 240px;min-width:0}

/* Buttons and links */
.zps .zps-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 var(--fs-1,1rem)/1 var(--font-ui,system-ui);padding:.85rem 1.4rem;border-radius:var(--r-pill,999px);border:1.5px solid transparent;cursor:pointer;min-height:44px;text-decoration:none}
.zps .zps-btn:active{transform:scale(.97)}
.zps .zps-btn:disabled{opacity:.55;cursor:default}
.zps .zps-btn-primary{background:var(--z-btn);color:var(--z-btnfg)}
.zps .zps-btn-primary:hover:not(:disabled){filter:brightness(1.08)}
.zps .zps-btn-ghost{background:transparent;color:var(--z-text);border-color:var(--z-line)}
.zps .zps-btn-ghost:hover:not(:disabled){border-color:var(--z-text)}
.zps .zps-btn-sm{padding:.55rem .9rem;font-size:var(--fs-0,.875rem);min-height:36px}
.zps .zps-link{background:none;border:0;padding:0;font:600 var(--fs-0,.875rem) var(--font-ui,system-ui);color:var(--z-accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.zps-nav{display:flex;flex-wrap:wrap;gap:var(--s-3,.75rem);align-items:center;margin-top:var(--s-5,1.5rem)}
.zps-nav .zps-btn-primary{margin-left:auto}
.zps-tools{display:flex;flex-wrap:wrap;gap:var(--s-2,.5rem) var(--s-5,1.5rem);align-items:center;margin-top:var(--s-6,2rem);padding-top:var(--s-4,1rem);border-top:1px solid var(--z-line)}
.zps-tools .hint{margin:0;flex:1 1 100%}

/* Summary */
.zps .zps-dl{margin:0;display:grid;grid-template-columns:minmax(7rem,10rem) 1fr;gap:var(--s-2,.5rem) var(--s-4,1rem)}
.zps .zps-dl dt{font-weight:600;font-size:var(--fs-0,.875rem);color:var(--z-muted)}
.zps .zps-dl dd{margin:0;overflow-wrap:anywhere}
@media (max-width:560px){.zps .zps-dl{grid-template-columns:1fr;gap:0}.zps .zps-dl dd{margin-bottom:var(--s-3,.75rem)}}

/* Thank-you */
.zps .sf-done{margin-top:var(--s-4,1rem);padding:var(--s-7,3rem) var(--s-6,2rem);background:var(--z-surface);border:1px solid var(--z-line);border-radius:var(--r-lg,20px);text-align:center}
.zps .sf-done h2{font-size:var(--fs-5,2.2rem);margin:var(--s-3,.75rem) 0}
.zps .sf-done p{max-width:50ch;margin-inline:auto;font-family:var(--font-read,Georgia,serif);font-size:var(--fs-2,1.125rem)}
.zps .sf-refbox{margin:var(--s-5,1.5rem) auto;max-width:34rem;padding:var(--s-4,1rem) var(--s-5,1.5rem);border:1px solid var(--z-line);border-radius:var(--r-lg,20px);background:var(--z-bg)}
.zps .sf-done .sf-ref-l{margin:0;font:600 var(--fs-0,.875rem) var(--font-ui,system-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--z-accent)}
.zps .sf-ref{margin:var(--s-2,.5rem) 0;font:600 var(--fs-3,1.4rem) var(--font-ui,system-ui)!important;letter-spacing:.08em}
.zps .sf-done .sf-ref-n{margin:0 auto;font:400 var(--fs-0,.875rem)/1.6 var(--font-ui,system-ui);color:var(--z-muted)}
.zps .sf-poemrefs{list-style:none;margin:var(--s-3,.75rem) auto var(--s-4,1rem);padding:0;max-width:26rem;text-align:left}
.zps .sf-poemrefs li{display:flex;justify-content:space-between;gap:var(--s-4,1rem);padding:var(--s-2,.5rem) 0;border-top:1px solid var(--z-line);font:400 var(--fs-0,.875rem) var(--font-ui,system-ui)}
.zps .sf-poemrefs b{letter-spacing:.06em;white-space:nowrap}

@media (max-width:560px){.zps .sf-row{grid-template-columns:1fr}.zps .sf-set{padding:var(--s-4,1rem) var(--s-4,1rem) var(--s-5,1.5rem)}.zps .sf-done{padding:var(--s-6,2rem) var(--s-4,1rem)}.zps-nav .zps-btn-primary{margin-left:0}}
@media (prefers-reduced-motion:reduce){.zps *{transition:none!important;animation:none!important}}

.zps .zps-for select{width:100%}
.zps #sf-for-note:empty{display:none}

/* 0.2.0: sign-in nudge and the "Sending as" line */
.zps .zps-signin{margin:0 0 var(--s-4,1rem);font-size:var(--fs-0,.875rem);color:var(--muted,#555)}
.zps .zps-signin[hidden]{display:none}
.zps #zps-as label{display:block;font-weight:600;color:var(--z-text)}
.zps .zps-as-sel{max-width:26rem;margin:4px 0 2px}

/* 0.3.0: the short path, the Word upload and links in the editor */
.zps-steps[data-n="3"]{grid-template-columns:repeat(3,1fr)}
.zps-steps[data-n="2"]{grid-template-columns:repeat(2,1fr)}
.zps-steps[data-n="2"] .zps-t,.zps-steps[data-n="3"] .zps-t{display:inline}
.zps .zps-word{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3,.75rem);margin:0 0 var(--s-2,.5rem)}
.zps .zps-word .hint{flex:1 1 16rem;margin:0}
.zps .ed a{color:var(--z-accent);text-decoration:underline;text-underline-offset:3px}
.zps .ed sup{font-size:.75em;line-height:0}
.zps #sf-cover-block{display:block}
.zps .zps-managed{margin:var(--s-5,1.5rem) 0;display:grid;gap:var(--s-3,.75rem)}
.zps .zps-mrow{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4,1rem);padding:var(--s-3,.75rem) var(--s-4,1rem);border:1px solid var(--z-line);border-radius:var(--r-md,12px);background:var(--surface-2,#F3EFE4);opacity:.7}
.zps .zps-mrow:hover,.zps .zps-mrow:focus-within{opacity:1}
.zps .zps-mlabel{margin:0 0 2px;font:600 var(--fs-0,.875rem) var(--font-ui,system-ui);color:var(--z-muted)}
.zps .zps-mval{color:var(--z-text);font-size:var(--fs-0,.875rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zps .zps-mval img{border-radius:50%;object-fit:cover;display:block}
.zps .zps-mrow .zps-link{white-space:nowrap;flex:none}

/* Series (0.7.0, Entry 178) */
.zps .sp-w{margin:0;font-size:var(--fs-0,.875rem);color:var(--z-muted,inherit)}
.zps .sp-w.over,.zps #sf-stotal.over{color:var(--z-err,#b3261e);font-weight:600}
.zps #sf-series[hidden],.zps #sf-shape-wrap[hidden]{display:none}

/* 0.9.1 (Entry 214): the four step circles stay inside the page. The theme styles every list inside a page's text (.entry ol), indenting it by 1.2em and making a grid with its own gap,
   and because that rule is more specific than the rule above, the row was pushed right and four equal columns ran off the edge on a phone.
   These rules start with .zps .zps-steps, which is more specific, so the row ignores the theme's list styling. Columns can shrink (minmax(0,1fr)). */
.zps .zps-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2,.5rem);margin:0 0 var(--s-5,1.5rem);padding:0;list-style:none}
.zps .zps-steps[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.zps .zps-steps[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.zps .zps-steps li{min-width:0;margin:0;padding:0;font:inherit}
.zps .zps-steps button{min-width:0}
.zps .zps-steps .zps-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){
  /* Four steps on a phone: the finished and coming steps shrink to their circle, and the current step takes the rest of the row and keeps its word. */
  .zps .zps-steps{display:flex}
  .zps .zps-steps li{flex:0 0 auto}
  .zps .zps-steps li.is-current{flex:1 1 0}
  .zps .zps-steps[data-n="2"] li{flex:1 1 0}
  .zps .zps-steps[data-n="3"] .zps-t{display:none}
  .zps .zps-steps[data-n="3"] .is-current .zps-t{display:inline}
  .zps .zps-steps button{padding:.5rem}
}
/* Three steps with room (a wide phone): every step shows its word, in equal columns. */
@media (min-width:441px) and (max-width:560px){
  .zps .zps-steps[data-n="3"] li{flex:1 1 0}
  .zps .zps-steps[data-n="3"] .zps-t{display:inline}
}

.zps #sf-co-box{margin-top:var(--s-3,.75rem)}
.zps .co .fld:last-child{margin-bottom:0}
.zps #sf-co-add{margin-top:var(--s-2,.5rem)}

/* The cover, three ways (0.12.0, Entry 226). The picker draws real covers with the theme's own cover style (cv-* colours, p-* patterns), so what a writer
   sees is what the site shows. */
.zps .cv-paths{display:grid;gap:var(--s-2,.5rem);margin-top:var(--s-3,.75rem)}
.zps .cv-path{display:flex;gap:var(--s-3,.75rem);align-items:flex-start;padding:.8rem 1rem;border:1px solid var(--z-line);border-radius:var(--r-md,12px);background:var(--z-bg);cursor:pointer;min-height:44px}
.zps .cv-path input{width:1.15rem;height:1.15rem;flex:none;margin-top:.2rem;accent-color:var(--z-accent)}
.zps .cv-path b{display:block;font-size:var(--fs-1,1rem)}
.zps .cv-path small{display:block;margin-top:.15rem;color:var(--z-muted);font-size:var(--fs-0,.875rem);line-height:1.35}
.zps .cv-path:has(input:checked){border-color:var(--z-accent);box-shadow:0 0 0 1px var(--z-accent)}
.zps .cv-path:has(input:focus-visible){outline:3px solid var(--z-focus);outline-offset:2px}
.zps .cv-pick{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4,1rem);justify-items:center}
.zps .cv-pv{width:150px;max-width:100%}
.zps .cv-pv .cover{padding:.9rem .8rem .9rem 1rem}
.zps .cv-pv .cover .c-title{font-size:1.05rem}
.zps .cv-pv .cover .c-by{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;font-size:.7rem}
.zps .cv-ctl{width:100%;min-width:0}
.zps .cv-ctl .lbl-like{margin-top:var(--s-3,.75rem)}
.zps .cv-ctl .lbl-like:first-child{margin-top:0}
.zps .cv-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:var(--s-2,.5rem);margin-top:var(--s-2,.5rem)}
.zps .cv-sw{width:44px;height:44px;padding:0;border-radius:50%;border:2px solid var(--z-surface);background:var(--c1);box-shadow:0 0 0 1px rgba(0,0,0,.28);cursor:pointer;justify-self:center}
.zps .cv-sw[aria-checked="true"]{box-shadow:0 0 0 3px var(--z-accent)}
.zps .cv-pats{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:var(--s-2,.5rem);margin-top:var(--s-2,.5rem)}
.zps .cv-pt{padding:2px;aspect-ratio:1;border:2px solid transparent;border-radius:10px;background:none;cursor:pointer;min-width:44px}
.zps .cv-pt .cover{width:100%;height:100%;aspect-ratio:1;padding:0;border-radius:7px;box-shadow:none;display:block}
.zps .cv-pt .cover.pv-0{--pm:.55;--pp:0 0}
.zps .cv-pt .cover.pv-0::before{opacity:.55}
.zps .cv-pt[aria-checked="true"]{border-color:var(--z-accent);box-shadow:0 0 0 1px var(--z-accent)}
@media (min-width:640px){.zps .cv-pick{grid-template-columns:150px minmax(0,1fr);justify-items:stretch;align-items:start}}