@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/static/nunito-cyrillic-ext.d21f43ead3.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/static/nunito-cyrillic.c15c26d255.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/static/nunito-vietnamese.eef899aa52.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/static/nunito-latin-ext.4fcdc09b70.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url(/static/nunito-latin.76388dbfe3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/static/nunito-cyrillic-ext.d21f43ead3.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/static/nunito-cyrillic.c15c26d255.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/static/nunito-vietnamese.eef899aa52.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/static/nunito-latin-ext.4fcdc09b70.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url(/static/nunito-latin.76388dbfe3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/static/nunito-cyrillic-ext.d21f43ead3.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/static/nunito-cyrillic.c15c26d255.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/static/nunito-vietnamese.eef899aa52.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/static/nunito-latin-ext.4fcdc09b70.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:800;font-display:swap;src:url(/static/nunito-latin.76388dbfe3.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --night:#1f1512; --hearth:#2a1d17; --hearth-2:#33241c; --line:#463228;
  --ember:#f08c4a; --ember-deep:#d06a2c; --glow:#ffd9a8;
  --cream:#f2e5d2; --ash:#b39a86; --ash-2:#9a8470; --ash-3:#8d8479; --moss:#9db98f; --brick:#d9776b;
  --line-warm:#5c4128; --line-quiet:#6f6558; --snippet:#d8c6b0; --placeholder:#a08a75;
  --moss-surface:#2c3a28; --moss-text:#d7ecd0; --moss-line:#4f6247; --brick-surface:#31201d; --brick-surface-2:#3a2422;
  --brick-line:#5a3630; --brick-text:#eec7bd; --surface-cool:#2a2620; --backdrop:rgba(10,6,4,.66);
  --shadow:0 8px 24px rgba(0,0,0,.45);
  --control-h:44px; /* one height for every single-line control: inputs, buttons, menus */
  color-scheme:dark; accent-color:var(--ember);
}
*{box-sizing:border-box}
[hidden]{display:none}
html{scrollbar-gutter:stable;scrollbar-color:var(--line-warm) var(--night);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--night);color:var(--cream);
  font-family:Nunito,'Segoe UI',system-ui,sans-serif;font-size:16px;line-height:1.55}
::selection{background:var(--ember);color:var(--night)}
input,textarea{caret-color:var(--ember)}
a{color:var(--glow);text-underline-offset:.15em} a:hover{color:var(--ember)}
h1,h2,h3{font-family:inherit;font-weight:700;line-height:1.25}
code{background:var(--hearth-2);padding:1px 4px;border-radius:6px}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-64px;z-index:100;background:var(--cream);color:var(--night);
  padding:8px 12px;border-radius:6px;font-weight:700;text-decoration:none}
.skip:focus{top:8px;color:var(--night)}
.wrap{max-width:860px;margin:0 auto;padding:0 16px 80px}
/* User text never pushes the page sideways: long links and words break. */
.card-main,.idea-body,.comment,.reason,.history,.snippet,.card-title,h1.idea-title,.topics li,.dupe-inner,.merge-results{overflow-wrap:anywhere;min-width:0}
table.admin td{overflow-wrap:break-word}
.wrap.adminpage{max-width:1100px}
table.admin td.nw,table.admin th{white-space:nowrap}

