/* Fairly Connected — /app/ (sign-in, handle, editor). Builds on fc.css tokens. Phone first. */
.ap-main{max-width:var(--fc-max);margin:0 auto;padding:20px 16px 120px;display:grid;gap:14px}
.ap-card{background:var(--fc-white);border:1px solid var(--fc-line);border-radius:var(--fc-radius);padding:18px;box-shadow:var(--fc-shadow)}
.ap-card h1{font-size:28px;font-weight:800;margin-bottom:6px}
.ap-card h2{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--fc-ember);margin-bottom:10px}
.ap-lede{color:var(--fc-ink-2);margin:0 0 14px}
.ap-muted{color:var(--fc-smoke);font-size:15px;margin:0}
.ap-field{display:grid;gap:5px;margin-bottom:12px}
.ap-field>span{font-family:var(--fc-font-head);font-weight:700;font-size:14px}
.ap-field small{color:var(--fc-smoke);font-size:13px}
.ap-main input[type=text],.ap-main input[type=email],.ap-main input[type=url],.ap-main input[type=tel],.ap-main textarea,.ap-main select{
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:var(--fc-radius-sm);border:1px solid var(--fc-line);
  background:var(--fc-paper);font:inherit;font-size:17px;color:var(--fc-ink)}
.ap-main textarea{min-height:110px;resize:vertical}
.ap-main input:focus,.ap-main textarea:focus,.ap-main select:focus{outline:3px solid rgba(217,98,43,.35);border-color:var(--fc-ember)}
.ap-prefix{display:flex;align-items:center;border:1px solid var(--fc-line);border-radius:var(--fc-radius-sm);background:var(--fc-paper);overflow:hidden}
.ap-prefix b{padding:0 0 0 14px;color:var(--fc-smoke)}
.ap-prefix input{border:0!important;background:transparent!important;padding-left:4px!important}
.ap-ok{color:var(--fc-moss);font-weight:600}
.ap-bad{color:#9B2E2E;font-weight:600}
.ap-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.ap-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:2px solid var(--fc-ember);background:var(--fc-ember);
  color:var(--fc-white);font-family:var(--fc-font-head);font-weight:700;font-size:16px;cursor:pointer;text-decoration:none}
