/* Contribution flows: add a photo, add a plant, add a name, suggest an edit, report a problem, my contributions.
 * Layout and states only, built from the tokens and components of core.css (no colours of its own).
 * Class prefixes: chead page head · cbar action bar · cpick photo chooser · cpf photo questions · cphoto add-photo page
 * cadd add-plant page · cdet details card · cname add-name page · csug/csec/trow/csum/chg suggest-an-edit page
 * crep report page · cmine my contributions.
 * JavaScript (contribute.js) only adds .is-enhanced / .is-changed / .has-file style classes; everything works without it. */

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* after a mistake the script moves focus to the message; the red box already says where to look, so no ring around it */
.form-error[tabindex="-1"]:focus,.field__error[tabindex="-1"]:focus{outline:none}

/* ------------------------------------------------------------------ page head */
.chead{margin:4px 0 20px}
.chead__crumbs{margin:0 0 6px}
.chead__up{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.chead__up:hover{color:var(--fg)}
.chead__back{display:none}
.chead h1{margin:0;font-size:34px}
.chead__lead{margin:-8px 0 20px;max-width:680px;color:var(--muted)}
.chead__lead i{color:var(--fg)}
@media (max-width:720px){
  .chead{margin:0 0 14px}
  .chead__crumbs{justify-content:space-between;margin:0;gap:8px}
  .chead__up{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--fg);font-weight:700;text-decoration:none}
  .chead__back{display:inline-flex}
  .chead .sep{display:none}
  .chead h1{font-size:28px}
  .chead__lead{margin:-4px 0 16px}
}

/* ------------------------------------------------------------------ action bar: inline on desktop, sticky at the bottom on phones
 * promote to core.css: a .bottombar variant that stays in the flow above 720px (same phone rules as .bottombar) */
.cbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cbar--block{flex-wrap:nowrap}
.cbar--block .btn{flex:1}
.cbar .btn--stat{flex:none;min-height:44px;padding:0 4px;background:none;text-decoration:none;font:600 11px/1.2 var(--mono);text-transform:uppercase;color:var(--muted)}
@media (max-width:720px){
  .cbar{position:fixed;left:0;right:0;bottom:0;z-index:25;flex-wrap:nowrap;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--line)}
  .cbar .btn{flex:1}
}

/* ------------------------------------------------------------------ choice cards and pills, tuned for these forms */
.cpf__kind .seg>div,.cpf__kind .seg--full>div{width:100%;border-radius:22px}
.cpf__kind .seg>div>div{flex:1 1 auto;display:flex}
.cpf__kind .seg label{flex:1;justify-content:center;padding:0 10px}
.choices.cards label{min-height:52px}
.choices.cards .opt>span:first-child{font-weight:700}
.choices.cards label:has(input:checked){background:var(--soft)}

/* "what the kinds mean": every note without JS, only the picked one with it (the script adds .is-enhanced) */
.cnotes{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45;color:var(--muted)}
.cnotes__k{color:var(--fg)}
.cnotes__i{display:none}
.is-enhanced .cnotes li{display:none}
.is-enhanced .cnotes li.is-on{display:flex;gap:6px;align-items:flex-start}
.is-enhanced .cnotes__k{display:none}
.is-enhanced .cnotes__i{display:inline-flex;flex:none;margin-top:1px}

