/* Groundup Society form components. "Feel the coffee": a field pours, a box
   fills with milk, a bean turns to espresso. Colours come from tokens.css; the
   same hex values are repeated inside the SVG data URLs because var() does not work there.
   State classes: .is-error and .is-valid on .gu-field (set by forms.js),
   .is-focus on .gu-control or .gu-combo__trigger (styleguide only). */

/* ---------- Layout ---------- */
.gu-form{display:grid;gap:28px}
.gu-row{display:grid;grid-template-columns:1fr 1fr;gap:28px var(--s5)}
@media (max-width:700px){.gu-row{grid-template-columns:1fr}}
.gu-field{display:block;min-width:0;margin:0;padding:0;border:0}
.gu-label,.gu-field>legend{display:block;padding:0;margin-bottom:6px;font:600 16px/1.35 var(--body);color:var(--black)}
.gu-label .opt,.gu-field>legend .opt{font-weight:400;color:var(--grey-text)}
.gu-hint{margin-bottom:8px;font-size:14.5px;line-height:1.45;color:var(--grey-text)}
.gu-note{font-size:14.5px;color:var(--grey-text)}
.gu-actions{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.gu-send-error{margin:0;font:500 15px/1.4 var(--body);color:var(--error)} /* a failed send, straight after the Send button */

/* ---------- Text field and textarea: the pour ---------- */
.gu-control{position:relative}
.gu-input{display:block;width:100%;min-height:56px;margin:0;padding:14px 48px 14px 16px;border:0;border-bottom:2px solid var(--grey-text);border-radius:var(--r-control) var(--r-control) 0 0;background:color-mix(in srgb,var(--bench) 42%,var(--paper));font:400 17px/1.5 var(--body);color:var(--black);transition:background .25s}
textarea.gu-input{min-height:168px;resize:vertical}
.gu-input::placeholder{color:var(--grey-text);opacity:1}
.gu-input:hover{background:color-mix(in srgb,var(--bench) 65%,var(--paper))}
/* the base line fills Clay from the left, like a pour */
.gu-control::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--clay);transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.22,.7,.2,1);pointer-events:none}
.gu-control:focus-within::after,.gu-control.is-focus::after{transform:scaleX(1)}
.gu-input:focus-visible,.gu-control.is-focus .gu-input{outline:2px solid var(--clay-deep);outline-offset:3px;background:var(--paper)}

