/* SHN forms + theme coordination (2026-10-20). Loaded after every other stylesheet, including dark.css.
   1. One look for every form field, label and button (light and dark), with phone sizing.
   2. Phone layout fixes: settings menu as a swipe strip, URL fields, modals, cookie bar.
   3. Dark mode for the SHN panels that stayed white. Palette = dark.css: page #1e252b, card #262d34, raised #2c353d, field #2b3843, line #2d3a45, text #c1d4e3. */

:root {
  --sf-accent: #c64d53;
  --sf-accent-ring: rgba(198, 77, 83, .18);
  --sf-field: #f5f6f8;
  --sf-field-line: #e2e5ea;
  --sf-text: #1f2328;
  --sf-muted: #6b7280;
  --sf-card: #fff;
  --sf-line: #eceef2;
}
html.night-mode {
  --sf-field: #2b3843;
  --sf-field-line: #36495a;
  --sf-text: #e6edf3;
  --sf-muted: #8ea2b4;
  --sf-card: #262d34;
  --sf-line: #2d3a45;
}

/* ---------- 1. fields (form pages, settings and pop-up forms only; post box, comments and chat keep their own look) ---------- */
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) :is(input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=tel], input[type=date], input:not([type]), select, textarea, .form-control):not(.publisher-box *):not(.comment-textarea):not(.emojionearea *) {
  background: var(--sf-field) !important;
  border: 1px solid var(--sf-field-line) !important;
  border-radius: 12px !important;
  color: var(--sf-text) !important;
  box-shadow: none !important;
  min-height: 46px;
  padding: 10px 14px !important;
  line-height: 1.4 !important;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) textarea:not(.publisher-box *):not(.comment-textarea):not(.emojionearea *) { min-height: 96px; }
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) select:not(.publisher-box *):not(.comment-textarea):not(.emojionearea *) { padding-right: 34px !important; }
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) :is(input, select, textarea):focus {
  outline: none !important;
  border-color: var(--sf-accent) !important;
  box-shadow: 0 0 0 3px var(--sf-accent-ring) !important;
}
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) ::placeholder { color: var(--sf-muted) !important; opacity: 1; }
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) :is(input[readonly], input:disabled, select:disabled) { opacity: .7; }
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) label { color: var(--sf-text); font-weight: 600; }
:is(.setting-panel, .wow_form_fields, .modal-body, form.form-horizontal, .create-article-form, .wo_contact_us, .contact-us) :is(.help-block, small.text-muted, .form-text) { color: var(--sf-muted) !important; font-size: 12.5px; }

/* URL prefix fields (create page / group): prefix shrinks, field fills the rest, nothing spills out of the card */
.content-container .input-group { display: flex !important; width: 100%; max-width: 100%; }
.content-container .input-group > .input-group-addon {
  display: flex; align-items: center; width: auto; max-width: 55%; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--sf-line) !important; color: var(--sf-muted) !important; border: 1px solid var(--sf-field-line) !important;
  border-radius: 12px 0 0 12px !important; font-size: 13px; padding: 0 10px;
}
.content-container .input-group > input, .content-container .input-group > .form-control { flex: 1 1 auto; min-width: 0; width: auto !important; border-radius: 0 12px 12px 0 !important; }
.content-container .input-group > input:first-child, .content-container .input-group > .form-control:first-child { border-radius: 12px !important; }