/* ---- Header ---- */
header.site{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:24px 0 0}
.brand{display:inline-flex;align-items:center;gap:12px;color:var(--cream);text-decoration:none;margin-right:auto;min-height:44px}
.brand:hover{color:var(--cream)}
.site-name{font-size:23px;font-weight:800;line-height:1.15;margin:0}
.brandmark{border-radius:10px;display:block}
.account{display:flex;flex-wrap:wrap;align-items:center;font-size:14px;color:var(--ash)}
.account b{color:var(--cream)}
.account a,.account .linkish{color:var(--ash);font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.account a:hover,.account .linkish:hover{color:var(--cream)}
.dot{margin:0 8px;opacity:.6}
.nextline{margin:8px 0 0;font-size:14px;color:var(--ash)}
.nextline a{color:var(--ash);text-decoration:none}
.nextline a:hover{color:var(--cream)}
.nextline .ns-when{color:var(--cream);font-weight:700}
.hostnote{margin:12px 0 0;font-size:14px;color:var(--ash)}

/* ---- Site navigation: board switcher, then the tab row ---- */
nav.modes{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:16px 0 0;font-size:14px}
nav.modes .lbl{color:var(--ash-2);margin-right:4px}
nav.modes a{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:6px;color:var(--ash);text-decoration:none}
nav.modes a:hover{color:var(--cream);background:var(--hearth)}
nav.modes a.on{color:var(--cream);background:var(--hearth-2);font-weight:700}
nav.modes .soon{color:var(--ash-2);font-size:12px;margin-left:4px}
nav.tabs{display:flex;align-items:stretch;gap:20px;margin:12px 0 0;box-shadow:inset 0 -1px 0 var(--line);
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav.tabs::-webkit-scrollbar{display:none}
nav.tabs a{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;min-height:44px;padding:8px 0;
  border-bottom:2px solid transparent;text-decoration:none;font-size:15px;line-height:1.2;color:var(--ash)}
nav.tabs a:hover{color:var(--cream)}
nav.tabs a.primary{color:var(--cream)}
nav.tabs a.quiet{color:var(--ash-3);font-size:14px}
nav.tabs a.on{color:var(--cream);font-weight:700;border-bottom-color:var(--cream)}
nav.tabs a.quiet.on{border-bottom-color:var(--line-quiet)}
nav.tabs .ic{margin-right:6px}
nav.tabs .tabdiv{flex:0 0 1px;background:var(--line);margin:12px 0}
nav.tabs a.dropping{color:var(--night);background:var(--cream);border-radius:6px;padding:8px 8px}

/* ---- Board header: title, search, view options, new idea ---- */
.boardbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:24px 0 12px}
.pagetitle{font-size:20px;margin:0}
.boardbar .pagetitle{flex:1 1 auto;min-width:0}
.boardbar .searchbar{flex:0 1 260px;margin:0}
.boardbar .brk{display:none}
.boardbar>.btn{order:5}
.pagenote{margin:0 0 12px;color:var(--ash);font-size:14px}
.searchbar{display:flex;gap:8px;margin:16px 0 8px}
.searchfield{position:relative;flex:1;min-width:0}
.searchfield .searchicon{position:absolute;left:13px;top:50%;transform:translateY(-50%);font-size:14px;color:var(--ash);pointer-events:none}
.searchfield input[type=search]{padding-left:40px}
.viewmenu{position:relative}
.viewmenu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:var(--control-h);padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--hearth-2);color:var(--cream);font-size:14px;white-space:nowrap}
.viewmenu>summary::-webkit-details-marker{display:none}
.viewmenu>summary:hover,.viewmenu[open]>summary{border-color:var(--line-quiet)}
.viewmenu>summary .ic{color:var(--ash)}
.viewpanel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:320px;max-width:calc(100vw - 32px);
  background:var(--hearth);border:1px solid var(--line);border-radius:10px;padding:4px 16px;box-shadow:var(--shadow)}
.vgroup{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;padding:8px 0}
.vgroup+.vgroup{border-top:1px solid var(--line)}
.vlbl{flex:0 0 100%;color:var(--ash-2);font-size:13px}
.vgroup a{display:inline-flex;align-items:center;min-height:36px;color:var(--ash);text-decoration:none;font-size:14px;border-bottom:2px solid transparent}
.vgroup a:hover{color:var(--cream)}
.vgroup a.on{color:var(--cream);border-bottom-color:var(--cream)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--control-h);background:var(--ember);color:var(--night);
  border:1px solid var(--ember);border-radius:10px;padding:8px 16px;font-weight:700;font-size:15px;line-height:1.2;cursor:pointer;
  text-decoration:none;font-family:inherit}
.btn:hover{background:var(--glow);border-color:var(--glow);color:var(--night)}
.btn.quiet{background:var(--hearth-2);color:var(--cream);border-color:var(--line)}
.btn.quiet:hover{border-color:var(--line-quiet);color:var(--cream);background:var(--hearth-2)}
.btn.small{min-height:36px;padding:4px 12px;font-size:14px;border-radius:6px}
.btn.danger{background:transparent;border-color:var(--brick);color:var(--brick)}
.btn.danger:hover{background:var(--brick);color:var(--night)}
.linkish{background:none;border:0;padding:0;color:var(--glow);cursor:pointer;font:inherit;font-size:14px;text-decoration:underline}
.linkish:hover{color:var(--ember)}
.linkish.quietx{color:var(--ash-2);text-decoration:none;font-size:13px}
.linkish.quietx:hover{color:var(--brick);text-decoration:underline}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:6px;
  background:transparent;border:1px solid var(--line);color:var(--ash);cursor:pointer;font:inherit}
