/* ============================================================
   STOUR-214: Suggest a location. The sheet over /home's map (stoury-suggest.js) and the confirm page
   (suggest-confirm.html). Alex's system only: every colour, face and size is a role from
   /static/stoury-system.css (both themes flip there), 12px corners, one coral primary, an outlined
   secondary. Full width text, never a capped measure. Desktop: a panel on the map's right. Below 1024px:
   a bottom sheet over the map, the Send row clear of the Feedback pill by its reserve (unset = 0px).
   ============================================================ */

/* ---------- the sheet ---------- */
.sug{position:absolute;top:16px;right:16px;bottom:16px;width:min(460px,calc(100% - 32px));display:flex;flex-direction:column;min-height:0;
  background:var(--st-surface);color:var(--st-text);border-radius:var(--st-radius);box-shadow:var(--st-shadow),0 0 0 1px var(--st-line);z-index:6;
  font:400 16px/1.45 var(--st-serif);}
.sug[hidden]{display:none;}
.sug .sheet-grip{display:none;}
.sug-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 20px 4px;}
.sug-h{font:400 var(--st-fs-h2)/1.08 var(--st-display);letter-spacing:.01em;margin:0;text-align:left;}
.sug-h:focus{outline:none;}
.sug-x{flex:none;width:44px;height:44px;margin:-8px -10px 0 0;border:0;border-radius:50%;background:none;color:var(--st-text);font-size:26px;line-height:1;cursor:pointer;}
.sug-x:focus-visible,.sug-link:focus-visible,.sug input:focus-visible,.sug textarea:focus-visible{outline:2.5px solid var(--st-text);outline-offset:2px;}
.sug-live,.sugc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sug-view{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;}
.sug-form{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;margin:0;}
.sug-body{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 20px 12px;display:flex;flex-direction:column;gap:16px;}
.sug-lede{margin:0;color:var(--st-muted);font:400 var(--st-fs-small)/1.4 var(--st-serif);}
.sug-field{display:flex;flex-direction:column;gap:6px;}
.sug-label{font:400 var(--st-fs-label)/1.2 var(--st-display);letter-spacing:.04em;color:var(--st-text);}
.sug-label-quiet{color:var(--st-muted);margin-top:4px;}
.sug-opt{color:var(--st-muted);}
.sug input,.sug textarea{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1.5px solid var(--st-muted);border-radius:var(--st-radius);
  background:var(--st-bg);color:var(--st-text);font:400 17px/1.4 var(--st-serif);}
.sug textarea{resize:vertical;min-height:88px;}
.sug input::placeholder,.sug textarea::placeholder{color:var(--st-muted);opacity:1;}
.sug [aria-invalid="true"]{border-color:var(--st-link);}
.sug-help{margin:0;color:var(--st-muted);font-size:15px;line-height:1.4;}
.sug-count{margin:0;color:var(--st-muted);font:400 var(--st-fs-meta)/1.4 var(--st-mono);}
.sug-count:empty{display:none;}
.sug-err,.sug-formerr,.sugc-err{margin:0;color:var(--st-text);font-size:15px;line-height:1.4;border-left:3px solid var(--st-link);padding-left:8px;}
.sug-err[hidden],.sug-formerr[hidden],.sugc-err[hidden]{display:none;}
/* The comboboxes' lists sit under their input. */
.sug-combo{position:relative;}
.sug-combo[hidden]{display:none;}
.sug-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:2;margin:0;padding:4px;list-style:none;max-height:264px;overflow:auto;
  background:var(--st-surface);border-radius:var(--st-radius);box-shadow:var(--st-shadow),0 0 0 1px var(--st-line);}
