/* ZenPens theme 0.1.7: page styles copied unchanged from the prototype (website/css/components.css).
   Everything here already existed in the prototype. 0.1.6 simply did not carry it over (Entry 106).
   Covers: the library-style page frame (stats strip, search and sort bar, segmented control), Browse and Writers filters,
   the About-style layout used by About, Community and Penned, the legal page text styles, and the contributors slideshow. */
.lib-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0;margin:var(--s-6) 0 var(--s-7);border-block:1px solid var(--line)}
.lib-stats>div{padding:var(--s-4) var(--s-4) var(--s-4) 0;min-width:0}
.lib-stats dt{font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.lib-stats dd{margin:0;font:600 var(--fs-4)/1.1 var(--font-display);overflow-wrap:anywhere}
.lib-tools{display:flex;flex-wrap:wrap;gap:var(--s-3);margin-bottom:var(--s-4);align-items:center}
.lib-search{flex:1 1 220px;min-width:0}
.lib input[type="search"],.lib select,.lib textarea{font:500 var(--fs-1)/1.3 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.7rem .9rem;min-height:44px;width:100%}
.lib select{width:auto;cursor:pointer}
.lib textarea{font-family:var(--font-read);font-size:var(--fs-1);resize:vertical;line-height:1.5}
.lib input:focus-visible,.lib select:focus-visible,.lib textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--muted);font:600 var(--fs-0)/1 var(--font-ui);padding:.75rem 1.1rem;cursor:pointer;min-height:44px}
.seg button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.pv section{margin-top:var(--s-7);max-width:66ch}
.pv h2{font-size:var(--fs-4);margin:0 0 var(--s-3)}
.pv h3{font-size:var(--fs-2);margin:var(--s-5) 0 var(--s-2)}
.pv p,.pv li{font-family:var(--font-read);font-size:var(--fs-2);line-height:1.6}
.pv ul{padding-left:1.2em;display:grid;gap:var(--s-2)}
.pv a{color:var(--zen-green-deep);text-decoration:underline;text-underline-offset:2px}
.pv-ph{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone;font:600 var(--fs-0)/1.3 var(--font-ui);color:#7a4a00;background:#fdf0d2;border-radius:var(--r-sm);padding:.1rem .45rem}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) .pv-ph{color:#F4B63A;background:rgba(244,182,58,.14)}}
.pv a.btn{text-decoration:none}
.pv a.btn-primary{color:var(--btn-fg)}
.ab{max-width:46rem;margin-inline:auto;padding-bottom:var(--s-8)}
.ab-hero{padding:var(--s-6) 0 var(--s-5)}
.ab-hero h1{margin:.2em 0 .3em}
.ab-lede{font-family:var(--font-read);font-size:var(--fs-3);line-height:1.6;max-width:40ch;margin:0 0 var(--s-4)}
.ab-since{display:inline-block;margin:0;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:var(--fs-0);color:var(--muted);background:var(--surface)}
.ab-sec{padding:var(--s-6) 0;border-top:1px solid var(--line)}
.ab-sec h2{margin:0 0 var(--s-4);font-size:var(--fs-4)}
.ab-prose p,.ab-prose-p{font-family:var(--font-read);font-size:var(--fs-2);line-height:1.75;max-width:62ch;margin:0 0 1.1em}
.ab-time{list-style:none;margin:var(--s-5) 0 0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:repeat(3,1fr)}
.ab-time li{padding-top:var(--s-3);border-top:3px solid var(--accent)}
.ab-time b{display:block;font-family:var(--font-display);font-size:var(--fs-4);margin-bottom:.2rem}
.ab-time span{color:var(--muted);font-size:var(--fs-0);line-height:1.5}
.ab-tiles{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-4);grid-template-columns:repeat(3,1fr)}
.ab-tiles li{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ab-tiles b{display:block;font-family:var(--font-display);font-size:var(--fs-5,2rem);color:var(--accent-text);line-height:1.1}
.ab-tiles span{display:block;margin-top:.4rem;color:var(--muted);font-size:var(--fs-0)}
.ab-cards{display:grid;gap:var(--s-4);grid-template-columns:repeat(3,1fr)}
.ab-cards article{padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ab-cards h3{margin:0 0 .4rem;font-size:var(--fs-2)}
.ab-cards p{margin:0;color:var(--muted);font-size:var(--fs-0);line-height:1.6}
.ab-people{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
.ab-people li{display:flex;gap:var(--s-5);align-items:center}
.ab-people h3{margin:0;font-size:var(--fs-3)}
.ab-people p{margin:.15rem 0 0}
.ab-av{width:96px;height:96px;font-size:2rem}
.ab-soon{font-size:var(--fs-0);color:var(--muted);font-style:italic}
.ab-cta{padding:var(--s-7) var(--s-5) 0;border-top:1px solid var(--line);text-align:center}
.ab-cta h2{margin:0 0 .3rem}
.ab-cta .hero-actions{justify-content:center;margin-top:var(--s-4)}
@media (max-width:700px){.ab-time,.ab-tiles,.ab-cards{grid-template-columns:1fr}.ab-people li{align-items:flex-start}}
.ab-hero h1{font-size:clamp(2.2rem,6vw,3.4rem);line-height:1.08}
.ab-rules{margin:0 0 var(--s-4);padding-left:1.2rem;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.7}
.ab-rules li{margin-bottom:.6rem}
.ab-time li>b{font-variant-numeric:lining-nums}
.ab-four{grid-template-columns:repeat(4,1fr)}
@media (max-width:700px){.ab-four{grid-template-columns:1fr}}
#community-view h3{font-size:var(--fs-2);margin:var(--s-5) 0 .3rem}
.br-filters{display:grid;gap:var(--s-2);margin-bottom:var(--s-4)}
#browse-view .filter-meta{margin:0 0 var(--s-5)}
.br-more{text-align:center;margin:var(--s-7) 0 0}
.br-more a.is-loading{opacity:.6;pointer-events:none}
.section-head .filter-meta+a{margin-left:auto}
.f-poem .rd-by{flex-wrap:wrap}
.rd-author .rd-one{display:flex;gap:var(--s-5);align-items:flex-start}
.rd-crew{display:block}
.rd-crew{min-width:0;max-width:100%}
.rd-crew .crew-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-2) var(--s-3);margin-bottom:var(--s-4)}
.rd-crew .crew-bar .eyebrow{margin:0}
.crew-nav{display:flex;align-items:center;gap:var(--s-3)}
.crew-n{font:600 var(--fs-0) var(--font-ui);color:var(--muted);min-width:4.5rem;text-align:center}
.crew-slide{display:flex;gap:var(--s-5);align-items:flex-start}
@media (max-width:560px){.rd-author .rd-one,.crew-slide{flex-direction:column}}
.rd-author .rd-one{flex:1}
.cl .chip-row,.cl #cl-filter{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-6)}
.cl{padding-block:var(--s-5) var(--s-8)}
.cl .coll-grid{margin-top:0}
.cl .chip-row{overflow:visible}
.chip-row .chip[aria-current="true"],.chip-row .chip[aria-current="page"]{border-color:var(--accent-text);color:var(--accent-text);background:var(--surface-2)}
.lib-tools .btn{min-height:44px}
.lib-head .eyebrow{margin:0}
.wr-note{margin:var(--s-3) 0 0}
.crew-slide[hidden]{display:none}

/* 0.1.9: the contributors card no longer pushes the page sideways on a narrow phone, and the Browse chips carry a rough count. */
.rd-crew .crew-nav{flex:0 0 auto}
.rd-crew .crew-bar .eyebrow{flex:1 1 auto;min-width:0}
.rd-crew .crew-slide{min-width:0}
.rd-crew .crew-slide *{min-width:0;overflow-wrap:anywhere}

/* 0.1.12: country text, A to Z grouping on the Writers page */
.wp-where,.rd-where,.wr-where{margin:var(--s-1) 0 0;color:var(--muted);font-size:var(--fs-0)}
.wr-top .wr-where{margin:2px 0 0}
.lib-tools select{max-width:100%;min-height:44px}
.az-nav{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);margin:var(--s-4) 0 var(--s-2);font:600 var(--fs-0) var(--font-ui)}
.az-nav a{min-width:1.6rem;min-height:44px;display:inline-grid;place-items:center;color:var(--accent-text);text-decoration:none;border-radius:var(--r-md)}
.az-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.az-nav a[aria-current="true"]{background:var(--surface-2);padding-inline:var(--s-3)}
.az-group{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:var(--s-4);padding-block:var(--s-6);border-top:1px solid var(--line)}
.az-letter{margin:0;font:600 var(--fs-5,3rem)/1 var(--font-display);color:var(--accent-text)}
@media (max-width:640px){.az-group{grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding-block:var(--s-5)}.az-letter{font-size:var(--fs-4)}}
.where-link{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.where-link:hover{color:var(--accent-text);text-decoration-color:currentColor}

/* 0.1.14: the country on a piece is a small button-like link above the rating line, and the photo credit closes the piece */
.rd-by:has(+ .rd-where){margin-bottom:var(--s-3)}
.rd-where{margin:0 0 var(--s-3)}
.rd-where + .rd-nums{margin-top:0}
.rd-where:not(:has(+ .rd-nums)){margin-bottom:var(--s-5)}
.rd-where .where-link{display:inline-flex;align-items:center;min-height:1.9rem;padding:.1rem .8rem;border:1px solid var(--line);border-radius:var(--r-pill,999px);background:var(--surface-2);color:var(--text);font:600 var(--fs-0) var(--font-ui);text-decoration:none;line-height:1.2}
.rd-where .where-link:hover,.rd-where .where-link:focus-visible{border-color:var(--accent);color:var(--accent-text)}
.rd-credit{margin:var(--s-6) 0 0;color:var(--muted);font-size:var(--fs-0);line-height:1.5}
.rd-credit a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.rd-credit a:hover{color:var(--accent-text);text-decoration-color:currentColor}
.f-poem .rd-credit{text-align:center}

/* Contact page (0.1.27), copied from the prototype's form and contact styles. Scoped to .ct so no other form is touched. */
.ct .sf-set{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);padding:var(--s-5) var(--s-6) var(--s-6);margin:var(--s-6) 0 0;min-width:0}
.ct .sf-set legend{padding:0 var(--s-2);font:600 var(--fs-2)/1.2 var(--font-display)}
.ct .sf-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.ct .fld{margin-top:var(--s-4);min-width:0}
.ct .fld label{display:block;font-weight:600;font-size:var(--fs-0);margin-bottom:var(--s-2)}
.ct .req{font-weight:500;font-size:.75rem;color:var(--accent-text);margin-left:var(--s-1)}
.ct input,.ct select,.ct textarea{width:100%;font:500 var(--fs-1)/1.3 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:.75rem .9rem}
.ct textarea{resize:vertical;font-family:var(--font-read);font-size:var(--fs-2);line-height:1.5}
.ct input:focus-visible,.ct select:focus-visible,.ct textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.ct [aria-invalid="true"]{border-color:#C0392B}
.ct .err{margin:var(--s-2) 0 0;font-size:var(--fs-0);font-weight:600;color:#B3261E}
:root[data-theme="dark"] .ct .err{color:#FF8A80}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ct .err{color:#FF8A80}}
.ct .sf-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:center;margin-top:var(--s-6)}
.ct .sf-done{margin-top:var(--s-6);padding:var(--s-7) var(--s-6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);text-align:center}
.ct .sf-done h2{font-size:var(--fs-5);margin:var(--s-3) 0}
.ct .sf-done p{max-width:50ch;margin-inline:auto;font-family:var(--font-read);font-size:var(--fs-2)}
.ct-grid{display:grid;gap:var(--s-7);margin-top:var(--s-5)}
@media(min-width:900px){.ct-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-6)}
.ct-side h2{font-size:var(--fs-3);margin:0 0 var(--s-4)}
.ct-side ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5)}
@media (max-width:560px){.ct .sf-row{grid-template-columns:1fr}.ct .sf-set{padding:var(--s-4) var(--s-4) var(--s-5)}}