.ap-btn--ghost{background:transparent;color:var(--fc-ink);border-color:var(--fc-line)}
.ap-btn--small{padding:6px 12px;font-size:14px}
.ap-btn[disabled]{opacity:.45;cursor:default}
.ap-link{background:none;border:0;padding:0;color:var(--fc-ember);font:inherit;cursor:pointer;text-decoration:underline}
.ap-msg{padding:12px 14px;border-radius:var(--fc-radius-sm);background:var(--fc-paper-2);margin:12px 0 0;font-size:15px}
.ap-msg--bad{background:#F6E3E0;color:#6E1F1F}
.ap-msg--ok{background:#E6EDDC;color:#2F4A22}

/* palette + look */
/* the whole-look picker — two presets, replacing the old colors/font/texture fields, 2026-09-15 */
.ap-looks{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ap-look{width:110px;padding:0;border:2px solid var(--fc-line);border-radius:var(--fc-radius-sm);background:var(--fc-white);cursor:pointer;overflow:hidden;text-align:center}
.ap-look i{display:block;height:52px}
.ap-look b{display:block;height:8px;margin:0 10px 8px;border-radius:999px}
.ap-look span{display:block;font-family:var(--fc-font-head);font-weight:700;font-size:13px;padding:0 4px 8px}
.ap-look[aria-pressed="true"]{border-color:var(--fc-ember);box-shadow:0 0 0 2px color-mix(in srgb,var(--fc-ember) 30%,transparent)}

/* header preview — same vars the real page uses; no banner behind it (window-cover retired 2026-09-15) */
.ap-preview{border-radius:var(--fc-radius);overflow:hidden;border:1px solid var(--fc-line);margin-bottom:14px;background:var(--page-bg);color:var(--page-ink)}
.ap-preview .pv-head{padding:14px 14px 14px}
.ap-preview .pv-avatar{width:64px;height:64px;border-radius:50%;border:3px solid var(--page-bg);background:var(--page-card) center/cover no-repeat}
.ap-preview .pv-avatar--square{border-radius:10px}
.ap-preview .pv-name{font-family:var(--fc-font-head);font-weight:800;font-size:22px;margin-top:6px}
.ap-preview .pv-tag{color:var(--page-ink-2);font-size:15px}
.ap-preview .pv-btn{display:inline-block;margin-top:8px;padding:6px 12px;border-radius:999px;background:var(--page-accent);color:var(--page-accent-ink);font-family:var(--fc-font-head);font-weight:700;font-size:14px}
.ap-preview[data-texture=dots]{background-image:radial-gradient(var(--page-line) 1px,transparent 1px);background-size:14px 14px}
.ap-preview[data-texture=lines]{background-image:repeating-linear-gradient(0deg,transparent 0 13px,var(--page-line) 13px 14px)}
.ap-preview[data-texture=grain]{background-image:radial-gradient(var(--page-line) .6px,transparent .6px),radial-gradient(var(--page-line) .6px,transparent .6px);background-size:7px 7px,11px 11px;background-position:0 0,3px 5px}
.ap-upload{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px dashed var(--fc-smoke);background:var(--fc-paper);font-size:15px;cursor:pointer}
.ap-upload input{position:absolute;width:1px;height:1px;opacity:0}
.ap-thumb{width:56px;height:56px;border-radius:8px;object-fit:cover;background:var(--fc-paper-2)}

/* blocks */
.ap-block{border:1px solid var(--fc-line);border-radius:var(--fc-radius);background:var(--fc-white);margin-bottom:12px;box-shadow:var(--fc-shadow)}
.ap-block--hidden{opacity:.55}
.ap-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--fc-line);background:var(--fc-paper)}
.ap-block-head b{font-family:var(--fc-font-head);font-size:15px}
.ap-block-tools{display:flex;gap:4px}
.ap-block-tools button{width:34px;height:34px;border-radius:8px;border:1px solid var(--fc-line);background:var(--fc-white);font-size:16px;cursor:pointer}
.ap-block-tools button[disabled]{opacity:.3}
.ap-block-body{padding:12px 12px 4px}
.ap-item{display:grid;gap:6px;padding:10px;border-radius:var(--fc-radius-sm);background:var(--fc-paper);margin-bottom:8px;position:relative}
.ap-item .ap-x{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:6px;border:0;background:transparent;font-size:16px;cursor:pointer;color:var(--fc-smoke)}
.ap-item input{padding:9px 12px!important;font-size:16px!important;background:var(--fc-white)!important}
.ap-item--photo{grid-template-columns:56px 1fr;align-items:center}
.ap-add{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

/* sticky save bar */
.ap-bar{position:fixed;left:0;right:0;bottom:0;z-index:6;background:var(--fc-ink);color:var(--fc-paper);padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--fc-font-head)}
.ap-bar .ap-status{font-size:14px;opacity:.85}
.ap-bar .ap-btn{border-color:var(--fc-gold);background:var(--fc-gold);color:var(--fc-ink)}
.ap-bar a{color:var(--fc-gold)}
.ap-switch{display:flex;align-items:center;gap:10px;cursor:pointer}
.ap-switch input{flex:0 0 44px;width:44px;height:26px;appearance:none;background:var(--fc-line);border-radius:999px;position:relative;cursor:pointer;margin:0}
.ap-switch input::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--fc-white);transition:left .15s}
.ap-switch input:checked{background:var(--fc-moss)}
.ap-switch input:checked::after{left:21px}
.ap-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.ap-tabs a{padding:6px 12px;border-radius:999px;border:1px solid var(--fc-line);text-decoration:none;color:var(--fc-ink);font-size:15px}
.ap-tabs a[aria-current]{background:var(--fc-ink);color:var(--fc-paper);border-color:var(--fc-ink)}
.ap-foot-links{display:flex;gap:14px;flex-wrap:wrap;font-size:15px}