/* ------------------------------------------------------------------ photo chooser */
.cpick{display:flex;flex-direction:column;gap:12px;min-width:0}
.cpick__zone{position:relative;display:flex;flex-direction:column;gap:6px}
.cpick__label{font-size:14px;font-weight:700}
.cpick__rich{display:none}
.cpick__error{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;font-weight:600;color:var(--bad)}
.cpick__error::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:var(--alert-icon) center/contain no-repeat;mask:var(--alert-icon) center/contain no-repeat}
.cpick__note{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:13px;line-height:1.45;color:var(--muted)}
.cpick__note .icon{margin-top:1px}
.cpick.is-enhanced .cpick__zone{display:block;aspect-ratio:4/3;border:2px dashed var(--line);border-radius:var(--r-xl);background:var(--card);transition:border-color .12s,background-color .12s}
.cpick.is-enhanced .cpick__zone:hover,.cpick.is-over .cpick__zone{border-color:var(--accent);background:var(--soft)}
.cpick.is-enhanced .cpick__zone:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cpick.is-enhanced .has-error .cpick__zone{border-color:var(--bad)}
.cpick.is-enhanced .cpick__label{position:absolute;inset:0;display:grid;place-items:center;padding:20px;text-align:center;cursor:pointer}
.cpick.is-enhanced .cpick__plain{display:none}
.cpick.is-enhanced .cpick__rich{display:flex;flex-direction:column;align-items:center;gap:8px}
.cpick__title{font-size:20px;font-weight:800;letter-spacing:-.01em}
.cpick__sub{max-width:34ch;font-size:14px;font-weight:400;color:var(--muted)}
.cpick.is-enhanced .field input[type=file]{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;opacity:0;cursor:pointer}
.cpick.is-enhanced .cpick__help{display:none}
.cpick.has-file .cpick__zone,.cpick.has-file .field__error{display:none}
.cpick__preview{display:flex;flex-direction:column;gap:10px;margin:0}
.cpick__frame{position:relative;display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--tile)}
.cpick__frame img{width:100%;height:100%;object-fit:cover}
.cpick__nopreview{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;text-align:center;font-size:14px;color:var(--muted)}
.cpick__meta{display:flex;flex-wrap:wrap;gap:2px 8px;padding:0 4px;font:600 11px/1.5 var(--mono);text-transform:uppercase;color:var(--muted)}
.cpick__name{overflow-wrap:anywhere}
.cpick__change{align-self:flex-start;min-height:44px;gap:8px}

