/* Shared component contract. See docs/popple-style-routing.md before adding a layer.
   Layout and state remain owned by the core/plugin that supplies the component. */
:root {
  --popple-success:#18794e; --popple-success-plane:#eaf7ef;
  --popple-danger:#b42332; --popple-danger-plane:#fff0f1;
  --popple-warning:#805500; --popple-warning-plane:#fff6dc;
  --popple-info:#2459a6; --popple-info-plane:#edf4ff;
  --popple-media:#080809; --popple-on-media:#fff;
  --popple-scrim:rgba(0,0,0,.6);
  --popple-shadow-color:rgba(0,0,0,.14);
  --popple-navigation-surface:color-mix(in srgb,var(--popple-paper) 94%,transparent);
  --popple-selection:color-mix(in srgb,var(--popple-text) 18%,var(--popple-paper));
  --popple-success-fill:#18794e; --popple-danger-fill:#b42332;
  --popple-warning-fill:#805500; --popple-info-fill:#2459a6;
}
html.ow_dark {
  --popple-success:#79d9a5; --popple-success-plane:#162b20;
  --popple-danger:#ff9ca8; --popple-danger-plane:#321b21;
  --popple-warning:#f0cd7e; --popple-warning-plane:#2d2718;
  --popple-info:#9ac1ff; --popple-info-plane:#19263a;
}
/* These legacy vocabularies are consumed by deeply nested core/plugin controls. */
html body {
  min-width:0;
  --base-muted-color:var(--popple-muted); --base-font-size:14px;
  --admin-font-stack:var(--popple-font); --admin-font-size:14px;
  --admin-heading-font:var(--popple-font); --admin-transition:var(--popple-motion) var(--popple-easing);
  --admin-content-width:1280px; --admin-page-padding:16px;
  --admin-primary-color:var(--popple-text); --admin-accent-color:var(--popple-text);
  --admin-bg-color:var(--popple-paper); --admin-bg-gradient:none;
  --admin-border-color:var(--popple-line); --admin-hover-bg-color:var(--popple-plane);
  --admin-link-color:var(--popple-text); --admin-link-hover-color:var(--popple-muted);
  --admin-card-gradient:none; --admin-hero-bg:none; --admin-hero-overlay:transparent;
  --admin-glass-bg-color:var(--popple-navigation-surface);
  --admin-glass-border-color:var(--popple-line); --admin-card-glow:0 0 transparent;
  --admin-shadow:0 6px 24px var(--popple-shadow-color);
  --mobile-font:var(--popple-font); --mobile-heading-font:var(--popple-font);
  --mobile-radius:var(--popple-control-radius); --mobile-primary-color:var(--popple-text);
  --mobile-accent-color:var(--popple-text); --mobile-bg-color:var(--popple-paper);
  --mobile-bg-gradient:none; --mobile-border-color:var(--popple-line);
  --mobile-muted-color:var(--popple-muted); --mobile-header-bg:var(--popple-paper);
  --mobile-header-bg-color:var(--popple-paper); --mobile-footer-bg:var(--popple-paper);
  --mobile-link-color:var(--popple-text); --mobile-link-hover-color:var(--popple-muted);
  --presence-color:var(--popple-success); --presence-ring-color:var(--popple-success);
}
/* Core menus, notifications, paging, context menus and dialogs share a surface. */
body :is(.floatbox_container,.floatbox_header,.floatbox_body,.floatbox_bottom,
 .ow_tooltip_body,.ow_context_action_list,.ow_console_list,.ow_console_list_wrapper,
 .ow_console_dropdown_cont,.ow_console_dropdown_body,.ow_context_action,
 .ow_mailbox_table,.ow_mailbox_left,.ow_mailbox_right,.ow_mailbox_log_wrap) {
  color:var(--popple-text); background-color:var(--popple-paper);
  background-image:none; border-color:var(--popple-line); text-shadow:none;
}
body :is(.floatbox_header,.floatbox_bottom,.ow_tooltip_body,.ow_context_action_list) { box-sizing:border-box; }
body .floatbox_container { border:1px solid var(--popple-line); border-radius:var(--popple-panel-radius); max-width:calc(100vw - 24px); }
body .floatbox_header { border-radius:var(--popple-panel-radius) var(--popple-panel-radius) 0 0; }
body .floatbox_bottom { border-radius:0 0 var(--popple-panel-radius) var(--popple-panel-radius); }
body :is(.ow_context_action_list,.ow_console_dropdown_body,.ow_tooltip_body) { border-radius:var(--popple-control-radius); }
body :is(.ow_small,.ow_remark,.ow_desc,.ow_time_text,.ow_mailbox_date,.ow_console_description) { color:var(--popple-muted); }
body :is(.ow_paging a,.ow_tabs a,.ow_content_menu a,.ow_context_action_list a) { color:var(--popple-text); text-shadow:none; }
body :is(.ow_paging a:hover,.ow_paging a.active,.ow_tabs li.active a,.ow_content_menu li.active a,.ow_console_list li:hover) {
  background-color:var(--popple-plane); background-image:none; color:var(--popple-text);
}
body :is(.ow_table_1,.ow_table_2) :is(td,th) { border-color:var(--popple-line); }
body :is(.ow_table_1,.ow_table_2) :is(.ow_label,.ow_value,.ow_desc) { color:var(--popple-text); background-color:var(--popple-paper); }
body :is(.ow_box_cap,.ow_box_cap_empty,.ow_box_cap_2,.ow_box_cap h3,.ow_box_cap_empty h3) { color:var(--popple-text); background-color:transparent; text-shadow:none; }
body :is(input[type=number],input[type=url],input[type=tel],input[type=date],input[type=datetime-local],input[type=time]) {
  font:inherit; color:var(--popple-text); background:var(--popple-paper);
  border:1px solid var(--popple-line); border-radius:var(--popple-control-radius);
  padding:10px 12px; max-width:100%; box-sizing:border-box;
}
body :is(input[type=checkbox],input[type=radio],progress,meter) { accent-color:var(--popple-text); }
body :is(input,textarea)::placeholder { color:var(--popple-muted); opacity:1; }
body select option { background:var(--popple-paper); color:var(--popple-text); }
body :is(.ow_error,.error) { color:var(--popple-danger); }
body :is(.ow_message_node.error,.ow_msg_error,.ow_plugin_invalid,.not_valid) { color:var(--popple-danger); background-color:var(--popple-danger-plane); border-color:var(--popple-danger); }
body :is(.ow_message_node.info,.ow_msg_information) { color:var(--popple-info); background-color:var(--popple-info-plane); border-color:var(--popple-info); }
body :is(.ow_message_node.warning,.ow_msg_warning,tr.ow_premoderation_high td) { color:var(--popple-warning); background-color:var(--popple-warning-plane); border-color:var(--popple-warning); }
body :is(.ow_message_node.confirm,.ow_msg_success,.ow_plugin_update) { color:var(--popple-success); background-color:var(--popple-success-plane); border-color:var(--popple-success); }
/* Messaging retains incoming/outgoing geometry and attachment behavior. */
body :is(.ow_chat_dialog,.ow_chat_block,.ow_chat_block_wrap,.ow_chat_in_dialog,
 .ow_mailbox_convers_info,.ow_mailbox_convers_info_new,.ow_mailbox_convers_list,
 .ow_mailbox_log,.ow_chat_selector,.ow_chat_notification,.ow_chat_list) {
  color:var(--popple-text); background-color:var(--popple-paper); border-color:var(--popple-line);
}
body .ow_dialog_item :is(.ow_dialog_in_item,.ow_dialog_in_item p) { color:var(--popple-text); }
body .ow_dialog_item.odd .ow_dialog_in_item { background-color:var(--popple-plane); border-color:var(--popple-line); }
body .ow_dialog_item.even .ow_dialog_in_item { background-color:var(--popple-paper); border-color:var(--popple-line); }
body :is(.ow_dialog_date_cap,.ow_chat_message_block,.ow_chat_mailchat_buttons,.ow_mailbox_reply) { background-color:var(--popple-plane); border-color:var(--popple-line); color:var(--popple-muted); }
body :is(.ow_chat_dialog_wrap,.ow_mailbox_log_wrap) a { color:var(--popple-text); }
body :is(.ow_chat_search_highlight,.ow_mailbox_search_highlight) { color:var(--popple-text); background:var(--popple-plane); font-weight:700; }
/* Upload/edit interfaces are ordinary opaque work surfaces; image stages stay dark. */
body :is(.ow_photo_upload_wrap,.ow_photo_edit_form,.ow_photo_upload_description,.ow_file_attachment_info,.ow_file_attachment_preview) { color:var(--popple-text); background-color:var(--popple-paper); border-color:var(--popple-line); }
body :is(.ow_photo_dragndrop,.ow_file_upload_drop_area) { border:1px dashed var(--popple-muted); border-radius:var(--popple-control-radius); background:var(--popple-plane); color:var(--popple-text); }
body :is(.ow_photo_upload_wrap,.ow_chat_mailchat_inputarea) .CodeMirror { background:var(--popple-paper); color:var(--popple-text); }
body :is(.ow_photo_upload_wrap,.ow_chat_mailchat_inputarea) .CodeMirror-cursor { border-left-color:var(--popple-text); }
body .ow_photoview_stage_wrap { background-color:var(--popple-media); color:var(--popple-on-media); }
body :is(div.tagsinput span.tag,span.tag,li.ow_settings_item.ow_sets_button:hover,li.ow_chat_selector_item.ow_sets_button:hover) { background-image:none; background-color:var(--popple-plane); color:var(--popple-text); }
/* Admin editors, roles, moderation, language/settings rows and plugin controls. */
body.ow_admin_area :is(.ow_admin_profile_questions_list_div,.ow_admin_edit_profile_question,.theme_control_desc_body,.ow_admin_notification_text) { color:var(--popple-text); }
body.ow_admin_area :is(.selected,.ow_table_2 td.selected,.question_placeholder,.section_placeholder) { background-color:var(--popple-plane); color:var(--popple-text); border-color:var(--popple-muted); }
body.ow_admin_area :is(.ow_admin_submenu,.ow_admin_submenu_hover) { background-color:var(--popple-plane); border-color:var(--popple-line); }
body.ow_admin_area :is(.ow_admin_menu_item.active,.ow_admin_submenu) { border-left-color:var(--popple-text); }
body.ow_admin_area :is(.ow_admin_submenu li a,.ow_admin_submenu_hover li a) { color:var(--popple-muted); }
body.ow_admin_area :is(.ow_admin_submenu li.active a,.ow_admin_submenu li:hover a,.ow_admin_submenu_hover li:hover a) { color:var(--popple-text); }
/* The legacy mobile engine has a separate DOM and must consume the same tokens. */
body.popple-native-mobile { margin:0; font-family:var(--popple-font); background:var(--popple-paper); color:var(--popple-text); }
body :is(.owm_page,.owm_content,.owm_box,.owm_list_item,.owm_floatbox_cont,.owm_form_field_container) { color:var(--popple-text); background-color:var(--popple-paper); border-color:var(--popple-line); }
body :is(.owm_header,.owm_nav_menu,.owm_footer,.owm_context_action_body,.owm_sidebar) { color:var(--popple-text); background-color:var(--popple-plane); border-color:var(--popple-line); }
body :is(.owm_remark,.owm_small,.owm_list_item_descr,.owm_newsfeed_date) { color:var(--popple-muted); }
body :is(.owm_btn,.owm_button) { border-radius:var(--popple-control-radius); background-color:var(--popple-text); color:var(--popple-paper); text-shadow:none; }
@media(max-width:767px) {
  body :is(.ow_context_action_list a,.ow_paging a,.owm_btn,.owm_button) { min-height:44px; box-sizing:border-box; }
  body .ow_photo_upload_wrap .ow_suggest_field input { width:100%; }
  body .ow_photo_upload_wrap .ow_photo_preview_block_wrap { display:flex; flex-wrap:wrap; gap:12px; }
  body .ow_photo_upload_wrap .ow_photo_preview_block_wrap .ow_photo_preview_edit { float:none; width:100%; margin:0; }
  body .ow_photo_upload_wrap .ow_photo_preview_block_wrap .ow_photo_preview_edit:nth-child(3n+2) { margin:0; }
}
@media(prefers-reduced-motion:reduce) { body :is(.floatbox_container,.ow_context_action_list,.ow_console_dropdown_body) { animation:none; transition:none; } }
@media(forced-colors:active) { body :is(button,input,select,textarea,.floatbox_container,.ow_context_action_list) { border-color:ButtonText; } }
/* Legacy skin states with their own foreground/background pairs. Keep semantic
   fills and labels together, including hover and descendants of status toasts. */
