/* ============================================================
   The wall (big screen). Layout and note style follow the early test
   prototype; additions for the live version are marked "new".
   ============================================================ */

:root{
  /* set from JS: how many columns the board draws, and how big notes are */
  --cols: 6;
  --mcols: 6;
  --note-fs: 13px;
}

html,body{ width:100%; height:100%; overflow:hidden; }

body.wall{
  height:100vh; position:relative;
  display:flex; flex-direction:column;
}

/* ---------------- Header ---------------- */
header{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
  z-index:20;   /* the view & filter menu drops over the board */
  padding:clamp(10px,1.3vh,16px) clamp(24px,3vw,48px);
  text-align:center;
  position:relative;
  flex-shrink:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:clamp(16px,2vw,32px);
}
.header-main{ grid-column:2; min-width:0; }
.logo{ display:block; height:auto; object-fit:contain; }
.header-left{
  grid-column:1; justify-self:start;
  display:flex; flex-direction:column; align-items:flex-start; gap:clamp(6px,1vh,10px);
  position:relative;
}
.logo-left{ width:clamp(120px,10vw,190px); }
.logo-right{ grid-column:3; justify-self:end;
  width:clamp(110px,9vw,170px); }
h1{
  font-weight:700;
  font-size:clamp(19px, 2.1vw, 44px);
  line-height:1.2; color:var(--navy);
  max-width:1180px; margin:0 auto;
}
.subtitle{
  margin-top:6px;
  font-size:clamp(11px,0.95vw,18px);
  color:var(--muted);
}

/* ---------------- View & filter menu ---------------- */
/* A button under the Sheridan logo opens a panel holding every view, filter and switch. */
.menu-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:clamp(11px,0.7vw,14px); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--navy); background:var(--panel);
  border:1px solid var(--rule); border-radius:999px;
  min-height:38px; padding:6px 14px; cursor:pointer; white-space:nowrap;
  transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.menu-btn:hover, .menu-btn[aria-expanded="true"]{ border-color:var(--navy); }