.iconbtn:hover{color:var(--cream);border-color:var(--line-quiet)}
.iconbtn.del:hover{color:var(--brick);border-color:var(--brick)}
.iconbtn .ic{width:16px;height:16px}
/* In-flight controls: dimmed, inert, same size. One treatment everywhere. */
.busy{opacity:.55;pointer-events:none}
@media (prefers-reduced-motion:no-preference){.busy{transition:opacity .12s ease}}

/* ---- Idea list ---- */
.card{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.card-main{flex:1 1 auto}
.card-title{margin:0 0 4px;font-size:19px}
.card-title a{color:var(--cream);text-decoration:none}
.clickcard{cursor:pointer}
.clickcard:hover .card-title a,.card-title a:hover{color:var(--glow)}
.clickcard a,.clickcard button,.clickcard input{cursor:auto}
.clickcard a[href],.clickcard button{cursor:pointer}
/* Featuring is the one deliberate box in the list; its content lines up with the rows. */
.card.pinned{background:var(--hearth);border:1px solid var(--line);border-radius:10px;padding:16px 12px;margin:12px -13px}
.card.pinned+.card{border-top:0}
.votebox{flex:0 0 auto;text-align:center}
button.vote{width:46px;min-height:52px;background:transparent;border:1px solid transparent;border-radius:6px;color:var(--ash);
  padding:6px 0 4px;cursor:pointer;font-family:inherit;font-size:13px;line-height:1.2}
button.vote .ic{display:block;width:20px;height:20px;margin:0 auto;color:var(--ash)}
button.vote .n{display:block;font-size:15px;font-weight:800;color:var(--cream);margin-top:1px}
button.vote:hover{border-color:var(--line);background:var(--hearth-2)}
button.vote:hover .ic{color:var(--cream)}
button.vote.voted{border-color:var(--ember-deep)}
button.vote.voted .ic,button.vote.voted .n{color:var(--ember)}
.ic{width:1em;height:1em;fill:currentColor;vertical-align:-.125em;display:inline-block;flex:0 0 auto}
.meta{color:var(--ash);font-size:14px}
.meta a{color:inherit;text-decoration:none}
.meta a:hover{color:var(--cream);text-decoration:underline}
.viewmenu .vshort{display:none}
@media (max-width:640px){.viewmenu .vfull{display:none}.viewmenu .vshort{display:inline}}
.snippet{color:var(--snippet);font-size:15px;margin:8px 0 0}
/* Chips line up by their middle, never their baseline: a chip that starts
   with a logo (the NAT badge) would otherwise sit higher than a text chip. */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.4;border-radius:6px;padding:2px 8px;
  border:1px solid var(--line);color:var(--ash);margin-right:8px;vertical-align:middle}
.chip .ic{width:12px;height:12px}
.chip.ep{color:var(--moss);border-color:var(--moss-line);text-decoration:none}
a.chip.ep:hover{color:var(--moss-text);border-color:var(--moss)}
.chip.reject{color:var(--brick);border-color:var(--brick-line)}
.chip.host{color:var(--cream);background:var(--hearth-2);font-weight:700}
.chiplogo{width:14px;height:14px;border-radius:3px;display:block}
.chip.tagchip{text-decoration:none}
.chip.tagchip:hover{color:var(--cream);border-color:var(--line-quiet)}
.cardtags{margin-top:8px;display:flex;flex-wrap:wrap;gap:4px}
.reason{background:var(--brick-surface);border:1px solid var(--brick-line);border-radius:10px;padding:12px 16px;margin:12px 0;color:var(--brick-text);font-size:15px}
.reason b{color:var(--brick)}
.empty{color:var(--ash);padding:32px 0;margin:0;border-top:1px solid var(--line)}
.realname{color:var(--ash-2)}

/* ---- Forms ---- */
form.stack label{display:block;font-size:14px;color:var(--ash);margin:16px 0 4px}
form.stack label.opt{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--cream);cursor:pointer;min-height:44px}
input[type=text],input[type=url],input[type=password],input[type=search],input[type=number],input[type=date],
input[type=datetime-local],textarea,select{width:100%;background:var(--hearth-2);border:1px solid var(--line);border-radius:10px;
  color:var(--cream);padding:12px;font-family:inherit;font-size:15px;line-height:1.3}