/* ---------- 2. phones ---------- */
@media (max-width: 767px) {
  /* 16px fields stop iPhones zooming in on tap */
  .content-container :is(input, select, textarea):not([type=checkbox]):not([type=radio]), .modal :is(input, select, textarea) { font-size: 16px !important; }
  .content-container .wow_content, .content-container .wow_form_fields { max-width: 100%; }
  .content-container .row { margin-left: -8px; margin-right: -8px; }

  /* settings: the long menu becomes a sticky swipe strip so the form shows first */
  .setting-panel #wo_main_sett_side { margin-bottom: 8px; }
  .setting-panel .wow_sett_sidebar { padding: 8px !important; border-radius: 16px !important; position: relative; }
  .setting-panel .wow_sett_sidebar > ul, .setting-panel .wow_sett_sidebar ul.list-unstyled {
    display: flex !important; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin: 0 !important; padding: 2px !important;
    scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .setting-panel .wow_sett_sidebar ul::-webkit-scrollbar { display: none; }
  .setting-panel .wow_sett_sidebar ul > li { flex: 0 0 auto; margin: 0 !important; scroll-snap-align: start; border: 0 !important; }
  .setting-panel .wow_sett_sidebar ul > li > a {
    display: inline-flex !important; align-items: center; gap: 6px; white-space: nowrap; padding: 8px 12px !important;
    border-radius: 999px !important; background: var(--sf-field); color: var(--sf-text) !important; font-size: 13.5px; min-height: 38px;
  }
  .setting-panel .wow_sett_sidebar ul > li.active > a, .setting-panel .wow_sett_sidebar ul > li > a.active { background: var(--sf-accent) !important; color: #fff !important; }
  .setting-panel .wow_sett_sidebar ul > li > a svg { width: 16px; height: 16px; }
  .setting-panel .wow_sett_sidebar hr, .setting-panel .wow_sett_sidebar .divider, .setting-panel .wow_sett_sidebar ul > li.divider { display: none !important; }

  /* page headers with Cancel / Create */
  .content-container .wow_content .btn { min-height: 44px; border-radius: 12px; }

  /* modals: near full-width sheet, body scrolls, buttons stay reachable */
  .modal-dialog { width: auto !important; margin: 10px !important; }
  .modal-content { border-radius: 18px !important; max-height: calc(100vh - 20px); display: flex; flex-direction: column; overflow: hidden; }
  .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { display: flex; gap: 8px; flex-wrap: wrap; }
  .modal-footer .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ---------- 3. dark mode: panels that stayed white (":is(body, #sf-boost)" lifts priority above the older white rules) ---------- */
html.night-mode :is(body, #sf-boost) .cc-window { background: #262d34 !important; color: #c1d4e3 !important; border: 1px solid #2d3a45; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
html.night-mode :is(body, #sf-boost) .cc-window a { color: #93c5fd !important; }

html.night-mode :is(body, #sf-boost) .wow_home_stories, html.night-mode :is(body, #sf-boost) .panel.post, html.night-mode :is(body, #sf-boost) .publisher-box,
html.night-mode :is(body, #sf-boost) .shn-command-center, html.night-mode :is(body, #sf-boost) .shn-context-head, html.night-mode :is(body, #sf-boost) .shn-context-actions,
html.night-mode :is(body, #sf-boost) .shn-platform-links, html.night-mode :is(body, #sf-boost) .shn-primary-nav, html.night-mode :is(body, #sf-boost) .shn-rail-profile,
html.night-mode :is(body, #sf-boost) .left-sidebar.wo_new_left_side, html.night-mode :is(body, #sf-boost) .feature_access_item,
html.night-mode :is(body, #sf-boost) .f-stat, html.night-mode :is(body, #sf-boost) .f-region-tabs, html.night-mode :is(body, #sf-boost) .f-nav, html.night-mode :is(body, #sf-boost) .wow_forum_sections {
  background: #262d34 !important; border-color: #2d3a45 !important; color: #c1d4e3;
}
html.night-mode :is(body, #sf-boost) .shn-command-center *:not(svg):not(path):not(img):not(.btn):not(a.shn-cc-pill),
html.night-mode :is(body, #sf-boost) .feature_access_item, html.night-mode :is(body, #sf-boost) .f-stat *, html.night-mode :is(body, #sf-boost) .shn-context-head * { border-color: #2d3a45; }
html.night-mode :is(body, #sf-boost) .shn-mobile-dock { background: rgba(38, 45, 52, .96) !important; border-color: #2d3a45 !important; box-shadow: 0 -6px 24px rgba(0,0,0,.35) !important; }
html.night-mode :is(body, #sf-boost) .shn-mobile-dock a:not(.is-create):not([class*=create]) { color: #c1d4e3 !important; }
html.night-mode :is(body, #sf-boost) .f-stat b, html.night-mode :is(body, #sf-boost) .f-stat strong, html.night-mode :is(body, #sf-boost) .f-stat .num, html.night-mode :is(body, #sf-boost) .f-stat > div:first-child { color: #fff !important; }
html.night-mode :is(body, #sf-boost) .f-stat span, html.night-mode :is(body, #sf-boost) .f-stat small, html.night-mode :is(body, #sf-boost) .f-stat p { color: #8ea2b4 !important; }
html.night-mode :is(body, #sf-boost) .shn-rail-label { color: #8ea2b4 !important; }
html.night-mode :is(body, #sf-boost) .shn-rail-mark { color: #fff !important; }

/* SHN Work "where are you based" note */
html.night-mode :is(body, #sf-boost) .sw-note { background: #33281a !important; border-color: #6b4a1f !important; color: #f5d6a8 !important; }
html.night-mode :is(body, #sf-boost) .sw-note b, html.night-mode :is(body, #sf-boost) .sw-note strong { color: #fde3b8 !important; }

/* tiles and sub-cards inside dark panels */
html.night-mode :is(body, #sf-boost) .wow_home_stories .story, html.night-mode :is(body, #sf-boost) .shn-command-center a[class*=tile],
html.night-mode :is(body, #sf-boost) .shn-command-center [class*=tile], html.night-mode :is(body, #sf-boost) .shn-command-center [class*=card] { background: #2c353d !important; color: #c1d4e3 !important; }
html.night-mode :is(body, #sf-boost) .content-container h1, html.night-mode :is(body, #sf-boost) .content-container h2, html.night-mode :is(body, #sf-boost) .content-container h3,
html.night-mode :is(body, #sf-boost) .content-container h4, html.night-mode :is(body, #sf-boost) .content-container h5 { color: #eef3f8; }

/* ---------- 4. dark mode: SHN colour variables (shn-2026.css) take the dark.css palette ---------- */
html.night-mode {
  --shn-ink: #e6edf3;
  --shn-muted: #8ea2b4;
  --shn-surface: #262d34;
  --shn-canvas: #1e252b;
  --shn-line: #2d3a45;
  --shn-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
html.night-mode :is(body, #sf-boost) .publisher-box textarea.postText { background: #2b3843 !important; color: #e6edf3 !important; }
html.night-mode :is(body, #sf-boost) .post_foot_actions { background: transparent !important; }
html.night-mode :is(body, #sf-boost) .dropdown-menu { background: #2c353d !important; border-color: #2d3a45 !important; }
html.night-mode :is(body, #sf-boost) .dropdown-menu > li > a:hover { background: #34404a !important; }

/* ---------- 5. dark mode: remaining hard-coded light colours (generated by gen_dark.py) ---------- */
/* SHN dark mode, generated 2026-10-20 by gen_dark.py from: shn-2026.css, shn-mobile-2026.css, forum_header.css. Do not edit by hand; re-run the generator. */
/* from shn-2026.css */
html.night-mode :is(body, #sf-boost) .shn-primary-nav>a{color:#e6edf3!important}
html.night-mode :is(body, #sf-boost) .shn-landing .shn-auth-panel{background-color:#262d34!important}
@media(max-width:767px){
html.night-mode :is(body, #sf-boost) .shn-mobile-dock{background-color:rgba(38,45,52,0.94)!important}
html.night-mode :is(body, #sf-boost) .shn-mobile-dock a{color:#8ea2b4!important}
}
html.night-mode :is(body, #sf-boost) .shn-platform-links a:hover{background-color:#2c353d!important}
html.night-mode :is(body, #sf-boost) .shn-app-shell>.leftcol>.shn-primary-nav{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .shn-app-shell .middlecol .publisher-box .postText:focus, html.night-mode :is(body, #sf-boost) .shn-app-shell .middlecol .publisher-box .videoTitle:focus{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .shn-app-shell .middlecol .post-options a:hover, html.night-mode :is(body, #sf-boost) .shn-app-shell .middlecol .post-options label:hover, html.night-mode :is(body, #sf-boost) .shn-app-shell .middlecol .wo_post_types_list a:hover{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .wow_create_modal .create-item, html.night-mode :is(body, #sf-boost) #create-modal .create-item, html.night-mode :is(body, #sf-boost) .create-what-tile{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .wow_forum_sections{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .forum_threads_list, html.night-mode :is(body, #sf-boost) .thread-list{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .fd-head-title{color:#e6edf3!important}
html.night-mode :is(body, #sf-boost) .fd-head-desc{color:#8ea2b4!important}
/* from shn-mobile-2026.css */
html.night-mode :is(body, #sf-boost) .post_foot_actions>#wo_post_stat_button.stats>.stat-item{color:#8ea2b4!important}
html.night-mode :is(body, #sf-boost) .post_foot_actions>:not(#wo_post_stat_button){color:#8ea2b4!important}
@media (max-width:767px){
html.night-mode :is(body, #sf-boost) .left-sidebar.wo_new_left_side{background-color:#262d34!important}
}
html.night-mode :is(body, #sf-boost) .read-blog .read-blog-head, html.night-mode :is(body, #sf-boost) .read-blog .read-blog-head *{color:#8ea2b4!important}
/* from forum_header.css */
html.night-mode :is(body, #sf-boost) .f-stat{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .f-region-tabs{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .f-nav{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .f-country-card{background-color:#262d34!important}
html.night-mode :is(body, #sf-boost) .f-forum-card{background-color:#262d34!important}