.menu-btn:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }
/* navy while a filter is on, so a filtered wall is obvious even with the menu closed */
.menu-btn.on{ background:var(--navy); color:#fff; border-color:var(--navy); }

.viewbar{
  position:absolute; left:0; top:100%; margin-top:8px;
  z-index:30;
  width:max-content; min-width:240px;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:12px; border-radius:14px;
  background:var(--paper); border:1px solid var(--rule);
  box-shadow:0 8px 28px rgba(0,25,50,0.18);
  text-align:left;
}
.viewbar[hidden], .viewbar [hidden]{ display:none !important; }
.viewbar .vbtn, .viewbar .vselect{ width:100%; text-align:left; }
.viewbar .vbtn{ display:flex; justify-content:space-between; align-items:center; }
/* new: always visible. The prototype faded it in on hover, and a touch
   screen has no hover, so on the Hub it could not be found. */
.vbtn, .vselect{
  font:inherit; font-size:clamp(11px,0.62vw,14px); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted); background:var(--panel);
  border:1px solid var(--rule); border-radius:999px;
  min-height:34px; padding:6px 12px; cursor:pointer; white-space:nowrap;
  transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.vbtn:hover{ color:var(--navy); border-color:var(--navy); }
.vbtn[aria-pressed="true"]{
  background:var(--navy); color:#fff; border-color:var(--navy);
}
.vbtn .k{ opacity:0.55; font-weight:600; margin-left:5px; }
/* filter menus; navy when a filter is on, so a filtered wall is obvious */
.vselect{ padding-right:10px; }
.vselect:hover{ color:var(--navy); border-color:var(--navy); }
.vselect.on{ background:var(--navy); color:#fff; border-color:var(--navy); }
.vselect option, .vselect optgroup{ text-transform:none; color:var(--ink); background:#fff; }
.vsep{ height:1px; background:var(--rule); margin:2px 0; }

/* ---------------- Board ---------------- */
.board{
  flex:1; min-height:0; position:relative;
  padding:clamp(10px,1.4vh,16px) clamp(16px,2.4vw,40px);
}

/* --- view: columns (by opportunity area) --- */
.board[data-view="columns"]{
  display:grid;
  grid-template-columns:repeat(var(--cols), minmax(0,1fr));
  grid-auto-rows:minmax(0,1fr);
  gap:clamp(8px,0.8vw,14px);
}

/* --- views: recent / top (one flowing wall of tiles) --- */
.board[data-view="recent"],
.board[data-view="top"],
.board[data-view="area"]{
  display:block;
  columns:var(--mcols);
  column-gap:clamp(8px,0.8vw,14px);
  overflow:hidden;
}
.board[data-view="recent"] .note,
.board[data-view="top"] .note,
.board[data-view="area"] .note{
  break-inside:avoid;
  margin:0 0 clamp(8px,0.8vw,14px);
}

.column{
  display:flex; flex-direction:column; min-height:0;
  background:var(--paper);
  border:1px solid var(--rule);
  border-top:4px solid var(--accent, var(--muted));
  border-radius:10px;
  box-shadow:0 2px 8px rgba(0,55,103,0.06);
  overflow:hidden;
}

.col-head{
  padding:9px 12px 8px;
  border-bottom:1px solid var(--rule);
  flex-shrink:0;
}
.col-head .swatch{
  width:9px; height:9px; border-radius:50%;
  display:inline-block; margin-right:7px;
  background:var(--accent, var(--muted));
}
.col-head .label{
  font-size:clamp(10.5px,0.9vw,18px);
  font-weight:700; color:var(--navy);
}
.col-head .count{
  display:block; margin-top:2px;
  font-size:clamp(10px,0.65vw,13px); color:var(--muted);
  letter-spacing:0.06em; text-transform:uppercase;
}

/* A column holding more than fits scrolls on its own (touch, wheel or scrollbar). */
.col-body{
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;           /* the page behind never moves */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
  padding:8px 9px 12px;
  display:flex; flex-direction:column; gap:7px;
  background:var(--panel);
}

.col-empty{
  margin:auto; text-align:center;
  font-size:clamp(11px,0.75vw,15px); color:#5E6470;   /* darker than --muted: AA on the grey panel */
  padding:16px 8px; line-height:1.4;
}

/* ---------------- Notes ---------------- */
.note{
  position:relative;
  isolation:isolate;          /* new: keeps the stacked "pile" behind this note */
  flex-shrink:0;
  background:var(--paper);
  color:var(--ink);
  border-radius:6px;
  padding:9px 11px;
  font-size:var(--note-fs);
  line-height:1.4;
  box-shadow:0 1px 4px rgba(0,55,103,0.08);
  border-left:4px solid var(--accent, var(--muted));
}
/* only notes that are new to this screen animate in */
.note.arrive{ animation:noteIn 0.45s ease both; }
@keyframes noteIn{ from{ opacity:0; transform:translateY(8px); } }

.note .idea{ display:block; }
.note .from{
  display:block; margin-top:5px;
  font-size:0.8em; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.04em;
}

/* new: busy wall, so long ideas are cut to a few lines (full text opens on tap) */
.board[data-density="1"] .note .idea,
.board[data-density="2"] .note .idea{
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden;
  -webkit-line-clamp:4;
}
.board[data-density="2"] .note .idea{ -webkit-line-clamp:3; }

/* new: bottom row of every note: support dots, stack size, area label */
.note-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px;
  margin-top:6px;
  font-size:0.76em;
}
.dots{ display:inline-flex; align-items:center; gap:2px; }
.dots i{
  display:inline-block; width:0.7em; height:0.7em; border-radius:50%;
  background:var(--accent, var(--muted));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.28);   /* keeps yellow dots visible on white */
}
.dots em{ font-style:normal; font-weight:800; color:var(--navy); margin-left:1px; }
.depth{
  font-weight:800; color:var(--navy);
  background:var(--panel); border:1px solid var(--rule);
  border-radius:999px; padding:0 6px;
}
/* new: the feeling the contributor chose, as a small word */
.note .feeling{
  font-weight:600; color:var(--ink);
  background:var(--panel); border:1px solid var(--rule);
  border-radius:999px; padding:0 7px;
}

/* The area label: colour alone never tells you the area */
.note .area{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:4px;
  font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.note .area::before{
  content:""; width:0.65em; height:0.65em; border-radius:50%;
  background:var(--accent, var(--muted));
}

/* new: a note that just arrived keeps an outline and sits at the top for 2 minutes */
.col-body::-webkit-scrollbar{ width:8px; }
.col-body::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:4px; }

.note.fresh{
  box-shadow:0 0 0 3px var(--accent, var(--navy)), 0 4px 14px rgba(0,55,103,0.18);
}
.new-tag{
  position:absolute; top:-6px; right:8px;
  font-size:0.66em; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; background:var(--navy);
  border-radius:999px; padding:1px 7px;
}

/* new: picked in "Find my idea" */
.note.found .new-tag{ background:var(--pink); }

/* new: notes open their details on tap */
.note[role="button"]{ cursor:pointer; }
.note:focus-visible{ outline:3px solid var(--navy); outline-offset:2px; }

/* --- new view: Latest, only the most recent idea, large --- */
.board[data-view="latest"]{ display:grid; place-items:center; overflow:hidden; }
.note.latest-note{
  width:min(1400px, 100%);
  padding:clamp(24px,3vw,64px) clamp(28px,3.5vw,72px);
  border-left-width:clamp(10px,0.8vw,18px);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,55,103,0.12);
  font-size:clamp(16px,1.15vw,26px);
}
.latest-label{
  font-size:0.9em; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted);
}
.latest-text{
  margin-top:0.5em;
  font-size:clamp(26px,3vw,68px); font-weight:600; line-height:1.25;
  color:var(--navy);
}
.latest-parent{
  margin-top:0.6em; padding-left:0.8em;
  border-left:4px solid var(--rule);
  color:var(--ink); font-style:italic; line-height:1.4;
}
.latest-by{
  margin-top:0.8em; font-size:1em;
  color:var(--muted); text-transform:uppercase; letter-spacing:0.04em;
}
.latest-note .note-meta{ margin-top:1.2em; font-size:0.95em; }