/* ------------------------------------------------------------------ add a photo */
.cphoto__grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.cphoto__errors{margin-bottom:16px}
.cphoto__card{display:flex;flex-direction:column;gap:18px}
.cpf__own{padding-block:14px;border-block:1px solid var(--line)}
.cpf__credit{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.cpf__credit--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cphoto__after,.cname__after,.cadd__after,.csum__after{margin:0;font-size:14px;color:var(--muted)}
@media (max-width:860px){.cphoto__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .cpf__kind .seg label,.cphoto__card .seg label{min-height:44px}
  .cpf__own .check{min-height:44px;align-items:center}
  .cphoto__card{padding:18px 16px}
  .cpf__credit--two{grid-template-columns:minmax(0,1fr)}
  .cpick.is-enhanced .cpick__zone{aspect-ratio:16/10}
}

/* ------------------------------------------------------------------ add a plant */
.cadd__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:start}
.cadd__main{display:flex;flex-direction:column;gap:16px;min-width:0}
.cadd__card{display:flex;flex-direction:column;gap:18px}
.cadd__rank .choices>div{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cadd__rank .choices>div>div{display:flex}
.cadd__rank .choices label{flex:1;align-items:flex-start}
.cadd__rank .choices input[type=radio]{margin-top:2px}
.cadd__rank .choices .hint{font-size:12px;line-height:1.35}
.cadd__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cadd__wide{grid-column:1 / -1}
.cadd.is-enhanced [data-field=parent_name]{order:-1}
.cadd__dup{margin:-6px 0 0;font-size:15px}
.cadd__hint{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:4px 0 0;padding:10px 14px;border-radius:14px;background:var(--warn-soft);color:var(--warn);font-size:14px;font-weight:600}
.cadd__hint::before{content:"";flex:none;width:16px;height:16px;background:currentColor;-webkit-mask:var(--alert-icon) center/contain no-repeat;mask:var(--alert-icon) center/contain no-repeat}
.cadd__hint .btn{margin-left:auto;min-height:36px}
.cadd__preview{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line)}
.cadd__pname{font-size:20px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.cadd__pname.is-empty{font-size:15px;font-weight:400;color:var(--muted)}
.cadd__help{position:sticky;top:calc(var(--header-h) + 16px)}
.cadd__examples{list-style:none;margin:8px 0 0;padding:0}
.cadd__examples li{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid color-mix(in srgb,var(--soft-fg) 20%,transparent)}
.cadd__examples b{font-size:17px;font-weight:700;color:var(--fg)}
.cadd__examples li>span{font-size:14px}
.cadd__notsure{margin:10px 0 0;font-size:14px}
@media (max-width:1000px){
  .cadd__grid{grid-template-columns:minmax(0,1fr)}
  .cadd__help{position:static}
}
@media (max-width:720px){
  .cadd__card{padding:16px}
  .cadd__hint .btn{min-height:44px}
  .cadd__rank .choices>div{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cadd__fields{grid-template-columns:minmax(0,1fr)}
  .cadd .cdet__body{padding-inline:16px}
}

/* a card that opens: "Add a photo (optional)" (promote to core.css as details.card) */
.card.cdet{padding:0}
.cdet__sum{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-xl);cursor:pointer;list-style:none}
.cdet__sum::-webkit-details-marker{display:none}
.cdet__sum:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cdet__t{display:flex;flex-direction:column;flex:1;min-width:0}
.cdet__name{font-size:17px;font-weight:800}
.cdet__name .muted{font-weight:400}
.cdet__t small{font-size:13px}
.cdet__chev{margin-left:auto;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.cdet__chev{transition:transform .15s}}
.cdet[open] .cdet__chev{transform:rotate(180deg)}
.cdet__body{display:flex;flex-direction:column;gap:18px;padding:4px 20px 22px}
/* inside "Add a plant" the chooser is a strip, not a whole picture frame */
.cdet .cpick.is-enhanced .cpick__zone{aspect-ratio:auto;min-height:170px}
.cdet .cpick__frame{aspect-ratio:16/9}
@media (min-width:721px){.cdet .cpick__preview{max-width:460px}}

/* ------------------------------------------------------------------ add a name */
.cname__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px;align-items:start}
.cname__form{display:flex;flex-direction:column;gap:18px}
.cname__kind .choices>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cname__kind .choices>div>div{display:flex}
.cname__kind .choices label{flex:1;align-items:flex-start;padding:14px}
.cname__kind .choices input[type=radio]{margin-top:2px}
.cname__listed .card__title{font-size:16px;margin-bottom:6px}
.cname__names{list-style:none;margin:0;padding:0}
.cname__names li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.cname__n{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.cname__listed p{margin:0;font-size:14px}
@media (max-width:860px){.cname__grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:720px){
  .cname__form{padding:16px}
  .cname__kind .choices>div{grid-template-columns:minmax(0,1fr)}
}

/* ------------------------------------------------------------------ suggest an edit */
.csug__mod{margin-bottom:16px;flex-wrap:wrap}
.csug__mod p{margin:0;font-weight:600;flex:1 1 220px}
@media (max-width:720px){.csug__mod .btn{flex:1 0 100%}}
.csug__errors{margin-bottom:16px}
.csug__grid{display:grid;grid-template-columns:220px minmax(0,1fr) 340px;gap:20px;align-items:start}
.csug__sections{display:flex;flex-direction:column;gap:16px;min-width:0}
.csug__nav{position:sticky;top:calc(var(--header-h) + 16px);padding:8px;border-radius:var(--r-lg);background:var(--card)}
.csug__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.csug__nav .tab{display:flex;justify-content:space-between;width:100%;min-height:44px;padding:0 16px;font-size:15px}
.csug__nav .tab .count{margin-left:8px}

.csec{padding:20px 22px 10px}
.csec__title{margin:0 0 6px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:20px}
.csec .field>label,.csec .field .field__label{font-size:14px}

/* one trait: name and "now" on the left, the inputs on the right, a badge under the name once it was changed */
.trow{position:relative;display:grid;grid-template-columns:minmax(140px,230px) minmax(0,1fr);gap:6px 16px;align-items:center;
  margin-inline:-8px;padding:12px 8px;border-radius:16px}
.trow+.trow{margin-top:2px}
.trow__meta{grid-area:1 / 1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.trow__name{font-size:15px;font-weight:700;line-height:1.25}
.trow__unit{font-weight:400;color:var(--muted);white-space:nowrap}
.trow__now{font:600 11px/1.35 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.trow__now b{font-weight:600;text-transform:uppercase}
.trow__inputs{grid-area:1 / 2;display:flex;align-items:flex-end;gap:10px;min-width:0}
.trow__part.field{flex:1 1 0;max-width:210px;gap:4px}
.trow__part>label.trow__cap{font:600 11px/1.2 var(--mono);text-transform:uppercase;color:var(--muted)}
.trow__dash{padding-bottom:14px;color:var(--muted)}
/* numbers in mono, as the design has them: core's own rule for this loses to its base input rule (promote to core.css:
   put the :not() chain on .field input[type=number] too) */
.trow .field input[type=number]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]){font-family:var(--mono);font-weight:600}
.trow--enum .trow__part.field,.trow--tristate .trow__part.field{max-width:300px}
.trow--number .trow__part.field{max-width:210px}
/* wide inputs go under the name instead of beside it */
.trow--multi,.trow--text{grid-template-columns:minmax(0,1fr)}
.trow--multi .trow__inputs,.trow--text .trow__inputs{grid-area:2 / 1}
.trow--text .trow__part.field{max-width:none}
.trow__flag{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 10px;border-radius:var(--r-pill);background:var(--accent);color:var(--accent-fg);font-size:12px;font-weight:700;white-space:nowrap}
.trow--multi .trow__flag,.trow--text .trow__flag{position:absolute;top:12px;right:8px;margin:0}
.trow--multi.is-changed .trow__meta,.trow--text.is-changed .trow__meta{padding-right:96px}
.trow__err{grid-column:1 / -1}
.trow.is-changed{background:var(--soft)}
/* the long :not() chain is there to outrank core's input rule */
.trow.is-changed .field input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not([type=range]),
.trow.is-changed .field select,.trow.is-changed .field textarea{border:2px solid var(--accent)}
.trow.has-error{background:var(--bad-soft)}
.trow:target{box-shadow:inset 0 0 0 2px var(--accent)}

/* several options at once: pills that show a tick when picked (promote to core.css as .choices--chips, with --check-icon) */
.chipset>div{display:flex;flex-wrap:wrap;gap:8px}
.chipset label{position:relative;min-height:40px;gap:6px;padding:0 14px;border-radius:var(--r-pill);background:var(--tile);font-size:14px}
.trow.is-changed .chipset label{background:var(--card)}
.chipset input{position:absolute;opacity:0;width:1px;height:1px}
.chipset label:has(input:checked){background:var(--fg);color:var(--bg);box-shadow:none}
.chipset label:has(input:checked)::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:var(--check-icon) center/contain no-repeat;mask:var(--check-icon) center/contain no-repeat}
:root{--check-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* "Your changes": before -> after, the reason, send */
.csum{position:sticky;top:calc(var(--header-h) + 16px);display:flex;flex-direction:column;gap:14px}
.csum__title{margin:0;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:18px}
.csum__n{font-family:var(--mono)}
.csum__list{list-style:none;margin:-2px 0 0;padding:0;display:flex;flex-direction:column}
.csum__list:empty{display:none}
.chg{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-top:1px solid var(--line)}
.chg:first-child{border-top:0;padding-top:2px}
.chg__k{font-size:14px;color:var(--muted);text-decoration:none}
.chg__k:hover{color:var(--fg);text-decoration:underline}
.chg .was,.chg .now{max-width:100%;overflow-wrap:anywhere;white-space:normal}
.chg .now{border-radius:14px}
.csum__empty{margin:0;font-size:14px;color:var(--muted)}
.csum__problems{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:14px;background:var(--bad-soft);color:var(--bad);font-size:14px;font-weight:600}
.csum__problems .icon{margin-top:2px}
.csum__problems a{color:inherit}

@media (max-width:1180px){
  .csug__grid{grid-template-columns:minmax(0,1fr) 320px}
  /* the section list becomes a bar of chips that stays under the site header */
  .csug__nav{grid-column:1 / -1;position:sticky;top:var(--header-h);z-index:15;margin-inline:calc(var(--gutter) * -1);padding:8px var(--gutter);border-radius:0;
    background:var(--bg);border-bottom:1px solid var(--line)}
  .csug__nav ul{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none}
  .csug__nav ul::-webkit-scrollbar{display:none}
  .csug__nav .tab{flex:none;width:auto;background:var(--card);padding:0 14px;gap:6px}
  .csug__nav .tab.tab--on{background:var(--fg);color:var(--bg)}
  .csug__nav .tab.tab--on .count{background:var(--bg);color:var(--fg)}
  .csec,.trow{scroll-margin-top:64px}
  .csum{top:calc(var(--header-h) + 72px)}
}
@media (max-width:860px){
  .csug__grid{grid-template-columns:minmax(0,1fr)}
  .csum{position:static}
}
@media (max-width:720px){
  .chipset label{min-height:44px}
  .csec{padding:16px 16px 6px}
  .csec__title{font-size:18px}
  .trow,.trow--multi,.trow--text{grid-template-columns:minmax(0,1fr);margin-inline:-6px;padding:12px 6px}
  .trow__inputs,.trow--multi .trow__inputs,.trow--text .trow__inputs{grid-area:2 / 1}
  .trow__flag,.trow--multi .trow__flag,.trow--text .trow__flag{position:absolute;top:12px;right:6px;margin:0}
  .trow.is-changed .trow__meta{padding-right:96px}
  .trow__part.field{max-width:none}
  .trow--enum .trow__part.field,.trow--tristate .trow__part.field,.trow--number .trow__part.field{max-width:none}
  .trow__dash{display:none}
  .csum{padding:16px}
  .csum .cbar--block{gap:8px}
  .csum__stat{display:inline-flex}
}
@media (min-width:721px){.csum__stat{display:none}}

/* ------------------------------------------------------------------ report a problem */
.crep__grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.crep__target{display:flex;flex-direction:column;gap:12px;min-width:0}
.crep__frame{display:grid;place-items:center;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;background:var(--tile)}
.crep__frame img{width:100%;height:100%;object-fit:cover}
.crep__frame .ph{--r:0;height:100%;aspect-ratio:auto}
.crep__frame--icon{aspect-ratio:auto;padding:0;background:none}
.crep__target--card{flex-direction:row;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r-xl);background:var(--card)}
.crep__meta{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:0 4px;min-width:0}
.crep__name{font-size:20px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.crep__on{font-size:14px;color:var(--muted)}
.crep__card{display:flex;flex-direction:column;gap:18px}
.crep__reasons .choices>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.crep__reasons .choices>div>div{display:flex}
.crep__reasons .choices label{flex:1;align-items:flex-start}
.crep__reasons .choices input[type=radio]{margin-top:2px}
.crep__bar{display:flex;align-items:center;flex-wrap:wrap;gap:12px 16px}
.crep__privacy{margin:0;flex:1 1 220px;font-size:14px;color:var(--muted)}
@media (max-width:860px){.crep__grid{grid-template-columns:minmax(0,1fr);gap:16px}}
@media (max-width:720px){
  .crep__target{flex-direction:row;align-items:center;gap:14px;padding:12px;border-radius:22px;background:var(--card)}
  .crep__frame{flex:none;width:76px;aspect-ratio:1/1;border-radius:14px}
  .crep__frame--icon{width:auto}
  .crep__target--card{padding:12px}
  .crep__meta{padding:0}
  .crep__name{font-size:17px}
  .crep__card{padding:16px}
  .crep__reasons .choices>div{grid-template-columns:minmax(0,1fr)}
  .crep__bar{flex-direction:column;align-items:stretch}
  .crep__bar .btn{width:100%}
  .crep__privacy{flex:none}
}

/* ------------------------------------------------------------------ my contributions */
.cmine__head{align-items:center}
.cmine__head+.empty h2{font-size:18px}
.cmine__table th:nth-child(1){width:150px}
.cmine__table th:nth-child(4){width:130px}
.cmine__table th:nth-child(5){width:110px}
.cmine__table th:nth-child(3){width:30%}
.cmine__title{font-size:15px;font-weight:700}
.cmine__what .sub{overflow-wrap:anywhere;text-transform:none;font-size:12px}
.cmine__note{font-size:14px;overflow-wrap:anywhere}
.cmine__sent{font:600 11px/1.4 var(--mono);text-transform:uppercase;color:var(--muted);white-space:nowrap}
.cmine__act{text-align:right}
.cmine__act form{margin:0}
.cmine__table .badge{white-space:nowrap}
@media (max-width:720px){
  .cmine__head{align-items:flex-start}
  .cmine__head .tabs{flex-wrap:wrap;overflow:visible;width:100%;border-radius:22px}
  .cmine__head .tab{min-height:44px}
  .cmine__title .rowlink{display:inline-block;padding:10px 0}
  .cmine__card{padding:0;border-radius:0;background:none;overflow:visible}
  .cmine__table tbody{display:flex;flex-direction:column;gap:10px}
  .cmine__table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:14px 16px;border-radius:22px;background:var(--card);border:0}
  .cmine__status{grid-column:1;grid-row:1}
  .cmine__sent{grid-column:2;grid-row:1;text-align:right}
  .cmine__what,.cmine__note,.cmine__act{grid-column:1 / -1}
  .cmine__title{font-size:16px}
  .cmine__note{padding:10px 12px;border-radius:14px;background:var(--tile)}
  .cmine__note.is-review::before{content:"Moderator: ";font-weight:700}
  .cmine__act{text-align:left}
  .cmine__act .btn{min-height:44px}
}