/* valid: a bean with a tick */
.gu-control::before{content:"";position:absolute;right:14px;top:16px;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='12' cy='12' rx='8.6' ry='11' fill='%233B2416' transform='rotate(32 12 12)'/%3E%3Cpath d='M7.6 12.4l3 3.1 5.8-6.9' fill='none' stroke='%23F7F5F1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;transform:scale(.4) rotate(-40deg);transition:opacity .2s,transform .35s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.gu-field.is-valid .gu-control::before{opacity:1;transform:none}

/* error */
.gu-field.is-error .gu-input{border-bottom-color:var(--error);background:color-mix(in srgb,var(--error) 7%,var(--paper))}
.gu-field.is-error .gu-control::after{background:var(--error);transform:scaleX(1)}
.gu-error{display:flex;align-items:flex-start;gap:8px;margin-top:8px;font:500 15px/1.4 var(--body);color:var(--error)}
.gu-error::before{content:"";flex:none;width:18px;height:21px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 21'%3E%3Cpath d='M9 .8c3.4 4.6 7 8 7 12.2a7 7 0 0 1-14 0C2 8.800 5.600 5.400 9 .8z' fill='%23A3361F'/%3E%3Cpath d='M9 8v5' stroke='%23F7F5F1' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='16.200' r='1.200' fill='%23F7F5F1'/%3E%3C/svg%3E") center/contain no-repeat}
fieldset.gu-field.is-error{padding-left:var(--s4);border-left:4px solid var(--error)}

/* disabled */
.gu-input:disabled{background:transparent;border-bottom:2px dashed var(--grey-text);color:var(--grey-text);cursor:not-allowed}
.gu-field:has(.gu-input:disabled) .gu-label,.gu-field:has(select:disabled) .gu-label{color:var(--grey-text)}

/* character count */
.gu-count{margin-top:6px;font-size:14px;color:var(--grey-text);text-align:right}
.gu-count.is-near{color:var(--black);font-weight:500}

/* ---------- Dropdown ---------- */
/* Without JavaScript the native select shows, dressed to match. */
select.gu-select{display:block;width:100%;min-height:56px;padding:0 22px;border:1.5px solid var(--black);border-radius:var(--r-pill);background:var(--paper);font:500 17px/1.2 var(--body);color:var(--black)}
.gu-combo{position:relative}
.gu-combo__trigger{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:6px 7px 6px 22px;border:1.5px solid var(--black);border-radius:var(--r-pill);background:var(--paper);font:500 17px/1.3 var(--body);cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .2s}
.gu-combo__trigger:hover{background:color-mix(in srgb,var(--bench) 55%,var(--paper))}
.gu-combo.is-empty .gu-combo__value{font-weight:400;color:var(--grey-text)}
.gu-combo__trigger.is-focus{outline:3px solid var(--clay-deep);outline-offset:3px}
/* the chevron sits in a cup seen from above: espresso with a crema ring */
.gu-combo__ring{position:relative;flex:none;width:42px;height:42px;border-radius:50%;background:var(--espresso);border:4px solid var(--crema);box-shadow:0 0 0 3px var(--milk);transition:transform .4s cubic-bezier(.3,1.3,.5,1),background .2s}
.gu-combo__ring::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-7px 0 0 -5.5px;border-right:2.2px solid var(--paper);border-bottom:2.2px solid var(--paper);transform:rotate(45deg)}
.gu-combo.is-open .gu-combo__ring{transform:rotate(180deg)}
.gu-combo.is-open .gu-combo__trigger{background:var(--paper)}
.gu-combo__list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 8px);max-height:296px;overflow:auto;padding:var(--s2);border:1.5px solid var(--black);border-radius:var(--r-card);background:var(--paper);box-shadow:0 26px 44px -20px color-mix(in srgb,var(--black) 45%,transparent)}
.gu-combo__option{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:46px;padding:8px 16px;border-radius:20px;cursor:pointer}
.gu-combo__option:hover{background:var(--bench)}
/* While the list is open aria-selected follows the active row; .is-current marks the value already chosen. */
.gu-combo__option[aria-selected="true"]{background:var(--black);color:var(--paper);box-shadow:inset 5px 0 0 var(--clay-light)}
.gu-combo__option.is-current::after{content:"";flex:none;width:14px;height:8px;margin-top:-4px;border-left:2.2px solid var(--clay-deep);border-bottom:2.2px solid var(--clay-deep);transform:rotate(-45deg)}
.gu-combo__option.is-current[aria-selected="true"]::after{border-color:var(--clay-light)}
.gu-field.is-error .gu-combo__trigger{border:2px solid var(--error);background:color-mix(in srgb,var(--error) 7%,var(--paper))}
.gu-combo__trigger[aria-disabled="true"]{border:1.5px dashed var(--grey-text);color:var(--grey-text);cursor:not-allowed;background:transparent}
.gu-combo__trigger[aria-disabled="true"] .gu-combo__value{color:var(--grey-text)}
.gu-combo__trigger[aria-disabled="true"] .gu-combo__ring{background:var(--bench);border-color:var(--line);box-shadow:none}
.gu-combo__trigger[aria-disabled="true"] .gu-combo__ring::after{border-color:var(--grey-text)}