.sug-list[hidden]{display:none;}
.sug-list li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-height:44px;box-sizing:border-box;padding:10px 10px;border-radius:var(--st-radius-sm);cursor:pointer;}
.sug-list li[aria-selected="true"],.sug-list li:hover{background:var(--st-raised);}
.sug-ot{min-width:0;}
.sug-oy,.sug-os{flex:none;color:var(--st-muted);font:400 var(--st-fs-meta)/1.4 var(--st-mono);}
.sug-os{flex:0 1 auto;text-align:right;}
/* A picked place: its name, its address in the muted role, a quiet Change. */
.sug-picked{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 12px;border:1.5px solid var(--st-line);border-radius:var(--st-radius);background:var(--st-bg);}
.sug-picked[hidden]{display:none;}
.sug-pname{font:400 17px/1.3 var(--st-display);letter-spacing:.01em;}
.sug-paddr{flex:1 1 100%;order:3;color:var(--st-muted);font-size:15px;}
.sug-picked .sug-link{margin-left:auto;}
.sug-addr-field{display:flex;flex-direction:column;gap:6px;}
.sug-addr-field[hidden]{display:none;}
.sug-link{background:none;border:0;padding:0;min-height:44px;color:var(--st-link);font:400 var(--st-fs-label)/1.2 var(--st-display);letter-spacing:.04em;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
/* The honeypot: out of sight, out of the tab order, read by no screen reader. */
.sug-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
/* The Send row: under the fields, always in view. */
.sug-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 20px calc(16px + var(--feedback-reserve-h, 0px));border-top:1px solid var(--st-line);background:var(--st-surface);border-radius:0 0 var(--st-radius) var(--st-radius);}
.sug-review{margin:0;color:var(--st-muted);font-size:15px;line-height:1.4;}
.sug-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
.sug-acts .st-btn{flex:1 1 auto;}
.sug-send[aria-busy="true"]{cursor:progress;}
@media (prefers-reduced-motion:no-preference){
  .sug-send[aria-busy="true"]{animation:sug-pulse 1.2s ease-in-out infinite;}
  @keyframes sug-pulse{50%{opacity:.6;}}
}
/* After the 201 */
.sug-thanks{padding:8px 20px 20px;display:flex;flex-direction:column;gap:12px;overflow:auto;}
.sug-th{font:400 var(--st-fs-h3)/1.15 var(--st-display);letter-spacing:.01em;margin:0;text-align:left;}
.sug-th:focus{outline:none;}
.sug-thanks p{margin:0;font-size:17px;line-height:1.45;}
.sug-addrback{font-weight:400;font-family:var(--st-mono);font-size:15px;word-break:break-all;}
.sug-thanks .sug-acts .sug-link{flex:none;}
/* The quiet ways in on /home (the empty search, the card, the films panel): a link in the link role. */
.sug-way{margin:8px 0 0;font-size:15px;line-height:1.4;}
.sug-way a{color:var(--st-link);text-decoration:underline;text-underline-offset:3px;}
.sug-on #card .sug-way{visibility:hidden;}

/* Below 1024px: a bottom sheet over the map, above the card, the same grip as the card's. */
@media (max-width:1023px){
  .sug{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88%;border-radius:16px 16px 0 0;box-shadow:0 -14px 40px -18px rgba(0,0,0,.45);z-index:11;}
  .sug[data-sheet="full"]{max-height:calc(100% - 8px);}
  .sug .sheet-grip{display:grid;}
  .sug-head{padding:4px 16px 2px;}
  .sug-body{padding:4px 16px 12px;}
  .sug-foot{padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));border-radius:0;}
  .sug-thanks{padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px) + var(--feedback-reserve-h, 0px));}
  .sug-way a{display:inline-flex;align-items:center;min-height:44px;}
}

/* ---------- the confirm page ---------- */
.sugc-page{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--st-bg);color:var(--st-text);font:400 var(--st-fs-body)/1.5 var(--st-serif);}
.sugc-nav{background:var(--st-olive);padding:0 16px;min-height:58px;display:flex;align-items:center;}
.sugc-wm{font:400 22px/1 var(--st-display);letter-spacing:.06em;color:var(--st-on-olive);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;}
.sugc-o{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--st-coral);margin:0 .04em;}
.sugc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.sugc{flex:1 0 auto;padding:40px 16px 48px;display:flex;flex-direction:column;gap:16px;}
.sugc-h{font:400 var(--st-fs-h1)/1 var(--st-display);letter-spacing:.005em;margin:0;}
.sugc-h:focus{outline:none;}
.sugc-p{margin:0;font:400 var(--st-fs-lead)/1.35 var(--st-serif);color:var(--st-text);}
.sugc-acts{display:flex;flex-wrap:wrap;gap:10px;}
.sugc-acts .st-btn[aria-busy="true"]{cursor:progress;}
.sugc-foot{padding:12px 16px calc(12px + var(--feedback-reserve-h, 0px));border-top:1px solid var(--st-line);font:400 var(--st-fs-meta)/1.5 var(--st-mono);color:var(--st-muted);}
.sugc-foot a,.sugc a:not(.st-btn){color:var(--st-link);}
@media (min-width:900px){
  .sugc-nav{padding:0 40px;}
  .sugc{padding:64px 40px;}
  .sugc-foot{padding-left:40px;padding-right:40px;}
}