input:not([type=checkbox]):not([type=radio]),select{height:var(--control-h);padding-top:0;padding-bottom:0}
input[type=checkbox],input[type=radio]{width:20px;height:20px;margin:0;flex:0 0 auto;cursor:pointer}
input[type=search]{-webkit-appearance:none;appearance:none}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:15px;width:15px;cursor:pointer;
  background:var(--ash);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 6L6 18M6 6l12 12' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(.3);cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
textarea{min-height:130px;resize:vertical}
textarea.short{min-height:90px}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--ember);outline-offset:1px}
.hint{color:var(--ash);font-size:13px;margin:4px 0 0}
label .hint,.lbl-hint{display:inline;color:var(--ash-2);font-size:13px}
.form-err{background:var(--brick-surface-2);border:1px solid var(--brick-line);color:var(--brick-text);border-radius:10px;padding:8px 12px;margin:12px 0 0;font-size:14px}
fieldset.postas{border:0;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:0 20px}
.palbl{font-size:14px;color:var(--ash);margin-right:4px}
.tagpick{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
form.stack label.tagopt,.tagopt{display:inline-flex;align-items:center;gap:8px;min-height:40px;margin:0;font-size:14px;color:var(--cream);
  border:1px solid var(--line);border-radius:6px;padding:4px 12px;background:var(--hearth-2);cursor:pointer}
.tagopt.static{cursor:default;padding-right:4px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.row-actions select,.inlineform select{width:auto;max-width:100%}
.inlineform{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0}
.flash{background:var(--moss-surface);border:1px solid var(--moss-line);color:var(--moss-text);border-radius:10px;padding:12px 16px;margin:16px 0}
.flash.err{background:var(--brick-surface-2);border-color:var(--brick-line);color:var(--brick-text)}
.backupwarn{border:1px solid var(--brick-line);color:var(--brick-text);border-radius:10px;padding:8px 14px;margin:16px 0 0;font-size:15px}
.backupwarn a{color:inherit}

/* ---- Panels and sections ---- */
.panel{background:var(--hearth);border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin:16px 0}
.panel h2,.panel h3{margin-top:0}
.panel h2,.panel h3{font-size:17px}
.formcol{max-width:640px}
fieldset.tagfield{border:0;padding:0;margin:16px 0 0;min-width:0}
fieldset.tagfield legend{padding:0;margin:0 0 4px;font-size:14px;color:var(--ash)}
.plainlist{list-style:none;padding:0}
.plainlist li{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--cream)}
h2.section{font-size:18px}
.narrow{max-width:460px}
.idea-body{font-size:16px}
.idea-body>:first-child{margin-top:0}
.section{margin:32px 0 0}
.section>h2{font-size:17px;margin:0 0 8px}
.section>h2 .count{color:var(--ash);font-weight:400}

/* ---- Idea page ---- */
.backlink{margin:20px 0 0;font-size:14px}
.backlink a{color:var(--ash)}
.idea-head{display:flex;gap:16px;align-items:flex-start;margin-top:16px}
h1.idea-title{font-size:26px;margin:0 0 8px}
.idea-extra{margin:16px 0 0}
.history{list-style:none;padding:0;margin:0}
.history li{color:var(--ash);font-size:14px;margin:4px 0}
.comment{border-top:1px solid var(--line);padding:12px 0}
.comment .cmeta{margin:0 0 4px}
.comment .who{font-weight:700;color:var(--cream)}
.comment .cbody>:first-child{margin-top:0}
.comment .cbody>:last-child{margin-bottom:0}
.comment.hiddenc{opacity:.5}
.signin-callout{padding:16px 0}
.signin-callout .btn{margin-top:8px}
.hostctl{margin:16px 0 0}
.hostform{border-top:1px solid var(--line);padding-top:4px;margin-top:16px}
/* host tools: comment moderation row, earlier versions, log pages, quiet-tab box */
.modrow{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
details.revisions{margin-top:12px}
details.revisions summary{cursor:pointer;color:var(--ash);font-size:14px;min-height:36px;display:flex;align-items:center}
.revision{border-left:2px solid var(--line);padding:0 0 0 12px;margin:8px 0 12px}
.revision p{margin:4px 0}
.pager{display:flex;gap:8px;margin:16px 0}
.quietcheck{display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap;color:var(--ash);min-height:36px;cursor:pointer;margin:0 8px}

/* ---- Next session ---- */
.session .when{font-size:22px;font-weight:700;margin:8px 0 0}
.session .where{margin:4px 0 0}
/* The card: an ember-edged box, orange heading and numbers (owner call
   2026-09-26). Every row is the same: number, bold title, its extras. */
.session.panel{border-color:var(--ember)}
.session h2.pagetitle{color:var(--ember)}
.topics{list-style:none;padding:0;margin:8px 0 0}
.topics li{padding:8px 0;border-top:1px solid var(--line)}
.topics li:first-child{border-top:0}
.session .topics li{display:flex;gap:12px;align-items:baseline}
.session .topics .num{flex:0 0 auto;min-width:20px;color:var(--ember);font-weight:800;font-size:13px;font-variant-numeric:tabular-nums}
.session .topic-main{flex:1 1 auto;min-width:0}
.session .topics .ttl{font-weight:700;color:var(--cream)}
.topics a{color:var(--cream);text-decoration:none;font-weight:700}
.topics a:hover{color:var(--glow)}
.topics .chip{margin:0 0 0 8px}
.session h3{font-size:16px;margin:20px 0 0}
.lastup{margin:16px 0 0;color:var(--ash-2);font-size:13px}
.prose{margin:32px 0 0}
.prose>:first-child{margin-top:0}
/* YouTube: a still until clicked, then the real player. */
.embed{position:relative;padding-top:56.25%;border-radius:10px;overflow:hidden;border:1px solid var(--line);margin-top:12px;background:var(--hearth)}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---- Pop-ups ---- */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.modal-backdrop{position:fixed;inset:0;background:var(--backdrop)}
.modal-card{position:relative;z-index:1;width:100%;max-width:560px;margin:auto}
.modal-card>h2:first-of-type{margin-top:0;padding-right:40px}
.idea-modal .modal-card{max-width:680px}
.modal-x{position:absolute;top:4px;right:4px;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;color:var(--ash);cursor:pointer;padding:0}
.modal-x:hover{color:var(--cream)}
.modal-x .ic{width:20px;height:20px}
#idea-modal .backlink{display:none}
#idea-modal .idea-head{margin-top:4px;padding-right:32px}
#idea-modal h1.idea-title{font-size:22px}
@media (prefers-reduced-motion:no-preference){.modal-card{animation:modalpop .16s ease-out}}
@keyframes modalpop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.signin-ask{max-width:420px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:300;max-width:calc(100vw - 32px);
  background:var(--hearth-2);border:1px solid var(--line-quiet);color:var(--cream);border-radius:10px;padding:10px 16px;font-size:14px;box-shadow:var(--shadow)}
.toast[hidden]{display:none}

/* ---- Duplicate hint and merge search ---- */
.dupe-hint{margin-top:8px}
.dupe-inner{background:var(--surface-cool);border:1px solid var(--line);border-radius:6px;padding:8px 12px;font-size:14px;color:var(--cream)}
.dupe-inner ul{margin:4px 0 0;padding-left:16px}
.dupe-inner li{margin:4px 0}
.dupe-inner .votes{color:var(--ash);font-size:13px}
.merge-results{display:flex;flex-direction:column;gap:2px;margin-top:8px;background:var(--surface-cool);border:1px solid var(--line);border-radius:6px;padding:4px;max-height:240px;overflow-y:auto}
.merge-result{text-align:left;background:transparent;border:0;border-radius:6px;padding:8px;color:var(--cream);cursor:pointer;font:inherit;font-size:14px;min-height:40px}
.merge-result:hover{background:var(--hearth)}
.merge-result .mr-meta{color:var(--ash);font-size:12px}
.merge-chosen{margin:8px 0 0;color:var(--cream);font-size:13px}

/* ---- Host desk ---- */
.adminbar{background:var(--hearth-2);border-bottom:1px solid var(--line)}
.adminbar .bar{display:flex;align-items:center;gap:4px 16px;padding:4px 16px;max-width:1200px;margin:0 auto}
.adminbar .desk{color:var(--cream);font-weight:800;white-space:nowrap}
.adminbar form{flex:0 0 auto}
.adminbar .linkish{color:var(--ash);text-decoration:none;white-space:nowrap;min-height:44px;font-size:15px}
.adminbar .linkish:hover{color:var(--cream)}
.adminbar nav{display:flex;gap:4px 16px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none}
.adminbar nav::-webkit-scrollbar{display:none}
.adminbar nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;text-decoration:none;color:var(--ash);font-size:15px;border-bottom:2px solid transparent}
.adminbar nav a:hover{color:var(--cream)}
.adminbar nav a.on{color:var(--cream);border-bottom-color:var(--cream)}
.adminbar .badge{background:var(--cream);color:var(--night);border-radius:6px;padding:0 6px;font-size:13px;font-weight:800;line-height:1.5}
.adminpage h1.pagetitle{margin:24px 0 8px;font-size:22px}
table.admin{width:100%;border-collapse:collapse;font-size:15px}
table.admin td,table.admin th{padding:8px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.admin th{color:var(--ash);font-weight:700;font-size:13px}
table.admin td.num{white-space:nowrap}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tablewrap table.admin{margin-bottom:0}
/* Live topics: the host's during-the-call control. No orange (that's
   reserved); the active row/topic uses the same raised surface and border
   tokens as everything else, plus a plain neutral chip for "Now". */
.livebar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0 16px}
.livebar form{margin:0}
.livebig{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.btn.big{font-size:18px;padding:14px 26px;min-height:56px}
.session .topics li.live-active{background:var(--hearth-2);border-radius:8px;padding:6px 8px;margin:0 -8px}
.session .topics li .liveset,.session .topics li .chip{align-self:center;margin-left:auto}
table.admin tr.live-active{background:var(--hearth-2)}
.queue-item h2{font-size:18px;margin:0 0 4px}
.queue-actions{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px}
.queue-actions .reasonform{flex:1 1 280px}
.queue-actions .reasonform input{flex:1 1 160px;width:auto;min-width:0;padding:8px 12px}
.queue-actions .delx{margin-left:auto}
.edit-diff{margin:8px 0 0}
.edit-diff .meta{margin:8px 0 2px}
details.current{margin-top:8px}
details.current summary{cursor:pointer;color:var(--ash);font-size:14px;min-height:36px;display:flex;align-items:center}
.adminpicker{margin:0 0 16px}
.namefield{width:200px}
.copybox{width:100%;background:var(--night);border:1px dashed var(--line);border-radius:6px;color:var(--cream);
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;padding:8px 12px;resize:vertical;min-height:0}
.archive-item{border-top:1px solid var(--line);padding:12px 0}
.archive-item:first-of-type{border-top:0}
.archive-item .ameta{font-size:14px;color:var(--ash)}
.archive-item .hint{margin-top:8px}
.tsinput{width:88px;padding:6px 8px;font-size:14px;text-align:center}
.ordcell{white-space:nowrap}
.ordnum{display:inline-block;min-width:22px;text-align:center;font-weight:800;color:var(--cream);font-size:13px}
.drag-handle{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px;color:var(--ash);cursor:grab;vertical-align:middle;touch-action:none}
.drag-handle:hover{color:var(--cream);background:var(--hearth-2)}
.ordbtn{width:32px;height:32px;border-radius:6px;background:transparent;border:1px solid var(--line);color:var(--ash);cursor:pointer;padding:0;vertical-align:middle;font:inherit;line-height:1}
.ordbtn:hover{color:var(--cream);border-color:var(--line-quiet)}
.ordbtn .ic,.drag-handle .ic{width:16px;height:16px}
tr.ordrow-dragging{opacity:.45}
tr.ordrow-above td{box-shadow:inset 0 2px 0 var(--cream)}
tr.ordrow-below td{box-shadow:inset 0 -2px 0 var(--cream)}
tr[data-on="0"] .ordcell>*{visibility:hidden}
#ord-status{color:var(--ash);font-size:13px;margin:4px 0 0;min-height:1.4em}
/* Next session host page: icons drawn once, the Add a topic search, segments. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.subhead{font-size:15px;margin:24px 0 8px}
.sesspick{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sesspick #sess-q{flex:1 1 220px;max-width:320px}
.sesspick select{width:auto;flex:0 1 auto}
#sess-count{margin:8px 0 0;font-size:13px}
table.sessresults{margin-top:4px}
.seglist li{flex-wrap:wrap;justify-content:flex-start;gap:8px;padding:4px 0}
.archseg{margin-top:8px}
.card[draggable]{cursor:grab}
.card.dragging{opacity:.45;cursor:grabbing;touch-action:none}
/* The chip that follows your finger during a touch drag. */
.dragghost{position:fixed;z-index:200;pointer-events:none;transform:translate(-50%,-140%);
  max-width:74vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  background:var(--cream);color:var(--night);font-weight:700;font-size:13px;
  padding:8px 12px;border-radius:6px;box-shadow:var(--shadow)}
.lockchip{font-weight:700}
.onoff{margin-left:8px}
.bigcheck{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px;margin:8px 0 0}
form.stack label.bigcheck{display:flex;color:var(--cream);margin:8px 0 0}
footer{color:var(--ash-2);font-size:13px;margin-top:64px;border-top:1px solid var(--line);padding-top:16px}
footer a{color:var(--ash)}
#view:focus{outline:none}
/* Dim only when a soft navigation is slow; quick swaps never flicker. */
#view.navigating{opacity:.55;transition:opacity .15s ease .3s}

@media (max-width:640px){
  .wrap{padding:0 12px 64px}
  /* Anything under 16px makes iOS zoom the page in when the field is tapped. */
  input[type=text],input[type=url],input[type=password],input[type=search],input[type=number],input[type=date],
  input[type=datetime-local],textarea,select{font-size:16px}
  input.tsinput{width:84px;font-size:16px}
  textarea.copybox{font-size:16px}
  header.site{padding-top:16px}
  .card.pinned{margin:12px -12px;padding:16px 11px}
  .boardbar{gap:8px;margin-top:16px}
  .boardbar>.btn{order:1}
  .boardbar .brk{order:2;display:block;flex:0 0 100%;height:0}
  .boardbar .searchbar{order:3;flex:1 1 0}
  .boardbar .viewmenu{order:4}
  .btn,.btn.small{min-height:44px}
  .iconbtn{width:44px;height:44px}
  .ordbtn{width:44px;height:44px}
  .drag-handle{width:44px;height:44px}
  .chip.tagchip{padding:6px 10px}
  .meta>a{display:inline-flex;align-items:center;min-height:32px}
  footer a,footer .linkish{display:inline-flex;align-items:center;min-height:44px}
  nav.modes{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  nav.modes a{min-height:44px;flex:0 0 auto;white-space:nowrap}
  .panel{padding:16px 12px}
  .adminbar .desk{display:none}
  .linkish.quietx{min-height:32px}
  table.sesstable tr[hidden]{display:none}
  .modal{padding:12px 8px}
  .modal-card{max-height:none}
  .row-actions .btn{flex:1 1 auto}
  h1.idea-title{font-size:22px}
  .session .when{font-size:19px}
  /* The session list stacks: tick, title, then order and time on the next line. */
  table.sesstable,table.sesstable tbody{display:block}
  table.sesstable tr.headrow{display:none}
  table.sesstable tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  table.sesstable td{border:0;padding:0}
  table.sesstable td.c-title{flex:1 1 calc(100% - 110px)}
  table.sesstable td.c-bucket{display:none}
  table.sesstable td.c-votes{font-size:13px;flex:1 1 auto}
  table.sesstable tr[data-on="0"] td.c-order,table.sesstable tr[data-on="0"] td.c-ts,table.sesstable tr[data-on="0"] td.c-votes{display:none}
  table.sesstable td.c-ts::before{content:attr(data-label) " ";color:var(--ash);font-size:13px}
}

/* ---- Listener features (Sep 2026) ---- */
/* "Show more" under a long tab; the anchor marks where the new ideas start. */
.showmore{margin:16px 0 0;text-align:center}
.more-anchor{display:block;scroll-margin-top:16px}
.pending-edit{margin-top:0}
.pending-edit .meta{margin:0}
.flash.note{background:var(--hearth);border-color:var(--line);color:var(--cream)}
/* Phones: the comment Hide button and tag chips answer taps across 44px
   without looking any bigger (an invisible hit area around each). */
@media (max-width:640px){
  .chip.tagchip,.linkish.quietx{position:relative}
  .chip.tagchip::after,.linkish.quietx::after{content:"";position:absolute;left:50%;top:50%;width:100%;min-width:44px;height:44px;transform:translate(-50%,-50%)}
  .cardtags{row-gap:12px}
}