/* rank badge for the top view */
.note .rank{
  position:absolute; top:-7px; left:-7px;
  min-width:22px; height:22px; border-radius:999px;
  background:var(--navy); color:#fff;
  font-size:11px; font-weight:800;
  display:none; align-items:center; justify-content:center;
  padding:0 6px;
  box-shadow:0 2px 6px rgba(0,55,103,0.25);
}
.board[data-view="top"] .note.ranked .rank{ display:flex; }
.board[data-view="top"] .note.ranked{
  font-size:calc(var(--note-fs) * 1.28);
  border-left-width:6px;
}

/* stacked-note "pile" look for a cluster of near-duplicate ideas */
.note.stacked{ margin-bottom:9px; }
.note.stacked::before,
.note.stacked::after{
  content:"";
  position:absolute; height:100%;
  background:var(--paper);
  border-radius:6px;
  box-shadow:0 1px 3px rgba(0,55,103,0.08);
  z-index:-1;
}
.note.stacked::before{ top:4px; left:7px; right:7px; opacity:0.9; }
.note.stacked::after { top:8px; left:12px; right:12px; opacity:0.65; }

.more-chip{
  flex-shrink:0; align-self:stretch;
  font:inherit; font-size:clamp(11px,0.7vw,14px); font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted); background:var(--paper);
  border:1px dashed var(--rule); border-radius:6px;
  padding:6px 8px; margin-top:auto; cursor:pointer;   /* new: sits at the foot of the column */
  min-height:32px;
  transition:color 0.12s ease, border-color 0.12s ease;
}
.more-chip:hover{ color:var(--navy); border-color:var(--navy); }

.board.has-more{ padding-bottom:calc(clamp(10px,1.4vh,16px) + 30px); }   /* room for the pill */
.more-pill{
  position:absolute; right:clamp(16px,2.4vw,40px); bottom:clamp(4px,0.8vh,10px);
  font-size:11px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
  color:var(--muted); background:var(--paper);
  border:1px solid var(--rule); border-radius:999px;
  padding:4px 11px;
}

.board-message{
  grid-column:1/-1; margin:auto; text-align:center;
  color:var(--muted); font-size:16px; line-height:1.5;
}

/* ---------------- Toast ---------------- */
.toast{
  position:fixed; left:50%; bottom:96px; transform:translate(-50%, 12px);
  background:var(--navy); color:#fff;
  font-size:13px; font-weight:600;
  padding:9px 16px; border-radius:999px;
  box-shadow:0 4px 16px rgba(0,0,0,0.18);
  opacity:0; pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease;
  z-index:50;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }
.toast.error{ background:var(--orange); }