/* 0.1.33 (Entry 214): Browse and Writers controls. On a wide screen every control stays inline, the kind and length chips each get a small label and the groups get more room.
   On a phone the page shows the search, one row of kind chips and a Sort and filter button, and sort, collection, country, length and the A to Z letters go in a bottom sheet (filters.js).
   The sheet reuses the share sheet's look (.sheet). It is not drawn on a wide screen, and it has no hidden attribute because [hidden] is !important in components.css (it would stop the :target route that works without JavaScript). */
.fs-inline{display:contents}
.fs-open,.sheet.fs-sheet{display:none}
.lib-go .ic{display:none;width:1.25rem;height:1.25rem}
.br-filters{grid-template-columns:minmax(0,1fr);gap:var(--s-3);margin-bottom:var(--s-5)}
.lib-short{display:none}
.br-group{display:grid;grid-template-columns:6.5rem minmax(0,1fr);align-items:center;gap:var(--s-3)}
.br-group.br-bare{display:none}
.br-label{font:600 .75rem/1.2 var(--font-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fs-form .sh-sec select{width:100%}
.fs-len{border:0;margin:var(--s-5) 0 0;padding:0;min-width:0}
.fs-len legend{padding:0}
.fs-chips{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.chip-radio{position:relative;display:inline-flex}
.chip-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip-radio .chip{min-height:44px;cursor:pointer}
.chip-radio input:checked+.chip{border-color:var(--accent-text);color:var(--accent-text);background:var(--surface-2)}
.chip-radio input:focus-visible+.chip{outline:2px solid var(--focus,var(--accent-text));outline-offset:2px}
.fs-actions{display:flex;gap:var(--s-3);margin-top:var(--s-6)}
.fs-actions .btn{flex:1;justify-content:center;min-height:44px}
.fs-sheet .az-nav{margin:var(--s-2) 0 0}
@media (max-width:700px){
  .fs-inline,.br-group.br-len,.az-desk,.br-label,.lib-full{display:none}
  .lib-short{display:inline}
  .br-tools{flex-wrap:nowrap;gap:var(--s-2);margin-bottom:var(--s-2)}
  .br-tools .lib-search{flex:1 1 auto}
  .lib-go{flex:none;width:44px;padding:0;justify-content:center}
  .lib-go .ic{display:block}
  .lib-go-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .br-filters{gap:var(--s-1);margin-bottom:var(--s-2)}
  .br-group{display:flex;align-items:center;gap:var(--s-2)}
  .br-group .chip-row{flex:1 1 auto;min-width:0}
  .fs-open{display:inline-flex;flex:none;align-items:center;gap:.4rem;min-height:44px;padding-inline:.8rem}
  .fs-open .ic{width:1.15rem;height:1.15rem}
  .fs-n{display:inline-grid;place-items:center;min-width:1.3rem;height:1.3rem;padding:0 .3rem;border-radius:var(--r-pill);background:var(--accent-text);color:var(--bg);font:700 .75rem/1 var(--font-ui)}
  .sheet.fs-sheet.is-open,.sheet.fs-sheet:target{display:flex}
  #browse-view .filter-meta{margin-bottom:var(--s-4)}
}

/* 0.1.42 (Entry 237): the FAQ page. A Search these questions box, a row of topic buttons and folded questions.
   faq.js removes the hidden attribute from the box and the buttons and folds the questions, so with JavaScript off none of this shows and the page is as it was.
   The buttons are the ordinary .chip of Browse. On a phone they are one row that scrolls sideways and stays in view under the top bar. */
.fq-find{margin-top:var(--s-5);max-width:66ch;scroll-margin-top:calc(var(--nav-h) + var(--s-3))} /* where a starting search lands (faq.js, 0.1.53) */
.fq-find label{display:block;margin-bottom:var(--s-2);font:600 var(--fs-0)/1.3 var(--font-ui)}
.fq-find input[type="search"]{width:100%;min-height:44px;padding:.7rem .9rem;font:500 var(--fs-1)/1.3 var(--font-ui);color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.fq-find input[type="search"]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.fq-bar{margin-top:var(--s-4);padding-block:var(--s-2);background:var(--bg);border-bottom:1px solid var(--line);scroll-margin-top:var(--nav-h)}
.fq-bar .chip-row{padding-inline:3px;margin-inline:-3px}
.fq-bar .chip{min-height:44px}
.pv .fq-bar a.chip{color:var(--text);text-decoration:none}
.pv .fq-bar a.chip:hover,.pv .fq-bar a.chip[aria-current="true"]{color:var(--accent-text)}
.pv .fq-bar.is-searching a.chip{color:var(--muted)}
.fq-status{max-width:66ch}
.fq-status p{margin:var(--s-3) 0 0;font-family:var(--font-read);font-size:var(--fs-1);color:var(--muted)}
.fq-status p:empty{display:none}
.fq-status .fq-none{color:var(--text);font-size:var(--fs-2)}
.fq-body{margin-top:0}
.fq-body.is-topic{min-height:calc(100vh - var(--nav-h) - 8rem)} /* a short topic still lets the page scroll up to it */
.pv .fq-q{border-bottom:1px solid var(--line)}
.pv h2+.fq-q{border-top:1px solid var(--line)}
.pv .fq-q summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;padding:var(--s-3) 0;cursor:pointer;list-style:none}
.pv .fq-q summary::-webkit-details-marker{display:none}
.pv .fq-q summary::after{content:"";flex:none;width:.55rem;height:.55rem;margin-right:.2rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s var(--ease)}
.pv .fq-q[open] summary::after{transform:rotate(-135deg)}
.pv .fq-q summary:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.pv .fq-q summary h3{margin:0;font-size:var(--fs-2)}
.pv .fq-ans{padding:0 0 var(--s-4)}
.pv .fq-ans>*:first-child{margin-top:0}
.pv .fq-ans p{margin:0 0 var(--s-3)}
.pv .fq-ans p:last-child{margin-bottom:0}
@media (min-width:701px){.fq-bar .chip-row{flex-wrap:wrap;overflow:visible}}
@media (max-width:700px){.fq-bar{position:sticky;top:var(--nav-h);z-index:40}}
@media (prefers-reduced-motion:reduce){.pv .fq-q summary::after{transition:none}}
/* Submission calls page (0.1.52) */
.pv .call-list{list-style:none;padding:0;margin:var(--s-4) 0 0;display:grid;gap:var(--s-4)}
.call-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s-5) var(--s-6)}
.call-card h3{margin:0 0 var(--s-2);font-size:var(--fs-3)}
.call-card p{margin:0 0 var(--s-2)}
.call-card .call-kind{font:600 var(--fs-0)/1.3 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s-1)}
.call-card .call-dates{color:var(--text)}
.call-card .call-who,.call-card .call-more{margin-top:var(--s-3)}
.call-card .call-go{margin-top:var(--s-4);display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-4);align-items:center}
.call-soon{border-style:dashed}
.calls .call-none{margin-top:var(--s-4)}
@media (max-width:560px){.call-card{padding:var(--s-4)}}
.panel .home-calls{margin-top:var(--s-5)}