/* Shadeland internal app - the "Something's wrong / Idea" button and the Feedback tab. Built 07/11/2026.
   Brand tokens from styles.css. The red and green below are UI state signals, never brand colours.
   Yellow is used only as the dot, never as text. Every rule is scoped under #fb-root or .fbd. */

/* ---------- the floating button ---------- */
#fb-root{--fb-bad:#B42318;--fb-bad-bg:#FDE7E5;--fb-ok:#1E6B3A;--fb-ok-bg:#E3F4E8}
#fb-root[hidden],#fb-root [hidden]{display:none!important}
/* Bottom-right, above the tab bar (60px). The app column is 760px wide at most, so on a laptop it hugs the column. */
.fb-fab{position:fixed;right:max(16px,calc(50% - 364px));bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:6;
  width:48px;height:48px;border-radius:50%;border:2px solid var(--white);background:var(--navy);color:var(--white);
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(27,46,58,.30);padding:0}
.fb-fab:hover{background:var(--navy90)}
.fb-fab:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
/* A tab with its own round "+" in this corner (Tasks, Customers, Sessions): sit above it. */
.fb-fab.lift{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
/* Command (.app.wide, 1120px, cards to the edge): in the margin outside the column when there is room for it. */
.fb-fab.wide{right:max(16px,calc(50% - 560px - 64px))}
.fb-dot{position:absolute;top:2px;right:2px;width:12px;height:12px;border-radius:50%;background:var(--yellow);border:2px solid var(--navy)}
body.fb-open .fb-fab{visibility:hidden}

/* ---------- the sheet ---------- */
.fb-drop{position:fixed;inset:0;z-index:45;background:rgba(6,18,26,.45);display:flex;align-items:flex-end;justify-content:center}
.fb-sheet{background:var(--white);width:100%;max-width:560px;max-height:92dvh;overflow:auto;border-radius:16px 16px 0 0;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
@media (min-width:700px){.fb-drop{align-items:center}.fb-sheet{border-radius:16px}}
.fb-head{display:flex;align-items:center;gap:8px}
.fb-head h2{margin:0;font-family:Anton,Impact,sans-serif;font-weight:400;text-transform:uppercase;color:var(--navy);font-size:24px;letter-spacing:.3px}
.fb-x{margin-left:auto;width:44px;height:44px;border:0;background:var(--paper);border-radius:50%;font-size:26px;line-height:1;color:var(--ink);cursor:pointer}
.fb-seg{display:flex;gap:6px}
.fb-seg button{flex:1;min-height:40px;border-radius:999px;border:1px solid var(--line);background:var(--white);font:inherit;font-weight:600;font-size:15px;color:var(--ink);cursor:pointer}
.fb-seg button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}

.fb-kinds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb-kind{text-align:left;border:2px solid var(--line);border-radius:var(--radius);background:var(--white);padding:12px;font:inherit;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;min-height:var(--tap);color:var(--ink)}
.fb-kind strong{font-size:16px}
.fb-kind span{font-size:13px;color:var(--muted);line-height:1.3}
.fb-kind.wrong[aria-pressed="true"]{border-color:var(--fb-bad);background:var(--fb-bad-bg)}
.fb-kind.idea[aria-pressed="true"]{border-color:var(--blue);background:#E6F5FC}
.fb-l{font-size:14px;font-weight:600;color:var(--ink)}
#fb-note{width:100%;font:inherit;font-size:16px;padding:10px 12px;border:2px solid var(--line);border-radius:var(--radius);resize:vertical;min-height:110px;color:var(--ink)}
#fb-note:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(39,170,225,.25)}
.fb-photos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fb-th{position:relative;width:72px;height:72px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.fb-th img{width:100%;height:100%;object-fit:cover;display:block}
.fb-th button{position:absolute;top:2px;right:2px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(6,18,26,.7);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.fb-add{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:2px dashed var(--line);border-radius:var(--radius);color:var(--navy);font-weight:600;font-size:14px;cursor:pointer}
.fb-add input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fb-auto{margin:0;font-size:12px;color:var(--muted)}
.fb-msg{font-size:14px;border-radius:10px}
.fb-msg:empty{display:none}
.fb-msg.bad{background:var(--fb-bad-bg);color:var(--fb-bad);padding:8px 12px}
.fb-msg.ok{background:var(--fb-ok-bg);color:var(--fb-ok);padding:8px 12px}
.fb-send{min-height:var(--tap);border:0;border-radius:var(--radius);background:var(--navy);color:var(--white);font:inherit;font-weight:600;font-size:17px;cursor:pointer;width:100%}
.fb-send:disabled{background:var(--line);color:var(--muted);cursor:default}
.fb-link{background:none;border:0;color:var(--navy);text-decoration:underline;font:inherit;font-size:15px;cursor:pointer;padding:8px}
.fb-done{display:flex;flex-direction:column;gap:8px;text-align:center;padding:8px 0}
.fb-done p{margin:0;color:var(--muted);font-size:14px}
.fb-empty{color:var(--muted);font-size:14px;margin:8px 0}

.fb-mine{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fb-r{border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.fb-r.st-built{border-left:4px solid var(--fb-ok)}
.fb-r-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fb-st{font-weight:600;font-size:14px}
.st-built .fb-st{color:var(--fb-ok)}
.fb-when{margin-left:auto;font-size:12px;color:var(--muted)}
.fb-r-note{margin:6px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.fb-reply{margin:6px 0 0;font-size:14px;background:var(--paper);border-radius:8px;padding:6px 10px}
.fb-pill{display:inline-flex;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;white-space:nowrap}
.fb-pill.wrong{background:#FDE7E5;color:#B42318}
.fb-pill.idea{background:#E6F5FC;color:var(--navy)}

/* ---------- the Feedback tab (Graeme and Mycaela) ---------- */
.fbd{--fb-bad:#B42318;--fb-bad-bg:#FDE7E5;--fb-ok:#1E6B3A;--fb-ok-bg:#E3F4E8;
  padding:12px 16px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px}
.fbd [hidden]{display:none!important}
.fbd h1{font-family:Anton,Impact,sans-serif;text-transform:uppercase;color:var(--navy);font-weight:400;font-size:28px;letter-spacing:.3px;margin:0;line-height:1.05}
.fbd-sub{color:var(--muted);font-size:14px;margin:4px 0 0}
.fbd-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fbd-seg{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-weight:600;cursor:pointer}
.fbd-seg[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.fbd-seg.ghost{margin-left:auto;font-weight:400;color:var(--muted)}
.fbd-banner{font-size:13px;border-radius:10px;padding:8px 12px}
.fbd-banner:empty{display:none}
.fbd-banner.bad{background:var(--fb-bad-bg);color:var(--fb-bad)}
.fbd-empty{color:var(--muted);font-size:14px}
.fbd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.fbd-item{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.fbd-item.st-new{border-left:4px solid var(--blue)}
.fbd-item.st-approved{border-left:4px solid var(--fb-ok)}
.fbd-top{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fbd-st{font-weight:600;font-size:14px}
.fbd-ref{margin-left:auto;color:var(--muted);font-size:13px}
.fbd-who{margin:0;font-size:13px;color:var(--muted)}
.fbd-who strong{color:var(--ink)}
.fbd-note{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.fbd-photos{display:flex;flex-wrap:wrap;gap:8px}
.fbd-ph{width:88px;height:88px;border-radius:10px;overflow:hidden;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);text-decoration:none;background:var(--paper)}
.fbd-ph img{width:100%;height:100%;object-fit:cover;display:block}
.fbd-dup{margin:0;font-size:13px;color:var(--muted)}
.fbd-claude{background:var(--paper);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.fbd-claude p{margin:0;font-size:14px}
.fbd-h{font-size:11px!important;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
.fbd-h span{letter-spacing:0;text-transform:none;font-weight:400}
.fbd-pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;margin:0}
.fbd-rules{color:var(--muted);font-size:13px!important}
.fbd-wait{margin:0;font-size:13px;color:var(--muted);font-style:italic}
.fbd-d summary{cursor:pointer;font-size:13px;color:var(--navy);font-weight:600;min-height:32px;display:flex;align-items:center}
.fbd-d .fbd-pre{background:var(--paper);border-radius:8px;padding:8px 10px;margin:6px 0}
.fbd-dl{margin:6px 0 0}
.fbd-dl>div{display:grid;grid-template-columns:72px 1fr;gap:10px;padding:5px 0;border-top:1px solid var(--line)}
.fbd-dl>div:first-child{border-top:0}
.fbd-dl dt{color:var(--muted);font-size:13px}
.fbd-dl dd{margin:0;overflow-wrap:anywhere;font-size:13px}
.fbd-reply,.fbd-dec{margin:0;font-size:13px;color:var(--muted)}
.fbd-act{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:10px}
.fbd-act textarea{width:100%;font:inherit;font-size:15px;padding:8px 10px;border:2px solid var(--line);border-radius:10px;resize:vertical;color:var(--ink)}
.fbd-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fbd-btn{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--white);color:var(--ink);font:inherit;font-weight:600;font-size:14px;cursor:pointer}
.fbd-btn.go{background:var(--navy);border-color:var(--navy);color:var(--white)}
.fbd-btn.ghost{font-weight:400;color:var(--muted)}
.fbd-btn:disabled{opacity:.5;cursor:default}
.fbd-dupin{display:inline-flex;gap:4px;align-items:center}
.fbd-dupin input{width:64px;height:44px;border:1px solid var(--line);border-radius:10px;font:inherit;font-size:15px;padding:0 8px}
.fbd-msg{font-size:13px}
.fbd-msg:empty{display:none}
.fbd-msg.bad{color:var(--fb-bad)}