/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */ @layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:"Roboto Mono", monospace;--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--radius:2px;--font-display:"Bebas Neue", sans-serif;--font-body:"Inter", system-ui, -apple-system, sans-serif}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components{.topbar{z-index:100;background:var(--hdr-bg);padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right);position:sticky;top:0}.topbar:after{content:"";background:var(--team);height:3px;position:absolute;bottom:0;left:0;right:0}.topbar-inner{max-width:1440px;height:var(--hdr-h);align-items:center;gap:16px;margin:0 auto;padding:0 20px;display:flex}.brand{flex-shrink:0;align-items:center;gap:10px;text-decoration:none;display:flex}.brand:hover{text-decoration:none}.brand-stack{flex-direction:column;display:flex}.brand-title{font-family:var(--font-display);letter-spacing:.18em;color:#fff;white-space:nowrap;font-size:21px;line-height:1}.brand-sub{font-family:var(--font-mono);letter-spacing:.26em;text-transform:uppercase;color:var(--team);margin-top:2px;font-size:8.5px;font-weight:600}.topnav{gap:2px;margin-left:0;margin-right:8px;display:flex}.topnav a{position:relative;display:inline-flex;align-items:center;height:var(--hdr-h,60px);padding:0 14px;font-family:var(--font-body);color:var(--dk-t);font-size:13.5px;font-weight:600}.topnav a:hover{color:#fff;text-decoration:none}.topnav a.is-active{color:#fff}.btn-login{background:var(--team);color:#fff;font-family:var(--font-body);border-radius:var(--radius);cursor:pointer;border:0;flex-shrink:0;padding:9px 16px;font-size:13px;font-weight:700}.btn-login:hover{color:#fff;background:#c94d0e;text-decoration:none}.shell{grid-template-columns:232px minmax(0,1fr) 296px;align-items:start;gap:18px;max-width:1440px;margin:0 auto;padding:20px 20px 56px;display:grid}.col-left{top:calc(var(--hdr-h) + 15px);flex-direction:column;gap:14px;display:flex;position:sticky}.col-main{flex-direction:column;gap:12px;min-width:0;display:flex}.col-right{top:calc(var(--hdr-h) + 15px);flex-direction:column;gap:14px;display:flex;position:sticky}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.panel-hd{background:var(--hdr-grad);border-bottom:2px solid var(--team);justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;display:flex}.panel-hd-title{font-family:var(--font-display);letter-spacing:.12em;color:var(--dk-t);font-size:17px;line-height:1}.panel-hd-ctx{font-family:var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dk-t2);font-size:9px;font-weight:600}.btn-new{background:var(--team);color:#fff;width:100%;font-family:var(--font-body);border-radius:var(--radius);cursor:pointer;border:0;justify-content:center;align-items:center;gap:7px;padding:12px;font-size:14px;font-weight:700;display:flex}.btn-new:hover{color:#fff;background:#c94d0e;text-decoration:none}.comm{border-bottom:1px solid var(--s2);color:var(--text);align-items:center;gap:10px;min-height:42px;padding:10px 14px;display:flex}.comm:last-child{border-bottom:0}.comm:hover{background:var(--s2);text-decoration:none}.comm.is-active{background:var(--s2);box-shadow:inset 3px 0 0 var(--team)}.comm-dot{border-radius:var(--radius);flex:none;width:10px;height:10px}.comm-name{color:var(--text);font-size:13.5px;font-weight:600}.comm-cnt{font-family:var(--font-mono);color:var(--text2);margin-left:auto;font-size:11px}.comm-chips{-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:8px;padding:2px 2px 6px;display:none;overflow-x:auto}.comm-chips::-webkit-scrollbar{display:none}.comm-chip{font-family:var(--font-body);color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);flex:none;align-items:center;gap:7px;min-height:36px;padding:8px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.comm-chip:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none}.comm-chip.is-active{background:var(--dk);border-color:var(--dk);color:var(--dk-t)}.sorts{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);scrollbar-width:none;display:flex;overflow-x:auto}.sorts::-webkit-scrollbar{display:none}.sorts button,.sorts a{border:0;border-right:1px solid var(--border);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text2);cursor:pointer;background:0 0;flex:none;align-items:center;min-height:42px;padding:12px 18px;font-size:11px;font-weight:700;display:inline-flex;position:relative}.sorts button:hover,.sorts a:hover{color:var(--text);background:var(--s2);text-decoration:none}.sorts .on{color:var(--text)}.sorts .on:after{content:"";background:var(--team);height:2px;position:absolute;bottom:0;left:0;right:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);border-left-width:3px;border-left-color:var(--border2);align-items:stretch;transition:border-color .12s;display:flex;overflow:hidden}.card:hover{border-color:var(--border2);border-left-color:var(--team)}.card-body{flex-direction:column;flex:1;min-width:0;padding:12px 16px 12px 14px;display:flex}.cmeta{font-family:var(--font-mono);color:var(--text2);flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px;font-size:11px;display:flex}.cmeta .c{font-weight:700}.cmeta .sep{color:var(--border2)}.ctitle{font-family:var(--font-body);letter-spacing:-.011em;color:var(--text);margin:0 0 5px;font-size:16px;font-weight:700;line-height:1.35}.ctitle a{color:var(--text)}.ctitle a:hover{color:var(--team-ink);text-decoration:none}.csnip{color:var(--text2);-webkit-line-clamp:2;-webkit-box-orient:vertical;margin:0 0 10px;font-size:13.5px;display:-webkit-box;overflow:hidden}.cfoot{flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto;display:flex}.chip{font-family:var(--font-mono);color:var(--text2);border:1px solid var(--border);background:var(--surface);border-radius:var(--radius);cursor:pointer;align-items:center;gap:6px;min-height:30px;padding:6px 10px;font-size:11px;font-weight:500;display:inline-flex}.chip:hover{border-color:var(--border2);color:var(--text);background:var(--s2);text-decoration:none}.thumb{background:var(--s2);border-right:1px solid var(--border);width:104px;font-family:var(--font-mono);letter-spacing:.1em;color:var(--text2);flex:none;justify-content:center;align-items:center;font-size:10px;display:flex}.vote-btn.vote-up:hover{background:var(--green-bg);border-color:var(--green)}.vote-btn.vote-up:hover svg{stroke:var(--green)}.vote-btn.vote-down:hover{background:var(--red-bg);border-color:var(--red)}.vote-btn.vote-down:hover svg{stroke:var(--red)}.vote-btn:active{transform:scale(.92)}.vote-btn[aria-pressed=true].vote-up{background:var(--green);border-color:var(--green)}.vote-btn[aria-pressed=true].vote-up svg{stroke:#fff}.vote-btn[aria-pressed=true].vote-down{background:var(--red);border-color:var(--red)}.vote-btn[aria-pressed=true].vote-down svg{stroke:#fff}@keyframes score-bump{0%{transform:scale(1)}45%{transform:scale(1.22)}to{transform:scale(1)}}.about{padding:13px 14px}.about p{color:var(--text2);margin:0 0 10px;font-size:13px;line-height:1.55}.rowline{font-family:var(--font-mono);border-top:1px solid var(--s2);justify-content:space-between;padding:8px 0;font-size:11.5px;display:flex}.rowline .k{color:var(--text2)}.rowline .v{color:var(--text);font-weight:700}.rules{counter-reset:rule;margin:0;padding:0;list-style:none}.rules li{color:var(--text2);border-bottom:1px solid var(--s2);counter-increment:rule;padding:10px 14px 10px 40px;font-size:13px;line-height:1.45;position:relative}.rules li:before{content:counter(rule, decimal-leading-zero);font-family:var(--font-mono);color:var(--team-ink);font-size:10px;font-weight:700;position:absolute;top:11px;left:14px}.rules li:last-child{border-bottom:0}.rules li b{color:var(--text)}.footnote{font-family:var(--font-mono);color:var(--text2);padding:0 2px;font-size:10.5px;line-height:1.6}.crumbs{font-family:var(--font-mono);color:var(--text2);flex-wrap:wrap;align-items:center;gap:6px;font-size:11px;display:flex}.crumbs a{color:var(--text2);font-weight:600}.crumbs a:hover{color:var(--team-ink)}.post{background:var(--surface);align-items:stretch;display:flex}.post+.post{border-top:1px solid var(--border)}.post-body{flex:1;min-width:0;padding:13px 16px 14px}.post-head{flex-wrap:wrap;align-items:baseline;gap:5px 12px;margin-bottom:8px;display:flex}.post-author{color:var(--text);font-size:13px;font-weight:700}.post-author:hover{color:var(--team-ink)}.post-content{color:var(--text);overflow-wrap:anywhere;font-size:14px;line-height:1.62}.post-content p+p{margin-top:10px}.post-content blockquote{border-left:3px solid var(--team);background:var(--s2);border-radius:var(--radius);color:var(--text);margin-block:10px;padding:9px 13px}.post-content blockquote .quote-attr{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text2);margin-bottom:4px;font-size:10px;font-weight:700;display:block}.post-content pre{background:var(--dk);color:var(--dk-t);font-family:var(--font-mono);border-radius:var(--radius);border:1px solid var(--dk-bd);margin-block:10px;padding:12px 15px;font-size:12.5px;overflow-x:auto}.post-content code{font-family:var(--font-mono);background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text);padding:1px 5px;font-size:.9em}.post-content pre code{color:inherit;background:0 0;border:0;padding:0}.post-actions{flex-wrap:wrap;gap:4px;margin-top:11px;display:flex}.post-actions .chip{min-height:30px}.field{background:var(--surface);width:100%;color:var(--text);border:1px solid var(--border2);border-radius:var(--radius);font-size:14px;font-family:var(--font-body);padding:10px 12px}.field::placeholder{color:var(--text2)}.field:focus{outline:2px solid var(--team);outline-offset:0;border-color:#0000}.eyebrow{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text2);font-size:10px;font-weight:600}label.eyebrow{margin-bottom:6px;display:block}.btn{font-family:var(--font-body);border:1px solid var(--border2);background:var(--surface);color:var(--text);border-radius:var(--radius);cursor:pointer;justify-content:center;align-items:center;gap:6px;min-height:38px;padding:9px 16px;font-size:13px;font-weight:600;display:inline-flex}.btn:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none}.btn-primary{background:var(--team);color:#fff;border-color:#0000;font-weight:700}.btn-primary:hover{color:#fff;background:#c94d0e}.tag{font-family:var(--font-mono);letter-spacing:.1em;text-transform:uppercase;border-radius:var(--radius);background:var(--s2);color:var(--text2);border:1px solid var(--border);padding:3px 8px;font-size:10px;font-weight:700;display:inline-block}.tag-hot{background:var(--team);color:#fff;border-color:#0000}.pager{flex-wrap:wrap;gap:5px;display:flex}.pager a,.pager span{font-family:var(--font-mono);border:1px solid var(--border2);border-radius:var(--radius);min-width:36px;min-height:36px;color:var(--text);background:var(--surface);justify-content:center;align-items:center;padding:6px 8px;font-size:12px;font-weight:600;display:inline-flex}.pager a:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none}.pager .is-current{background:var(--team);color:#fff;border-color:#0000}.footer:before{content:"";background:var(--team);height:3px;position:absolute;top:0;left:0;right:0}.footer .footer .brand-title{font-size:17px}.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text)}@media (max-width:1199px){.shell{grid-template-columns:minmax(0,1fr) 288px}.col-left{display:none}.comm-chips{display:flex}}@media (max-width:899px){.shell{grid-template-columns:1fr;gap:14px;padding:16px 16px 48px}.col-right{order:3;position:static}.col-main{gap:11px}.ctitle{font-size:15.5px}}@media (max-width:599px){.topbar-inner{flex-wrap:wrap;gap:10px;height:auto;padding:10px 14px 12px}.topnav{order:2;margin-left:0}.topnav a{padding:8px 10px}.btn-login{order:3;min-height:40px;margin-left:auto}html{scroll-padding-top:120px}.shell{gap:10px;padding:12px 12px 40px}.card{border-left-width:1px;border-top:3px solid var(--border2);flex-direction:column}.card:hover{border-top-color:var(--team)}.thumb{display:none}.card-body{padding:12px 14px}.ctitle{font-size:15.5px;line-height:1.4}.csnip{-webkit-line-clamp:3}.card .chip{min-height:36px;padding:8px 11px}.sorts button,.sorts a{min-height:46px;padding:13px 16px}.comm-chip{min-height:40px}.btn,.btn-primary{min-height:44px}.field{padding:12px;font-size:16px}.post{flex-direction:column}.post .post-body{padding:12px 14px 4px}}@media (max-width:379px){.shell{padding:10px 10px 36px}.card-body,.post-body{padding-inline:12px}.brand-title{font-size:19px}}}:root{--bg:#f4f1ec;--surface:#fff;--s2:#eae6df;--s3:#e2ddd5;--border:#d5cfc5;--border2:#ccc8c0;--text:#3d3830;--text2:#5c564e;--muted:#8a8278;--green:#146036;--green-bg:#bfe8d0;--red:#a83428;--red-bg:#eddbd9;--amber:#a34a07;--amber-bg:#fef0c7;--team:#e05a14;--team-r:224;--team-g:90;--team-b:20;--team-ink:#b0400b;--row-hover:#faf8f5;--on-dark:#ede7e0;--radius:2px;--hdr-h:54px;--dk:#2c1f14;--dk-bd:#4a3828;--dk-t:#ede7e0;--dk-t2:#c4bab0;--hdr-bg:#1a1510;--hdr-grad:linear-gradient(180deg,#3a2a1a 0%,#2c1f14 55%,#241910 100%);--font-body:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"Roboto Mono", monospace;--font-display:"Bebas Neue", sans-serif;font-variant-numeric:tabular-nums}@layer base{html{background:var(--bg);scroll-padding-top:calc(var(--hdr-h) + 12px)}body{font-family:var(--font-body);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}a{color:var(--team-ink);text-decoration:none}a:hover{text-underline-offset:3px;text-decoration:underline}:focus-visible{outline:2px solid var(--team);outline-offset:2px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false} @layer components{ .dhf{--t-hot:#ff5e28;--t-deep:#a82600;--cream:#f0d8b0;--live:#57e894;--bg0:#120a04;--bg1:#1a1009;--panel2:#2c1f14;--line:#4a3828;--pad:clamp(18px,4vw,52px);background:var(--bg1);border-top:3px solid var(--team);margin-top:44px} .dhf-wrap{max-width:1400px;margin:0 auto;padding:clamp(40px,6vh,68px) var(--pad) clamp(34px,5vh,56px)} .dhf-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,3.4vw,54px);align-items:start} .dhf-brand-row{display:flex;align-items:center;gap:13px} .dhf-mark{width:46px;height:46px;flex:none;border-radius:var(--radius)} .dhf-wordmark{font-family:var(--font-display);font-size:36px;line-height:1;letter-spacing:.06em;color:#fff} .dhf-wordmark em{font-style:normal;color:var(--t-hot)} .dhf-mission{font-family:var(--font-body);font-size:14.5px;font-weight:500;line-height:1.6;color:#ede7e0;margin:14px 0 18px;max-width:360px} .dhf-mission strong{color:#fff;font-weight:700} .dhf-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;border:1px solid var(--line);border-left:3px solid var(--team);border-radius:var(--radius);background:var(--panel2);padding:8px 11px} .dhf-head{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:linear-gradient(180deg,var(--t-hot) 0%,var(--team) 100%);border-left:4px solid var(--t-deep);border-radius:var(--radius);display:flex;align-items:center;padding:9px 14px;margin:0 0 6px} .dhf-link{position:relative;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 12px 13px 27px;border-bottom:1px dotted #8f6f4e;color:#fff;font-family:var(--font-body);font-size:14px;font-weight:600;min-height:47px;text-decoration:none;transition:background .16s ease,color .16s ease} .dhf-link:before{content:"";position:absolute;left:12px;top:50%;width:6px;height:1px;background:var(--t-hot);transform:translateY(-50%)} .dhf-link:hover{background:var(--panel2);color:#fff;text-decoration:none} .dhf-link:hover:before{width:12px;left:8px} .dhf-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;color:var(--cream);text-transform:uppercase;white-space:nowrap;display:inline-flex;align-items:center;gap:7px} .dhf-tag.is-live{color:var(--live)} .dhf-dot{width:8px;height:8px;background:var(--live);flex:none} .dhf-legal{border-top:1px solid var(--line);background:var(--bg0)} .dhf-legal-wrap{max-width:1400px;margin:0 auto;padding:22px var(--pad) max(26px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:14px} .dhf-legal-top{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} .dhf-21{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t-hot);border:1.5px solid var(--t-hot);border-radius:var(--radius);padding:8px 12px} .dhf-backtop{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:inline-flex;align-items:center;gap:9px;padding:10px 0;text-decoration:none;transition:color .18s ease} .dhf-backtop:hover{color:var(--t-hot);text-decoration:none} .dhf-legal-text{font-family:var(--font-body);font-size:12px;font-weight:500;color:#ede7e0;max-width:760px;line-height:1.65;margin:0} .dhf-legal-bottom{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;color:#ede7e0;text-transform:uppercase;display:flex;gap:8px 22px;flex-wrap:wrap} @media (max-width:899px){.dhf-grid{grid-template-columns:1fr 1fr}.dhf-brand{grid-column:1/-1}} @media (max-width:599px){.dhf-grid{grid-template-columns:1fr}.dhf-wordmark{font-size:30px}.dhf-legal-top{flex-direction:column;align-items:flex-start}} } @layer components{ .dhc{position:relative} .dhc-body{padding:16px 16px 6px} .dhc-label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin:16px 0 7px} .dhc-body>.dhc-label:first-child{margin-top:0} .dhc-input{width:100%;display:block;font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:11px 12px} .dhc-input::placeholder{color:var(--text2);opacity:1} .dhc-input:focus{outline:2px solid var(--team);outline-offset:-2px;border-color:var(--team)} .dhc-tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap;background:var(--s2);border:1px solid var(--border2);border-bottom:0;border-radius:0;padding:6px} .dhc-tool{font-family:var(--font-mono);font-size:12.5px;font-weight:700;line-height:1;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);min-height:32px;min-width:34px;padding:0 10px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .dhc-tool:hover{border-color:var(--team);color:var(--team-ink)} .dhc-tool:focus-visible{outline:2px solid var(--team);outline-offset:1px} .dhc-tool[aria-pressed="true"]{background:var(--dk);border-color:var(--dk);color:#fff} .dhc-sep{width:1px;height:20px;background:var(--border);margin:0 5px;flex:none} .dhc-area{border-radius:0;border-top:0;resize:vertical;min-height:230px;font-size:15px;line-height:1.62} .dhc-count{font-family:var(--font-mono);font-size:10.5px;font-weight:600;color:var(--text2);text-align:right;margin-top:6px} .dhc-count.is-over{color:var(--red);font-weight:700} .dhc-drop{position:relative;border:2px dashed var(--border);background:var(--s2);border-radius:var(--radius);padding:22px 16px;text-align:center} .dhc-drop.is-over{border-color:var(--team);border-style:solid;background:var(--s3)} .dhc-drop:focus-within{outline:2px solid var(--team);outline-offset:2px} .dhc-drop-hint{font-family:var(--font-body);font-size:13px;line-height:1.5;color:var(--text2);margin:0} .dhc-drop-hint b{color:var(--text)} .dhc-check{display:flex;align-items:center;gap:9px;margin:18px 0 4px;font-size:14px;color:var(--text);cursor:pointer} .dhc-check input{width:16px;height:16px;border-radius:0;accent-color:var(--team);flex:none} .dhc-foot{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:14px 16px;border-top:1px solid var(--border);background:var(--s2)} .dhc-foot .btn{min-width:108px} .btn:disabled,.btn-primary:disabled{background:var(--s3);border-color:var(--border);color:var(--text2);cursor:not-allowed} .btn-primary:disabled:hover{background:var(--s3);color:var(--text2)} .dhc-alert{font-family:var(--font-body);font-size:13px;font-weight:600;line-height:1.5;color:var(--red);background:var(--red-bg);border:1px solid var(--red);border-left:3px solid var(--red);border-radius:var(--radius);padding:10px 12px;margin:14px 0 0} .dhc-emoji-pop{position:absolute;z-index:30;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px;display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-width:308px} .dhc-emoji-pop button{font-size:19px;line-height:1;background:0 0;border:1px solid #0000;border-radius:var(--radius);width:34px;height:34px;cursor:pointer;display:grid;place-items:center} .dhc-emoji-pop button:hover{background:var(--s2);border-color:var(--border2)} .dhc-emoji-pop button:focus-visible{outline:2px solid var(--team);outline-offset:1px} @media (max-width:599px){ .dhc-body{padding:13px 12px 4px} .dhc-foot{padding:12px;flex-direction:column-reverse;align-items:stretch} .dhc-foot .btn{width:100%} .dhc-area{min-height:190px} .dhc-emoji-pop{grid-template-columns:repeat(6,1fr);max-width:236px} } } @layer components{ .brand-logo{width:26px;height:26px;flex:none;border-radius:var(--radius);display:block} .dh-util{background:var(--surface);border-bottom:1px solid var(--border)} .dh-util-inner{max-width:1440px;margin:0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--text2)} .dh-util a{color:var(--text2);text-decoration:none} .dh-util a:hover{color:var(--team-ink);text-decoration:none} .dh-util-links{display:flex;align-items:center;gap:16px;flex-wrap:wrap;text-transform:uppercase} .dh-util-links input[type="checkbox"],.dh-util-links input[type="radio"]{display:none} .dh-util-me{color:var(--text2);text-align:right} .dh-page{max-width:1440px;margin:0 auto;padding:20px 20px 40px;min-height:52vh} .dh-crumbs{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--team);border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--text)} .dh-crumbs a{color:var(--text);text-decoration:none} .dh-crumbs a:hover{color:var(--team-ink)} .dh-crumbs-jump select{font-family:var(--font-mono);font-size:11.5px;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:5px 7px} .dh-lastvisit{font-family:var(--font-mono);font-size:11px;color:var(--text2);margin:0 0 14px} .dh-page table{max-width:100%} .dh-page img[src*="arrow_"],.dh-page img[src*="top_home"]{display:none} @media (max-width:899px){ .dh-util-inner{flex-direction:column;align-items:flex-start;gap:6px} .dh-util-me{text-align:left} .dh-page{padding:14px 12px 32px;overflow-x:auto} } } @layer components{ /* Legacy shim: DegenHoops styling for XMB's own class names. Bodies are markup with inline bgcolor=. A presentational attribute always loses to an author rule, so background:transparent beats them all. */ .dh-page{color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.55} .dh-page a{color:var(--team-ink);text-decoration:none;font-weight:600} .dh-page a:hover{text-decoration:underline;text-underline-offset:3px} .dh-page hr{border:0;border-top:1px solid var(--border);margin:14px 0} .dh-page br+br{display:none} .dh-page table{border-collapse:collapse;width:100%;max-width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:0 0 16px} .dh-page table table{border:0;margin:0;background:0 0} .dh-page td,.dh-page th{background:0 0;border:0;border-bottom:1px solid var(--s2);padding:10px 13px;vertical-align:middle;color:var(--text)} .dh-page table table td{border-bottom:0;padding:4px 0} .dh-page tr:last-child td{border-bottom:0} .category,.ctrcategory{background:var(--hdr-grad);color:var(--dk-t);font-family:var(--font-display);font-size:16px;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid var(--team)} .category a,.ctrcategory a{color:#fff;font-weight:400} .header,.header2{background:var(--s2);color:var(--text);font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--border)} .header a,.header2 a{color:var(--text)} .tablerow,.ctrtablerow,.rghttablerow{color:var(--text)} .ctrtablerow,.ctrcategory{text-align:center} .rghttablerow{text-align:right} .nav,.navtd,.navtd2{font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.06em;color:var(--text)} .navtd a,.nav a{color:var(--text)} .navtd a:hover,.nav a:hover{color:var(--team-ink)} .smalltxt{font-family:var(--font-mono);font-size:11px;color:var(--text2)} .mediumtxt{font-size:13px;color:var(--text)} .subject{font-weight:700;color:var(--text)} .subject a{color:var(--text)} .subject a:hover{color:var(--team-ink)} .post{font-size:14px;line-height:1.62;color:var(--text)} .sig{font-size:12px;color:var(--text2);border-top:1px solid var(--s2);margin-top:10px;padding-top:8px} /* form controls */ .dh-page input[type="text"],.dh-page input[type="password"],.dh-page input[type="email"], .dh-page input[type="number"],.dh-page input[type="search"],.dh-page textarea,.dh-page select{ font-family:var(--font-body);font-size:14px;color:var(--text);background:var(--surface); border:1px solid var(--border2);border-radius:var(--radius);padding:9px 11px;max-width:100%} .dh-page textarea{line-height:1.6;resize:vertical} .dh-page input:focus,.dh-page textarea:focus,.dh-page select:focus{outline:2px solid var(--team);outline-offset:-2px;border-color:var(--team)} .dh-page input[readonly]{background:var(--s2);color:var(--text2)} .dh-page input[type="checkbox"],.dh-page input[type="radio"]{width:15px;height:15px;accent-color:var(--team)} .dh-page input[type="submit"],.dh-page input[type="button"],.dh-page input[type="reset"],.submit{ font-family:var(--font-body);font-size:13px;font-weight:700;color:#fff;background:var(--team); border:0;border-radius:var(--radius);padding:10px 16px;min-height:38px;cursor:pointer;text-align:center} .dh-page input[type="submit"]:hover,.dh-page input[type="button"]:hover{background:#c94d0e} .dh-page form{margin:0} /* code and quote blocks */ table.code,td.code,.codemessage code,code{font-family:var(--font-mono);font-size:12.5px} td.code,.codemessage code{background:var(--dk);color:var(--dk-t);border:1px solid var(--dk-bd);border-radius:var(--radius);display:block;padding:12px 15px;overflow-x:auto} table.quote{border:0;margin:10px 0} td.quote{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);background:var(--s2);border-left:3px solid var(--team);padding:7px 13px 0} td.quotemessage{background:var(--s2);border-left:3px solid var(--team);color:var(--text);padding:4px 13px 10px} /* status pills */ span[class^="status_"]{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--team-ink)} /* 2004 chrome we do not want */ .dh-util img,.dh-crumbs img{display:none} .dh-page img[src*="arrow_"],.dh-page img[src*="top_"],.dh-page img[src*="pixel.gif"]{display:none} .dh-page img{max-width:100%;height:auto} .dh-page img[src*="/smilies/"]{display:inline;vertical-align:text-bottom} } @layer components{ /* Category bars. ThemeManager.php:135 writes an inline background-image, which only !important can beat. The inside is a presentational attribute, so a plain colour on the descendant wins. Two different fixes. */ .dh-page .category,.dh-page .ctrcategory,.dh-page tr.category td{ /* --hdr-grad IS a background-image (linear-gradient). Setting it via the `background` shorthand and then `background-image:none` erased it. Set the colour and the image separately; the image !important is what beats ThemeManager's inline url(catbar.gif). */ background-color:var(--hdr-bg) !important; background-image:var(--hdr-grad) !important; border-bottom:2px solid var(--team);padding:11px 14px} .dh-page .category,.dh-page .ctrcategory, .dh-page .category font,.dh-page .ctrcategory font, .dh-page .category strong,.dh-page .ctrcategory strong, .dh-page .category b,.dh-page .ctrcategory b{ color:var(--dk-t);font-family:var(--font-display);font-size:16px;font-weight:400; letter-spacing:.12em;text-transform:uppercase;line-height:1.2} .dh-page .category a,.dh-page .ctrcategory a{color:#fff;font-weight:400} .dh-page .category a:hover,.dh-page .ctrcategory a:hover{color:var(--team)} /* Header rows: kill the the same way. */ .dh-page .header font,.dh-page .header2 font, .dh-page .header strong,.dh-page .header2 strong{color:var(--text);font-weight:700} .dh-page .header,.dh-page .header2{padding:9px 14px} /* Tab strips (memcp, u2u, member). XMB marks the active tab with a bgcolor attribute only, which our td{background:transparent} intentionally kills. .is-active is applied by app.js from the URL -- honest state, not a guess. */ .dh-page table.dh-tabs{border:1px solid var(--border);background:var(--surface);margin-bottom:18px} .dh-page .dh-tabs td{padding:0;border-bottom:0;border-right:1px solid var(--s2);text-align:center;width:auto} .dh-page .dh-tabs td:last-child{border-right:0} .dh-page .dh-tabs a{display:block;padding:14px 10px;font-family:var(--font-mono);font-size:10.5px; font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);border-bottom:2px solid #0000} .dh-page .dh-tabs a:hover{background:var(--s2);color:var(--team-ink);text-decoration:none} .dh-page .dh-tabs a.is-active{color:var(--text);border-bottom-color:var(--team);background:var(--surface)} /* Rhythm. XMB separates everything with
, which fights table margins. */ .dh-page>br,.dh-page table+br{display:none} .dh-page table.dh-tabs+br{display:none} .dh-page .smalltxt a{color:var(--text2);font-weight:600} .dh-page .smalltxt a:hover{color:var(--team-ink)} /* Quickjump: a bare is drawn by the OS; option{} works on Windows and Linux, macOS ignores it. */ /* 1. TEXT SELECTION. Never styled, so the browser drew its own blue. On the dark category bars that was unreadable. team-ink keeps white text at 5.86:1 against it. */ ::selection{background:var(--team-ink);color:#fff} ::-moz-selection{background:var(--team-ink);color:#fff} /* 2. SELECT. Kill the native chrome and draw our own chevron inline, so there is no extra HTTP request and it recolours with the theme. NOTE: the popup LIST is drawn by the OS. option{} works on Windows and Linux; macOS ignores it entirely. A fully controlled dropdown needs a JS listbox, not CSS. */ .dh-page select,.dh-crumbs-jump select{ -webkit-appearance:none;-moz-appearance:none;appearance:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2212%22%20height=%228%22%20viewBox=%220%200%2012%208%22%3E%3Cpath%20d=%22M1%201.5%20L6%206.5%20L11%201.5%22%20stroke=%22%235c564e%22%20stroke-width=%221.8%22%20fill=%22none%22%20stroke-linecap=%22square%22/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px; padding-right:36px;min-height:42px;font-weight:600;cursor:pointer} .dh-page select:hover,.dh-crumbs-jump select:hover{border-color:var(--team)} .dh-page select[multiple],.dh-page select[size]{background-image:none;padding-right:11px;min-height:0} .dh-page option{background:var(--surface);color:var(--text);padding:8px 10px;font-weight:500} .dh-page option:checked,.dh-page option:hover{background:var(--team-ink);color:#fff} .dh-page optgroup{background:var(--s2);color:var(--text2);font-family:var(--font-mono);font-size:10.5px; font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-style:normal;padding:6px 0} /* 3. INPUTS. One height, one rhythm. */ .dh-page input[type="text"],.dh-page input[type="password"],.dh-page input[type="email"], .dh-page input[type="number"],.dh-page input[type="search"]{min-height:42px} .dh-page input[type="checkbox"],.dh-page input[type="radio"]{width:17px;height:17px;margin-right:6px;vertical-align:-3px} .dh-page label,.dh-page td>input[type="checkbox"]+*{cursor:pointer} .dh-page input[type="submit"],.dh-page input[type="button"],.submit{min-width:150px;letter-spacing:.01em} .dh-page input[type="submit"]:active{transform:translateY(1px)} /* 4. DATA ROWS. A hairline and a hover state turn a text dump into a table. */ .dh-page tr.tablerow:hover>td{background:var(--row-hover)} .dh-page tr.header:hover>td,.dh-page tr.category:hover>td{background:inherit} .dh-page .category+tr td,.dh-page tr.header+tr td{border-top:0} /* 5. KEY / VALUE. XMB alternates bgcolor per cell: label, value, label, value. app.js verifies that pattern and tags the cells. Labels become mono uppercase micro-caps; values carry the weight. */ .dh-page td.dh-k{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--text2);white-space:nowrap;width:1%;padding-right:10px;vertical-align:middle} .dh-page td.dh-v{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text);vertical-align:middle} .dh-page td.dh-v:empty:before{content:"\2014";color:var(--text2);font-weight:400} /* 6. Category bar: tighten the type and let long labels breathe. */ .dh-page .category,.dh-page .ctrcategory{font-size:15px;letter-spacing:.1em} .dh-page .category strong,.dh-page .ctrcategory strong{font-weight:400} @media (max-width:599px){ .dh-page select,.dh-crumbs-jump select{min-height:44px} .dh-page input[type="text"],.dh-page input[type="password"],.dh-page input[type="email"], .dh-page input[type="number"],.dh-page input[type="search"]{min-height:44px;width:100%} .dh-page td.dh-k{width:auto} } } @layer components{ /* Category text. sets colour on the ROW, but td{color} targets the CELL directly and a direct rule beats an inherited one. Forcing every descendant is the only fix that does not mean editing 300 templates. */ .dh-page .category,.dh-page .ctrcategory,.dh-page tr.category>td{ background-color:var(--hdr-bg) !important; background-image:var(--hdr-grad) !important; border-bottom:2px solid var(--team); padding:12px 16px} .dh-page .category,.dh-page .ctrcategory,.dh-page tr.category>td, .dh-page .category *,.dh-page .ctrcategory *,.dh-page tr.category>td *{ color:var(--dk-t) !important; font-family:var(--font-display);font-size:16px;font-weight:400; letter-spacing:.1em;text-transform:uppercase;line-height:1.25} .dh-page .category a,.dh-page .ctrcategory a,.dh-page tr.category>td a{color:#fff !important} .dh-page .category a:hover,.dh-page .ctrcategory a:hover{color:var(--team) !important;text-decoration:none} .dh-page tr.category:hover>td{background-image:var(--hdr-grad) !important} /* Column headers: same trick, one level lighter. */ .dh-page .header,.dh-page .header2,.dh-page tr.header>td{ background:var(--s2);border-bottom:1px solid var(--border);padding:10px 16px} .dh-page .header,.dh-page .header2,.dh-page tr.header>td, .dh-page .header *,.dh-page .header2 *,.dh-page tr.header>td *{ color:var(--text) !important;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase} .dh-page tr.header:hover>td{background:var(--s2)} /* ---- Key / value: a dotted leader, the way a spec sheet sets it. ---------- */ .dh-page td.dh-k,.dh-page td.dh-v{ border-bottom:1px dotted var(--border);padding-top:12px;padding-bottom:12px;background:0 0} .dh-page td.dh-k{ font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--text2);white-space:nowrap;width:1%; padding-left:16px;padding-right:14px;vertical-align:middle} .dh-page td.dh-v{ font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--text); padding-right:24px;vertical-align:middle} .dh-page td.dh-v:empty:before{content:"\2014";color:var(--text2);font-weight:400} .dh-page tr.tablerow:last-child td.dh-k,.dh-page tr.tablerow:last-child td.dh-v{border-bottom:0} .dh-page tr.tablerow:hover>td.dh-k,.dh-page tr.tablerow:hover>td.dh-v{background:var(--row-hover)} .dh-page tr.tablerow:hover>td.dh-k{color:var(--text)} /* ---- Panels: a real edge, and a dashed rule inside. ----------------------- */ .dh-page>table,.dh-page form>table{border:1px solid var(--border)} .dh-page .submit,.dh-page input[type="submit"]{margin:4px 0} .dh-page tr.tablerow>td{border-bottom:1px dotted var(--border)} .dh-page tr.tablerow:last-child>td{border-bottom:0} @media (max-width:599px){ .dh-page .category,.dh-page .ctrcategory,.dh-page tr.category>td, .dh-page .category *,.dh-page .ctrcategory *,.dh-page tr.category>td *{font-size:14px} .dh-page td.dh-k{padding-left:12px;width:auto} } } @layer components{ /* Data lists. Header labels broke mid-word ("ICO N:") because 10px mono at .14em tracking is wider than the width="4%" XMB assigns. */ .dh-page .header th,.dh-page .header td,.dh-page tr.header>th,.dh-page tr.header>td{ white-space:nowrap;letter-spacing:.1em;text-align:center} .dh-page .header .dh-left,.dh-page tr.header>.dh-left{text-align:left} /* Rebuilt list tables (today.php). Semantic classes, no bgcolor attributes. */ .dh-page table.dh-list{table-layout:auto} .dh-page .dh-list td{vertical-align:middle} .dh-page .dh-flag{width:38px;text-align:center;padding-inline:8px} .dh-page .dh-flag img{width:15px;height:auto;display:inline-block;vertical-align:middle} .dh-page .dh-subject{text-align:left} .dh-page .dh-subject a{font-family:var(--font-body);font-size:14.5px;font-weight:600; color:var(--text);letter-spacing:0;text-transform:none} .dh-page .dh-subject a:hover{color:var(--team-ink)} .dh-page .dh-author,.dh-page .dh-forum{text-align:center;font-family:var(--font-body);font-size:13px;font-weight:500} .dh-page .dh-author a{color:var(--text)} .dh-page .dh-author a:hover{color:var(--team-ink)} .dh-page .dh-forum a{font-family:var(--font-mono);font-size:11.5px;font-weight:600; letter-spacing:.06em;color:var(--team-ink)} .dh-page .dh-num{width:74px;text-align:center;font-family:var(--font-mono);font-size:14px; font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .dh-page .dh-last{text-align:left;font-family:var(--font-mono);font-size:11px; line-height:1.55;color:var(--text2);white-space:nowrap} .dh-page .dh-last a{color:var(--text2);font-weight:600} .dh-page .dh-last a:hover{color:var(--team-ink)} .dh-page tr.dh-foot>td{background:var(--s2);text-align:center;padding:16px;border-bottom:0} .dh-page tr.dh-foot label{font-family:var(--font-mono);font-size:11px;font-weight:600; letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-right:10px} .dh-page tr.dh-foot input[type="text"]{width:74px;text-align:center;margin:0 10px} .dh-page tr.dh-foot span{font-family:var(--font-mono);font-size:11px;color:var(--text2);margin-right:14px} .dh-page tr.dh-pagenav>td{background:var(--s2);font-family:var(--font-mono);font-size:11.5px;padding:10px 16px} @media (max-width:899px){ .dh-page .dh-last{white-space:normal} .dh-page .dh-num{width:56px} } } @layer components{ /* Icons. The folder GIFs come from the today.php controller, not a template, so we match on src and paint over them. Zero the img box, add a background. Works everywhere; content:url() only landed in Firefox 105. */ .dh-page img[src*="_folder.gif"],.dh-page img[src$="/folder.gif"]{ width:0;height:0;padding:8px;background-repeat:no-repeat;background-position:center; background-size:16px 16px;vertical-align:middle} .dh-page img[src$="/folder.gif"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%224.5%22%20fill=%22none%22%20stroke=%22%23a9a196%22%20stroke-width=%221.6%22/%3E%3C/svg%3E")} .dh-page img[src$="/red_folder.gif"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%224.5%22%20fill=%22%23e05a14%22/%3E%3C/svg%3E")} .dh-page img[src$="/hot_folder.gif"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%227%22%20fill=%22none%22%20stroke=%22%23a9a196%22%20stroke-width=%221.2%22%20opacity=%22.5%22/%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%224%22%20fill=%22none%22%20stroke=%22%23a9a196%22%20stroke-width=%221.6%22/%3E%3C/svg%3E")} .dh-page img[src$="/hot_red_folder.gif"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%227%22%20fill=%22none%22%20stroke=%22%23e05a14%22%20stroke-width=%221.2%22%20opacity=%22.45%22/%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%224%22%20fill=%22%23e05a14%22/%3E%3C/svg%3E")} .dh-page img[src$="/lock_folder.gif"]{background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Cpath%20d=%22M5%207V5.2a3%203%200%200%201%206%200V7%22%20fill=%22none%22%20stroke=%22%235c564e%22%20stroke-width=%221.5%22/%3E%3Crect%20x=%223.5%22%20y=%227%22%20width=%229%22%20height=%226.5%22%20fill=%22none%22%20stroke=%22%235c564e%22%20stroke-width=%221.5%22/%3E%3C/svg%3E")} .dh-page img[src*="dot_"]{width:0;height:0;padding:8px;background-repeat:no-repeat; background-position:center;background-size:16px 16px;vertical-align:middle; background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%2216%22%20viewBox=%220%200%2016%2016%22%3E%3Ccircle%20cx=%228%22%20cy=%228%22%20r=%224.5%22%20fill=%22%23e05a14%22/%3E%3C/svg%3E")} /* The last-post jump link. */ .dh-jump{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px; border:1px solid var(--border);border-radius:var(--radius);flex:none; background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2214%22%20height=%2214%22%20viewBox=%220%200%2014%2014%22%3E%3Cpath%20d=%22M4%202.5%20L8.5%207%20L4%2011.5%22%20fill=%22none%22%20stroke=%22%235c564e%22%20stroke-width=%221.7%22%20stroke-linecap=%22square%22/%3E%3C/svg%3E") center / 14px 14px no-repeat} .dh-jump:hover{border-color:var(--team);background-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2214%22%20height=%2214%22%20viewBox=%220%200%2014%2014%22%3E%3Cpath%20d=%22M4%202.5%20L8.5%207%20L4%2011.5%22%20fill=%22none%22%20stroke=%22%23b0400b%22%20stroke-width=%221.7%22%20stroke-linecap=%22square%22/%3E%3C/svg%3E")} .dh-jump span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} /* Last-post cell: a stacked date + author, and the jump button beside it. */ .dh-lastpost{display:flex;align-items:center;justify-content:flex-end;gap:10px} /* $lastpost is one string: "DATE at TIME
by author". Two lines, one node, so ::first-line is the only way to weight the date differently. */ .dh-lastpost-text{text-align:right;line-height:1.55;font-family:var(--font-mono); font-size:10.5px;color:var(--text2);white-space:nowrap} .dh-lastpost-text::first-line{font-size:11px;font-weight:600;color:var(--text)} .dh-lastpost-text a{color:var(--text2);font-weight:600} .dh-lastpost-text a:hover{color:var(--team-ink)} .dh-page a.dh-jump:hover{text-decoration:none} } @layer components{ /* Member list. */ /* Sort strip: app.js tags it .dh-tabs. Give the bar above it its own weight. */ .dh-page table.dh-sortbar{margin-bottom:20px} .dh-page .dh-sortbar .category{text-align:left} /* Member rows */ .dh-page table.dh-mlist{table-layout:auto} .dh-page .dh-mrow>td{padding-block:12px;vertical-align:middle} /* Hover used --s2, the exact colour of the header row, so a hovered row merged with the header and every cell flattened into one tone. Use a tint between the surface and the header, and let ONE element carry the accent. */ .dh-page .dh-mrow:hover>td{background:var(--row-hover)} .dh-page .dh-muser{text-align:left;padding-left:16px;width:26%} .dh-page a.dh-mlink{display:inline-flex;align-items:center;gap:11px;text-decoration:none;font-weight:600} .dh-page a.dh-mlink:hover{text-decoration:none} /* A solid dark 34px tile with a 17px Bebas cap read as a heavy block. Lighter surface, smaller cap, and 1px of optical lift because Bebas sits low in its em box. Only the border and the letter shift on hover -- never the fill. */ .dh-avatar{ display:grid;place-items:center;flex:none;width:30px;height:30px; background:var(--s2);color:var(--text);border:1px solid var(--border2);border-radius:var(--radius); font-family:var(--font-display);font-size:14px;letter-spacing:.04em;line-height:1; padding-top:1px;transition:border-color .14s ease,color .14s ease} .dh-page a.dh-mlink:hover .dh-avatar{background:#fff;border-color:var(--team);color:var(--team-ink)} .dh-mname{font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--text)} .dh-page a.dh-mlink:hover .dh-mname{color:var(--team-ink)} /* Status as a pill, not loose text. */ .dh-page .dh-mstatus{text-align:center;width:17%} .dh-pill{ display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:var(--text2); background:var(--s2);border:1px solid var(--border);border-radius:var(--radius); padding:5px 9px;white-space:nowrap} .dh-page .dh-mrow:hover .dh-pill{background:#fff} /* Website: a real icon button, not a "website" bubble gif. */ .dh-page .dh-msite{text-align:center;width:9%} .dh-page a.dh-site{ display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border:1px solid var(--border);border-radius:var(--radius);color:var(--text2)} .dh-page a.dh-site:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none} .dh-site svg{width:15px;height:15px;stroke:currentColor;stroke-linecap:round} .dh-site span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .dh-page .dh-mloc{text-align:center;width:18%;font-size:13px;color:var(--text2);font-weight:500} .dh-page .dh-mreg{text-align:center;width:18%;font-family:var(--font-mono);font-size:11.5px;color:var(--text2)} .dh-page .dh-mposts{text-align:center;width:9%;font-family:var(--font-mono);font-size:15px; font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} /* Empty cells read as empty, not broken. */ .dh-page .dh-mstatus:empty:before,.dh-page .dh-msite:empty:before, .dh-page .dh-mloc:empty:before{content:"";display:inline-block;width:10px;height:2px; background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2210%22%20height=%222%22%20viewBox=%220%200%2010%202%22%3E%3Cpath%20d=%22M0%201h10%22%20stroke=%22%23a9a196%22%20stroke-width=%221.4%22/%3E%3C/svg%3E") center/10px 2px no-repeat} /* Alphabet separators between groups. */ .dh-page tr.dh-sep>td{ background:var(--s3);border-bottom:1px solid var(--border); font-family:var(--font-display);font-size:14px;letter-spacing:.14em;text-transform:uppercase; color:var(--text);padding:8px 16px} .dh-page tr.dh-empty>td{padding:26px 16px;text-align:center;color:var(--text2);font-size:14px} /* Search footer */ /* Scoped to .dh-mlist: an unscoped tr.dh-foot rule has the same specificity as today.php's narrow "days" box and, coming later, silently overrode it. */ .dh-page .dh-mlist tr.dh-foot .dh-field{display:inline-flex;align-items:center;gap:9px;margin:0 14px 6px 0} .dh-page .dh-mlist tr.dh-foot label{margin-right:0} .dh-page .dh-mlist tr.dh-foot input[type="text"]{width:auto;min-width:150px;text-align:left;margin:0} .dh-page tr.dh-foot-wrap>td{text-align:center} @media (max-width:899px){ .dh-page .dh-muser{width:auto} .dh-avatar{width:30px;height:30px;font-size:15px} .dh-page .dh-mlist tr.dh-foot .dh-field{display:flex;margin:0 0 10px} .dh-page .dh-mlist tr.dh-foot input[type="text"]{flex:1;min-width:0} } } @layer components{ /* Hierarchy. "Sort By:" was a full category bar, same weight as "Member List". It is a control label, not a heading. Demoted. */ .dh-page .dh-sortbar .category, .dh-page .dh-sortbar .category *{ background-color:var(--s2) !important;background-image:none !important; color:var(--text2) !important; font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;line-height:1} .dh-page .dh-sortbar .category{ border-bottom:1px solid var(--border);padding:11px 16px;text-align:left} /* The sort strip is a control, not the page. Give it a quieter frame. */ .dh-page table.dh-sortbar{border:1px solid var(--border);margin-bottom:20px} .dh-page .dh-sortbar .dh-tabs a,.dh-page table.dh-sortbar a{font-size:10px} /* Member list header: left-align the first column with the avatar below it. */ .dh-page .dh-mlist .header th:first-child,.dh-page .dh-mlist tr.header>th.dh-left{padding-left:16px} .dh-page .dh-mlist .category{text-align:left} } @layer components{ /* Mobile header and stacked forms. .brand-sub used to carry an inline style, so no media query could reach it. */ /* --- brand: one source of truth, both shells --- */ .brand-sub{font-family:var(--font-mono);letter-spacing:.18em;text-transform:uppercase; color:var(--team);margin-top:2px;font-size:9.5px;font-weight:600;white-space:nowrap} @media (max-width:719px){ .topbar-inner{flex-wrap:wrap;align-items:center;gap:10px 12px;padding:10px 14px} .brand{flex:1 1 auto;min-width:0} .brand-logo{width:30px;height:30px} .brand-title{font-size:19px;letter-spacing:.14em} .brand-sub{font-size:8px;letter-spacing:.14em} .btn-login{order:2;flex:none;min-height:38px;padding:0 14px;font-size:12px; display:inline-flex;align-items:center} /* Navigation gets its own row, ruled off from the identity above it. */ .topnav{order:3;flex:1 0 100%;margin-left:0;gap:0; border-top:1px solid var(--dk-bd);padding-top:2px} .topnav a{font-family:var(--font-mono);font-size:11.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;padding:11px 14px 10px; border-bottom:2px solid #0000} .topnav a:first-child{padding-left:0} .topnav a.is-active{border-bottom-color:var(--team)} .dh-util-inner{padding:8px 14px} } @media (max-width:379px){ .brand-title{font-size:17px} .brand-sub{font-size:7.5px;letter-spacing:.1em} .brand-logo{width:26px;height:26px} } /* --- legacy form tables: stack label over field --- */ @media (max-width:719px){ .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar) tbody, .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar) tr{display:block;width:100%} .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar) td{ display:block;width:auto;border-bottom:0;padding:6px 14px} /* Restore the row rule at the row, not the cell. */ .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar) tr.tablerow{ border-bottom:1px dotted var(--border);padding:6px 0} .dh-page tr.tablerow:last-child{border-bottom:0} /* A label cell followed by a field cell: micro-cap above, control below. */ .dh-page td.dh-k{padding-bottom:0;width:auto;white-space:normal} .dh-page td.dh-v{padding-top:2px} /* Category and header bars must stay full-bleed blocks, not stacked cells. */ .dh-page tr.category,.dh-page tr.header{display:block} .dh-page tr.category>td,.dh-page tr.header>td,.dh-page tr.header>th{display:block;text-align:left} .dh-page input[type="submit"],.dh-page .submit{width:100%;min-width:0} } /* --- vote widget on the feed: keep the score legible at 40px --- */ @media (max-width:599px){ .sorts{overflow-x:auto;scrollbar-width:none} .sorts::-webkit-scrollbar{display:none} } } @layer components{ /* viewthread cleanup. .meta was deleted in pass 2 as dead; it is not. */ .meta{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2); letter-spacing:.02em} .meta a{color:var(--text2);font-weight:700} .meta a:hover{color:var(--team-ink)} .meta-right{margin-left:auto} /* Extracted from inline style attributes in viewthread.php. */ .shell-thread{grid-template-columns:minmax(0,1fr) 296px} .shell-solo{grid-template-columns:1fr} .panel-accent{border-left:3px solid var(--team)} /* colour overridden inline per community */ .crumb-comm{font-weight:700} .ctitle-lg{font-size:19px;line-height:1.3} .qr-form{padding:13px 14px;display:grid;gap:10px} .qr-actions{display:flex;gap:8px;justify-content:flex-end} .rowline-first{border-top:0} .v-is-up{color:var(--green)} .v-is-down{color:var(--red)} .v-even{color:var(--text)} @media (max-width:899px){ .shell-thread{grid-template-columns:1fr} } } @layer components{ /* Mobile and tablet. XMB nests every content table inside a layout table, so `.dh-page > table` never matched the real one: it could not scroll, so it squeezed, and td.dh-k{width:1%} left one character for the value. */ /* --- 1. Neutralise XMB's layout tables at every width. ----------------------- A table whose row holds a single cell that holds another table is scaffolding, not data. :has() is baseline in every browser shipped since 2023. */ .dh-page table:has(> tbody > tr > td > table), .dh-page table:has(> tr > td > table){display:block;border:0;margin:0;background:0 0} .dh-page table:has(> tbody > tr > td > table) > tbody, .dh-page table:has(> tbody > tr > td > table) > tbody > tr, .dh-page table:has(> tbody > tr > td > table) > tbody > tr > td{ display:block;padding:0;border:0;background:0 0} /* --- 2. Tablet and phone: content tables stack. ------------------------------ Excluded: the tables we rebuilt ourselves, which scroll horizontally because their columns carry meaning. */ @media (max-width:899px){ .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar):not(:has(> tbody > tr > td > table)){ display:block;overflow:visible} .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar):not(:has(> tbody > tr > td > table)) > tbody, .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar):not(:has(> tbody > tr > td > table)) > tbody > tr{ display:block;width:auto} .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar):not(:has(> tbody > tr > td > table)) > tbody > tr > td, .dh-page table:not(.dh-tabs):not(.dh-list):not(.dh-mlist):not(.dh-sortbar):not(:has(> tbody > tr > td > table)) > tbody > tr > th{ display:block;width:auto;max-width:100%;border-bottom:0;text-align:left;overflow-wrap:anywhere} /* Row rules move from the cell to the row. */ .dh-page tr.tablerow,.dh-page tr.ctrtablerow{ display:block;border-bottom:1px dotted var(--border);padding:8px 0} .dh-page tr.tablerow:last-child,.dh-page tr.ctrtablerow:last-child{border-bottom:0} /* Bars stay full-bleed. */ .dh-page tr.category,.dh-page tr.header{display:block;padding:0} .dh-page tr.category > td,.dh-page tr.header > td,.dh-page tr.header > th, .dh-page td.category,.dh-page td.ctrcategory{ display:block;width:auto;white-space:normal;text-align:left} .dh-page td.category,.dh-page td.ctrcategory{writing-mode:horizontal-tb} /* THE FIX: width:1% + nowrap is what collapsed the value column. */ .dh-page td.dh-k{width:auto;white-space:normal;padding:10px 14px 0;border-bottom:0} .dh-page td.dh-v{width:auto;padding:2px 14px 10px;border-bottom:0;font-size:15px} .dh-page td.dh-v:empty:before{content:"\2014"} /* Checkbox rows (Devices) read as a line, not a stack of one-cell blocks. */ .dh-page tr.tablerow > td:has(> input[type="checkbox"]){display:inline-block;width:auto;padding-right:10px} .dh-page tr.tablerow > td:has(> input[type="checkbox"]) + td{display:inline-block;width:auto} } /* --- 3. Tables that must keep their columns: scroll, do not stack. ----------- */ @media (max-width:899px){ .dh-page table.dh-list,.dh-page table.dh-mlist{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .dh-page table.dh-list > tbody,.dh-page table.dh-mlist > tbody{display:table;width:100%;min-width:640px} } /* --- 4. Tablet: one column, roomier than phone. ------------------------------ */ @media (min-width:600px) and (max-width:899px){ .dh-page{padding:18px 20px 36px} .dh-page td.dh-k{padding-inline:18px} .dh-page td.dh-v{padding-inline:18px} } /* --- 5. Phone. -------------------------------------------------------------- */ @media (max-width:599px){ .dh-page{padding:12px 12px 30px} .dh-crumbs{flex-direction:column;align-items:stretch;gap:10px} .dh-util-me{font-size:10px;line-height:1.7} } } @layer components{ /* Compact card. The vote rail was 54px of gutter on desktop and a 96px row on mobile: 162px of chrome around 76px of content, to show three numbers. Now one 34px footer row. 268px per card -> 157px. */ /* --- the card no longer has a gutter --- */ .card{display:block;overflow:visible} .card-body{padding:13px 15px 12px} /* --- footer control bar: vote + stats on ONE scale ------------------------ */ /* One height, one type size, one icon size -- change the scale in three vars. */ .cfoot,.post-actions{--fh:34px;--ffs:12.5px;--fic:16px; display:flex;align-items:center;gap:10px;flex-wrap:wrap; margin-top:12px;padding-top:12px;border-top:1px solid var(--s2)} /* Vote -- Scoreboard Native: dark keys frame a plaque that posts the line. */ .votepill{display:inline-flex;align-items:stretch;flex:none;height:var(--fh); border:1px solid var(--dk);border-radius:var(--radius);background:var(--dk);overflow:hidden} .vote-btn{appearance:none;border:0;cursor:pointer;touch-action:manipulation; display:grid;place-items:center;width:36px;padding:0;background:var(--dk);color:var(--dk-t); transition:background .13s ease,color .13s ease} .vote-btn svg{width:var(--fic);height:var(--fic);fill:none;stroke:currentColor; stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .vote-btn:focus-visible{outline:2px solid var(--team);outline-offset:-2px} .vote-up:hover{background:#3a2a1a;color:#63d38f} .vote-down:hover{background:#3a2a1a;color:#e8907f} .vote-up[aria-pressed="true"]{color:#63d38f} .vote-down[aria-pressed="true"]{color:#e8907f} .vote-score{display:grid;place-items:center;min-width:48px;padding:0 9px; background:var(--surface);border-left:1px solid var(--dk);border-right:1px solid var(--dk); font-family:var(--font-mono);font-variant-numeric:tabular-nums; font-size:var(--ffs);font-weight:700;line-height:1;color:var(--text)} .vote-score.is-up{background:var(--green);color:#fff} .vote-score.is-down{background:var(--red);color:#fff} .vote-score.bump{animation:dh-bump .22s ease} @keyframes dh-bump{50%{transform:scale(1.16)}} /* Stats -- same height, same type, same icon; quiet until touched. */ .cstat{display:inline-flex;align-items:center;gap:7px;height:var(--fh);padding:0 10px; border:1px solid #0000;border-radius:var(--radius);background:0 0; font-family:var(--font-mono);font-size:var(--ffs);font-weight:600;color:var(--text2); text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s,color .12s} .cstat .num{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums} .cstat-label{font-weight:600;letter-spacing:.03em} a.cstat:hover,button.cstat:hover{background:var(--s2);border-color:var(--border);color:var(--text);text-decoration:none} a.cstat:hover .num,button.cstat:hover .num{color:var(--text)} .cfoot .cstat-share{margin-left:auto;cursor:pointer} /* Global line-icon unchanged; the footer just scales it and lets it inherit colour. */ .ic{width:15px;height:15px;flex:none;fill:none;stroke:var(--text2);stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .cfoot .ic,.post-actions .ic{width:var(--fic);height:var(--fic);stroke-width:1.8} .cstat .ic{stroke:currentColor} .post{display:block} .post-body{min-width:0} @media (max-width:419px){ .cfoot,.post-actions{--fh:40px;gap:8px} .cstat{padding:0 8px} .cstat-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)} .vote-score{min-width:44px} } } @layer components{ .chip.strong{font-weight:700;color:var(--text)} .chip.strong:hover{color:var(--team-ink)} } @layer components{ /* Legacy safety net. 250 templates written before responsive layout existed. size=, cols=, width=, height= and nowrap are presentational attributes: a plain author rule beats every one of them. No !important needed. */ /* 107 inputs sized with size="25". On a 360px screen size="40" overflows. */ .dh-page input[size]{width:auto;max-width:100%} .dh-page input[type="file"]{max-width:100%} /* 19 textareas sized with cols="60". */ .dh-page textarea[cols]{width:100%;max-width:100%} .dh-page textarea[rows]{min-height:120px} /* 27 hard pixel widths, the largest 650px. */ .dh-page table[width]{width:100%;max-width:100%} /* 17 td height="101" locks, e.g. viewthread_quickreply. */ .dh-page td[height],.dh-page tr[height]{height:auto} /* 19 nowrap attributes that refuse to wrap on a phone. */ .dh-page [nowrap]{white-space:normal} /* still sets type size. Colour is left alone: some templates use it for meaningful state, and the category/header bars already override it. */ .dh-page font{font-size:inherit;font-family:inherit} /* Two embeds (captcha, media bbcode). */ .dh-page iframe,.dh-page object,.dh-page embed{max-width:100%;border:0} /* The forum multi-select on search.php. */ .dh-page select[multiple]{width:100%;max-width:100%;min-height:150px} @media (max-width:899px){ .dh-page td[width],.dh-page th[width]{width:auto} .dh-page input[size]{width:100%} .dh-page select[multiple]{min-height:180px} } } @layer components{ /* Flex and grid children need min-width:0 or a long unbroken word (a thread title, a forum name) refuses to shrink and overflows. */ .dh-crumbs-nav{min-width:0;overflow-wrap:anywhere} .dhf-col{min-width:0} } @layer components{ /* =========================================================================== Messages (messages.php). Replaces the u2u.php popup window. Contrast rules, non-negotiable: - every label, timestamp, count and header is var(--text) or var(--text2) - var(--muted) appears nowhere here - no opacity below 1 on any text node Sharp edges only: radius is 2px globally, zero box-shadow, zero glow. =========================================================================== */ .msg-page{max-width:1440px;margin:0 auto;padding:20px 20px 56px} .msg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px} .msg-h1{font-family:var(--font-display);font-size:30px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--text)} .msg-locked{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2);border:1px solid var(--border2);border-left:3px solid var(--amber);background:var(--surface);padding:9px 12px} .msg-flash{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--team);padding:11px 13px;margin-bottom:14px} .msg-flash.is-ok{border-left-color:var(--green);background:var(--green-bg);color:#0e3f24} .msg-flash.is-bad{border-left-color:var(--red);background:var(--red-bg);color:#6d1f16} .msg-shell{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start} .msg-rail{display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--hdr-h) + 15px)} .msg-main{min-width:0;display:flex;flex-direction:column;gap:12px} /* folders */ .msg-folder{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 13px;border-bottom:1px solid var(--s2);color:var(--text);font-size:14px;font-weight:600} .msg-folder:last-of-type{border-bottom:0} .msg-folder:hover{background:var(--s2);text-decoration:none} .msg-folder.is-active{background:var(--s2);box-shadow:inset 3px 0 0 var(--team)} .msg-folder-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;color:var(--text2);border:1px solid var(--border2);padding:3px 5px;min-width:34px;text-align:center;flex:none} .msg-folder-name{flex:1;min-width:0} .msg-folder-n{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2)} .msg-badge{font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:#fff;background:var(--team);padding:3px 7px;min-width:22px;text-align:center} .msg-rail-foot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border);padding:10px 13px;background:var(--s2)} .msg-rail-foot a{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text);padding:5px 0} .msg-rail-foot a:hover{color:var(--team-ink)} /* quota */ .msg-quota-body{padding:13px} .msg-quota-text{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text);margin:0} .msg-quota-text b{color:var(--text);font-weight:700} .msg-meter{height:8px;background:var(--s3);border:1px solid var(--border2);margin-top:9px} .msg-meter span{display:block;height:100%;background:var(--team)} /* list */ .msg-empty{padding:26px 16px;font-size:14px;font-weight:600;color:var(--text2);text-align:center} .msg-table{width:100%;border-collapse:collapse;background:var(--surface)} .msg-table th{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--s2);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border)} .msg-table td{padding:12px;border-bottom:1px solid var(--s2);color:var(--text);font-size:14px;vertical-align:middle} .msg-table tr:last-child td{border-bottom:0} .msg-table tbody tr:hover{background:var(--row-hover)} .msg-table tr.is-unread td{background:#fff} .msg-table tr.is-unread .msg-c-subj a,.msg-table tr.is-unread .msg-c-who{font-weight:700;color:var(--text)} .msg-c-check{width:38px} .msg-c-check input{width:16px;height:16px;accent-color:var(--team);border-radius:0} .msg-c-who{width:180px;font-weight:600;color:var(--text)} .msg-c-subj a{color:var(--text);font-weight:600} .msg-c-subj a:hover{color:var(--team-ink)} .msg-c-date{width:190px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2);white-space:nowrap} .msg-new{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--team);padding:2px 6px;margin-left:8px} .msg-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px;border-top:1px solid var(--border);background:var(--s2)} .msg-bulk-label{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text)} .msg-bulk-move{display:flex;align-items:center;gap:8px;margin-left:auto} .msg-bulk-move .eyebrow{margin-bottom:0;color:var(--text2)} .msg-bulk-move select{min-height:38px;width:auto;min-width:130px} .msg-underform{display:flex;justify-content:flex-end} /* read */ .msg-read-head{padding:16px 18px 14px;border-bottom:1px solid var(--border)} .msg-read-subj{font-family:var(--font-body);font-size:20px;font-weight:700;line-height:1.3;color:var(--text);margin:0 0 8px} .msg-read-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2);margin:0} .msg-read-meta a{color:var(--team-ink);font-weight:700} .msg-read-k{color:var(--text);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:10px} .msg-read-sep{color:var(--border2)} .msg-read-body{padding:18px;font-size:15px;line-height:1.65;color:var(--text)} .msg-read-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:13px 18px;border-top:1px solid var(--border);background:var(--s2)} .msg-inline-form{display:flex;gap:8px;margin-left:auto} .panel-hd-back{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff} .panel-hd-back:hover{color:var(--team)} /* compose / forms */ .msg-compose-body{padding:16px 18px 8px} .msg-compose-body .eyebrow{color:var(--text2);margin-top:16px} .msg-compose-body .eyebrow:first-child{margin-top:0} .msg-compose-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 18px;border-top:1px solid var(--border);background:var(--s2)} .msg-textarea{min-height:240px;line-height:1.6;resize:vertical} .msg-to-row{display:flex;gap:8px;align-items:stretch} .msg-to-row .field{flex:1;min-width:0} .msg-to-row .btn{flex:none;white-space:nowrap} .msg-note{font-size:13.5px;line-height:1.55;color:var(--text2);margin:0 0 4px} .msg-pad{padding:20px} .msg-blocked{font-size:15px;font-weight:700;color:var(--text);margin:0 0 6px} .msg-blocked-why{font-size:14px;color:var(--text2);margin:0} /* autocomplete + people lists */ .msg-suggest{position:relative;z-index:20;margin:4px 0 0;border:1px solid var(--border2);background:var(--surface);max-height:260px;overflow:auto} .msg-people{margin:12px 0 4px;border:1px solid var(--border2);background:var(--surface);max-height:300px;overflow:auto} .msg-people:empty{display:none} .msg-person{display:flex;align-items:center;gap:10px;width:100%;text-align:left;min-height:44px;padding:11px 13px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--text);background:var(--surface);border:0;border-bottom:1px solid var(--s2);cursor:pointer} .msg-person:hover{background:var(--s2);color:var(--team-ink)} .msg-person:focus-visible{outline:2px solid var(--team);outline-offset:-2px} .msg-person-tag{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--team-ink);border:1px solid var(--team);padding:2px 6px;margin-left:auto} /* dialog: the address book, in the page */ .msg-dialog{width:min(460px,calc(100vw - 32px));padding:0;border:1px solid var(--dk-bd);border-radius:var(--radius);background:var(--surface);color:var(--text)} .msg-dialog::backdrop{background:rgba(26,21,16,.62)} .msg-dialog-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;background:var(--hdr-grad);border-bottom:2px solid var(--team)} .msg-dialog-title{font-family:var(--font-display);font-size:17px;letter-spacing:.12em;text-transform:uppercase;color:#fff;line-height:1} .msg-dialog-x{font-size:22px;line-height:1;color:#fff;background:0 0;border:0;cursor:pointer;padding:0 4px;min-height:32px;min-width:32px} .msg-dialog-x:hover{color:var(--team)} .msg-dialog-body{padding:14px} .msg-dialog-hint{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);margin:9px 0 0} @media (max-width:899px){ .msg-shell{grid-template-columns:1fr} .msg-rail{position:static} .msg-c-who{width:auto} .msg-c-date{width:auto;font-size:11px} .msg-page{padding:14px 12px 40px} } @media (max-width:599px){ .msg-table thead{display:none} .msg-table tr{display:grid;grid-template-columns:38px 1fr;border-bottom:1px solid var(--border)} .msg-table td{border-bottom:0;padding:8px 10px} .msg-table .msg-c-check{grid-row:1 / span 3} .msg-table .msg-c-subj{padding-top:10px} .msg-bulk-move{margin-left:0;width:100%} .msg-bulk .btn,.msg-compose-foot .btn{min-height:44px} .msg-inline-form{margin-left:0;width:100%} } } @layer components{ /* Unread count in the primary nav. Solid team orange, white text: 4.9:1. */ .nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:5px;font-family:var(--font-mono);font-size:10.5px;font-weight:700;line-height:1;color:#fff;background:var(--team);border-radius:var(--radius);vertical-align:1px} } @layer components{ /* =========================================================================== Forum view (forumdisplay.php). One column of rows; on a phone each row is a card. Nothing scrolls sideways, nothing is hidden behind an overflow. Contrast: every label, count, timestamp and flag is var(--text) or var(--text2). var(--muted) is not used. No opacity on text. No shadows, no glows, no rounded pills — 2px radius everywhere, per the design system. =========================================================================== */ /* Inline SVG icons. dh_icon() emits ; these are the geometry rules it relies on. */ .ic{width:16px;height:16px;flex:none;fill:none;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter} .fd-page{max-width:1440px;margin:0 auto;padding:20px 20px 56px} .fd-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text2);margin-bottom:14px} .fd-crumbs a{color:var(--text2);font-weight:600} .fd-crumbs a:hover{color:var(--team-ink)} .fd-crumbs-here{color:var(--text);font-weight:700} /* hero */ .fd-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--team);padding:20px;margin-bottom:14px} .fd-hero-text{min-width:0;flex:1} .fd-title{font-family:var(--font-display);font-size:clamp(28px,3.4vw,40px);line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--text)} .fd-desc{font-size:14.5px;line-height:1.55;color:var(--text2);margin:9px 0 0;max-width:70ch} .fd-stats{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 0;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text2)} .fd-stat-n{color:var(--text);font-weight:700;font-size:13px;margin-right:4px} .fd-stat-mod{color:var(--team-ink);font-weight:700;border-left:1px solid var(--border);padding-left:18px} .fd-hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap} /* buttons */ .fd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;font-family:var(--font-body);font-size:13.5px;font-weight:700;letter-spacing:.01em;color:var(--text);background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);cursor:pointer;transition:background .14s ease,border-color .14s ease,color .14s ease} .fd-btn .ic{stroke:currentColor} .fd-btn:hover{background:var(--s2);border-color:var(--team);color:var(--team-ink);text-decoration:none} .fd-btn:active{transform:translateY(1px)} .fd-btn:focus-visible{outline:2px solid var(--team);outline-offset:2px} .fd-btn-primary{background:var(--team);border-color:var(--team);color:#fff} .fd-btn-primary:hover{background:#c94d0e;border-color:#c94d0e;color:#fff} .fd-btn-ghost{background:var(--dk);border-color:var(--dk);color:#fff} .fd-btn-ghost:hover{background:#3a2a1a;border-color:#3a2a1a;color:#fff} .fd-btn-quiet{min-height:42px;padding:0 16px} .fd-notice{font-size:13.5px;font-weight:600;color:#6b3d05;background:var(--amber-bg);border:1px solid var(--amber);border-left:3px solid var(--amber);padding:11px 13px;margin-bottom:14px} /* sub-forums */ .fd-subs{margin-bottom:14px} .fd-sub{display:grid;grid-template-columns:minmax(160px,240px) 1fr auto;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--s2);color:var(--text)} .fd-sub:last-child{border-bottom:0} .fd-sub:hover{background:var(--s2);text-decoration:none} .fd-sub-name{font-size:14.5px;font-weight:700;color:var(--text)} .fd-sub-desc{font-size:13px;color:var(--text2)} .fd-sub-n{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap} /* filters */ .fd-filters{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);padding:13px 16px;margin-bottom:12px} .fd-filter{display:flex;flex-direction:column;gap:5px;min-width:190px} .fd-filter .eyebrow{margin-bottom:0;color:var(--text2)} .fd-filter select{min-height:42px;cursor:pointer} .fd-count{margin-left:auto;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)} .fd-count .num{color:var(--text);font-size:13px;margin-right:4px} /* list */ .fd-list{margin-bottom:0} .fd-list-hd,.fd-row{display:grid;grid-template-columns:36px minmax(0,1fr) 92px 92px 200px;align-items:center;gap:14px} .fd-list.has-mod .fd-list-hd,.fd-list.has-mod .fd-row{grid-template-columns:36px minmax(0,1fr) 92px 92px 200px 84px} .fd-list-hd{padding:11px 16px;background:var(--hdr-grad);border-bottom:2px solid var(--team);font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff} .fd-list-hd .fd-col-n,.fd-list-hd .fd-col-last{color:#fff} .fd-list-hd .fd-col-n{text-align:center} .fd-row{padding:14px 16px;border-bottom:1px solid var(--s2);background:var(--surface)} .fd-row:last-of-type{border-bottom:0} .fd-row:hover{background:var(--row-hover)} .fd-row.is-pinned{background:#fdf7f2;box-shadow:inset 3px 0 0 var(--team)} .fd-row.is-pinned:hover{background:#fbf2ea} .fd-col-check input{width:16px;height:16px;accent-color:var(--team);border-radius:0;cursor:pointer} .fd-col-topic{display:flex;align-items:flex-start;gap:13px;min-width:0} .fd-marker{position:relative;flex:none;padding-top:2px} .fd-marker-i{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border2);background:var(--s2)} .fd-marker-i .ic{width:17px;height:17px;stroke:var(--text2)} .fd-marker-i.is-fresh{border-color:var(--team);background:var(--team)} .fd-marker-i.is-fresh .ic{stroke:#fff} .fd-marker-i.is-hot{border-color:var(--red);background:var(--red-bg)} .fd-marker-i.is-hot .ic{stroke:var(--red)} .fd-marker-i.is-locked{border-color:var(--border2);background:var(--s3)} .fd-marker-i.is-locked .ic{stroke:var(--text2)} .fd-marker-dot{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;background:var(--green);border:1px solid #fff} .fd-topic{min-width:0} .fd-flags{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:5px} .fd-flags:empty{display:none} .fd-flag{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--border2);background:var(--s2);color:var(--text)} .fd-flag .ic{width:12px;height:12px} .fd-flag.is-pin{border-color:var(--team);color:#fff;background:var(--team)} .fd-flag.is-pin .ic{stroke:#fff} .fd-flag.is-poll{border-color:var(--border2);color:var(--text);background:var(--surface)} .fd-flag.is-poll .ic{stroke:var(--text)} .fd-flag.is-hot{border-color:var(--red);color:#fff;background:var(--red)} .fd-flag.is-lock{border-color:var(--text2);color:var(--text);background:var(--s3)} .fd-flag.is-fresh{border-color:var(--green);color:#fff;background:var(--green)} .fd-subject{margin:0;font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.01em} .fd-subject a{color:var(--text)} .fd-subject a:hover{color:var(--team-ink);text-decoration:none} .fd-row.is-new .fd-subject a{color:var(--text)} .fd-byline{margin:5px 0 0;font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2)} .fd-byline a{color:var(--text2);font-weight:700} .fd-byline a:hover{color:var(--team-ink)} .fd-col-n{text-align:center} .fd-n{display:block;font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--text);line-height:1.2} .fd-n-label{display:block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text2);margin-top:2px} .fd-col-last{min-width:0} .fd-last-time{display:block;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text)} .fd-last-time:hover{color:var(--team-ink)} .fd-last-by{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fd-col-mod{display:flex;align-items:center;justify-content:flex-end;gap:6px} .fd-mod-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--border2);background:var(--surface)} .fd-mod-btn .ic{stroke:var(--text2)} .fd-mod-btn:hover{border-color:var(--team);background:var(--s2)} .fd-mod-btn:hover .ic{stroke:var(--team-ink)} .fd-mod-btn.is-danger:hover{border-color:var(--red);background:var(--red-bg)} .fd-mod-btn.is-danger:hover .ic{stroke:var(--red)} /* moderator bar */ .fd-modbar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;background:var(--dk);border:1px solid var(--dk-bd);border-top:0;padding:14px 16px} .fd-modbar-label{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff;background:var(--team);padding:6px 9px;align-self:center} .fd-modbar .eyebrow{color:#fff;margin-bottom:5px} .fd-modbar select{min-height:42px;min-width:220px;background:var(--surface);color:var(--text);border-color:var(--dk-bd);cursor:pointer} .fd-modbar-note{width:100%;margin:0;font-family:var(--font-mono);font-size:11px;font-weight:600;color:#ede7e0} /* empty, legend, footer */ .fd-empty{padding:34px 20px;text-align:center} .fd-empty-h{font-size:18px;font-weight:700;color:var(--text);margin:0 0 6px} .fd-empty-p{font-size:14px;color:var(--text2);margin:0 0 16px} .fd-pager{margin-top:14px} .fd-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding:14px 16px;background:var(--surface);border:1px solid var(--border)} .fd-legend li{display:flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2)} .fd-legend .fd-marker-i{width:26px;height:26px} .fd-legend .fd-marker-i .ic{width:14px;height:14px} .fd-legend .fd-marker-dot{position:static;width:11px;height:11px;border-color:var(--border2)} .fd-foot-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px} /* ---------------------------------------------------------------- tablet */ @media (max-width:1099px){ .fd-list-hd,.fd-row,.fd-list.has-mod .fd-list-hd,.fd-list.has-mod .fd-row{grid-template-columns:36px minmax(0,1fr) 76px 76px 170px} .fd-list.has-mod .fd-col-mod{grid-column:2 / -1;justify-content:flex-start} } /* ---------------------------------------------------------------- mobile */ @media (max-width:899px){ .fd-page{padding:14px 12px 40px} .fd-hero{padding:16px;align-items:flex-start} .fd-hero-actions{width:100%} .fd-hero-actions .fd-btn{flex:1 1 auto} .fd-sub{grid-template-columns:1fr;gap:5px} .fd-filters{padding:12px} .fd-filter{min-width:0;flex:1 1 200px} .fd-count{margin-left:0;width:100%} /* Rows become cards. The nine-column table is why the old page was unusable on a phone; this is a two-line card with the numbers on a strip. */ .fd-list-hd{display:none} .fd-row,.fd-list.has-mod .fd-row{grid-template-columns:auto 1fr;gap:10px 12px;padding:14px} .fd-col-topic{grid-column:1 / -1} .fd-col-check{grid-column:1;grid-row:1} .fd-list.has-mod .fd-col-topic{grid-column:2;grid-row:1} .fd-col-n{grid-row:2;text-align:left;display:flex;align-items:baseline;gap:6px} .fd-list.has-mod .fd-col-n{grid-row:2} .fd-n{font-size:13px} .fd-n-label{margin-top:0} .fd-col-last{grid-column:1 / -1;grid-row:3;display:flex;align-items:baseline;gap:8px;border-top:1px solid var(--s2);padding-top:9px} .fd-last-by{margin-top:0} .fd-col-mod{grid-column:1 / -1;grid-row:4;justify-content:flex-start} .fd-mod-btn{width:44px;height:44px} .fd-modbar{flex-direction:column;align-items:stretch} .fd-modbar-label{align-self:flex-start} .fd-modbar select,.fd-modbar .fd-btn{width:100%} .fd-legend{gap:12px 18px} .fd-foot-actions .fd-btn{flex:1 1 auto} } @media (max-width:599px){ .fd-title{font-size:26px} .fd-subject{font-size:15.5px} .fd-filters .fd-btn-quiet{width:100%} .fd-filter select,.fd-modbar select{font-size:16px} /* iOS refuses to not zoom below 16px */ } } @layer components{ /* =========================================================================== Notices: error.php, message.php, dh_notice(), dh_fail_render(). These pages were a bordered table with a heading — the single most "unfinished" surface on the board, and the one people see on their worst day. Now: an accent rule, a mark, an eyebrow, a real headline, and a way out. Contrast: title and body are var(--text); the eyebrow is var(--text2) at 700. =========================================================================== */ .dh-notice-page{max-width:760px;margin:0 auto;padding:clamp(28px,8vh,90px) 20px} /* standalone (dh_notice / dh_fail_render — no app shell around them) */ .dh-notice{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--team);padding:clamp(22px,4vw,38px)} .dh-notice.is-error{border-left-color:var(--red)} .dh-notice.is-info{border-left-color:var(--team)} .dh-notice-eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin:0 0 10px} .dh-notice.is-error .dh-notice-eyebrow{color:var(--red)} .dh-notice-title{font-family:var(--font-display);font-size:clamp(30px,5vw,44px);line-height:1;letter-spacing:.04em;text-transform:uppercase;color:var(--text);margin:0 0 14px} .dh-notice-body{font-size:15.5px;line-height:1.6;color:var(--text);margin:0 0 8px;max-width:62ch} .dh-notice-ref{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2);margin:14px 0 0} .dh-notice-ref b{color:var(--text);letter-spacing:.12em} .dh-notice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px} /* in-shell (templates/error.php, templates/message.php live inside .dh-page) */ .dh-panel-notice{display:flex;gap:clamp(16px,3vw,26px);align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--team);padding:clamp(20px,3.4vw,34px);margin:0 0 18px} .dh-panel-notice.is-error{border-left-color:var(--red)} .dh-panel-notice-mark{flex:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--border2);background:var(--s2);color:var(--text2)} .dh-panel-notice.is-error .dh-panel-notice-mark{border-color:var(--red);background:var(--red-bg);color:var(--red)} .dh-panel-notice.is-info .dh-panel-notice-mark{border-color:var(--team);background:#fbeade;color:var(--team-ink)} .dh-panel-notice-mark svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square} .dh-panel-notice-text{min-width:0} .dh-panel-notice-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin:2px 0 8px} .dh-panel-notice.is-error .dh-panel-notice-eyebrow{color:var(--red)} .dh-panel-notice-title{font-family:var(--font-display);font-size:clamp(26px,3.6vw,36px);line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin:0 0 12px} .dh-panel-notice-body{font-size:15px;line-height:1.6;color:var(--text);max-width:64ch} .dh-panel-notice-body a{color:var(--team-ink);font-weight:700} .dh-panel-notice-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px} @media (max-width:599px){ .dh-panel-notice{flex-direction:column;gap:14px} .dh-panel-notice-actions .fd-btn,.dh-notice-actions .fd-btn{flex:1 1 auto} } } @layer components{ /* =========================================================================== Forum view, second pass. The first pass was correct and characterless. What changed: the board announces itself (accent rule + board tag + a dark scoreboard), rows carry the community colour on hover and when pinned, and the empty state stopped being a shrug. --accent : borders, rules, fills. Never text. --accent-ink : the same hue pushed dark enough to be read as text on white. =========================================================================== */ .fd-hero{position:relative;display:flex;align-items:stretch;justify-content:space-between;gap:clamp(20px,4vw,48px);flex-wrap:wrap; background:var(--surface);border:1px solid var(--border);border-left:0;padding:clamp(20px,2.6vw,30px) clamp(20px,2.6vw,32px);margin-bottom:14px} .fd-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent,var(--team))} .fd-hero-main{flex:1 1 420px;min-width:0;display:flex;flex-direction:column} .fd-board-tag{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-ink,var(--team-ink));margin:0 0 10px} .fd-board-tag span{color:var(--border2);margin:0 4px} .fd-title{font-family:var(--font-display);font-size:clamp(30px,3.8vw,44px);line-height:.95;letter-spacing:.05em;text-transform:uppercase;color:var(--text)} .fd-desc{font-size:14.5px;line-height:1.55;color:var(--text2);margin:10px 0 0;max-width:68ch} .fd-meta{display:flex;align-items:center;gap:10px 22px;flex-wrap:wrap;margin:18px 0 0;padding-top:15px;border-top:1px solid var(--s2); font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2)} .fd-meta-k{display:inline-block;font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin-right:7px} .fd-meta-you{color:var(--accent-ink,var(--team-ink));font-weight:700} .fd-hero-side{display:flex;flex-direction:column;justify-content:space-between;gap:16px;flex:0 0 auto} .fd-score{display:flex;margin:0;border:1px solid var(--dk-bd);background:var(--dk)} .fd-score-cell{padding:12px 22px;text-align:right;flex:1 1 auto;border-right:1px solid var(--dk-bd)} .fd-score-cell:last-child{border-right:0} .fd-score dt{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dk-t);margin-bottom:4px} .fd-score dd{font-family:var(--font-mono);font-size:26px;font-weight:700;line-height:1;color:#fff;margin:0} .fd-hero-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end} /* rows: the accent shows up where the eye already is */ .fd-row:hover{background:var(--row-hover);box-shadow:inset 3px 0 0 var(--accent,var(--team))} .fd-row.is-pinned{background:var(--s2);box-shadow:inset 3px 0 0 var(--accent,var(--team))} .fd-row.is-pinned:hover{background:var(--s3)} .fd-list-hd{background:var(--dk);border-bottom:2px solid var(--accent,var(--team))} .fd-marker-i.is-fresh{border-color:var(--accent,var(--team));background:var(--accent,var(--team))} .fd-flag.is-pin{border-color:var(--accent,var(--team));background:var(--accent,var(--team))} .fd-subject a:hover{color:var(--accent-ink,var(--team-ink))} /* empty state */ .fd-empty{padding:clamp(30px,5vw,52px) 20px;text-align:center} .fd-empty-mark{display:grid;place-items:center;width:56px;height:56px;margin:0 auto 18px;border:1px solid var(--border2);background:var(--s2)} .fd-empty-mark .ic{width:26px;height:26px;stroke:var(--text2)} .fd-empty-h{font-family:var(--font-display);font-size:26px;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin:0 0 8px} .fd-empty-p{font-size:14.5px;line-height:1.55;color:var(--text2);margin:0 auto 20px;max-width:52ch} .fd-empty-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap} @media (max-width:899px){ .fd-hero{padding:18px 16px;gap:18px} .fd-hero:before{width:4px} .fd-hero-side{width:100%} .fd-score{width:100%} .fd-score-cell{text-align:left} .fd-hero-actions{justify-content:stretch} .fd-hero-actions .fd-btn{flex:1 1 auto} .fd-empty-actions .fd-btn{flex:1 1 auto} } } @layer components{ /* =========================================================================== Composer popovers. window.prompt() and window.alert() are gone: a Chrome dialog saying "degenhoops.com says" is the browser's chrome, not ours, and it cannot be styled, cannot be laid out, and cannot show a second field. Both popovers anchor inside .dhc (position:relative) and are clamped to the panel width by place() in app.js. =========================================================================== */ .dhc-pop{position:absolute;z-index:40;width:min(320px,calc(100% - 16px));background:var(--surface); border:1px solid var(--dk-bd);border-top:3px solid var(--team);border-radius:var(--radius);padding:14px} .dhc-pop-label{display:block;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text2);margin:0 0 6px} .dhc-pop-label+.dhc-pop-input{margin-bottom:12px} .dhc-pop-input{width:100%;display:block;font-family:var(--font-body);font-size:14px;line-height:1.4;color:var(--text); background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:10px 11px;min-height:42px} .dhc-pop-input::placeholder{color:var(--text2);opacity:1} .dhc-pop-input:focus{outline:2px solid var(--team);outline-offset:-2px;border-color:var(--team)} .dhc-pop-err{font-family:var(--font-body);font-size:12.5px;font-weight:600;line-height:1.45;color:var(--red); background:var(--red-bg);border-left:3px solid var(--red);padding:8px 10px;margin:0 0 12px} .dhc-pop-err[hidden]{display:none} .dhc-pop-actions{display:flex;justify-content:flex-end;gap:8px} .dhc-pop-actions .btn{min-height:40px;flex:1 1 auto} /* aria-pressed is set by compose.js as the caret moves in and out of a tag. The base rule is up with the rest of .dhc-tool; this adds the popover state. */ .dhc-tool[aria-expanded="true"]{border-color:var(--team);color:var(--team-ink)} .dhc-emoji-pop{z-index:40} /* moderator bar: the refusal reads where the button is, not in a browser modal */ .fd-modbar-note.is-error{color:#fff;font-weight:700} .fd-modbar-note.is-error:before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px; background:var(--team);vertical-align:1px} @media (max-width:599px){ .dhc-pop{width:calc(100% - 16px);left:8px !important} .dhc-pop-actions{flex-direction:column-reverse} } } @layer components{ /* =========================================================================== Header, second pass. What was wrong: a solid orange pill holding the username sat directly on top of the 3px orange rule that closes the bar. Two oranges touching, and the loudest element on the page was a link to your own profile. The accent is now spent once, on the unread badge — the only thing in the header that is ever urgent. =========================================================================== */ .topbar{--hdr-h:60px;background:var(--hdr-bg);position:sticky;top:0;z-index:100; padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)} .topbar:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:linear-gradient(90deg,var(--team) 0%,#8f3208 55%,#3a2a1a 100%)} .topbar-inner{max-width:1440px;height:var(--hdr-h);margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:8px} .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;margin-right:auto} .brand-logo{width:30px;height:30px;border-radius:var(--radius)} .brand-title{font-family:var(--font-display);font-size:22px;line-height:1;letter-spacing:.17em;color:#fff;white-space:nowrap} .brand-sub{font-family:var(--font-mono);font-size:8px;font-weight:600;letter-spacing:.28em;text-transform:uppercase; color:var(--dk-t2);margin-top:3px} .brand:hover .brand-sub{color:var(--team)} .topnav{display:flex;gap:2px;margin-right:8px} .topnav a{position:relative;display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:var(--radius); font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--dk-t)} .topnav a:hover{color:#fff;text-decoration:none} .topnav a.is-active{color:#fff;background:#ffffff0f} .topnav a.is-active:after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;background:var(--team);z-index:2} .topbar-end{display:flex;align-items:center;gap:8px;flex-shrink:0} /* icon button — the DM affordance */ .icon-btn{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--radius); border:1px solid #ffffff1f;background:#ffffff0a;color:var(--dk-t)} .icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter} .icon-btn:hover{background:#ffffff1a;border-color:#ffffff38;color:#fff;text-decoration:none} .icon-btn:focus-visible{outline:2px solid var(--team);outline-offset:2px} .icon-btn.is-active{border-color:var(--team);color:#fff} .icon-btn-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px; display:grid;place-items:center;background:var(--team);color:#fff;border:2px solid var(--hdr-bg); font-family:var(--font-mono);font-size:10px;font-weight:700;line-height:1;border-radius:var(--radius)} /* tooltip: an icon with no name is a puzzle */ .icon-btn[data-tip]:hover:before{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;transform:translateX(-50%); background:var(--dk);border:1px solid var(--dk-bd);color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:600; letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;white-space:nowrap;pointer-events:none;z-index:5} /* user chip: identity, not a call to action */ .user-chip{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 12px 0 6px;border-radius:var(--radius); border:1px solid #ffffff1f;background:#ffffff0a;color:#fff} .user-chip:hover{background:#ffffff1a;border-color:#ffffff38;text-decoration:none} .user-chip:focus-visible{outline:2px solid var(--team);outline-offset:2px} .user-chip.is-active{border-color:var(--team)} .user-chip-avatar{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--radius); background:var(--team);color:#fff;font-family:var(--font-display);font-size:15px;line-height:1;letter-spacing:.04em} .user-chip-name{font-family:var(--font-body);font-size:13px;font-weight:600;color:#fff;max-width:140px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .btn-ghost{display:inline-flex;align-items:center;height:38px;padding:0 15px;border-radius:var(--radius); border:1px solid #ffffff2e;background:0 0;color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600} .btn-ghost:hover{background:#ffffff14;text-decoration:none} .btn-solid{display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:var(--radius); background:var(--team);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:700;border:1px solid var(--team)} .btn-solid:hover{background:#c94d0e;border-color:#c94d0e;color:#fff;text-decoration:none} /* the old pill is retired; anything still asking for it gets the chip */ .btn-login{display:inline-flex;align-items:center;height:38px;padding:0 14px;border-radius:var(--radius); border:1px solid #ffffff1f;background:#ffffff0a;color:#fff;font-size:13px;font-weight:600} .btn-login:hover{background:#ffffff1a;color:#fff;text-decoration:none} @media (max-width:899px){ .topbar-inner{gap:6px;padding:0 14px} .brand{margin-right:8px} .brand-sub{display:none} .topnav a{padding:0 10px;font-size:13px} .user-chip-name{display:none} .user-chip{padding:0 6px} } @media (max-width:599px){ .topbar{--hdr-h:auto} .topbar-inner{flex-wrap:wrap;height:auto;padding:10px 12px;row-gap:8px} .topnav{order:3;width:100%;margin-right:0} .topnav a{flex:1 1 auto;justify-content:center;min-height:42px} .topnav a.is-active:after{bottom:0} .topbar-end{margin-left:auto} .icon-btn,.user-chip,.btn-ghost,.btn-solid{height:42px} } } @layer components{ /* =========================================================================== Control panel (panel.php, formerly memcp.php). Identity card, stat row, quick actions, then the two lists that matter. =========================================================================== */ .mp{display:flex;flex-direction:column;gap:14px} .mp-tabs{display:flex;align-items:stretch;gap:0;overflow-x:auto;scrollbar-width:none; background:var(--surface);border:1px solid var(--border);margin-bottom:16px} .mp-tabs::-webkit-scrollbar{display:none} .mp-tab{display:inline-flex;align-items:center;gap:9px;flex:0 0 auto;min-height:52px;padding:0 18px; border-right:1px solid var(--s2);border-bottom:2px solid #0000; font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text2)} .mp-tab svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:square} .mp-tab:hover{background:var(--s2);color:var(--team-ink);text-decoration:none} .mp-tab.is-active{color:var(--text);border-bottom-color:var(--team);background:var(--surface)} .mp-tabs-sep{flex:1 1 auto;border-right:1px solid var(--s2)} /* identity card */ .mp-id{position:relative;display:flex;align-items:center;gap:clamp(16px,2.6vw,26px);flex-wrap:wrap; background:var(--surface);border:1px solid var(--border);border-left:0;padding:clamp(18px,2.4vw,26px)} .mp-id:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--team)} .mp-id-face{flex:none;display:grid;place-items:center;width:76px;height:76px;background:var(--dk);border:1px solid var(--dk-bd);overflow:hidden} .mp-id-face img{width:100%;height:100%;object-fit:cover} .mp-id-initial{font-family:var(--font-display);font-size:40px;line-height:1;color:#fff;letter-spacing:.04em} .mp-id-body{flex:1 1 260px;min-width:0} .mp-id-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);margin:0 0 6px} .mp-id-name{font-family:var(--font-display);font-size:clamp(28px,3.4vw,38px);line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin:0 0 11px} .mp-id-tags{display:flex;gap:6px;flex-wrap:wrap} .mp-tag{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--text);background:var(--s2);border:1px solid var(--border2);padding:4px 8px} .mp-tag.is-rank{background:var(--team);border-color:var(--team);color:#fff} .mp-id-status{font-size:13.5px;color:var(--text2);margin:10px 0 0;font-style:italic} .mp-id-stats{display:flex;margin:0;border:1px solid var(--dk-bd);background:var(--dk);flex:0 0 auto} .mp-id-stats>div{padding:12px 20px;text-align:right;border-right:1px solid var(--dk-bd)} .mp-id-stats>div:last-child{border-right:0} .mp-id-stats dt{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dk-t);margin-bottom:5px} .mp-id-stats dd{font-family:var(--font-mono);font-size:24px;font-weight:700;line-height:1;color:#fff;margin:0} .mp-id-small{font-size:12.5px !important;font-weight:600 !important;color:#fff} /* quick actions */ .mp-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px} .mp-action{display:flex;flex-direction:column;gap:5px;padding:15px 16px;background:var(--surface); border:1px solid var(--border);border-left:3px solid var(--border2)} .mp-action:hover{border-left-color:var(--team);background:var(--row-hover);text-decoration:none} .mp-action-k{font-family:var(--font-body);font-size:14.5px;font-weight:700;color:var(--text)} .mp-action-v{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mp-action:hover .mp-action-k{color:var(--team-ink)} .mp-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:14px;align-items:start} .mp-panel{overflow:hidden} /* tables */ .mp-table{width:100%;border-collapse:collapse;background:var(--surface)} .mp-table th{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--text);background:var(--s2);text-align:left;padding:9px 13px;border-bottom:1px solid var(--border)} .mp-table td{padding:11px 13px;border-bottom:1px solid var(--s2);color:var(--text);font-size:13.5px;vertical-align:middle} .mp-table tr:last-child td{border-bottom:0} .mp-table tbody tr:hover{background:var(--row-hover)} .mp-table a{color:var(--text);font-weight:600} .mp-table a:hover{color:var(--team-ink)} .mp-c-subj{font-weight:600} .mp-c-when{font-family:var(--font-mono);font-size:11.5px;color:var(--text2);white-space:nowrap} .mp-c-when a{color:var(--text2);font-weight:600} .mp-c-read,.mp-c-n{font-family:var(--font-mono);font-size:12px;color:var(--text);text-align:center;width:70px} .mp-c-icon{width:44px;text-align:center} .mp-empty{color:var(--text2);font-size:13.5px;padding:22px 13px !important;text-align:center} .mp-table-plain td{border-bottom:1px solid var(--s2);background:0 0} .mp-buddies{padding:0 0 6px} .mp-buddies-head{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--s2);padding:8px 13px;margin:0} .mp-dot{width:8px;height:8px;background:var(--border2);flex:none} .mp-dot.is-on{background:var(--green)} @media (max-width:1099px){.mp-cols{grid-template-columns:1fr}} @media (max-width:599px){ .mp-id{flex-direction:column;align-items:flex-start;text-align:left} .mp-id-stats{width:100%} .mp-id-stats>div{flex:1 1 auto;text-align:left} .mp-tab{padding:0 14px;min-height:56px} .mp-table th{display:none} .mp-table td{display:block;border-bottom:0;padding:5px 13px} .mp-table tbody tr{display:block;border-bottom:1px solid var(--s2);padding:8px 0} .mp-c-subj{font-size:15px;padding-top:10px !important} } } @layer components{ /* =========================================================================== Administration panel (admin/index.php). The original was four columns of "» Attachments". This is a dashboard: what is happening, what needs you, then the tools — grouped the way an operator thinks, each with a line saying what it does. The chart is inline SVG. No library, no runtime JS, no request. =========================================================================== */ .ad{max-width:1440px;margin:0 auto;padding:4px 0 20px} .ad-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:16px} .ad-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--team-ink);margin:0 0 8px} .ad-title{font-family:var(--font-display);font-size:clamp(30px,3.6vw,42px);line-height:1;letter-spacing:.05em;text-transform:uppercase;color:var(--text);margin:0} .ad-sub{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2);margin:10px 0 0} .ad-head-actions{display:flex;gap:8px;flex-wrap:wrap} /* the one thing that can demand attention */ .ad-flag{display:flex;align-items:center;gap:14px;background:var(--amber-bg);border:1px solid var(--amber); border-left:4px solid var(--amber);padding:14px 16px;margin-bottom:16px;color:#5c3404;font-size:14px} .ad-flag:hover{background:#fde9b8;text-decoration:none} .ad-flag strong{color:#3f2402} .ad-flag-n{flex:none;display:grid;place-items:center;min-width:38px;height:38px;padding:0 8px;background:var(--amber); color:#fff;font-family:var(--font-mono);font-size:16px;font-weight:700} .ad-flag-go{margin-left:auto;font-size:24px;line-height:1;color:var(--amber)} /* metrics */ .ad-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--border); border:1px solid var(--border);margin-bottom:14px} .ad-metric{background:var(--surface);padding:16px 18px} .ad-metric-k{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text2);margin:0 0 9px} .ad-metric-v{font-family:var(--font-mono);font-size:28px;font-weight:700;line-height:1;color:var(--text);margin:0} .ad-metric-sub{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);margin:8px 0 0} .ad-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px;margin-bottom:20px} .ad-panel{min-width:0} .ad-chart-panel{grid-column:span 2} .ad-none{padding:22px 16px;text-align:center;color:var(--text2);font-size:13.5px} /* chart */ .ad-chart{padding:18px 16px 14px} .ad-chart svg{width:100%;height:150px;display:block;overflow:visible} .ad-bar{fill:var(--team);opacity:1} .ad-bar.is-today{fill:var(--dk)} .ad-bar.is-zero{fill:var(--border2)} .ad-axis{stroke:var(--border);stroke-width:.3} .ad-chart-legend{display:flex;gap:8px 26px;flex-wrap:wrap;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--s2); font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text2)} .ad-chart-legend .num{color:var(--text);font-weight:700;font-size:13px;margin:0 3px} .ad-chart-k{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text)} /* leaderboard rows */ .ad-bar-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 2fr auto;align-items:center;gap:12px; padding:11px 16px;border-bottom:1px solid var(--s2);color:var(--text)} .ad-bar-row:last-child{border-bottom:0} a.ad-bar-row:hover{background:var(--row-hover);text-decoration:none} .ad-bar-name{font-size:13.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-bar-track{height:8px;background:var(--s2);border:1px solid var(--border2)} .ad-bar-fill{display:block;height:100%;background:var(--team)} .ad-bar-fill.is-alt{background:var(--green)} .ad-bar-n{font-family:var(--font-mono);font-size:12.5px;font-weight:700;color:var(--text);min-width:52px;text-align:right} /* people */ .ad-person{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--s2);color:var(--text)} .ad-person:last-child{border-bottom:0} .ad-person:hover{background:var(--row-hover);text-decoration:none} .ad-person-face{flex:none;display:grid;place-items:center;width:34px;height:34px;background:var(--dk);color:#fff; font-family:var(--font-display);font-size:17px;line-height:1} .ad-person-body{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1} .ad-person-name{font-size:13.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-person-meta{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2)} .ad-person-when{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);white-space:nowrap} /* plain key/value rows */ .ad-row{display:grid;grid-template-columns:minmax(100px,1fr) 1.4fr auto;align-items:center;gap:12px; padding:11px 16px;border-bottom:1px solid var(--s2)} .ad-row:last-child{border-bottom:0} .ad-row-k{font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-row-v{font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ad-row-n{font-family:var(--font-mono);font-size:11.5px;font-weight:600;color:var(--text);text-align:right;white-space:nowrap} /* tools */ .ad-tools{margin-bottom:18px} .ad-tools-title{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--text);background:var(--dk);border-bottom:2px solid var(--team);padding:10px 14px;margin:0} .ad-tools-title{color:#fff} .ad-tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--border); border:1px solid var(--border);border-top:0} .ad-tool{display:flex;flex-direction:column;gap:5px;background:var(--surface);padding:14px 15px;color:var(--text);min-height:74px} .ad-tool:hover{background:var(--s2);text-decoration:none;box-shadow:inset 3px 0 0 var(--team)} .ad-tool-name{font-size:14px;font-weight:700;color:var(--text)} .ad-tool:hover .ad-tool-name{color:var(--team-ink)} .ad-tool-blurb{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text2);line-height:1.4} @media (max-width:899px){ .ad-chart-panel{grid-column:span 1} .ad-grid{grid-template-columns:1fr} .ad-head-actions .fd-btn{flex:1 1 auto} .ad-bar-row{grid-template-columns:1fr auto} .ad-bar-track{display:none} } } @layer components{ /* =========================================================================== Legacy admin tables (modlog, control-panel log, member lists, etc.). XMB wraps its data tables in one or two outer
s carrying a fixed width="500" and a bgcolor border cell. That is why the moderator log rendered as a narrow, clipped strip floating in a wide page. These rules neutralise the fixed widths and the wrapper chrome so the INNER data table fills the column and reads like the rest of the board. =========================================================================== */ /* Kill hard-coded pixel widths on legacy CELLS. A table's width="95%" must become 100%, not auto: `width:auto` collapsed every panel to its content and left it sitting narrower than the tab strip above it. NOTE this rule lives inside @layer components on purpose. An `!important` inside a layer beats an `!important` outside one, so overriding it from an appended block does not work. */ .dh-page table[width]{width:100% !important;max-width:100%} .dh-page td[width], .dh-page th[width]{width:auto !important} /* The outer wrapper table (width=500, a single bordercolor cell) becomes a transparent passthrough; the real table inside keeps our card styling. */ .dh-page table table{width:100% !important;max-width:100%;border:0;margin:0;background:0 0} /* A data table that is itself nested (XMB's pattern) still needs the card look, borders and header bar — restore them on the INNERMOST table only. */ .dh-page table table table, .dh-page td > table{width:100% !important;border-collapse:collapse} .dh-page table table td, .dh-page table table th{border-bottom:1px solid var(--s2);padding:11px 14px;background:0 0} .dh-page table table tr:last-child td{border-bottom:0} /* Zebra striping for scanability, since XMB's bgcolor alternation is gone. */ .dh-page .tablerow{background:var(--surface)} .dh-page tr:nth-child(even) > .tablerow{background:var(--row-hover)} .dh-page .tablerow:hover, .dh-page tr:hover > .tablerow{background:var(--s2)} /* The category bar that titles a legacy table: full width, our header gradient. */ .dh-page .category td, .dh-page tr.category > td{padding:11px 14px} /* Pagination footer row (.header colspan) should read as a footer, not a header. */ .dh-page tr.header:last-child td, .dh-page tr.header > td[colspan]{background:var(--s2);color:var(--text2);font-family:var(--font-mono); font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:none;padding:10px 14px} .dh-page tr.header a{color:var(--text);font-weight:700} .dh-page tr.header a:hover{color:var(--team-ink)} /* Remove the stray outer border/padding the wrapper table used to create. */ .dh-page > table > tbody > tr > td[align="center"] > table{margin:0 auto} } @layer components{ /* =========================================================================== Forum-jump dropdown (.dh-jump). A native
`. */ .mp-buddy>td{padding:10px 13px;border-bottom:1px solid var(--s2);vertical-align:middle} .mp-buddy:last-child>td{border-bottom:0} .mp-buddy-who a{font-size:13.5px;font-weight:700;color:var(--text)} .mp-buddy-who a:hover{color:var(--team-ink)} .mp-buddy-status{width:1%;white-space:nowrap} .mp-buddy-do{width:1%;text-align:right;white-space:nowrap} .mp-pill{display:inline-block;padding:3px 9px;border:1px solid var(--border); background:var(--s2);border-radius:var(--radius); font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text2)} .mp-pill.is-on{border-color:var(--green);color:var(--green);background:var(--green-bg)} .mp-mini{display:inline-flex;align-items:center;height:30px;padding:0 11px; border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface); font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text)} .mp-mini:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none} @media (max-width:599px){ .mp-buddy-do{text-align:left} } /* -------------------------------------------------------------------------- 4. Address Book (buddy.php + templates/dh/buddy.php) -------------------------------------------------------------------------- */ .ab{max-width:940px;margin:0 auto;padding:20px 20px 56px; display:flex;flex-direction:column;gap:14px} .ab-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px; background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--team); border-radius:var(--radius);padding:22px 24px} .ab-head-text{min-width:0} .ab-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:var(--team-ink);margin:0 0 6px} .ab-h1{font-family:var(--font-display);font-size:34px;font-weight:400;letter-spacing:.08em; text-transform:uppercase;line-height:1;color:var(--text);margin:0 0 8px} .ab-lede{font-size:13.5px;line-height:1.6;color:var(--text2);margin:0;max-width:52ch} .ab-head-stats{display:flex;gap:26px;margin:0;flex:none} .ab-head-stats div{display:flex;flex-direction:column;gap:3px} .ab-head-stats dt{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text2)} .ab-head-stats dd{margin:0;font-family:var(--font-mono);font-size:22px;font-weight:700; color:var(--text);font-variant-numeric:tabular-nums;line-height:1} .ab-tier{font-family:var(--font-mono);font-size:11px !important;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:5px 9px;border:1px solid var(--border);background:var(--s2); border-radius:var(--radius);color:var(--text)} .ab-tier.is-staff{border-color:var(--team);background:var(--team);color:#fff} .ab-tier.is-trusted{border-color:var(--green);background:var(--green-bg);color:var(--green)} .ab-tier.is-new{border-color:var(--amber);background:var(--amber-bg);color:var(--amber)} .ab-tier.is-blocked{border-color:var(--red);background:var(--red-bg);color:var(--red)} .ab-flash{border-radius:var(--radius);padding:12px 15px;margin:0; font-size:13.5px;font-weight:600;line-height:1.55;border:1px solid var(--border)} .ab-flash.is-ok{background:var(--green-bg);border-color:var(--green);color:var(--green)} .ab-flash.is-bad{background:var(--red-bg);border-color:var(--red);color:var(--red)} .ab-flash.is-info{background:var(--amber-bg);border-color:var(--amber);color:var(--amber)} /* add ------------------------------------------------------------------- */ .ab-add-form{display:flex;align-items:flex-end;gap:12px;padding:16px 18px} .ab-field{position:relative;flex:1 1 auto;min-width:0} .ab-field .field{height:44px} .ab-add-form .fd-btn{flex:none} .ab-suggest{position:absolute;z-index:40;top:calc(100% + 3px);left:0;right:0; margin:0;padding:0;list-style:none;max-height:290px;overflow-y:auto; background:var(--surface);border:1px solid var(--team);border-radius:var(--radius)} .ab-suggest-item{display:flex;align-items:center;gap:11px;padding:9px 12px;cursor:pointer; border-bottom:1px solid var(--s2)} .ab-suggest-item:last-child{border-bottom:0} .ab-suggest-item.is-on,.ab-suggest-item:hover{background:var(--s2)} .ab-suggest-face{display:grid;place-items:center;width:26px;height:26px;flex:none; background:var(--dk);color:var(--dk-t);border-radius:var(--radius); font-family:var(--font-display);font-size:13px;letter-spacing:.04em} .ab-suggest-name{font-size:13.5px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ab-suggest-tag{margin-left:auto;font-family:var(--font-mono);font-size:9px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--team-ink)} /* rows ------------------------------------------------------------------ */ .ab-rows{list-style:none;margin:0;padding:0} .ab-row{display:flex;align-items:center;gap:13px;padding:12px 16px; border-bottom:1px solid var(--s2)} .ab-row:last-child{border-bottom:0} .ab-row:hover{background:var(--row-hover)} .ab-row.is-gone{background:var(--s2)} .ab-face{display:grid;place-items:center;width:38px;height:38px;flex:none; background:var(--dk);color:var(--dk-t);border-radius:var(--radius); font-family:var(--font-display);font-size:17px;letter-spacing:.05em} .ab-list.is-offline .ab-face{background:var(--s3);color:var(--text)} .ab-row.is-gone .ab-face{background:var(--border);color:var(--text2)} .ab-who{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto} .ab-name{font-size:14.5px;font-weight:700;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} a.ab-name:hover{color:var(--team-ink)} .ab-meta{font-family:var(--font-mono);font-size:10.5px;color:var(--text2); display:flex;flex-wrap:wrap;align-items:center;gap:5px} .ab-meta .num{font-size:10.5px;color:var(--text);font-weight:700} .ab-sep{color:var(--border2)} .ab-thread{color:var(--team-ink);font-weight:700} .ab-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:3px 8px;border:1px solid var(--border); background:var(--s2);border-radius:var(--radius);color:var(--text2);flex:none} .ab-actions{display:flex;align-items:center;gap:6px;flex:none} .ab-remove{margin:0} .ab-x{display:grid;place-items:center;width:34px;height:34px;flex:none;cursor:pointer; background:0 0;border:1px solid #0000;border-radius:var(--radius);color:var(--text2)} .ab-x svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square} .ab-x:hover{border-color:var(--red);background:var(--red-bg);color:var(--red)} .ab-x:focus-visible{outline:2px solid var(--team);outline-offset:2px} .ab-none{margin:0;padding:18px 16px;font-size:13.5px;color:var(--text2)} /* empty ----------------------------------------------------------------- */ .ab-empty{padding:46px 24px;text-align:center;display:flex;flex-direction:column; align-items:center;gap:12px} .ab-empty-mark{width:52px;height:52px;fill:none;stroke:var(--border2);stroke-width:2;stroke-linecap:square} .ab-empty-title{font-family:var(--font-display);font-size:22px;font-weight:400;letter-spacing:.08em; text-transform:uppercase;color:var(--text);margin:0} .ab-empty-body{font-size:13.5px;line-height:1.6;color:var(--text2);margin:0;max-width:46ch} .ab-foot{display:flex;align-items:center;gap:8px;justify-content:center; font-family:var(--font-mono);font-size:11px;color:var(--text2);margin:6px 0 0} .ab-foot a{color:var(--text2);font-weight:700} .ab-foot a:hover{color:var(--team-ink)} @media (max-width:899px){ .ab{padding:16px 16px 44px} .ab-head{flex-direction:column;align-items:flex-start;gap:20px} .ab-head-stats{width:100%;justify-content:space-between;gap:14px} .ab-h1{font-size:29px} } @media (max-width:599px){ .ab{padding:12px 12px 36px;gap:11px} .ab-add-form{flex-direction:column;align-items:stretch} .ab-add-form .fd-btn{width:100%} .ab-row{flex-wrap:wrap;row-gap:9px} .ab-who{flex:1 1 60%} .ab-actions{width:100%;justify-content:space-between} .ab-actions .fd-btn{flex:1 1 auto} .ab-head-stats{flex-wrap:wrap;gap:18px 26px} } /* -------------------------------------------------------------------------- 5. Messages: the informational flash used when a new account may reply but not cold-message. Amber, because it is a "not yet", not a failure. -------------------------------------------------------------------------- */ .msg-flash.is-info{background:var(--amber-bg);border:1px solid var(--amber);color:var(--amber)} .msg-head{gap:10px;flex-wrap:wrap} /* Windowed pager (thread.php). The ellipsis is decorative, not a target. */ .pager-gap{display:inline-flex;align-items:center;justify-content:center; min-width:24px;min-height:36px;font-family:var(--font-mono);font-size:12px;color:var(--text2)} .mp-empty-block{padding:26px 16px;text-align:center;color:var(--text2);font-size:13.5px;margin:0} .mp-empty-block a{color:var(--team-ink);font-weight:700} /* ========================================================================== DH v26 — emoji, help centre, admin forum editor, form controls ========================================================================== */ /* -------------------------------------------------------------------------- 1. Emoji smilies. Emitted by include/dh/emoji.php as 😎. A bare emoji inherits 13px body copy and reads as noise; 1.18em with line-height 1 sits it on the baseline at the size Discord and Slack use. `font-family` is a fallback chain, not a preference — the OS emoji font wins everywhere it exists, and the list only matters on Linux desktops. -------------------------------------------------------------------------- */ .emo{ display:inline-block;font-size:1.18em;line-height:1;vertical-align:-.14em; font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif; font-style:normal;font-weight:400;letter-spacing:normal; -webkit-font-smoothing:auto} .post-content .emo,.msg-read-body .emo{font-size:1.22em} .ctitle .emo,.hc-q .emo{font-size:1em} /* Never let an emoji inherit a link's underline or an 's slant. */ a .emo,em .emo,i .emo{font-style:normal;text-decoration:none} /* Legacy composer palette + admin preview */ .sm-cell{padding:0} .sm-btn{display:grid;place-items:center;width:34px;height:34px;cursor:pointer; background:0 0;border:1px solid #0000;border-radius:var(--radius);font-size:17px;line-height:1} .sm-btn:hover{background:var(--s2);border-color:var(--border2)} .sm-btn:focus-visible{outline:2px solid var(--team);outline-offset:1px} .sm-btn .emo{font-size:19px} .sm-warn{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.1em; color:var(--text2);border:1px solid var(--border);padding:1px 4px;margin-left:6px} /* -------------------------------------------------------------------------- 2. Form controls. A native per board holding a checkbox, a text field and three selects, separated by runs of  , indented by more runs of  . Nothing lined up with anything above it, and every control was the same visual weight as the forum name. Now: a flex row per board, indentation by data-depth, and a label above every control. Same input names, so admin/forums.php did not change. -------------------------------------------------------------------------- */ .af-table{width:100%;border-collapse:collapse;background:var(--surface)} .af-table .af-td{padding:0;border:0;background:0 0} .af-tr:hover>.af-td{background:var(--row-hover)} .af-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px; padding:14px 18px;border-bottom:1px solid var(--s2);position:relative} .af-tr:last-child .af-row{border-bottom:0} /* Hierarchy. A rule to the left, not thirteen non-breaking spaces. */ .af-row[data-depth="1"]{padding-left:44px} .af-row[data-depth="2"]{padding-left:76px} .af-row[data-depth="1"]:before,.af-row[data-depth="2"]:before{ content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--border)} .af-row[data-depth="1"]:before{left:22px} .af-row[data-depth="2"]:before{left:54px} .af-row[data-kind="category"]{background:var(--s2);border-bottom:2px solid var(--team)} .af-kind{flex:none;align-self:center; min-width:74px;padding:5px 0; font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--text2)} .af-row[data-kind="category"] .af-kind{color:var(--team-ink)} .af-name{flex:1 1 210px;min-width:150px;font-weight:600 !important} /* Bold, not transformed. `text-transform:uppercase` on a text input changes what the admin sees but not what they typed, and there is no faster way to make someone distrust a form. */ .af-row[data-kind="category"] .af-name{font-size:15px !important;font-weight:700 !important} .af-field{display:flex;flex-direction:column;gap:4px;flex:0 0 auto} .af-lab{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text2);white-space:nowrap} .af-field-order input{width:74px;text-align:center} .af-field select{min-width:120px} .af-field:has(select[name^="moveto"]) select, .af-field:has(select[name^="newffup"]) select, .af-field:has(select[name^="newsubfup"]) select{min-width:180px} .af-spacer{flex:1 1 auto} .af-more{align-self:center;flex:none; display:inline-flex;align-items:center;height:40px;padding:0 12px; border:1px solid var(--border);border-radius:var(--radius);background:var(--surface); font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text2) !important;white-space:nowrap} .af-more:hover{border-color:var(--team);color:var(--team-ink) !important; background:var(--s2);text-decoration:none !important} .af-del{align-self:center;flex:none;display:inline-flex;align-items:center;gap:7px; height:40px;padding:0 11px;cursor:pointer; border:1px solid #0000;border-radius:var(--radius)} .af-del span{font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text2)} .af-del:hover{border-color:var(--red);background:var(--red-bg)} .af-del:hover span{color:var(--red)} .af-del input{accent-color:var(--red)} .af-row:has(.af-del input:checked){background:var(--red-bg);outline:1px solid var(--red);outline-offset:-1px} .af-row:has(.af-del input:checked) .af-name{text-decoration:line-through} /* Create block */ .af-td-new{padding:24px 18px 8px !important;border-top:2px solid var(--border) !important; background:var(--bg) !important} .af-new-title{font-family:var(--font-display);font-size:19px;letter-spacing:.1em; text-transform:uppercase;color:var(--text);margin:0} .af-new-hint{font-size:12.5px;color:var(--text2);margin:2px 0 14px} .af-row-new{background:var(--surface);border:1px solid var(--border); border-left:3px solid var(--team);margin-bottom:10px;padding:14px 16px} .af-td-submit{padding:18px !important;text-align:center;background:var(--bg) !important; border-top:1px solid var(--border) !important} .af-td-submit .submit{min-width:220px} @media (max-width:899px){ .af-row{align-items:stretch;flex-direction:column;gap:10px;padding:14px} .af-row[data-depth="1"]{padding-left:26px} .af-row[data-depth="2"]{padding-left:38px} .af-row[data-depth="1"]:before{left:10px} .af-row[data-depth="2"]:before{left:20px} .af-field,.af-name,.af-more,.af-del{width:100%} .af-field select,.af-field-order input{width:100%;min-width:0} .af-more,.af-del{justify-content:center} .af-spacer{display:none} } /* -------------------------------------------------------------------------- 4. Help centre (faq.php + templates/dh/faq.php) -------------------------------------------------------------------------- */ .hc{max-width:1180px;margin:0 auto;padding:24px 20px 64px} .hc-hero{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--team); border-radius:var(--radius);padding:30px 32px;margin-bottom:20px} .hc-eyebrow{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--team-ink);margin:0 0 8px} .hc-h1{font-family:var(--font-display);font-size:44px;font-weight:400;letter-spacing:.06em; text-transform:uppercase;line-height:1;color:var(--text);margin:0 0 12px} .hc-lede{font-size:15px;line-height:1.62;color:var(--text2);margin:0;max-width:64ch} .hc-lede strong{color:var(--text)} .hc-search{margin-top:22px;max-width:460px} .hc-search .field{height:44px} .hc-search-none{margin:8px 0 0;font-size:13px;color:var(--red);font-weight:600} .hc-body{display:grid;grid-template-columns:246px minmax(0,1fr);gap:26px;align-items:start} .hc-nav{position:sticky;top:calc(var(--hdr-h) + 16px); background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:6px;display:flex;flex-direction:column} .hc-nav-title{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;color:var(--text2);padding:10px 12px 8px;margin:0} .hc-nav-link{display:flex;flex-direction:column;gap:2px;padding:9px 12px; border-left:2px solid #0000;border-radius:0} .hc-nav-link:hover{background:var(--s2);text-decoration:none} .hc-nav-link.is-active{border-left-color:var(--team);background:var(--s2)} .hc-nav-label{font-size:13.5px;font-weight:700;color:var(--text)} .hc-nav-link.is-active .hc-nav-label{color:var(--team-ink)} .hc-nav-sub{font-family:var(--font-mono);font-size:10px;color:var(--text2)} .hc-main{display:flex;flex-direction:column;gap:18px;min-width:0} .hc-sec{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); padding:26px 30px;scroll-margin-top:calc(var(--hdr-h) + 18px)} .hc-h2{font-family:var(--font-display);font-size:27px;font-weight:400;letter-spacing:.07em; text-transform:uppercase;color:var(--text);margin:0 0 14px; padding-bottom:12px;border-bottom:2px solid var(--team)} .hc-intro{font-size:14.5px;line-height:1.62;color:var(--text2);margin:0 0 18px} .hc-q{position:relative;font-family:var(--font-body);font-size:16px;font-weight:700; color:var(--text);margin:26px 0 9px;line-height:1.35;scroll-margin-top:calc(var(--hdr-h) + 18px)} .hc-sec .hc-q:first-of-type{margin-top:6px} .hc-anchor{position:absolute;left:-20px;color:var(--border2) !important;font-weight:400; opacity:0;transition:opacity .12s} .hc-q:hover .hc-anchor,.hc-anchor:focus-visible{opacity:1;text-decoration:none !important} .hc-anchor:hover{color:var(--team-ink) !important} .hc-sec p{font-size:14.5px;line-height:1.66;color:var(--text2);margin:0 0 10px} .hc-sec p b,.hc-sec p strong{color:var(--text)} .hc-sec a{color:var(--team-ink);font-weight:600} .hc-strong{background:var(--s2);border-left:3px solid var(--green);padding:12px 15px; color:var(--text) !important} .hc-note{font-family:var(--font-mono);font-size:12px !important;line-height:1.6 !important; color:var(--text2) !important;border-top:1px dotted var(--border);padding-top:10px;margin-top:14px !important} .hc-list{margin:0 0 12px;padding:0;list-style:none} .hc-list li{position:relative;padding:6px 0 6px 20px;font-size:14.5px;line-height:1.6;color:var(--text2)} .hc-list li:before{content:"";position:absolute;left:0;top:14px;width:7px;height:7px;background:var(--team)} .hc-list li b{color:var(--text)} .hc-rules{counter-reset:hcr;margin:0;padding:0;list-style:none} .hc-rules li{counter-increment:hcr;position:relative;padding:14px 0 14px 52px; border-bottom:1px solid var(--s2);font-size:14.5px;line-height:1.6;color:var(--text2)} .hc-rules li:last-child{border-bottom:0} .hc-rules li:before{content:counter(hcr,decimal-leading-zero);position:absolute;left:0;top:15px; font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--team-ink); border:1px solid var(--border);padding:3px 7px} .hc-rules li b{display:block;color:var(--text);font-size:15px;margin-bottom:3px} .hc-callout{background:var(--s2);border:1px solid var(--border);border-left:3px solid var(--text2); border-radius:var(--radius);padding:15px 17px;margin:18px 0 0} .hc-callout.is-warn{background:var(--amber-bg);border-color:var(--amber)} .hc-callout-title{font-family:var(--font-mono);font-size:10px !important;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--text) !important;margin:0 0 6px !important} .hc-callout.is-warn .hc-callout-title{color:var(--amber) !important} .hc-callout-body,.hc-callout-body p{font-size:13.5px !important;line-height:1.6 !important; color:var(--text2) !important;margin:0 !important} .hc-callout.is-warn .hc-callout-body{color:var(--amber) !important} .hc-callout.is-warn .hc-callout-body b{color:var(--amber)} .hc-table{width:100%;border-collapse:collapse;margin:12px 0 6px;border:1px solid var(--border)} .hc-table th{background:var(--s2);text-align:left;padding:10px 13px;white-space:nowrap; border-bottom:1px solid var(--border); font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;color:var(--text)} .hc-table td{padding:11px 13px;border-bottom:1px solid var(--s2);font-size:13.5px;color:var(--text2)} .hc-table tr:last-child td{border-bottom:0} .hc-table tbody tr:hover{background:var(--row-hover)} .hc-table td b{color:var(--text)} .hc-num{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--text) !important} th.hc-num{text-align:right} .hc-stars{color:var(--team);letter-spacing:2px} .hc-yes{color:var(--green);font-weight:700} .hc-no{color:var(--amber);font-weight:700} .hc-table-code td:first-child{width:44%} .hc-table code,.hc-sec code{font-family:var(--font-mono);font-size:12.5px; background:var(--s2);border:1px solid var(--border);border-radius:var(--radius); padding:1px 5px;color:var(--text)} .hc-sec kbd{font-family:var(--font-mono);font-size:11.5px;background:var(--surface); border:1px solid var(--border2);border-bottom-width:2px;border-radius:var(--radius); padding:2px 6px;color:var(--text)} .hc-chip{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:700; padding:2px 8px;border:1px solid var(--border);background:var(--surface);color:var(--text)} .hc-chip.is-up{border-color:var(--green);background:var(--green-bg);color:var(--green)} .hc-chip.is-down{border-color:var(--red);background:var(--red-bg);color:var(--red)} .hc-emoji-group{margin:12px 0} .hc-emoji-title{font-family:var(--font-mono);font-size:9.5px !important;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--text) !important;margin:0 0 7px !important} .hc-emoji{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none} .hc-emoji li{display:inline-flex;align-items:center;gap:7px;padding:5px 9px 5px 7px; border:1px solid var(--border);background:var(--surface);border-radius:var(--radius)} .hc-emoji code{background:0 0;border:0;padding:0;font-size:11.5px;color:var(--text2)} @media (max-width:1023px){ .hc-body{grid-template-columns:1fr} .hc-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:2px} .hc-nav-title{width:100%;padding-bottom:2px} .hc-nav-link{flex:1 1 auto;border-left:0;border-bottom:2px solid #0000} .hc-nav-link.is-active{border-left:0;border-bottom-color:var(--team)} .hc-nav-sub{display:none} } @media (max-width:599px){ .hc{padding:14px 12px 44px} .hc-hero{padding:22px 18px} .hc-h1{font-size:32px} .hc-sec{padding:20px 16px} .hc-h2{font-size:23px} .hc-anchor{display:none} .hc-table-code td:first-child{width:auto} .hc-table{display:block;overflow-x:auto} } /* ========================================================================== DH v26 — composer attachments, embedded images, locked textarea ========================================================================== */ /* -------------------------------------------------------------------------- 1. The textarea no longer has a drag handle. `resize: vertical` came from the Tailwind base layer. It let the box be pulled out of the panel, and parked a grabber on top of the character counter. compose.js grows the field to fit what you type instead, between a floor and 60vh, so nothing is ever hidden below the fold either. -------------------------------------------------------------------------- */ .dhc-area{resize:none;min-height:240px;overflow-y:hidden;transition:height .08s linear} @media (prefers-reduced-motion:reduce){.dhc-area{transition:none}} @media (max-width:599px){.dhc-area{min-height:200px}} /* An informational note, as opposed to .dhc-alert which is a failure. */ .dhc-note{font-family:var(--font-body);font-size:13px;font-weight:500;line-height:1.55; color:var(--amber);background:var(--amber-bg);border:1px solid var(--amber); border-left:3px solid var(--amber);border-radius:var(--radius);padding:10px 12px;margin:0 0 14px} .dhc-alert{margin:0 0 12px} .dhc-alert:last-of-type{margin-bottom:14px} /* -------------------------------------------------------------------------- 2. Drop zone -------------------------------------------------------------------------- */ .dhc-drop{display:flex;flex-direction:column;align-items:center;gap:10px; padding:26px 18px;cursor:pointer; transition:border-color .12s ease,background .12s ease} .dhc-drop-mark{width:38px;height:38px;flex:none;fill:none;stroke:var(--border2); stroke-width:1.8;stroke-linecap:square;stroke-linejoin:miter} .dhc-drop:hover{border-color:var(--border2);background:var(--s3)} .dhc-drop:hover .dhc-drop-mark{stroke:var(--team)} .dhc-drop.is-over{border-color:var(--team);border-style:solid;background:var(--s3)} .dhc-drop.is-over .dhc-drop-mark{stroke:var(--team)} .dhc-drop:focus-visible{outline:2px solid var(--team);outline-offset:2px} .dhc-drop-hint{display:block;font-family:var(--font-body);font-size:13.5px;line-height:1.5; color:var(--text2);margin:0} .dhc-drop-hint b{display:block;color:var(--text);font-weight:700;margin-bottom:3px} .dhc-drop-sub{display:block;font-family:var(--font-mono);font-size:10.5px;line-height:1.6; letter-spacing:.02em;color:var(--text2)} /* Working: the resize is happening on the main thread and can take a beat on a 12-megapixel photo. Say so rather than looking hung. */ .dhc-drop.is-working{border-style:solid;border-color:var(--team);cursor:progress} .dhc-drop.is-working .dhc-drop-hint b:after{content:" Working\2026";color:var(--team-ink)} .dhc-drop.is-full{cursor:not-allowed;background:var(--s2);border-style:solid} .dhc-drop.is-full .dhc-drop-mark{stroke:var(--border)} /* -------------------------------------------------------------------------- 3. Attachment tray -------------------------------------------------------------------------- */ .dhc-tray{list-style:none;margin:12px 0 0;padding:0; display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} .dhc-tray[hidden]{display:none} .dhc-card{position:relative;display:flex;flex-direction:column; border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden} .dhc-card-img{display:block;width:100%;height:118px;object-fit:cover;background:var(--s2)} .dhc-card-meta{display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-width:0} .dhc-card-name{font-size:12.5px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dhc-card-size{font-family:var(--font-mono);font-size:10px;color:var(--text2)} .dhc-card-x{position:absolute;top:6px;right:6px;display:grid;place-items:center; width:28px;height:28px;cursor:pointer; background:var(--dk);border:1px solid var(--dk-bd);border-radius:var(--radius);color:#fff} .dhc-card-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:square} .dhc-card-x:hover{background:var(--red);border-color:var(--red)} .dhc-card-x:focus-visible{outline:2px solid var(--team);outline-offset:2px} /* The real inputs. CSS, not script, decides whether they are on screen: `html.no-js` (see templates/dh/layout-head.php) or the .is-shown escape hatch compose.js adds when a browser refuses DataTransfer assignment. They used to be hidden by a line of JS at the bottom of compose.js, which meant one thrown exception anywhere above it left five raw file pickers stacked down the page. */ .dhc-files{display:none;flex-direction:column;gap:8px;margin-top:12px} .no-js .dhc-files, .dhc-files.is-shown{display:flex} .no-js .dhc-drop, .no-js .dhc-tray, .no-js .dhc-starters{display:none} .dhc-file{display:flex;align-items:center;gap:12px;padding:10px 12px; border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)} .dhc-file>span{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.12em; text-transform:uppercase;color:var(--text2);flex:none;width:64px} .dhc-file input[type="file"]{font-size:13px;color:var(--text);flex:1 1 auto;min-width:0} /* The Image-URL popover's helper line. */ .dhc-pop-note{font-family:var(--font-mono);font-size:10.5px;line-height:1.55; color:var(--text2);margin:0 0 12px} /* -------------------------------------------------------------------------- 4. Images inside a rendered post `.post-img` is what [img] produces (a , so it stays valid inside

). `.post-shots` is the attachment strip thread.php prints under the body. -------------------------------------------------------------------------- */ .post-img{display:block;margin:12px 0} .post-img a{display:inline-block;max-width:100%;border:1px solid var(--border); border-radius:var(--radius);background:var(--s2);line-height:0} .post-img a:hover{border-color:var(--team);text-decoration:none} .post-img img{display:block;max-width:100%;max-height:520px;width:auto;height:auto} .post-file{display:inline-flex;align-items:center;gap:9px;margin-top:10px; padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius); background:var(--surface);color:var(--text);font-size:13px;font-weight:600} .post-file:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none} .post-file svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square} .post-file-size{font-family:var(--font-mono);font-size:10.5px;color:var(--text2)} .post-file:hover .post-file-size{color:var(--team-ink)} /* Rendered posts inside the legacy chrome get the same treatment. */ .dh-page .post-img img,.dh-page .post-shot img{max-width:100%;height:auto} @media (max-width:599px){ .dhc-tray{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} .dhc-card-img{height:96px} .post-img img{max-height:360px} .post-shot img{max-height:300px} .dhc-drop{padding:20px 14px} } /* ========================================================================== DH v27 — attachments, lightbox, custom select ========================================================================== */ /* Post attachments ------------------------------------------------------- */ .post-shots{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px} .post-shot{margin:0;max-width:100%; border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);overflow:hidden} .post-shot:hover{border-color:var(--border2)} .post-shot-link{position:relative;display:block;line-height:0;background:var(--s2)} .post-shot-link img{display:block;max-width:100%;max-height:460px;width:auto;height:auto} .post-shot-link:hover{text-decoration:none} .post-shot-zoom{position:absolute;top:8px;right:8px;display:grid;place-items:center; width:30px;height:30px;background:var(--dk);border:1px solid var(--dk-bd);border-radius:var(--radius); opacity:0;transition:opacity .12s ease} .post-shot-zoom svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:square} .post-shot-link:hover .post-shot-zoom, .post-shot-link:focus-visible .post-shot-zoom{opacity:1} /* The size and dimensions, as text. They used to be drawn into the pixels. */ .post-shot-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:7px 10px;border-top:1px solid var(--border);background:var(--surface)} .post-shot-name{font-size:12px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .post-shot-meta{font-family:var(--font-mono);font-size:10px;color:var(--text2); white-space:nowrap;flex:none} @media (max-width:599px){ .post-shots{gap:10px} .post-shot-link img{max-height:340px} .post-shot-zoom{opacity:1} } /* Lightbox --------------------------------------------------------------- */ .dhlb{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:14px;padding:48px 24px 24px; background:#1a1510f2} .dhlb-img{max-width:100%;max-height:calc(100vh - 140px);width:auto;height:auto; border:1px solid var(--dk-bd);background:var(--dk);cursor:zoom-out} .dhlb-x{position:absolute;top:14px;right:14px;display:grid;place-items:center; width:40px;height:40px;cursor:pointer; background:0 0;border:1px solid #ffffff40;border-radius:var(--radius);color:#fff} .dhlb-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square} .dhlb-x:hover{background:var(--team);border-color:var(--team)} .dhlb-x:focus-visible{outline:2px solid var(--team);outline-offset:2px} .dhlb-bar{display:flex;align-items:center;gap:16px;max-width:100%} .dhlb-cap{font-family:var(--font-mono);font-size:11px;color:var(--dk-t2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dhlb-open{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--team);flex:none} .dhlb-open:hover{color:#fff} /* Custom select ---------------------------------------------------------- */ .dhs{position:relative;display:inline-block;min-width:200px;max-width:100%} .dhs-native{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px} .dhs-btn{display:flex;align-items:center;justify-content:space-between;gap:10px; width:100%;min-height:40px;padding:0 12px;cursor:pointer; background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius); font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text);text-align:left} .dhs-btn:hover{border-color:var(--team)} .dhs-btn:focus-visible{outline:2px solid var(--team);outline-offset:2px} .dhs.is-open .dhs-btn{border-color:var(--team)} .dhs-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dhs-caret{width:11px;height:8px;flex:none;fill:none;stroke:var(--text2);stroke-width:1.8; stroke-linecap:square;transition:transform .12s ease} .dhs.is-open .dhs-caret{transform:rotate(180deg);stroke:var(--team)} .dhs-list{position:absolute;z-index:120;top:calc(100% + 3px);left:0;right:0; max-height:280px;overflow-y:auto; background:var(--surface);border:1px solid var(--team);border-radius:var(--radius)} .dhs.is-up .dhs-list{top:auto;bottom:calc(100% + 3px)} .dhs-list[hidden]{display:none} .dhs-group{padding:9px 12px 5px;font-family:var(--font-mono);font-size:9px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--text2);background:var(--s2); border-bottom:1px solid var(--border)} /* Orange is an accent, never a text background: #fff on --team is 3.7:1. The keyboard cursor is a left bar; the selected row is the dark ink. */ .dhs-opt{position:relative;padding:10px 12px 10px 15px;font-size:13.5px;font-weight:500; color:var(--text);cursor:pointer;border-bottom:1px solid var(--s2)} .dhs-opt:last-child{border-bottom:0} .dhs-opt:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:0 0} .dhs-opt.is-active{background:var(--s2)} .dhs-opt.is-active:before{background:var(--team)} .dhs-opt.is-selected{background:var(--dk);color:#fff;font-weight:700} .dhs-opt.is-selected.is-active{background:var(--dk)} .dhs-opt[aria-disabled="true"]{color:var(--text2);cursor:default} .dhs-opt[aria-disabled="true"]:before{background:0 0} @media (max-width:599px){ .dhs{min-width:0;width:100%} .dhs-btn{min-height:44px} .dhs-opt{padding:12px} } /* The legacy pages style raw , sharing one class. The select rules won, so every Last Post cell rendered an empty 210px box with a chevron in it. The select is `.dh-forumjump` now. -------------------------------------------------------------------------- */ .dh-page a.dh-jump{width:26px;min-width:0;min-height:0;padding:0;appearance:auto} /* -------------------------------------------------------------------------- 3. Poll -------------------------------------------------------------------------- */ .poll{margin-top:16px;border:1px solid var(--border);border-left:3px solid var(--team); border-radius:var(--radius);background:var(--surface)} .poll-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px; padding:12px 16px;border-bottom:1px solid var(--border);background:var(--s2)} .poll-title{margin:0;font-family:var(--font-display);font-size:16px;font-weight:400; letter-spacing:.12em;text-transform:uppercase;color:var(--text)} .poll-count{font-family:var(--font-mono);font-size:10.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text2)} .poll-flash{margin:0;padding:10px 16px;font-size:13px;font-weight:600; border-bottom:1px solid var(--border)} .poll-flash.is-ok{background:var(--green-bg);color:var(--green)} .poll-flash.is-bad{background:var(--red-bg);color:var(--red)} .poll-form,.poll-results{margin:0;padding:14px 16px;list-style:none} .poll-choices{border:0;padding:0;margin:0 0 14px} .poll-choice{display:flex;align-items:center;gap:11px;padding:11px 12px;cursor:pointer; border:1px solid var(--border);border-radius:var(--radius);background:var(--surface); margin-bottom:8px} .poll-choice:last-child{margin-bottom:0} .poll-choice:hover{border-color:var(--team);background:var(--row-hover)} .poll-choice input{position:absolute;opacity:0;width:1px;height:1px} .poll-choice-box{position:relative;flex:none;width:18px;height:18px; border:2px solid var(--border2);border-radius:var(--radius);background:var(--surface)} .poll-choice input:checked+.poll-choice-box{border-color:var(--team);background:var(--team)} .poll-choice input:checked+.poll-choice-box:after{content:"";position:absolute; inset:3px;background:#fff} .poll-choice input:focus-visible+.poll-choice-box{outline:2px solid var(--team);outline-offset:2px} .poll-choice-text{font-size:14px;color:var(--text);font-weight:600} .poll-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .poll-hint,.poll-foot{font-family:var(--font-mono);font-size:10.5px;line-height:1.6;color:var(--text2);margin:0} .poll-foot{padding:0 16px 14px} .poll-foot a{color:var(--team-ink);font-weight:700} .poll-result{padding:0 0 14px} .poll-result:last-child{padding-bottom:0} .poll-result-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:5px} .poll-result-text{font-size:14px;font-weight:600;color:var(--text)} .poll-result-num{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--text);flex:none} .poll-meter{height:8px;background:var(--s2);border:1px solid var(--border)} .poll-meter>span{display:block;height:100%;background:var(--border2)} .poll-result.is-top .poll-meter>span{background:var(--team)} .poll-result.is-top .poll-result-num{color:var(--team-ink)} .poll-result-votes{display:block;margin-top:4px;font-family:var(--font-mono);font-size:10px;color:var(--text2)} /* Composer: poll answers */ .dhc-poll{list-style:none;margin:0;padding:0;counter-reset:opt} .dhc-poll-row{display:flex;align-items:center;gap:9px;margin-bottom:8px} .dhc-poll-n{flex:none;display:grid;place-items:center;width:26px;height:26px; background:var(--s2);border:1px solid var(--border);border-radius:var(--radius); font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text2)} .dhc-poll-row .dhc-input{flex:1 1 auto;min-width:0} .dhc-poll-x{flex:none;display:grid;place-items:center;width:34px;height:34px;cursor:pointer; background:0 0;border:1px solid #0000;border-radius:var(--radius);color:var(--text2)} .dhc-poll-x svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square} .dhc-poll-x:hover{border-color:var(--red);background:var(--red-bg);color:var(--red)} .dhc-poll-add{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px} .dhc-poll-hint{font-family:var(--font-mono);font-size:10.5px;line-height:1.55;color:var(--text2)} /* -------------------------------------------------------------------------- 4. Today's Posts -------------------------------------------------------------------------- */ .tp{display:flex;flex-direction:column;gap:14px} .tp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap; background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--team); border-radius:var(--radius);padding:18px 20px} .tp-eyebrow{margin:0 0 5px;font-family:var(--font-mono);font-size:9.5px;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--team-ink)} .tp-h1{margin:0;font-family:var(--font-display);font-size:30px;font-weight:400; letter-spacing:.08em;text-transform:uppercase;line-height:1;color:var(--text)} .tp-range{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .dh-page .tp-range label{margin:0;font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--text2);white-space:nowrap} .dh-page .tp-range input[type="number"]{width:74px;min-width:0;margin:0;text-align:center} .tp-range-unit{font-family:var(--font-mono);font-size:11px;color:var(--text2)} .dh-page .tp-range .fd-btn{margin:0;min-height:40px} .tp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .tp-card{display:flex;align-items:stretch;gap:14px; background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--border2); border-radius:var(--radius);padding:13px 14px;transition:border-color .12s ease} .tp-card:hover{border-color:var(--border2);border-left-color:var(--team)} .tp-card.is-unread{border-left-color:var(--team)} .tp-main{flex:1 1 auto;min-width:0} .tp-meta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:5px; font-family:var(--font-mono);font-size:10.5px;color:var(--text2)} .dh-page a.tp-forum{font-weight:700;letter-spacing:.05em;color:var(--team-ink);text-transform:uppercase} .tp-sep{color:var(--border2)} .tp-by a{color:var(--text2);font-weight:600} .tp-badge{font-family:var(--font-mono);font-size:8.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;padding:2px 6px;border:1px solid var(--border); background:var(--s2);color:var(--text2);border-radius:var(--radius)} .tp-badge.is-pin{border-color:var(--amber);color:var(--amber);background:var(--amber-bg)} .tp-badge.is-poll{border-color:var(--team);color:var(--team-ink);background:#e05a1414} .tp-badge.is-lock{border-color:var(--red);color:var(--red);background:var(--red-bg)} .tp-badge.is-hot{border-color:var(--green);color:var(--green);background:var(--green-bg)} .tp-title{margin:0 0 7px;font-size:16px;font-weight:700;line-height:1.35} .dh-page .tp-title a{display:flex;align-items:baseline;gap:8px;color:var(--text);font-weight:700} .dh-page .tp-title a:hover{color:var(--team-ink);text-decoration:none} .tp-dot{flex:none;width:7px;height:7px;background:var(--team);border-radius:var(--radius); transform:translateY(-1px)} .tp-stats{display:flex;flex-wrap:wrap;gap:4px 16px;font-family:var(--font-mono); font-size:10.5px;color:var(--text2)} .tp-stat b{color:var(--text);font-weight:700} .tp-last{min-width:0} .tp-actions{display:flex;align-items:center;gap:6px;flex:none} .dh-page a.tp-open{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 15px; border:1px solid var(--border2);border-radius:var(--radius);background:var(--surface); font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--text)} .tp-open svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square} .dh-page a.tp-open:hover{background:var(--team);border-color:var(--team);color:#fff;text-decoration:none} .dh-page a.tp-jump{display:inline-grid;place-items:center;width:40px;height:40px; border:1px solid var(--border);border-radius:var(--radius);color:var(--text2)} .tp-jump svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:square} .dh-page a.tp-jump:hover{border-color:var(--team);color:var(--team-ink);text-decoration:none} .tp-pages{display:flex;justify-content:center;font-family:var(--font-mono);font-size:11.5px; color:var(--text2);padding:4px 0} .dh-page .tp-pages a{font-weight:700;padding:0 5px} .tp-empty{display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center; background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:46px 20px} .tp-empty-title{margin:0;font-family:var(--font-display);font-size:22px;font-weight:400; letter-spacing:.08em;text-transform:uppercase;color:var(--text)} .tp-empty-body{margin:0;font-size:13.5px;color:var(--text2)} @media (max-width:699px){ .tp-head{flex-direction:column;align-items:stretch;gap:16px;padding:16px} .tp-h1{font-size:25px} .tp-range{width:100%} .dh-page .tp-range .fd-btn{flex:1 1 auto} .tp-card{flex-direction:column;gap:11px} .tp-actions{width:100%} .dh-page a.tp-open{flex:1 1 auto;justify-content:center;min-height:44px} .dh-page a.tp-jump{width:44px;height:44px} .tp-title{font-size:15px} .poll-choice{padding:13px 12px} .dhc-poll-row{gap:7px} .dhc-poll-n{width:24px;height:24px} } /* ========================================================================== DH v31 — composer: starters, help text, guide rail, footer note Contrast contract for this block: every character a member has to read is var(--text) (#3d3830) or var(--text2) (#5c564e) on --surface (#fff) or --s2 (#eae6df). Both clear 7:1. var(--muted) appears nowhere. No opacity on text, no shadow, no glow, no radius past the 2px --radius token. ========================================================================== */ /* Under-field help. This is instruction, not decoration, so it reads at --text2 and never at --muted. */ .dhc-help{font-family:var(--font-body);font-size:12.5px;line-height:1.5; color:var(--text2);margin:6px 0 0} .dhc-help+.dhc-count{margin-top:4px} /* -------------------------------------------------------------------------- Post starters A row of skeletons above the toolbar. Reads as one control, not five buttons, because the eyebrow label anchors it. -------------------------------------------------------------------------- */ .dhc-starters{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 9px} .dhc-starters-k{font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text2);margin-right:2px} .dhc-starter{font-family:var(--font-body);font-size:12.5px;font-weight:600; line-height:1;color:var(--text);background:var(--surface); border:1px solid var(--border2);border-radius:var(--radius); min-height:32px;padding:0 12px;cursor:pointer; display:inline-flex;align-items:center; transition:border-color .12s ease,color .12s ease,background .12s ease} .dhc-starter:hover{border-color:var(--team);color:var(--team-ink);background:var(--s2)} .dhc-starter:active{border-color:var(--team);background:var(--s3)} .dhc-starter:focus-visible{outline:2px solid var(--team);outline-offset:1px} /* -------------------------------------------------------------------------- "Before you post" rail card -------------------------------------------------------------------------- */ .dhc-guide{list-style:none;margin:0;padding:0} .dhc-guide li{color:var(--text2);border-bottom:1px solid var(--s2); padding:11px 14px;font-size:12.5px;line-height:1.5} .dhc-guide li:last-child{border-bottom:0} .dhc-guide li b{display:block;color:var(--text);font-weight:700; font-size:13px;margin-bottom:2px} /* -------------------------------------------------------------------------- Composer footer The note sits left, the buttons right. .dhc-foot already flips to column-reverse on a phone so the primary action lands on top; the note then falls to the bottom, which is where a reminder belongs. -------------------------------------------------------------------------- */ .dhc-foot{flex-wrap:wrap} .dhc-foot-note{flex:1 1 220px;min-width:0;margin:0; font-family:var(--font-body);font-size:12px;line-height:1.5; color:var(--text2);text-align:left} @media (max-width:599px){ .dhc-foot-note{flex-basis:100%;text-align:center;margin-bottom:2px} .dhc-starters{gap:6px} .dhc-starter{min-height:38px;font-size:13px} } /* -------------------------------------------------------------------------- Write / Preview The tabs sit directly on top of the toolbar, which sits directly on top of the textarea: one continuous control, joined by shared borders rather than separated by gaps. Sharp edges throughout, per the design system. -------------------------------------------------------------------------- */ .dhc-modes{display:flex;gap:0;margin:0} .no-js .dhc-modes{display:none} .dhc-mode{font-family:var(--font-mono);font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase; color:var(--text2);background:var(--s2); border:1px solid var(--border2);border-bottom:0;border-right:0; min-height:34px;padding:0 16px;cursor:pointer; display:inline-flex;align-items:center} .dhc-mode:last-of-type{border-right:1px solid var(--border2)} .dhc-mode:hover{color:var(--text);background:var(--s3)} .dhc-mode:focus-visible{outline:2px solid var(--team);outline-offset:-2px} /* The active tab reads as part of the panel below it, not as a chip. */ .dhc-mode.is-on{color:var(--text);background:var(--surface); border-bottom:0;position:relative} .dhc-mode.is-on:after{content:"";position:absolute;top:-1px;left:-1px;right:-1px; height:2px;background:var(--team)} /* -------------------------------------------------------------------------- Preview pane Inherits .post-content, so a preview is pixel-identical to the posted thread. Only the chrome is added here. -------------------------------------------------------------------------- */ .dhc-preview{border:1px solid var(--border2);background:var(--surface); padding:14px 14px 16px;min-height:230px; color:var(--text);font-size:15px;line-height:1.62;overflow-wrap:anywhere} .dhc-preview[hidden]{display:none} .dhc-preview>p:first-child{margin-top:0} .dhc-preview>p:last-child{margin-bottom:0} @media (max-width:599px){ .dhc-preview{min-height:190px} .dhc-mode{min-height:42px;padding:0 14px} } /* ========================================================================== DH v33 — thread actions: save, follow, report Contrast contract: --text (#3d3830, 11.62:1 on white) for an inactive chip, --dk-t on --dk (13.03:1) for an active one. NOT white on --team -- that measures 3.72:1 and fails AA at 11px. No --muted, no opacity on text, no shadow, no glow; radius stays on the 2px token. ========================================================================== */ /* A

inside .post-actions must not break the flex row. */ .chip-form{display:inline-flex;margin:0} .chip-form .chip{border:1px solid var(--border);background:var(--surface)} /* Icons inside a chip. Stroked by default; the active state fills them, which is what turns an outline star into a solid one without a second icon. */ .chip .ic{width:15px;height:15px;flex:none;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:square;stroke-linejoin:miter} /* Report is an action nobody should be nudged toward. Same size and same contrast as its neighbours -- it is just not competing for attention. */ .chip-quiet{color:var(--text2)} .chip-quiet:hover{color:var(--red);border-color:var(--red);background:var(--red-bg)} /* On. The chip IS the state; there is no separate indicator to fall out of sync. --dk, not --team. White on --team measures 3.72:1, which fails AA for text this small, and chip text is 11px. --dk-t on --dk is 12.4:1, and it is already how this design system says "active": see .comm-chip.is-active and .dhc-tool[aria-pressed]. The orange stays on the one control that should shout, the primary button. */ .chip.is-on, .chip-form .chip.is-on{background:var(--dk);border-color:var(--dk);color:var(--dk-t);font-weight:700} .chip.is-on .ic{fill:currentColor;stroke:currentColor} .chip.is-on:hover, .chip-form .chip.is-on:hover{background:var(--hdr-bg);border-color:var(--hdr-bg);color:#fff} /* The bell's clapper is a stroke, not a shape: filling it blots the icon. nth-child(2), NOT last-child -- the star is a single path, so `last-child` is the star itself and the rule would un-fill the very thing it is meant to fill. */ .chip.is-on .ic path:nth-child(2){fill:none} .chip-form .chip:focus-visible{outline:2px solid var(--team);outline-offset:2px} /* -------------------------------------------------------------------------- Thread flash Sits above the first post, announced to screen readers, gone on the next navigation. Green for done, red for failed; nothing in between. -------------------------------------------------------------------------- */ .tf-flash{font-family:var(--font-body);font-size:13.5px;font-weight:600;line-height:1.5; border:1px solid;border-left-width:3px;border-radius:var(--radius); padding:10px 13px;margin:0 0 4px} .tf-flash.is-ok{color:var(--green);background:var(--green-bg);border-color:var(--green)} .tf-flash.is-bad{color:var(--red);background:var(--red-bg);border-color:var(--red)} /* The link inherits the flash colour rather than taking --team-ink, which does not have the contrast to sit on --green-bg. Underlined, because a link inside a coloured banner is otherwise indistinguishable from the sentence around it. */ .tf-flash a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;margin-left:4px} .tf-flash a:hover{text-decoration-thickness:2px} @media (max-width:599px){ /* Four chips plus a vote widget will not sit on one phone line. Let them wrap, and give each one a 44px target. */ .post-actions{row-gap:6px} .chip-form .chip{min-height:38px} } /* ========================================================================== DH v34 — editing an existing post Same contrast contract as the rest of the composer: --text (11.62:1 on white) and --text2 (7.25:1). No --muted, no opacity on text, no shadow, no glow, radius on the 2px token. ========================================================================== */ /* Attachments already on the post. A row per file: thumbnail, name and size, and a Remove box. Not a grid -- there are at most two, and a list reads faster. */ .dhc-have{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:8px} .dhc-have-row{display:flex;align-items:center;gap:12px; border:1px solid var(--border);background:var(--surface); border-radius:var(--radius);padding:8px 12px 8px 8px} .dhc-have-thumb{flex:none;display:block;width:56px;height:56px; border:1px solid var(--border);background:var(--s2);border-radius:var(--radius);overflow:hidden} .dhc-have-thumb img{width:100%;height:100%;object-fit:cover;display:block} .dhc-have-thumb.is-file{display:grid;place-items:center} .dhc-have-thumb.is-file .ic{width:22px;height:22px;fill:none;stroke:var(--text2);stroke-width:1.6} .dhc-have-thumb:hover{border-color:var(--team)} .dhc-have-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .dhc-have-name{font-size:13px;font-weight:600;color:var(--text); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dhc-have-size{font-family:var(--font-mono);font-size:10.5px;color:var(--text2)} /* The destructive control reads as destructive only once it is armed. An unchecked box that is already red is crying wolf. */ .dhc-have-rm{flex:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer; font-size:12.5px;font-weight:600;color:var(--text2); border:1px solid var(--border2);border-radius:var(--radius);padding:8px 11px;min-height:38px} .dhc-have-rm input{width:16px;height:16px;border-radius:0;accent-color:var(--red);flex:none} .dhc-have-rm:hover{color:var(--text);border-color:var(--border2);background:var(--s2)} .dhc-have-rm:has(input:checked){color:var(--red);border-color:var(--red);background:var(--red-bg)} .dhc-have-rm:focus-within{outline:2px solid var(--team);outline-offset:1px} /* The moderator's way out to the legacy delete form. Deliberately not a button: it leaves this page and this design system, and it should look like it. */ .dhc-danger{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px; margin:12px 0 0;padding:11px 13px; border:1px solid var(--border);border-left:3px solid var(--red); border-radius:var(--radius);background:var(--surface)} .dhc-danger a{font-size:13.5px;font-weight:700;color:var(--red);text-decoration:underline;text-underline-offset:2px} .dhc-danger a:hover{text-decoration-thickness:2px} .dhc-danger span{font-family:var(--font-mono);font-size:10.5px;color:var(--text2)} @media (max-width:599px){ /* Stack the row: a 56px thumb, a name that can wrap, and a full-width Remove. */ .dhc-have-row{flex-wrap:wrap;row-gap:8px} .dhc-have-meta{flex-basis:calc(100% - 68px)} .dhc-have-rm{flex-basis:100%;justify-content:center;min-height:44px} .dhc-danger{flex-direction:column;gap:4px} } /* ========================================================================== DH v35 — Communities directory Contrast: --text (11.62:1 on white) for names and numbers, --text2 (7.25:1) for labels and descriptions. --accent-ink carries the c/slug and clears 5.0:1. The raw --accent never carries text; it is a 3px stripe. No --muted, no opacity on text, no shadow, no glow; radius on the 2px token. ========================================================================== */ .comm-list{display:flex;flex-direction:column;gap:12px} .comm-group{display:flex;flex-direction:column;gap:0} /* -------------------------------------------------------------------------- The card -------------------------------------------------------------------------- */ .comm-card{position:relative;background:var(--surface); border:1px solid var(--border);border-left:3px solid var(--accent); border-radius:var(--radius);padding:14px 16px 12px; transition:border-color .12s ease} .comm-card:hover{border-color:var(--border2);border-left-color:var(--accent)} .comm-card:focus-within{border-color:var(--border2)} .comm-card-head{display:flex;flex-direction:column;gap:2px;margin-bottom:6px} .comm-card-tag{font-family:var(--font-mono);font-size:11px;font-weight:700; letter-spacing:.06em;color:var(--accent-ink);margin:0} .comm-card-name{margin:0;font-family:var(--font-body);font-size:19px;font-weight:700; line-height:1.25;letter-spacing:-.012em;color:var(--text)} /* The stretched link. One real with real text -- middle-click, "copy link address" and a screen reader all still work -- whose ::after covers the card. */ .comm-card-link{color:var(--text)} .comm-card-link:hover{color:var(--accent-ink);text-decoration:none} .comm-card-link:after{content:"";position:absolute;inset:0;z-index:1;border-radius:var(--radius)} .comm-card-link:focus-visible{outline:none} .comm-card-link:focus-visible:after{outline:2px solid var(--team);outline-offset:2px} .comm-card-desc{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--text2)} /* Latest thread. Sits above the stretched link so it is separately clickable. */ .comm-card-top{position:relative;z-index:2;display:flex;align-items:baseline;gap:8px; margin:0 0 12px;font-size:13px;min-width:0} .comm-card-top-k{flex:none;font-family:var(--font-mono);font-size:9.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text2)} .comm-card-top-a{color:var(--text);font-weight:600; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .comm-card-top-a:hover{color:var(--accent-ink)} .comm-card-empty{margin:0 0 12px;font-size:13px;color:var(--text2)} .comm-card-empty b{color:var(--text)} /* -------------------------------------------------------------------------- Facts, not buttons These used to be two chips: one a link to the board, the other a that looked identical and did nothing. A control that cannot be pressed must not look pressable. -------------------------------------------------------------------------- */ .comm-card-foot{display:flex;align-items:flex-end;justify-content:space-between; gap:16px;flex-wrap:wrap;border-top:1px solid var(--s2);padding-top:10px} .comm-stats{display:flex;align-items:baseline;gap:22px;margin:0;flex-wrap:wrap;min-width:0} .comm-stats>div{display:flex;flex-direction:column;gap:1px;min-width:0} .comm-stats dt{font-family:var(--font-mono);font-size:9.5px;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--text2)} .comm-stats dd{margin:0;font-size:14px;font-weight:700;color:var(--text);line-height:1.2} .comm-stats-last dd{font-size:13px;font-weight:600;color:var(--text2); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* The one real control on the card. z-index puts it over the stretched link. */ .comm-card-post{position:relative;z-index:2;flex:none; display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px; font-family:var(--font-body);font-size:12.5px;font-weight:700; color:var(--text);background:var(--surface); border:1px solid var(--border2);border-radius:var(--radius)} /* --accent-ink, NOT --accent. The comment at the top of communities.php says the raw accent never carries text, and it means it in both directions: white on #E05A14 is 3.72:1 and white on the teal #1098ad is 3.43:1 -- two of the eight boards would fail AA the moment you hovered their button. Every ink clears 5.8:1. */ .comm-card-post:hover{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff;text-decoration:none} .comm-card-post:focus-visible{outline:2px solid var(--team);outline-offset:2px} /* -------------------------------------------------------------------------- Sub-forums Indented and slightly quieter, joined to the parent by a rule rather than a gap, so the nesting reads without a tree line. -------------------------------------------------------------------------- */ .comm-subs{display:flex;flex-direction:column;gap:1px;margin-left:22px; border-left:1px solid var(--border)} .comm-card.is-sub{border-radius:0;border-left-width:2px;padding:11px 14px 10px;margin-top:-1px} .comm-card.is-sub .comm-card-name{font-size:16px} .comm-card.is-sub .comm-card-desc{margin-bottom:8px} .comm-card.is-sub .comm-stats{gap:18px} /* -------------------------------------------------------------------------- Sort + filter bar -------------------------------------------------------------------------- */ .comm-bar{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:wrap;margin-bottom:12px} .comm-sorts{display:flex;background:var(--surface); border:1px solid var(--border);border-radius:var(--radius);overflow:hidden} .comm-sorts a{position:relative;display:inline-flex;align-items:center;min-height:40px; padding:0 15px;font-family:var(--font-mono);font-size:10.5px;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:var(--text2); border-right:1px solid var(--border)} .comm-sorts a:last-child{border-right:0} .comm-sorts a:hover{color:var(--text);background:var(--s2);text-decoration:none} .comm-sorts a.on{color:var(--text)} .comm-sorts a.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--team)} .comm-sorts a:focus-visible{outline:2px solid var(--team);outline-offset:-2px} .comm-filter{flex:1 1 220px;max-width:280px} .comm-filter[hidden]{display:none} .comm-filter .dhc-input{min-height:40px;padding:9px 12px;font-size:13.5px} /* Safari draws a decoration on type=search that ignores the design system. */ .comm-filter input::-webkit-search-decoration, .comm-filter input::-webkit-search-cancel-button{-webkit-appearance:none} .comm-none{margin:0 0 12px;padding:12px 14px;font-size:13.5px;font-weight:600; color:var(--text2);background:var(--surface); border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:var(--radius)} .comm-none[hidden]{display:none} /* -------------------------------------------------------------------------- Narrow screens -------------------------------------------------------------------------- */ @media (max-width:599px){ .comm-bar{flex-direction:column;align-items:stretch} .comm-sorts{overflow-x:auto;scrollbar-width:none} .comm-sorts::-webkit-scrollbar{display:none} .comm-sorts a{flex:none;min-height:44px;padding:0 14px} .comm-filter{max-width:none} .comm-card{padding:13px 14px 11px} .comm-card-name{font-size:17px} .comm-card-foot{align-items:stretch;gap:12px} .comm-stats{gap:0;justify-content:space-between;width:100%} .comm-stats-last{flex:1 1 100%;order:3;margin-top:8px; border-top:1px solid var(--s2);padding-top:8px} .comm-stats-last dd{white-space:normal} .comm-card-post{width:100%;min-height:44px} /* An indent that costs 22px of a 320px screen is an indent nobody needs. */ .comm-subs{margin-left:10px} } /* ========================================================================== DH v36 — auth (login / register) A centered, contained card, so the form stops reading like a full-width spreadsheet. Reuses .panel / .panel-hd / .field / .btn-primary; this block adds only the wrapper, the label rows, the options divider, the check rows and the footer. Renders inside .dh-page, so several rules are scoped under it to win over the legacy shim. Contrast contract unchanged: text is --text / --text2, never --muted for information; sharp 2px edges; no shadow, no glow. ========================================================================== */ .auth{max-width:400px;margin:0 auto;padding:6px 0 40px} .auth-brand{text-align:center;margin-bottom:18px} .auth-brand-title{font-family:var(--font-display);font-size:30px;letter-spacing:.14em; color:var(--hdr-bg);line-height:1} .auth-brand-sub{display:block;font-family:var(--font-mono);font-size:9px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--text2);margin-top:3px} .auth-card{overflow:hidden;margin:0} .auth-body{padding:20px 18px 18px} /* The field height and full width, winning over .dh-page input rules. */ .dh-page .auth-body .field,.dh-page .auth-body input[type="text"],.dh-page .auth-body input[type="password"]{ width:100%;height:44px;margin:0 0 16px;box-sizing:border-box} .auth-body .eyebrow{margin-bottom:6px} .auth-label-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px} .dh-page a.auth-mini{font-family:var(--font-mono);font-size:10px;font-weight:600; letter-spacing:.04em;color:var(--team-ink)} .dh-page a.auth-mini:hover{color:var(--team)} .dh-page .auth-submit{width:100%;min-height:46px;margin:2px 0 0; font-size:14px;font-weight:700} .auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0 14px} .auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--s2)} .auth-divider span{font-family:var(--font-mono);font-size:9px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text2)} .auth-check{display:flex;align-items:center;gap:9px;font-family:var(--font-body); font-size:13px;color:var(--text);margin-bottom:10px;cursor:pointer} .dh-page .auth-check input[type="checkbox"]{width:16px;height:16px; accent-color:var(--team);flex:none;margin:0;vertical-align:0} .auth-name-lbl{display:block;margin:15px 0 6px} .auth-foot{background:var(--s2);border-top:1px solid var(--border);padding:13px 18px; text-align:center;font-family:var(--font-body);font-size:13px;color:var(--text2)} .dh-page .auth-foot a{color:var(--team-ink);font-weight:700} .dh-page .auth-foot a:hover{color:var(--team)} @media (max-width:599px){ .auth{padding:4px 0 32px} .auth-body{padding:18px 14px} .dh-page .auth-submit{min-height:48px} } /* ========================================================================== DH v37 — Favorites / Subscriptions (panel.php manage lists) The two delete-lists, rebuilt as a designed table inside a .panel. The ICON column is gone (it was always empty here). Renders inside .dh-page, so the table rules are scoped under it to beat the legacy shim, and the table's own border/margin are zeroed so it doesn't double up with the panel's edge. On phones the shim stacks each row into blocks; the data-label on every cell keeps that readable. Contrast contract unchanged: --text / --text2 only, no --muted for information, sharp 2px edges, no shadow or glow. ========================================================================== */ .fv{margin:0 auto} .fv .panel{margin:0} .dh-page .fv .fv-table{width:100%;border-collapse:collapse;background:var(--surface); border:0;margin:0;border-radius:0} .dh-page .fv-table thead th{font-family:var(--font-mono);font-size:10px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--text);background:var(--s2); text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap} .fv-table th.fv-c-del,.dh-page .fv-table td.fv-c-del{width:56px;text-align:center} .fv-table th.fv-c-n,.dh-page .fv-table td.fv-c-n{width:84px;text-align:center} .fv-table th.fv-c-forum{width:190px} .fv-table th.fv-c-last{width:240px} .dh-page .fv-table td.fv-c-last,.dh-page .fv-table td.fv-c-forum{white-space:nowrap} .dh-page .fv-table tbody td{padding:13px 14px;border-bottom:1px solid var(--s2); color:var(--text);font-size:14px;vertical-align:middle;background:0 0} .dh-page .fv-table tbody tr:hover>td{background:var(--row-hover)} .dh-page .fv-table td.fv-c-del input[type="checkbox"]{width:16px;height:16px; accent-color:var(--team);margin:0;vertical-align:middle} .dh-page .fv-table td.fv-c-subj a{font-family:var(--font-body);font-size:14.5px; font-weight:700;color:var(--text)} .dh-page .fv-table td.fv-c-subj a:hover{color:var(--team-ink)} .dh-page .fv-table td.fv-c-forum a{font-family:var(--font-mono);font-size:11.5px; font-weight:600;letter-spacing:.05em;color:var(--team-ink)} .dh-page .fv-table td.fv-c-n{font-family:var(--font-mono);font-size:14px;font-weight:700; color:var(--text);text-align:center} .dh-page .fv-table td.fv-c-last a{font-family:var(--font-mono);font-size:11px; color:var(--text2);font-weight:600} .dh-page .fv-table td.fv-c-last a:hover{color:var(--team-ink)} .dh-page .fv-table tr.fv-empty td{padding:28px 16px;text-align:center; color:var(--text2);font-size:14px} .dh-page .fv-table tr.fv-pages td{background:var(--s2);font-family:var(--font-mono); font-size:11.5px;color:var(--text2);padding:10px 14px;border-bottom:1px solid var(--border)} .dh-page .fv-table tr.fv-pages a{color:var(--team-ink);font-weight:700} .dh-page .fv-table tr.fv-foot td{background:var(--s2);border-top:1px solid var(--border); border-bottom:0;padding:14px 16px;text-align:right} .dh-page .fv-table tr.fv-foot input[type="submit"]{width:auto;min-width:210px;min-height:42px; margin:0;font-family:var(--font-body);font-size:13.5px;font-weight:700;color:#fff; background:var(--team);border:0;border-radius:var(--radius);cursor:pointer} .dh-page .fv-table tr.fv-foot input[type="submit"]:hover{background:#c94d0e} @media (max-width:899px){ .dh-page .fv-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .dh-page .fv-table tbody tr{display:block;border-bottom:1px solid var(--border);padding:8px 0} .dh-page .fv-table tbody tr:hover>td{background:0 0} .dh-page .fv-table tbody td{display:block;width:auto;border-bottom:0;padding:4px 14px;text-align:left} .dh-page .fv-table td.fv-c-subj{font-size:15.5px;padding-top:4px} .dh-page .fv-table td.fv-c-n{text-align:left} .dh-page .fv-table td.fv-c-last,.dh-page .fv-table td.fv-c-forum{white-space:normal} .dh-page .fv-table td[data-label]:before{content:attr(data-label) ": "; font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em; text-transform:uppercase;color:var(--text2)} .dh-page .fv-table tr.fv-foot td,.dh-page .fv-table tr.fv-empty td,.dh-page .fv-table tr.fv-pages td{display:block;text-align:center} .dh-page .fv-table tr.fv-foot input[type="submit"]{width:100%;min-width:0} } /* ========================================================================== DH v38 — Registration (member.php?action=reg) The two visible sections (Required, Options) rebuilt as designed panels. The username helper string is gone. Renders inside .dh-page, so field rules are scoped under it to beat the legacy shim. Required fields stack full width; Options fields sit in a 2-up grid that collapses to one column on phones. The theme / language / timezone