/* Ideas and roadmap board (/roadmap.html). Loaded after landing.css and built from its tokens:
   white canvas, near-black type, Soft Charcoal copy, the icon blue for the one primary action,
   14 px controls and 20 px cards with the layered card shadow. Light only, like the landing page. */
.board-page{padding-bottom:96px;background:radial-gradient(60% 420px at 50% 0%,#e8f5ff 0%,transparent 80%),var(--paper)}
.board-intro{padding:56px 0 32px;text-align:center}
.board-intro h1{margin:12px 0 0;font-size:clamp(2.6rem,6vw,4rem);line-height:1.1;letter-spacing:-.02em}
.board-intro p:not(.eyebrow){max-width:560px;margin:16px auto 0;color:var(--charcoal);font-size:18px;line-height:1.67}
.board[hidden],.board-views[hidden],.board-panel[hidden],.board-error[hidden],.admin[hidden],.ideas-empty[hidden]{display:none}
/* Without JavaScript only the <noscript> panel shows. */
html:not(.has-js) .board-views{display:none}

.board-button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:6px 14px;border:1px solid rgba(22,22,24,.16);border-radius:10px;background:#fff;color:var(--graphite);font-size:14px;font-weight:550;cursor:pointer;transition:background .15s ease}
.board-button:hover{background:#f6f6f7}
.board-button:disabled{opacity:.45;cursor:default}
.board-button.is-primary{border-color:var(--blue);background:var(--blue);color:#fff}
.board-button.is-primary:hover{background:#0752d6}
.board-button.is-danger{border-color:#c0352b;background:#c0352b;color:#fff}
.board-button.is-danger-outline{border-color:#e7b7b3;color:#b42318}
.board-button:focus-visible,.board-tab:focus-visible,.segmented button:focus-visible,.vote:focus-visible,.idea-more:focus-visible,.board-panel:focus-visible{outline:3px solid var(--blue-bright);outline-offset:2px}

.board-error{max-width:640px;margin:0 auto 32px;padding:24px 28px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card);text-align:center}
.board-error p{margin:0 0 14px;color:var(--graphite);font-size:17px}
.board-error a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* Tabs: a compact segmented pill centred over the board */
.board-tabs{display:flex;width:max-content;max-width:100%;margin:0 auto 32px;padding:4px;gap:4px;border-radius:var(--r-control);background:var(--fill-soft)}
.board-tab{min-height:40px;padding:8px 22px;border:0;border-radius:10px;background:none;color:var(--charcoal);font-size:15px;font-weight:550;cursor:pointer}
.board-tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-chip)}
.board-tab:hover:not([aria-selected="true"]){color:var(--graphite)}
.board-panel{outline:none}

/* Ideas tab: suggest card on the left, the list on the right */
.ideas-panel{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);align-items:start;gap:32px}
.suggest-card{position:sticky;top:92px;padding:24px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card)}
.suggest-card h2{margin:0;font-size:20px;letter-spacing:-.01em}
.suggest-note{margin:6px 0 18px;color:var(--charcoal);font-size:14px}
.suggest-form{display:flex;flex-direction:column}
.suggest-form label{margin:0 0 6px;color:var(--graphite);font-size:14px;font-weight:550}
.optional{color:var(--charcoal);font-weight:450}
.suggest-form input,.suggest-form textarea,.admin input,.admin textarea,.admin select,.ideas-search input{width:100%;min-width:0;border:1px solid rgba(22,22,24,.14);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:15px}
.suggest-form input,.suggest-form textarea,.admin input,.admin textarea{padding:10px 12px}
.suggest-form textarea,.admin textarea{resize:vertical;min-height:110px;line-height:1.5}
.suggest-form input:focus,.suggest-form textarea:focus,.admin input:focus,.admin textarea:focus,.admin select:focus,.ideas-search input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px #168fff33}
.suggest-form input[aria-invalid="true"]{border-color:#c0352b}
.field-hint{margin:6px 0 16px;color:var(--charcoal);font-size:13px}
.suggest-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.suggest-submit{width:100%;margin-top:4px;cursor:pointer}
.suggest-submit:disabled{opacity:.6;cursor:default;transform:none}
.form-message{min-height:1.5em;margin:12px 0 0;color:var(--charcoal);font-size:14px;line-height:1.5}
.form-message.is-success{color:#18794e;font-weight:550}
.form-message.is-error{color:#b42318}

.ideas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.segmented{display:inline-flex;flex:none;padding:3px;gap:2px;border-radius:12px;background:var(--fill-soft)}
.segmented button{min-height:34px;padding:5px 16px;border:0;border-radius:9px;background:none;color:var(--charcoal);font-size:14px;font-weight:550;cursor:pointer}
.segmented button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-chip)}
.ideas-search{position:relative;display:block;flex:0 1 280px;min-width:0}
.ideas-search svg{position:absolute;left:12px;top:50%;width:17px;height:17px;margin-top:-8.5px;fill:none;stroke:var(--charcoal);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.ideas-search input{min-height:40px;padding:8px 12px 8px 36px}

.idea-list,.column-list,.admin-list{margin:0;padding:0;list-style:none}
.idea-list{display:grid;gap:12px}
.idea-card{display:flex;align-items:flex-start;gap:16px;padding:18px 20px;border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.idea-content{flex:1;min-width:0}
.idea-title{margin:0;color:var(--ink);font-size:17px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.idea-body{margin:6px 0 0;color:var(--charcoal);font-size:15px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.idea-body.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.idea-more{margin:4px 0 0;padding:2px 0;border:0;background:none;color:var(--blue);font-size:14px;font-weight:550;cursor:pointer}
.idea-more[hidden]{display:none}
.idea-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 0;color:var(--charcoal);font-size:13px}

/* Vote button: arrow over count, blue when this visitor has voted */
.vote{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:56px;min-height:60px;padding:6px 0;border:1px solid rgba(22,22,24,.12);border-radius:var(--r-control);background:#fff;color:var(--graphite);cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.vote:hover{border-color:rgba(8,92,236,.5)}
.vote-arrow{font-size:12px;line-height:1}
.vote-count{font-size:16px;font-weight:650;line-height:1.2}
.vote[aria-pressed="true"]{border-color:var(--blue);background:#eef4ff;color:var(--blue)}
.vote.is-busy{cursor:progress}
.vote-compact{flex-direction:row;gap:6px;width:auto;min-width:60px;min-height:36px;padding:4px 10px;border-radius:10px}
.vote-compact .vote-count{font-size:14px}

.status-badge{display:inline-flex;align-items:center;min-height:22px;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em}
.status-open{background:#f0f0f2;color:#4a4a4f}
.status-planned{background:#e3ecff;color:#0a4fc4}
.status-in-progress{background:#fff1d6;color:#8a4b00}
.status-done{background:#ddf4e7;color:#16653f}

.ideas-empty{padding:40px 24px;border:1px dashed rgba(22,22,24,.16);border-radius:var(--r-card);text-align:center}
.ideas-empty p{margin:0;color:var(--charcoal)}
.ideas-empty .ideas-empty-title{margin-bottom:6px;color:var(--graphite);font-size:17px;font-weight:600}

/* Loading skeleton */
.is-skeleton{pointer-events:none}
.sk{display:block;border-radius:8px;background:linear-gradient(90deg,#f0f1f4 0%,#f7f8fa 50%,#f0f1f4 100%) 0 0/200% 100%;animation:sk-shimmer 1.4s ease-in-out infinite}
.sk-vote{flex:none;width:56px;height:60px;border-radius:var(--r-control)}
.sk-lines{display:grid;flex:1;gap:10px;padding-top:4px}
.sk-title{width:55%;height:18px}
.sk-text{height:12px}
.sk-text.short{width:70%}
@keyframes sk-shimmer{from{background-position:100% 0}to{background-position:-100% 0}}

/* Roadmap tab: three status columns */
.roadmap-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
/* Each column carries its state colour (same palette as the status badges): tinted panel, ring, top bar, header, count. */
.roadmap-column{--tone:#2f6fe0;--tone-ink:#0a4fc4;--tone-bg:#f1f5ff;--tone-ring:rgba(47,111,224,.18);position:relative;overflow:hidden;padding:16px;border-radius:var(--r-card);background:var(--tone-bg);box-shadow:0 0 0 1px var(--tone-ring)}
.roadmap-column::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--tone)}
.roadmap-column[data-status="in_progress"]{--tone:#d98a00;--tone-ink:#8a4b00;--tone-bg:#fff8eb;--tone-ring:rgba(217,138,0,.22)}
.roadmap-column[data-status="done"]{--tone:#1f9a5c;--tone-ink:#16653f;--tone-bg:#effaf4;--tone-ring:rgba(31,154,92,.2)}
.roadmap-column h2{display:flex;align-items:center;gap:8px;margin:6px 4px 14px;color:var(--tone-ink);font-size:16px;letter-spacing:0}
.status-dot-sm{width:9px;height:9px;border-radius:50%;background:var(--tone)}
.roadmap-column .column-count{background:#fff;color:var(--tone-ink);box-shadow:0 0 0 1px var(--tone-ring)}
.roadmap-column .column-list > li{box-shadow:0 0 0 1px var(--tone-ring),0 1px 2px rgba(15,15,18,.04)}
.column-count{margin-left:auto;padding:1px 8px;border-radius:999px;background:#fff;color:var(--charcoal);font-size:12px;font-weight:600;box-shadow:0 0 0 1px var(--hairline)}
.column-list{display:grid;gap:10px}
.column-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:#fff;box-shadow:var(--shadow-card)}
.column-title{min-width:0;color:var(--graphite);font-size:15px;font-weight:550;line-height:1.4;overflow-wrap:anywhere}
.column-empty{padding:18px 8px;color:var(--charcoal);font-size:14px;text-align:center}

.board-toast{position:fixed;z-index:50;left:50%;bottom:24px;max-width:calc(100vw - 32px);margin:0;padding:12px 18px;border-radius:12px;background:var(--studio);color:#fff;font-size:14px;transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.board-toast.is-visible{opacity:1;transform:translate(-50%,0)}

/* Admin (#admin) */
.admin{max-width:960px;margin:0 auto}
.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.admin-head h2{margin:0;font-size:24px}
.admin-login{max-width:440px;padding:24px;border-radius:var(--r-card);background:#fff;box-shadow:var(--shadow-card)}
.admin-login[hidden]{display:none}
.admin-login label{display:block;margin-bottom:6px;font-size:14px;font-weight:550}
.admin-login-row{display:flex;gap:10px}
.admin-login .button{min-height:44px;padding:8px 18px;cursor:pointer}
.admin-message{min-height:1.5em;margin:16px 0;color:var(--charcoal);font-size:14px}
.admin-list{display:grid;gap:12px}
.admin-row{padding:18px 20px;border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.admin-row-head{display:flex;gap:16px}
.admin-votes{display:flex;flex:none;flex-direction:column;align-items:center;justify-content:center;width:64px;min-height:56px;border-radius:var(--r-control);background:#eef4ff;color:var(--charcoal);font-size:12px}
.admin-votes strong{color:var(--ink);font-size:20px;line-height:1.1}
.admin-text{flex:1;min-width:0}
.admin-title{margin:0;font-size:17px;overflow-wrap:anywhere}
.admin-body{margin:6px 0 0;color:var(--charcoal);font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.admin-flags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 0 0;font-size:12px}
.flag{padding:1px 9px;border-radius:999px;font-weight:600}
.flag-pending{background:#fff1d6;color:#8a4b00}
.flag-live{background:#ddf4e7;color:#16653f}
.flag-hidden{background:#f0f0f2;color:#4a4a4f}
.flag-merged{background:#efe9ff;color:#5b34b8}
.admin-date{color:var(--charcoal)}
.admin-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--hairline)}
.admin-field{display:block;min-width:0}
.admin select{min-height:36px;max-width:240px;padding:5px 8px}
.admin-confirm{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:12px;padding:12px 14px;border-radius:12px;background:#fdecea;color:#7a1d16;font-size:14px;font-weight:550}
.admin-confirm[hidden],.admin-editor[hidden]{display:none}
.admin-editor{display:grid;gap:10px;margin-top:12px}
.admin-editor label{display:grid;gap:6px;font-size:13px;font-weight:550}
.admin-editor .board-button{justify-self:start}

@media(max-width:900px){
  .ideas-panel{grid-template-columns:1fr;gap:24px}
  .suggest-card{position:static}
  .roadmap-columns{grid-template-columns:1fr}
}
@media(max-width:700px){
  .board-intro{padding:36px 0 24px}
  .board-intro p:not(.eyebrow){font-size:17px}
  .board-tabs{margin-bottom:24px}
  .ideas-toolbar{flex-wrap:wrap}
  .ideas-search{flex:1 1 100%;order:-1}
  .idea-card{gap:12px;padding:16px}
  .vote{width:50px;min-height:56px}
  .admin-row-head{gap:12px}
  .admin-login-row{flex-direction:column}
  .admin select{max-width:100%}
}
@media(prefers-reduced-motion:reduce){
  .sk{animation:none}
  .board-toast,.vote,.board-button{transition:none}
}