/* ---------------------------------------------------------------- step 5: the Desk + handing in */
.ap-hand { display:flex; align-items:center; gap:10px; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--fc-line, rgba(30,26,22,.12)); }
.ap-hand:last-child { border-bottom:0; }
.ap-hand-main { min-width:0; }
.ap-hand-main b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ap-chip { display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; line-height:1.7;
  background:rgba(30,26,22,.07); color:var(--fc-ink, #1E1A16); white-space:nowrap; }
.ap-chip--local, .ap-chip--featured { background:var(--fc-ember, #D9622B); color:#fff; }
.ap-chip--submitted { background:var(--fc-gold, #E7B84A); color:#1E1A16; }
.ap-chip--approved { background:var(--fc-moss, #5E7A4B); color:#fff; }
.ap-chip--rejected, .ap-chip--archived { background:rgba(30,26,22,.12); color:var(--fc-smoke, #6F6A62); }
.ap-desk-head .ap-tabs { margin-top:12px; }
.ap-desk-card { background:var(--fc-card, #fff); border:1px solid var(--fc-line, rgba(30,26,22,.12));
  border-radius:var(--fc-radius, 12px); padding:16px; margin:0 0 14px; }
.ap-desk-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; font-size:13px; margin-bottom:10px; }
.ap-desk-url { margin:4px 0 12px; font-size:13px; overflow-wrap:anywhere; }
.ap-desk-url a { color:var(--fc-smoke, #6F6A62); }
.ap-desk-tools { display:flex; flex-wrap:wrap; gap:8px; }
.ap-desk-when { margin-top:12px; padding-top:12px; border-top:1px dashed var(--fc-line, rgba(30,26,22,.18)); }
@media (max-width:420px) { .ap-desk-tools .ap-btn { flex:1 1 auto; } }

/* categories: pick one, read it at arm's length */
.ap-cats { display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.ap-cats input { position:absolute; opacity:0; width:0; height:0; }
.ap-cat span { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  border:2px solid var(--fc-line, rgba(30,26,22,.14)); background:var(--fc-white, #fff); cursor:pointer;
  font-size:14px; line-height:1.3; }
.ap-cat input:checked + span { border-color:var(--cat); background:var(--cat); color:#fff; }
.ap-cat input:focus-visible + span { outline:2px solid var(--cat); outline-offset:2px; }
.ap-cats--small .ap-cat span { padding:5px 10px; font-size:13px; }
.ap-chip--cat { background:var(--cat); color:#fff; }
.ap-desk-card { border-left:6px solid var(--cat); }
.ap-said { margin:0 0 14px; padding:12px 14px; border-left:3px solid var(--cat);
  background:rgba(30,26,22,.04); border-radius:0 8px 8px 0; font-size:17px; line-height:1.45; }
.ap-said cite { display:block; margin-top:6px; font-style:normal; font-size:14px; color:var(--fc-smoke, #6F6A62); }
.ap-said small { display:block; margin-top:6px; font-size:12px; }

/* ---------------------------------------------------------------- foldable sections
   Native <details>, so it works with a keyboard, works before the JS runs, and costs
   nothing. Sections stay shut until somebody wants them — which is the whole point. */
.ap-fold { padding:0; }
.ap-fold > summary { list-style:none; cursor:pointer; padding:16px 18px; display:flex;
  align-items:center; justify-content:space-between; gap:12px; border-radius:var(--fc-radius); }
.ap-fold > summary::-webkit-details-marker { display:none; }
.ap-fold > summary:hover { background:var(--fc-paper); }
.ap-fold > summary:focus-visible { outline:2px solid var(--fc-ember); outline-offset:-2px; }
.ap-fold-t { display:flex; flex-direction:column; gap:2px; min-width:0; }
.ap-fold-t b { font-family:var(--fc-font-head); font-size:19px; line-height:1.2; }
.ap-fold-t small { color:var(--fc-smoke); font-size:13px; }
.ap-fold-x { flex:none; width:22px; height:22px; position:relative; opacity:.5; }
.ap-fold-x::before, .ap-fold-x::after { content:''; position:absolute; inset:50% 2px auto 2px;
  height:2px; background:currentColor; border-radius:2px; transition:transform .18s ease; }
.ap-fold-x::after { transform:rotate(90deg); }
.ap-fold[open] > summary .ap-fold-x::after { transform:rotate(0deg); }
.ap-fold[open] > summary { border-bottom:1px solid var(--fc-line); border-radius:var(--fc-radius) var(--fc-radius) 0 0; }
.ap-fold-body { padding:16px 18px 18px; }

/* a block is a fold too */
.ap-block > summary { list-style:none; cursor:pointer; }
.ap-block > summary::-webkit-details-marker { display:none; }
.ap-block-head { border-bottom:0; border-radius:var(--fc-radius); }
.ap-block[open] > .ap-block-head { border-bottom:1px solid var(--fc-line);
  border-radius:var(--fc-radius) var(--fc-radius) 0 0; }
.ap-block-t { display:flex; flex-direction:column; gap:1px; min-width:0; }
.ap-block-t small { color:var(--fc-smoke); font-size:12px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:46vw; }
@media (prefers-reduced-motion:reduce){ .ap-fold-x::before, .ap-fold-x::after { transition:none; } }

/* same contrast fix in the Desk */
.ap-chip--cat{background:color-mix(in srgb,var(--cat) 16%,var(--fc-white));color:var(--fc-ink);
  border:1px solid color-mix(in srgb,var(--cat) 42%,transparent);font-weight:600}

/* ---- putting an event up, and the Desk's Coming up lane ------------------ */
.ap-chip--cancelled{background:rgba(30,26,22,.12);color:var(--fc-smoke,#6F6A62);text-decoration:line-through}
.ap-when{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.ap-when label{display:grid;gap:3px}
.ap-when small{font-size:12px;color:var(--fc-smoke,#6F6A62)}
.ap-when input{width:100%}
@media (max-width:420px){
  .ap-when{grid-template-columns:1fr 1fr}
  .ap-when label:first-child{grid-column:1 / -1}
}
.ap-desk-evt{margin:2px 0 4px;font-size:19px;line-height:1.2}
.ap-desk-ev p{margin:0 0 6px}

/* ---------------------------------------------------------------- the post (step 7) */
.ap-letter{border:1px solid var(--fc-line);border-radius:var(--fc-radius);padding:14px 16px;margin-bottom:12px;background:var(--fc-white)}
.ap-letter-head{display:flex;flex-wrap:wrap;gap:4px 12px;justify-content:space-between;align-items:baseline;
  font-family:var(--fc-font-head);font-size:14px;margin-bottom:8px}
.ap-letter-body{white-space:normal;line-height:1.55}
.ap-letter-do{display:flex;gap:14px;margin-top:12px;flex-wrap:wrap}
.ap-postmark{display:inline-block;font-family:var(--fc-font-head);font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fc-ember);
  border:1.5px solid var(--fc-ember);border-radius:6px;padding:3px 9px;margin-bottom:10px;
  transform:rotate(-2deg);opacity:.9}

/* the route: a plain map of the WABBLES with the rider somewhere on it */
.fc-map{display:block;width:100%;max-width:360px;height:auto;margin:6px 0 12px}
.fc-map-bg{fill:color-mix(in srgb,var(--fc-moss) 8%,var(--fc-paper))}
.fc-map-road{fill:none;stroke:var(--fc-smoke);stroke-width:1.5;stroke-dasharray:4 5;opacity:.8}
.fc-map-town{fill:var(--fc-smoke);opacity:.45}
.fc-map-end{fill:var(--fc-ember)}
.fc-map-rider circle{fill:var(--fc-ink)}
.fc-map-rider text{fill:var(--fc-white);font-size:8px}
.fc-map-label{fill:var(--fc-ink-2);font-family:var(--fc-font-head);font-size:9px;font-weight:700}

.ap-card--ask{border-color:var(--fc-gold);border-width:2px}
.ap-ask{border-top:1px solid var(--fc-line);padding-top:12px;margin-top:12px}
.ap-ask-body{font-style:italic;color:var(--fc-ink-2);margin:0 0 10px}
.ap-ask-do{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.ap-btn--sm{padding:7px 14px;font-size:14px}

/* something still out with a carrier, seen from the receiving end */
.ap-card--coming{border-color:var(--fc-moss);border-width:2px}
.ap-coming{border-top:1px solid var(--fc-line);padding-top:12px;margin-top:12px}
.ap-coming:first-of-type{border-top:0;padding-top:0}
.ap-coming-line{font-family:var(--fc-font-head);font-size:15px;margin-bottom:8px}

/* reporting a letter — deliberately quiet next to Keep it and the fridge */
.ap-link--quiet{color:var(--fc-smoke)}
.ap-link--quiet:hover{color:var(--fc-ember)}
.ap-report{border:1px solid var(--fc-line);border-radius:var(--fc-radius-sm);padding:12px 14px;margin-top:10px;
  background:color-mix(in srgb,var(--fc-ember) 5%,transparent)}
.ap-report p{font-size:14px;margin:0 0 10px}
.ap-report textarea{width:100%;padding:10px 12px;border-radius:var(--fc-radius-sm);
  border:1px solid var(--fc-line);background:var(--fc-white);font:inherit;resize:vertical;margin-bottom:10px}

/* a neighbor's own private list of paths they closed */
.ap-blocked-list{border-top:1px solid var(--fc-line);margin-top:14px}
.ap-blocked-person{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:13px 0;border-bottom:1px solid var(--fc-line)}
.ap-blocked-person>span{display:grid;gap:1px;min-width:0}
.ap-blocked-person small{color:var(--fc-smoke);font-size:13px}
.ap-blocked-note{color:var(--fc-smoke);font-size:14px;margin:16px 0}

/* a picture that rode with a letter — private bucket, signed link, hidden until it arrives */
.ap-letter-pic{display:block;width:100%;max-width:420px;height:auto;border-radius:var(--fc-radius-sm);
  border:1px solid var(--fc-line);margin:0 0 12px}

/* ---------- rooms in the editor (2026-09-14) ---------- */
.ap-prompt{margin:0 0 10px;font-family:var(--fc-font-head);font-size:17px;font-weight:600;line-height:1.35;color:var(--fc-ink)}
.ap-field--small>span{font-weight:600;color:var(--fc-smoke)}
.ap-field--small>span small{font-weight:400}
.ap-field--small{margin-top:14px}
.ap-room-empty{padding:4px 0 10px}
.ap-rooms-note{margin:-4px 0 18px;font-size:14px}

/* the window choosers + preview banner — retired with the window-cover, 2026-09-15 */

/* ---------------------------------------------------------------- 0023: the board holds
   Held lane on the Desk, "waiting for a look" on a member's own page, picture upload previews,
   member campfire form, poster reports. (02-website/PROMPT-sonnet-board-frontend-2026-09-15.md) */
.ap-chip--held{background:var(--fc-ember-deep,#A6461D);color:#fff}
.ap-desk-pic{display:block;width:100%;max-width:320px;border-radius:var(--fc-radius-sm);margin:8px 0}
.ap-desk-reason{background:var(--fc-paper-2);border-radius:var(--fc-radius-sm);padding:8px 12px;font-size:14px;color:var(--fc-ink-2);margin:8px 0}

.ap-waiting{border-left:4px solid var(--fc-gold,#E7B84A);background:var(--fc-paper-2);border-radius:var(--fc-radius-sm);
  padding:12px 14px;margin-top:12px}
.ap-waiting-kicker{margin:0 0 4px;font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--fc-ember-deep,#A6461D)}
.ap-waiting h3{margin:0 0 4px;font-size:17px}
.ap-waiting p{margin:0 0 6px;font-size:14px;color:var(--fc-ink-2)}
.ap-waiting-note{display:flex;align-items:flex-start;gap:6px;background:rgba(30,26,22,.05);border-radius:var(--fc-radius-sm);padding:8px 10px;font-size:13px}

.ap-upload-preview{display:block;width:96px;height:96px;object-fit:cover;border-radius:var(--fc-radius-sm);margin-top:8px}