body .ow_message_cont .ow_message_node.info,body .owm_msg_info { background:var(--popple-info-fill); }
body .ow_message_cont .ow_message_node.warning,body .owm_msg_warning { background:var(--popple-warning-fill); }
body .ow_message_cont .ow_message_node.error,body .owm_msg_error { background:var(--popple-danger-fill); }
body .ow_message_cont .ow_message_node.confirm { background:var(--popple-success-fill); }
body .ow_message_cont .ow_message_node,body .ow_message_node a,body .owm_msg_txt,body .owm_msg_txt a { color:var(--popple-on-media); }
html body .ow_button:hover,html body .ow_button:hover span { background:transparent; }
html body .ow_button input:hover,html body div .ow_positive input[type=submit]:hover,
html body div .ow_positive input[type=button]:hover { background:var(--popple-text); color:var(--popple-paper); }
body .ow_count_bg,body .ow_count_active { background:var(--popple-text); }
body .ow_count { color:var(--popple-paper); }
body .owm_wysiwyg_toolbar a,body .owm_suitup-control { border-radius:var(--popple-control-radius); }
body .owm_suitup-controls a.owm_suitup-control.active { background-color:var(--popple-plane); outline:2px solid var(--popple-text); outline-offset:-2px; }
/* Editor content is an opaque work surface. Its iframe receives these same
   variables from htmlarea.js because CSS inheritance stops at document boundaries. */