/* ---------------- Footer ---------------- */
footer{
  display:flex; align-items:center; gap:20px;
  padding:clamp(8px,1.2vh,14px) clamp(24px,3vw,48px);
  /* ends a touch deeper than --teal so the white text on the right passes AA contrast */
  background:linear-gradient(90deg, var(--navy), #007E93);
  color:#fff;
  flex-shrink:0;
}
.qr{ flex-shrink:0; text-align:center; }
.qr img{
  width:clamp(56px,4.2vw,96px); height:auto;
  background:#fff; padding:5px; border-radius:8px;
  display:block;
}
.qr figcaption{
  margin-top:5px; font-size:clamp(9px,0.55vw,12px); letter-spacing:0.08em;
  text-transform:uppercase; color:rgba(255,255,255,0.85); line-height:1.4;
}
.highlights{ flex:1; min-width:0; }
.highlights .h-label{
  font-size:clamp(11px,0.65vw,14px); letter-spacing:0.18em; text-transform:uppercase;
  color:var(--yellow); font-weight:700; margin-bottom:4px;
}
.highlights .h-text{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(13px,1.1vw,24px); color:#fff; opacity:0.96;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition:opacity 0.4s ease;
}
.highlights .h-text.fade{ opacity:0; }
.find-btn{
  flex-shrink:0;
  min-height:52px; padding:0 clamp(16px,1.2vw,26px);
  font:inherit; font-size:clamp(14px,0.9vw,20px); font-weight:700;
  color:#fff; background:transparent;
  border:2px solid rgba(255,255,255,0.85); border-radius:999px; cursor:pointer;
}
.find-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* new: the Hub's own way in. Navy on yellow is high contrast. */
.add-btn{
  flex-shrink:0;
  min-height:52px; padding:0 clamp(18px,1.4vw,30px);
  font:inherit; font-size:clamp(15px,1vw,22px); font-weight:800;
  color:var(--navy); background:var(--yellow);
  border:0; border-radius:999px; cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
}
.add-btn:active{ transform:scale(0.97); }
.add-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

.tally{
  flex-shrink:0; text-align:right;
}
.tally .big{
  font-size:clamp(20px,1.9vw,40px); font-weight:800; line-height:1;
}
.tally .small{
  margin-top:4px;
  font-size:clamp(10px,0.6vw,13px); color:rgba(255,255,255,0.85);
  letter-spacing:0.08em; text-transform:uppercase;
}

/* new: connection indicator (sits where the prototype's "Updated" time was) */
.status{
  flex-shrink:0; display:inline-flex; align-items:center; gap:6px;
  font-size:clamp(10px,0.6vw,13px); color:rgba(255,255,255,0.85);
  letter-spacing:0.06em; text-transform:uppercase;
}
.status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--yellow);
}
.status[data-state="live"]::before{ background:#7CE08F; }
.status[data-state="demo"]::before{ background:#fff; }

/* ---------------- the closing summary ---------------- */
body.summary-mode .viewbar, body.summary-mode .menu-btn{ display:none; }
body.summary-mode header{ padding-bottom:clamp(10px,1.3vh,14px); }

.board[data-view="summary"]{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;
  gap:clamp(8px,0.8vw,14px);
}
.sum-synth, .sum-top, .sum-tile{
  background:var(--paper);
  border:1px solid var(--rule); border-radius:10px;
  box-shadow:0 2px 8px rgba(0,55,103,0.06);
  min-height:0; overflow:hidden;
}
.sum-synth{
  display:flex; flex-direction:column;
  border-top:4px solid var(--pink);
  padding:clamp(16px,1.8vw,40px) clamp(18px,2vw,44px);
}
.sum-top{
  display:flex; flex-direction:column;
  border-top:4px solid var(--navy);
  padding:clamp(14px,1.2vw,26px);
}
.sum-kicker{
  font-size:clamp(11px,0.7vw,15px); font-weight:800; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--pink);
}
.sum-top .sum-kicker{ color:var(--navy); }
.sum-text{
  flex:1; min-height:0; overflow:hidden;   /* js/wall.js shrinks the type until it fits */
  font-size:clamp(18px,1.55vw,36px); line-height:1.4; color:var(--navy);
}
.sum-text p{ margin-top:0.6em; max-width:62ch; }
.sum-text .sum-placeholder{ color:var(--muted); font-style:italic; }
.sum-total{
  margin-top:clamp(10px,1vw,20px); padding-top:clamp(8px,0.8vw,14px);
  border-top:1px solid var(--rule);
  font-size:clamp(13px,0.85vw,19px); color:var(--muted);
}
.sum-total strong{ color:var(--navy); font-size:1.4em; }
.sum-top-list{
  flex:1; min-height:0;
  display:flex; flex-direction:column; gap:clamp(8px,0.7vw,12px);
  margin-top:clamp(10px,0.8vw,16px); padding:7px 0 0 7px;   /* room for the rank badges */
}
/* top five: compact, so all five fit beside the synthesis */
.board[data-view="summary"] .sum-top .note{ padding:7px 11px; }
.board[data-view="summary"] .note .idea{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.board[data-view="summary"] .sum-top .note .from{ display:none; }
.board[data-view="summary"] .sum-top .note-meta{ margin-top:4px; }
.board[data-view="summary"] .note.ranked .rank{ display:flex; }
.sum-tiles{
  grid-column:1 / -1;
  display:grid; grid-template-columns:repeat(6, minmax(0,1fr));
  gap:clamp(8px,0.8vw,14px);
}
.sum-tile{
  border-top:4px solid var(--accent, var(--muted));
  padding:clamp(10px,0.8vw,16px) clamp(12px,0.9vw,18px);
}
.sum-tile[data-id]{ cursor:pointer; }
.sum-tile h3{
  display:flex; align-items:center; gap:7px;
  font-size:clamp(12px,0.85vw,19px); font-weight:700; color:var(--navy);
}
.sum-tile h3 .swatch{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex-shrink:0; }
.sum-tile small{
  display:block; margin-top:3px;
  font-size:clamp(10px,0.6vw,13px); letter-spacing:0.05em; text-transform:uppercase; color:var(--muted);
}
.sum-tile p{
  margin-top:clamp(6px,0.5vw,10px);
  font-size:clamp(13px,0.85vw,19px); line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden;
}
.sum-tile .dots{ margin-top:8px; font-size:clamp(11px,0.7vw,15px); }

.preview-bar{
  flex-shrink:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px clamp(16px,3vw,48px);
  background:var(--pink); color:#fff;
  font-size:clamp(13px,0.75vw,16px);
}
.preview-bar > span{ flex:1; min-width:240px; }

/* ---------------- facilitator mode ---------------- */
.facil-strip{
  flex-shrink:0; display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:8px clamp(16px,3vw,48px);
  background:var(--yellow); color:var(--navy);
  font-size:clamp(13px,0.75vw,16px); line-height:1.35;
}
.facil-strip > span{ flex:1; min-width:240px; }
.facil-btn, .facil-chip{
  font:inherit; font-size:14px; font-weight:700;
  min-height:40px; padding:6px 14px; cursor:pointer;
  color:var(--navy); background:var(--paper);
  border:2px solid var(--navy); border-radius:999px;
}
.facil-btn:disabled{ opacity:0.6; cursor:default; }
.facil-chip{ border-color:var(--rule); border-left:8px solid var(--accent); border-radius:8px; }
.facil-chip[aria-pressed="true"]{ border-color:var(--navy); border-left-color:var(--accent); background:#E6EDF4; }
.facil-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.facil-tools{ margin-top:24px; padding-top:6px; border-top:2px dashed var(--rule); }
.facil-rule{ margin-top:12px; padding:10px 12px; border-radius:8px; background:#FFF4D6; color:#5A3D00; font-size:15px; line-height:1.45; }
.facil-switch{ display:flex; align-items:center; gap:10px; margin-top:6px; font-size:16px; }
.facil-switch input{ width:22px; height:22px; }
.facil-panel .facil-btn{ margin-top:8px; }

.gear-btn{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  color:rgba(255,255,255,0.85); background:transparent;
  border:1px solid rgba(255,255,255,0.4);
}
.gear-btn:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* dragging: the note under the finger, where it came from, and where it will land */
body.facil .note{ touch-action:none; user-select:none; -webkit-user-select:none; }
.drag-ghost{
  position:fixed; left:0; top:0; z-index:60; pointer-events:none;
  margin:0 !important; opacity:0.92;
  box-shadow:0 12px 32px rgba(0,25,50,0.3);
}
.note.lifted{ opacity:0.35; }
.drag-hint{
  position:fixed; left:0; top:0; z-index:61; pointer-events:none;
  max-width:280px; padding:6px 12px; border-radius:999px;
  font-size:14px; font-weight:700; line-height:1.3;
  color:#fff; background:#5E6470;
  box-shadow:0 4px 14px rgba(0,0,0,0.25);
}
.drag-hint.ready{ background:var(--navy); }
.note.drop-target{ box-shadow:0 0 0 3px var(--navy), 0 0 0 6px var(--yellow); }
.column.drop-target{ outline:3px dashed var(--navy); outline-offset:-4px; }

/* ---------------- idea details and Find my idea (pop-ups) ---------------- */
.sheet-close{
  position:absolute; top:12px; right:12px;
  width:44px; height:44px; border-radius:50%;
  font-size:28px; line-height:1; color:var(--ink);
  background:var(--panel); border:0; cursor:pointer;
}
.detail{ font-size:17px; }
.detail-area{
  display:flex; align-items:center; gap:8px; padding-right:52px;
  font-size:14px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted);
}
.detail-area .swatch{ width:12px; height:12px; border-radius:50%; background:var(--accent); }
.detail-text{
  margin-top:12px; padding-left:14px;
  border-left:6px solid var(--accent);
  font-size:clamp(22px,2vw,32px); font-weight:600; line-height:1.3; color:var(--navy);
}
.detail-by{ margin-top:10px; color:var(--muted); text-transform:uppercase; letter-spacing:0.04em; font-size:14px; }
.detail-support{ display:flex; align-items:center; gap:10px; margin-top:18px; font-size:16px; }
.detail-support .dots{ font-size:22px; }
.detail-h{ margin-top:24px; font-size:16px; color:var(--navy); }
.members{ list-style:none; margin-top:8px; display:grid; gap:8px; }
.members li{ background:var(--panel); border-radius:8px; padding:10px 12px; line-height:1.4; }
.members small{ display:block; margin-top:4px; color:#5E6470; font-size:13px; text-transform:uppercase; letter-spacing:0.04em; }

.find .af-title{ padding-right:52px; margin-top:0; margin-bottom:14px; font-size:24px; color:var(--navy); }
.find-results{ list-style:none; margin-top:14px; display:grid; gap:8px; }
.find-results button{
  width:100%; text-align:left; cursor:pointer;
  font:inherit; font-size:16px; line-height:1.4; color:var(--ink);
  background:var(--panel); border:0; border-left:6px solid var(--accent);
  border-radius:8px; padding:12px 14px; min-height:48px;
}
.find-results small{ display:block; margin-top:4px; color:#5E6470; font-size:13px; }
.find-hint{ color:#5E6470; font-size:15px; }

@media (max-width: 1100px){
  .board[data-view="columns"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}

/* ---------------- phones: one person, one hand, so the page scrolls ---------------- */
@media (max-width: 760px){
  /* the page itself scrolls (not body), so the footer can stick to the bottom */
  html{ height:auto; overflow:auto; }
  body, body.wall{ height:auto; min-height:100vh; overflow:visible; }
  header{ display:block; text-align:left; padding:12px 16px; }
  .logo-left{ width:110px; margin-bottom:10px; }
  .logo-right, .subtitle{ display:none; }
  .header-left{ flex-direction:row; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .logo-left{ margin-bottom:0; }
  h1{ font-size:21px; }
  .viewbar{ width:min(280px, calc(100vw - 32px)); }
  .vbtn .k{ display:none; }

  .board{ padding:12px 16px; }
  .board[data-view="columns"]{ display:flex; flex-direction:column; gap:14px; }
  .column, .col-body{ overflow:visible; }
  .board[data-view="recent"], .board[data-view="top"], .board[data-view="area"]{ overflow:visible; }
  .board[data-view="latest"]{ min-height:60vh; }
  .board[data-view="summary"]{ display:flex; flex-direction:column; gap:14px; }
  .sum-synth, .sum-top, .sum-tile{ overflow:visible; }
  .sum-tiles{ grid-template-columns:1fr 1fr; gap:10px; }
  .sum-text{ font-size:19px; }
  .note.latest-note{ padding:22px; }

  footer{
    position:sticky; bottom:0; z-index:10;
    gap:10px; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .qr, .highlights, .status, .tally{ display:none; }
  .find-btn, .add-btn{ flex:1; min-height:50px; font-size:16px; }
}

@media (prefers-reduced-motion: reduce){
  .note.arrive{ animation:none; }
  .highlights .h-text, .viewbar, .toast{ transition:none; }
}