/* ------------------------------------------------------------------ quick question (cq) */
.cq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start;padding-top:8px}
.cq__context{display:flex;flex-direction:column;gap:12px;min-width:0}
.cq__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);--r:24px}
.cq__facts{padding:6px 16px 10px}
.cq__name{padding:10px 0 6px;font-size:18px;font-weight:700;font-style:italic}
.cq__rows{list-style:none;margin:0;padding:0}
.cq__row{display:flex;align-items:center;gap:10px;padding:9px 8px;margin:0 -8px;border-top:1px solid var(--line);border-radius:10px}
.cq__row--now{background:var(--soft)}
.cq__k{flex:1;font-size:15px;color:var(--muted)}
.cq__row--now .cq__k{color:var(--soft-fg);font-weight:600}
.cq__v{font:600 14px var(--mono);text-align:right}
.cq__row--now .cq__v{color:var(--soft-fg)}
.cq__form{display:flex;flex-direction:column;gap:18px;padding:28px}
.cq__top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cq__top .btn--link{white-space:nowrap}
.cq__q{margin:0;font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.cq__answers{border:0;margin:0;padding:0;min-width:0}
.cq__answers .seg label{min-height:52px;font-size:16px}
.cq__units{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted)}
.cq__units .tab{cursor:pointer}
.cq__range{display:flex;align-items:flex-end;gap:12px}
.cq__range .field{flex:1;max-width:260px}
.cq__num{font:700 26px var(--mono);min-height:64px;padding:0 18px}
.cq__dash{padding-bottom:20px;font-size:22px;color:var(--muted)}
.cq__source{border:0;margin:0;padding:14px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;min-width:0}
.cq__legend{padding:0;margin-bottom:4px;font-size:16px;font-weight:700}
.cq__legend .muted{font-weight:400;font-size:14px}
.cq__details input{min-height:50px}
.cq__send{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.cq__send .kicker{text-transform:none;letter-spacing:0;font-size:12px;line-height:1.5;max-width:52ch}
@media (max-width:860px){
  .cq{grid-template-columns:minmax(0,1fr);gap:14px}
  .cq__context{order:2}
  .cq__img{display:none}
  .cq__form{padding:20px 18px}
  .cq__q{font-size:28px}
  .cq__range{flex-wrap:wrap}
  .cq__range .field{max-width:none;min-width:120px}
}

/* ------------------------------------------------------------------ edit my suggestion */
.cmine__btns{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.cmine__btns form{margin:0}
.cown{display:flex;flex-direction:column;gap:14px;max-width:920px}
.cown__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:start}
.cown__img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg)}
.cown__fields{display:flex;flex-direction:column;gap:14px}
@media (max-width:720px){.cown__grid{grid-template-columns:minmax(0,1fr)}}