body .jhtmlarea,body .jhtmlarea .toolbar,body .input_ws_cont { background:var(--popple-paper); color:var(--popple-text); border-color:var(--popple-line); }
body .jhtmlarea iframe { border:0; max-width:100%; color-scheme:inherit; }
/* Basic settings tables are forms, not data matrices. Stack their labelled rows
   on a phone while retaining real tables for roles, statistics and permissions. */
body table.ow_form { width:100%; max-width:100%; }
body table.ow_form :is(.ow_label,.ow_value,.ow_desc) { overflow-wrap:anywhere; }
body table.ow_form .ow_value :is(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),select,textarea) { max-width:100%; box-sizing:border-box; }
body .owm_suitup-editor { color:var(--popple-text); }
body.ow_admin_area :is(.dnd-pannel,.dnd-hidden-pannel) .ow_navbox { display:flex; align-items:center; gap:12px; min-height:44px; width:auto; max-width:100%; box-sizing:border-box; }
body.ow_admin_area .popple-menu-edit { order:2; margin-inline-start:auto; font-size:12px; }
body.ow_admin_area .popple-menu-edit a { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; text-decoration:underline; }
body.ow_admin_area .ow_admin_glass { background:var(--popple-paper); backdrop-filter:none; -webkit-backdrop-filter:none; }
body.ow_admin_area .ow_button.ow_critical input { background-color:var(--popple-danger-fill); color:var(--popple-on-media); }
@media(max-width:767px) {
  body table.ow_form,body table.ow_form>tbody { display:block; width:100%; }
  body table.ow_form>tbody>tr:not(.ow_hidden):not([hidden]) { display:flex; flex-wrap:wrap; width:100%; box-sizing:border-box; }
  body table.ow_form>tbody>tr>:is(td,th,td.ow_label,td.ow_value,td.ow_desc):not(.ow_hidden):not([hidden]) { display:block; width:100%; max-width:100%; box-sizing:border-box; text-align:start; }
  body table.ow_form>tbody>tr>.ow_label { padding-bottom:4px; }
  body table.ow_form>tbody>tr>.ow_desc { padding-top:4px; font-size:12px; color:var(--popple-muted); }
  body table.ow_form>tbody>tr>.ow_value :is(input[type=text],input[type=password],input[type=email],textarea,select) { width:100%; }
  body table.ow_form .jhtmlarea { max-width:100%; }
  body .owm_suitup-control { min-width:44px; min-height:44px; }
}
@media(prefers-reduced-transparency:reduce),(forced-colors:active) {
  :root { --popple-navigation-surface:var(--popple-paper); }
}