/* ---------- Checkbox (a square cup that fills with milk) and radio (a bean) ---------- */
.gu-options{display:grid;gap:2px}
.gu-check,.gu-radio{position:relative;display:flex;min-height:44px}
.gu-check input,.gu-radio input{position:absolute;left:0;top:0;width:44px;height:100%;min-height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.gu-check label,.gu-radio label{position:relative;display:flex;align-items:center;min-height:44px;padding:6px 0 6px 46px;line-height:1.4;cursor:pointer}
.gu-check label::before{content:"";position:absolute;left:7px;top:50%;width:28px;height:28px;margin-top:-14px;border:2px solid var(--black);border-radius:5px 5px 10px 10px;background:linear-gradient(var(--clay-light),var(--milk)) bottom/100% 0% no-repeat var(--paper);transition:background-size .4s cubic-bezier(.3,.8,.3,1)}
.gu-check input:checked+label::before{background-size:100% 100%}
.gu-check label::after{content:"";position:absolute;left:7px;top:50%;width:28px;height:28px;margin-top:-14px;background:var(--black);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M7.500 14.500l4.500 4.500 8.500-10' fill='none' stroke='%23000' stroke-width='2.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath d='M7.500 14.500l4.500 4.500 8.500-10' fill='none' stroke='%23000' stroke-width='2.800' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .28s ease-out}
.gu-check input:checked+label::after{clip-path:inset(0);transition-delay:.18s}

.gu-radio label::before{content:"";position:absolute;left:10px;top:50%;width:22px;height:29px;margin-top:-14.5px;border:2px solid var(--black);border-radius:50%;background:var(--paper);transform:rotate(30deg);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.gu-radio label::after{content:"";position:absolute;left:10px;top:50%;width:22px;height:29px;margin-top:-14.5px;background:var(--black);transform:rotate(30deg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 29'%3E%3Cpath d='M11 5c4 5.500-4 13.500 0 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 29'%3E%3Cpath d='M11 5c4 5.500-4 13.500 0 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:background .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.gu-radio input:checked+label::before{background:var(--espresso);border-color:var(--espresso);transform:rotate(-12deg)}
.gu-radio input:checked+label::after{background:var(--paper);transform:rotate(-12deg)}

.gu-check input:focus-visible+label::before,.gu-radio input:focus-visible+label::before{outline:3px solid var(--clay-deep);outline-offset:3px}
.gu-check input:hover:not(:disabled)+label::before,.gu-radio input:hover:not(:disabled):not(:checked)+label::before{background-color:var(--bench)}
.gu-field.is-error .gu-check label::before,.gu-field.is-error .gu-radio label::before{border-color:var(--error)}
.gu-check input:disabled,.gu-radio input:disabled,.gu-card-radio input:disabled,.gu-chip-radio input:disabled{cursor:not-allowed}
.gu-check input:disabled+label,.gu-radio input:disabled+label{color:var(--grey-text);cursor:not-allowed}
.gu-check input:disabled+label::before,.gu-radio input:disabled+label::before{border:2px dashed var(--grey-text)}
.gu-check input:disabled+label::after,.gu-radio input:disabled:not(:checked)+label::after{background:var(--grey-text)}

/* ---------- Radio cards ---------- */
.gu-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s3)}
.gu-card-radio{position:relative}
.gu-card-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.gu-card-radio label{position:relative;display:block;height:100%;min-height:104px;padding:20px 58px 20px 22px;border:1.5px solid var(--black);border-radius:var(--r-card);background:var(--paper);transition:background .25s,color .25s}
.gu-card-radio label b{display:block;font:600 21px/1.15 var(--head);letter-spacing:-.02em}
.gu-card-radio label span{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:var(--grey-text);transition:color .25s}
.gu-card-radio label::before{content:"";position:absolute;right:20px;top:18px;width:22px;height:29px;border:2px solid var(--black);border-radius:50%;background:var(--paper);transform:rotate(30deg);transition:background .3s,border-color .3s,transform .4s cubic-bezier(.3,1.5,.5,1)}
.gu-card-radio label::after{content:"";position:absolute;right:20px;top:18px;width:22px;height:29px;background:var(--black);transform:rotate(30deg);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 29'%3E%3Cpath d='M11 5c4 5.500-4 13.500 0 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 29'%3E%3Cpath d='M11 5c4 5.500-4 13.500 0 19' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.gu-card-radio input:hover:not(:disabled):not(:checked)+label{background:color-mix(in srgb,var(--bench) 55%,var(--paper))}
.gu-card-radio input:checked+label{background:var(--black);color:var(--paper)}
.gu-card-radio input:checked+label span{color:var(--on-dark)}
.gu-card-radio input:checked+label::before{background:var(--clay-light);border-color:var(--clay-light);transform:rotate(-12deg)}
.gu-card-radio input:checked+label::after{transform:rotate(-12deg)}
.gu-card-radio input:focus-visible+label{outline:3px solid var(--clay-deep);outline-offset:3px}
.gu-field.is-error .gu-card-radio label{border:2px solid var(--error)}
.gu-card-radio input:disabled+label{border:1.5px dashed var(--grey-text);color:var(--grey-text);cursor:not-allowed}
.gu-card-radio input:disabled+label::before{border:2px dashed var(--grey-text)}
.gu-card-radio input:disabled+label::after{background:var(--grey-text)}

/* ---------- Radio chips (filters, size switch) ---------- */
.gu-chips{display:flex;flex-wrap:wrap;gap:var(--s2)}
.gu-chip-radio{position:relative}
.gu-chip-radio input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.gu-chip-radio label{display:inline-flex;align-items:center;min-height:46px;padding:0 20px;border:1.5px solid var(--black);border-radius:var(--r-pill);background:var(--paper);font:500 15.5px/1 var(--body);transition:background .2s,color .2s}
.gu-chip-radio input:hover:not(:disabled):not(:checked)+label{background:var(--bench)}
.gu-chip-radio input:checked+label{background:var(--black);color:var(--paper)}
.gu-chip-radio input:focus-visible+label{outline:3px solid var(--clay-deep);outline-offset:3px}
.gu-chip-radio input:disabled+label{border:1.5px dashed var(--grey-text);color:var(--grey-text);cursor:not-allowed}

/* ---------- Confirmation ---------- */
.gu-success{padding:var(--s7) var(--s6);border-radius:var(--r-card);background:var(--black);color:var(--on-dark)}
.gu-success:focus{outline:none} /* focused only so it is read out; it is not a control */
.gu-success__cup{width:104px;height:104px;margin-bottom:var(--s5)}
.gu-success__cup .saucer{fill:var(--paper)}
.gu-success__cup .rim{fill:var(--paper);stroke:var(--bench);stroke-width:5}
.gu-success__cup .coffee{fill:var(--espresso);stroke:var(--crema);stroke-width:5;transform-origin:60px 60px}
.gu-success__cup .tick{fill:none;stroke:var(--milk);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:50;stroke-dashoffset:0}
.gu-success.gu-success h2{margin:0;max-width:none;font:800 clamp(30px,3.6vw,46px)/1 var(--head);letter-spacing:-.035em;color:var(--paper)}
.gu-success.gu-success p{margin:var(--s3) 0 0;max-width:none;font-size:18px;color:var(--on-dark)}
@media (prefers-reduced-motion:no-preference){
  .gu-success__cup .coffee{animation:gu-fill .8s cubic-bezier(.2,.7,.2,1) both}
  .gu-success__cup .tick{animation:gu-draw .45s .55s ease-out both}
}
@keyframes gu-fill{from{transform:scale(0)}}
@keyframes gu-draw{from{stroke-dashoffset:50}}

@media (prefers-reduced-motion:reduce){
  .gu-control::after,.gu-control::before,.gu-combo__ring,.gu-check label::before,.gu-check label::after,.gu-radio label::before,.gu-radio label::after,.gu-card-radio label::before,.gu-card-radio label::after{transition:none}
}