/* ------------------------------------------------------------------ photo picker: several photos, crop frame, tray */
.cpick__frame--crop,.cpick__frame{position:relative;user-select:none;touch-action:none}
.cpick__frame img{width:100%;height:100%;object-fit:contain}
.cpick__box{position:absolute;border-radius:16px;box-shadow:0 0 0 2000px color-mix(in srgb, var(--fg) 45%, transparent);cursor:move;outline:2px solid var(--accent);outline-offset:-2px}
.cpick__box:focus-visible{outline:3px solid var(--accent-fg);outline-offset:0}
.cpick__boxhint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);padding:4px 10px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--fg) 70%, transparent);color:var(--bg);font:600 11px var(--mono);white-space:nowrap;text-transform:uppercase}
.cpick__tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.cpick__tools .tab{min-height:40px}
.cpick__trayline{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:22px;background:var(--card)}
.cpick__dup{display:flex;gap:8px;align-items:center;margin:0;padding:8px 12px;border-radius:12px;background:var(--bad-soft);color:var(--bad);font-size:13px;font-weight:600}
.cpick__tray{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.cpick__tray li{position:relative;width:80px;height:80px}
.cpick__thumb{display:block;width:80px;height:80px;padding:0;border:0;border-radius:14px;overflow:hidden;background:var(--tile);cursor:pointer}
.cpick__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cpick__thumb[aria-current=true]{box-shadow:0 0 0 3px var(--accent)}
.cpick__n{position:absolute;left:5px;bottom:5px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:color-mix(in srgb, var(--fg) 75%, transparent);color:var(--bg);font:600 11px/20px var(--mono);text-align:center;pointer-events:none}
.cpick__dupmark{position:absolute;left:4px;top:4px;padding:1px 5px;border-radius:6px;background:var(--bad);color:var(--bad-fg);font:600 8px var(--mono);text-transform:uppercase;pointer-events:none}
.cpick__rm{position:absolute;right:-8px;top:-8px;width:28px;height:28px;padding:0;border:2px solid var(--card);border-radius:50%;background:var(--fg);color:var(--bg);display:grid;place-items:center;cursor:pointer}
.mphoto__flag{margin:8px 0 0;align-items:flex-start}
.mphoto__flag .icon{margin-top:2px}

/* ------------------------------------------------------------------ my contributions: a moderator's question and my reply */
.cmine__table tr.is-waiting td{background:var(--warn-soft)}
.cmine__table tr.is-waiting td:first-child{border-radius:14px 0 0 14px}
.cmine__table tr.is-waiting td:last-child{border-radius:0 14px 14px 0}
.cthread{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cthread__msg{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:var(--tile);font-size:14px}
.cthread__msg--mod{background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.cthread__who{font:600 11px/1.4 var(--mono);text-transform:uppercase;color:var(--muted)}
.cthread__body{overflow-wrap:anywhere}
.cthread__reply{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cthread__reply textarea{width:100%;min-height:56px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font:15px/1.5 var(--font);color:var(--fg);resize:vertical}
.cthread__reply textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.cthread__reply .btn{align-self:flex-start}
@media (max-width:720px){
  .cmine__table tr.is-waiting{background:var(--warn-soft)}
  .cmine__table tr.is-waiting td{background:none}
  .cmine__note.is-thread{padding:0;background:none}
}