/* ============================================================= ChapsV_AppMarketing.css — Marketing Studio (ChapsV_AppMarketing.js). What is NOT here is on purpose: the directory is Builder_DirectoryList's (.applications_element cards), the workspace is the theme workspace's shell (.theme-panel, .th_head, .th_tabbar, .th_body.th_ws_body with its one inset, .th_panel, .th_fill / .th_fillscroll, .th_step, .th_rulebox), chips are .rs_chip, buttons .pf_btn, waits Builder_Busy's, dialogs the .charts_wl_dlg configuration shell (.cfg-field, .ms-cfg-list). Below is only what this package adds, prefixed mk_ — every light rule with its dark twin (body.appbuilder-dark) right under it, in the same edit. ============================================================= */ /* ---- roots: OpenSans, and form controls told so (they never inherit) ---- */ .mkt-panel, .mk_tpl, .mk_popbody { font-family:OpenSans, "Open Sans", sans-serif; } .mkt-panel button, .mkt-panel input, .mkt-panel textarea, .mk_tpl button, .mk_tpl textarea { font-family:inherit; } /* ================================================================ THE DIRECTORY — one card per scope. The research cards' box (340px, one height for the family) and anatomy: title, chips, two lines of brief, the meta row pinned to the bottom. ================================================================ */ .applications_element.mk_card { width:340px; height:184px; vertical-align:top; } .mk_card .applications_element_text { position:static; left:auto; top:auto; width:auto; height:100%; display:flex; flex-direction:column; box-sizing:border-box; overflow:hidden; padding:2px 4px 4px; } .mk_card_title { display:block; line-height:20px; font-weight:600; color:#27251E; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_card .mk_card_chips { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:5px 0 6px; line-height:normal; } .mk_card_aud { max-width:180px; overflow:hidden; } /* Two lines then an ellipsis: a brief is one to three sentences, and a card that grows to fit them breaks the grid's even rows. */ .mk_card .mk_card_brief { margin:0 0 8px; font-size:11.5px; color:#6b7280; line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; } .mk_card .mk_card_brief.is-empty { font-style:italic; color:#9aa0a8; } .mk_card .mk_card_meta { display:flex; flex-wrap:wrap; gap:14px; margin:auto 0 4px; font-size:11px; color:#737485; } .mk_card_meta i { margin-right:4px; opacity:0.7; } body.appbuilder-dark .mk_card_title { color:#e6e6ea; } body.appbuilder-dark .mk_card .mk_card_brief { color:#9aa0ac; } body.appbuilder-dark .mk_card .mk_card_brief.is-empty { color:#7a808c; } body.appbuilder-dark .mk_card .mk_card_meta { color:#9aa0ac; } /* ================================================================ THE WORKSPACE — what the theme shell does not already provide. ================================================================ */ /* No governance ladder under this header: the bottom space it gave, here. */ .mk_head { padding-bottom:12px; } /* A panel's head carries up to five controls here (the house: state, version, Approve, Edit as JSON, Regenerate): on a narrow window they wrap under one another at the right instead of running off the panel's edge. */ /* The title keeps its width (down to a floor); the controls take what is left and wrap inside it — basis 0, so they never squeeze the title instead. */ .mkt-panel .th_panel_head h2 { flex:0 1 auto; min-width:120px; } .mkt-panel .th_panel_head .th_head_actions { flex:1 1 0; min-width:0; flex-wrap:wrap; justify-content:flex-end; } /* A chip that is a door (the header's "awaiting your approval"). */ .mk_chiplink { cursor:pointer; } .mk_chiplink:hover { text-decoration:underline; } /* Three tabs FILL and scroll inside (one list each — never the whole tab); the others scroll as a page. The inset stays the body's (.th_ws_body). */ .mk_body[data-tabbody='sources'], .mk_body[data-tabbody='review'], .mk_body[data-tabbody='runs'] { overflow:hidden; display:flex; flex-direction:column; min-height:0; } .mk_body > .th_fill { flex:1 1 auto; } /* Panels stacked with the one gutter; two columns where two belong. */ .mk_stack { display:flex; flex-direction:column; gap:12px; min-width:0; } .mk_cols { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; align-items:start; } @media (max-width: 1100px) { .mk_cols { grid-template-columns:minmax(0, 1fr); } } .mk_jobslot:empty { display:none; } .mk_jobslot .bz_job { margin-bottom:0; } .mk_empty { font-size:12px; line-height:1.55; color:#6b7280; padding:6px 2px; } .mk_sub_h { font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; margin:14px 0 6px; } .mk_sub_h:first-child { margin-top:0; } .mk_kicker { font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; margin:12px 0 4px; } .mk_kicker:first-child { margin-top:0; } .mk_para { margin:0; font-size:12.5px; line-height:1.6; color:#41506b; white-space:pre-wrap; } .mk_italic { font-style:italic; } .mk_mono { font-family:Menlo, Consolas, monospace; font-size:11px; } .mk_kv { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:11.5px; color:#6b7280; padding:4px 0; } .mk_kv b { color:#27251E; font-weight:600; text-align:right; } .mk_kchip { margin:1px 0; } .mk_list { margin:4px 0 0; padding-left:18px; font-size:12px; line-height:1.6; color:#41506b; } .mk_list li { margin-bottom:3px; } body.appbuilder-dark .mk_empty { color:#9aa0ac; } body.appbuilder-dark .mk_sub_h, body.appbuilder-dark .mk_kicker { color:#8b919b; } body.appbuilder-dark .mk_para { color:#c3c8d0; } body.appbuilder-dark .mk_kv { color:#9aa0ac; } body.appbuilder-dark .mk_kv b { color:#e6e6ea; } body.appbuilder-dark .mk_list { color:#c3c8d0; } /* ---- Overview: what is ready ---- */ .mk_ready { display:flex; align-items:flex-start; gap:10px; padding:9px 0; border-bottom:1px solid #f0f2f5; } .mk_ready:last-child { border-bottom:0; } .mk_ready_i { font-size:15px; margin-top:1px; flex:0 0 auto; } .mk_ready_i.is-ok { color:#0f9d76; } .mk_ready_i.is-warn{ color:#e8850c; } .mk_ready_i.is-off { color:#c8ccd4; } .mk_ready_t { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; } .mk_ready_t b { font-size:12.5px; font-weight:600; color:#27251E; } .mk_ready_t span { font-size:11.5px; color:#6b7280; line-height:1.45; } .mk_ready_a { flex:0 0 auto; font-size:11.5px; align-self:center; } .mk_last_top { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:13px; color:#27251E; } .mk_last_links { margin-top:10px; font-size:11.5px; } .mk_last .th_step_blocked { margin:8px 0 0; } /* What this host can do (rehearse · record video · voice), each with its mark. */ .mk_caps { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; } .mk_cap { display:inline-flex; align-items:center; gap:4px; font-weight:600; } .mk_cap.is-ok { color:#0f9d76; } .mk_cap.is-no { color:#b3261e; } body.appbuilder-dark .mk_cap.is-ok { color:#4fd1a5; } body.appbuilder-dark .mk_cap.is-no { color:#f09a95; } body.appbuilder-dark .mk_ready { border-bottom-color:#33373d; } body.appbuilder-dark .mk_ready_i.is-ok { color:#4fd1a5; } body.appbuilder-dark .mk_ready_i.is-warn { color:#f0a44a; } body.appbuilder-dark .mk_ready_i.is-off { color:#565b64; } body.appbuilder-dark .mk_ready_t b { color:#e6e6ea; } body.appbuilder-dark .mk_ready_t span { color:#9aa0ac; } body.appbuilder-dark .mk_last_top { color:#e6e6ea; } /* ---- Sources: one row per source, the list scrolls inside the panel ---- */ .mk_uploadslot:empty { display:none; } .mk_uploadslot { flex:0 0 auto; padding:10px 12px 0; } .mk_uploadslot .bz_job { margin-bottom:0; } .mk_srclist { padding:0; } .mk_src { display:flex; align-items:center; gap:10px; padding:8px 12px; font-size:12px; border-bottom:1px solid #f0f2f5; cursor:pointer; } .mk_src:hover { background:#f7f9fc; } .mk_src.is-out { opacity:0.55; } .mk_src_inc { display:inline-flex; align-items:center; flex:0 0 auto; margin:0; cursor:pointer; } .mk_src_inc input { margin:0; cursor:pointer; } .mk_src_k { flex:0 0 auto; } .mk_src_t { flex:0 1 auto; min-width:0; max-width:40%; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_src_ref { flex:1 1 auto; min-width:0; font-size:11px; color:#9aa0a8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_src_n { flex:0 0 auto; font-size:11px; color:#9aa0a8; white-space:nowrap; font-variant-numeric:tabular-nums; } .mk_src .pf_btn { flex:0 0 auto; } body.appbuilder-dark .mk_src { border-bottom-color:#33373d; } body.appbuilder-dark .mk_src:hover { background:#2b2f35; } body.appbuilder-dark .mk_src_ref, body.appbuilder-dark .mk_src_n { color:#8b919b; } /* ---- Sources: the app map card on top, at its natural height; the list fills what is left. The gap is the list's, under the card — never an inline margin on what is first in the tab body (it owns the one inset). ---- */ .mk_atlascard { flex:0 0 auto; } .mk_atlascard > .th_panel_body { font-size:12px; } .mk_body[data-tabbody='sources'] > .mk_atlascard + .th_fill { margin-top:12px; } .mk_atlas_facts { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12px; color:#41506b; } .mk_atlas_facts b { font-weight:600; color:#27251E; } .mk_atlas_what { margin:6px 0 0; font-size:11.5px; line-height:1.5; color:#6b7280; } .mk_atlas_what:first-child { margin-top:0; } .mk_atlas_off { margin-top:6px; font-size:11.5px; line-height:1.5; color:#9a6a10; } .mk_atlas_use { display:inline-flex; align-items:center; gap:5px; margin:0 0 0 auto; cursor:pointer; font-size:11.5px; color:#41506b; } .mk_atlas_use input { margin:0; cursor:pointer; } /* An error in the card says why in a line or two, not in a 120 px plate. */ .mk_atlascard .busy_err { min-height:0; padding:8px 4px 4px; } body.appbuilder-dark .mk_atlas_facts { color:#c3c8d0; } body.appbuilder-dark .mk_atlas_facts b { color:#e6e6ea; } body.appbuilder-dark .mk_atlas_what { color:#9aa0ac; } body.appbuilder-dark .mk_atlas_off { color:#e0b871; } body.appbuilder-dark .mk_atlas_use { color:#c3c8d0; } /* The text of a source, a journal, the Markdown preview. */ .mk_popbody { height:100%; overflow:auto; box-sizing:border-box; padding:2px 4px; font-size:12px; } .mk_pre { margin:0; padding:10px 12px; border-radius:5px; background:#f6f8fa; color:#27251E; font-family:Menlo, Consolas, monospace; font-size:11.5px; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; } .mk_feat { border:1px solid #e2e5ea; border-radius:5px; padding:8px 10px; margin-bottom:6px; font-size:11.5px; line-height:1.5; color:#41506b; } .mk_feat b { display:block; font-size:12px; color:#27251E; margin-bottom:3px; } .mk_feat_nums { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; } body.appbuilder-dark .mk_pre { background:#2b2f35; color:#d6d9de; } body.appbuilder-dark .mk_feat { border-color:#3a3f47; color:#c3c8d0; } body.appbuilder-dark .mk_feat b { color:#e6e6ea; } /* ---- Message house: every claim beside its evidence and its source ---- */ .mk_pickhost { display:inline-flex; min-width:190px; } .mk_pos { font-size:15px; font-weight:600; line-height:1.45; color:#27251E; } .mk_promise { margin-bottom:4px; } .mk_cta { font-weight:600; color:#1c53b8; } .mk_tagline { font-size:13.5px; font-weight:600; font-style:italic; color:#27251E; } /* What the demo opens: a picker per list (Properties), the line on the App map card. */ .mk_objs { display:flex; flex-direction:column; gap:6px; font-size:12px; color:#5c6b80; } .mk_objrow { display:flex; align-items:center; gap:10px; } .mk_objname { min-width:150px; font-weight:600; color:#27251E; } .mk_atlas_objs { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:8px 0 2px; font-size:12px; color:#5c6b80; } .mk_atlas_obj b { color:#27251E; font-weight:600; margin-right:2px; } .mk_atlas_objs .mk_link { cursor:pointer; color:#1c53b8; } .mk_proof { border:1px solid #e2e5ea; border-radius:5px; padding:8px 10px; margin-top:8px; } .mk_proof.is-rejected { border-color:#eeb4b0; background:#fdf6f5; } .mk_proof_claim { font-size:12.5px; font-weight:600; color:#27251E; line-height:1.45; } .mk_proof_ev { font-size:11.5px; font-style:italic; color:#6b7280; line-height:1.5; margin-top:4px; } .mk_proof_ev.is-none { font-style:normal; color:#b3261e; } .mk_proof_src { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; } .mk_proof_problem { font-size:11px; color:#b3261e; margin-top:6px; line-height:1.45; } .mk_srcchip { cursor:pointer; max-width:280px; overflow:hidden; text-overflow:ellipsis; } .mk_srcchip:hover { border-color:#269DF0; color:#1c53b8; } .mk_srcchip.is-out { opacity:0.6; text-decoration:line-through; } /* The screen, tab or button a claim shows (its colours are the chip's own). */ .mk_featchip { max-width:280px; overflow:hidden; text-overflow:ellipsis; } .mk_nums { display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; } .mk_num { border:1px solid #e2e5ea; border-radius:6px; padding:9px 11px; background:#fbfbfc; } .mk_num.is-rejected { border-color:#eeb4b0; background:#fdf6f5; } .mk_num_v { font-size:18px; font-weight:600; line-height:1.2; color:#269DF0; } .mk_num_l { font-size:11.5px; color:#41506b; margin-top:3px; line-height:1.4; } body.appbuilder-dark .mk_pos { color:#e6e6ea; } body.appbuilder-dark .mk_cta { color:#8ab4f8; } body.appbuilder-dark .mk_tagline { color:#e6e6ea; } body.appbuilder-dark .mk_objs { color:#a9b1bd; } body.appbuilder-dark .mk_objname { color:#e6e6ea; } body.appbuilder-dark .mk_atlas_objs { color:#a9b1bd; } body.appbuilder-dark .mk_atlas_obj b { color:#e6e6ea; } body.appbuilder-dark .mk_atlas_objs .mk_link { color:#8ab4f8; } body.appbuilder-dark .mk_proof { border-color:#3a3f47; } body.appbuilder-dark .mk_proof.is-rejected{ border-color:#5e3535; background:#2e2324; } body.appbuilder-dark .mk_proof_claim { color:#e6e6ea; } body.appbuilder-dark .mk_proof_ev { color:#9aa0ac; } body.appbuilder-dark .mk_proof_ev.is-none, body.appbuilder-dark .mk_proof_problem { color:#f09a95; } body.appbuilder-dark .mk_srcchip:hover { border-color:#4a9eff; color:#8ab4f8; } body.appbuilder-dark .mk_num { border-color:#3a3f47; background:#2b2f35; } body.appbuilder-dark .mk_num.is-rejected { border-color:#5e3535; background:#2e2324; } body.appbuilder-dark .mk_num_v { color:#4a9eff; } body.appbuilder-dark .mk_num_l { color:#c3c8d0; } /* ---- Demo script: acts as collapsible panels, steps as a table ---- */ .mk_actsbar { display:flex; align-items:center; gap:14px; margin-top:10px; font-size:11.5px; } .mk_act_head { cursor:pointer; user-select:none; } .mk_act_head h2 i { width:10px; color:#9aa0a8; } .mk_act:not(.is-open) > .mk_act_head { border-bottom:0; } .mk_act_body { padding:0; overflow-x:auto; } .mk_steps { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11.5px; line-height:1.5; } .mk_steps th { text-align:left; font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; padding:7px 10px; border-bottom:1px solid #eceff4; } .mk_steps td { vertical-align:top; padding:8px 10px; border-bottom:1px solid #f0f2f5; color:#41506b; white-space:pre-wrap; overflow-wrap:anywhere; } .mk_steps tr:last-child td { border-bottom:0; } .mk_steps tr.is-hl td { background:#fffaf0; } .mk_steps td.mk_say { color:#27251E; } .mk_stepid { display:block; font-family:Menlo, Consolas, monospace; font-size:10px; color:#9aa0a8; } .mk_more { margin-top:5px; font-size:10.5px; color:#9aa0a8; } .mk_steps td.mk_starcell { text-align:center; padding-left:6px; padding-right:0; } .mk_starbtn { border:0; background:none; cursor:pointer; padding:2px 4px; font-size:14px; line-height:1; color:#c7ccd4; } .mk_starbtn:hover { color:#e8a600; } .mk_starbtn.is-on { color:#e8a600; } .mk_steps .mk_hlrow td { background:#fffaf0; border-bottom:1px solid #f0e6cc; padding-top:0; } .mk_hlhead { display:flex; justify-content:space-between; gap:10px; font-size:10.5px; color:#9a6a10; white-space:normal; margin-bottom:3px; } .mk_hl_n { font-variant-numeric:tabular-nums; } .mk_hlsay { width:100%; box-sizing:border-box; resize:vertical; font-size:12px; line-height:1.45; } body.appbuilder-dark .mk_act_head h2 i { color:#6b7280; } body.appbuilder-dark .mk_steps th { color:#8b919b; border-bottom-color:#3a3f47; } body.appbuilder-dark .mk_steps td { color:#c3c8d0; border-bottom-color:#33373d; } body.appbuilder-dark .mk_steps tr.is-hl td { background:#2f2a20; } body.appbuilder-dark .mk_steps td.mk_say { color:#e6e6ea; } body.appbuilder-dark .mk_stepid, body.appbuilder-dark .mk_more { color:#7a808c; } body.appbuilder-dark .mk_starbtn { color:#565b64; } body.appbuilder-dark .mk_starbtn:hover, body.appbuilder-dark .mk_starbtn.is-on { color:#e8c07a; } body.appbuilder-dark .mk_steps .mk_hlrow td { background:#2f2a20; border-bottom-color:#4a3f2a; } body.appbuilder-dark .mk_hlhead { color:#e0b871; } /* ---- the step's second line: the rehearsal, its clicks, the narration ---- */ .mk_steps .mk_rhrow td { padding-top:0; white-space:normal; background:#fbfcfd; } .mk_rh { display:flex; align-items:flex-start; gap:12px; } .mk_thumb { flex:0 0 160px; width:160px; height:90px; padding:0; border:1px solid #dfe3e9; border-radius:4px; background:#f3f5f8; cursor:zoom-in; overflow:hidden; display:flex; align-items:center; justify-content:center; color:#9aa0a8; font-size:16px; } .mk_thumb img { width:100%; height:100%; object-fit:cover; object-position:top left; display:block; } .mk_thumb:hover { border-color:#269DF0; } .mk_thumb.is-none { cursor:default; } .mk_rh_main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px; } .mk_rh_line { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:11px; } .mk_rh_note { font-size:10.5px; line-height:1.5; color:#6b7280; overflow-wrap:anywhere; } .mk_rh_note i { width:12px; color:#9aa0a8; } .mk_rh .th_step_blocked { margin:0; } /* Live effects: plain when off, the warning red when on — it is the one switch here that lets a take change the record. */ .mk_live { display:inline-flex; align-items:center; gap:4px; margin:0; cursor:pointer; color:#6b7280; } .mk_live input { margin:0; cursor:pointer; } .mk_live.is-on { color:#b3261e; font-weight:600; } .mk_actlist { margin:0; padding-left:18px; font-size:10.5px; line-height:1.55; color:#41506b; } .mk_actlist b { font-weight:600; } .mk_actlist .mk_mono { font-size:10px; color:#6b7280; overflow-wrap:anywhere; } .mk_actlist.is-proposal { color:#1c53b8; } .mk_narr .mk_hlhead { color:#6b7280; } .mk_narrsay { width:100%; box-sizing:border-box; resize:vertical; font-size:12px; line-height:1.45; } /* Where the step happens on the app map — and, in red, why the map check refused it. */ .mk_groundslot:empty { display:none; } .mk_groundslot { display:flex; flex-direction:column; gap:4px; } .mk_ground { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:11px; } .mk_ground_k { margin-right:2px; font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; } .mk_gchip { max-width:280px; overflow:hidden; text-overflow:ellipsis; } .mk_ground_problem { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:11px; line-height:1.5; color:#b3261e; overflow-wrap:anywhere; } body.appbuilder-dark .mk_steps .mk_rhrow td { background:#25292e; } body.appbuilder-dark .mk_thumb { border-color:#3a3f47; background:#2b2f35; color:#6b7280; } body.appbuilder-dark .mk_thumb:hover { border-color:#4a9eff; } body.appbuilder-dark .mk_rh_note { color:#9aa0ac; } body.appbuilder-dark .mk_rh_note i { color:#7a808c; } body.appbuilder-dark .mk_live { color:#9aa0ac; } body.appbuilder-dark .mk_live.is-on { color:#f09a95; } body.appbuilder-dark .mk_actlist { color:#c3c8d0; } body.appbuilder-dark .mk_actlist .mk_mono { color:#9aa0ac; } body.appbuilder-dark .mk_actlist.is-proposal { color:#8ab4f8; } body.appbuilder-dark .mk_narr .mk_hlhead { color:#9aa0ac; } body.appbuilder-dark .mk_ground_k { color:#8b919b; } body.appbuilder-dark .mk_ground_problem { color:#f09a95; } /* A line's storyboard, under the narration and under the highlight line: folded to one small line that opens to the numbered beats — each its words, and in small what the screen shows while they are said. In the highlight row its head wears the row's amber, as the row's own head does. */ .mk_boardslot:empty { display:none; } .mk_board { margin-top:3px; white-space:normal; } .mk_board_head { display:inline-flex; align-items:center; gap:4px; margin:0; padding:1px 0; border:0; background:none; cursor:pointer; font-size:10.5px; line-height:1.5; color:#6b7280; } .mk_board_head:hover { text-decoration:underline; } .mk_board_head i { width:10px; color:#9aa0a8; } .mk_steps .mk_hlrow .mk_board_head { color:#9a6a10; } .mk_beats { margin:2px 0 0; padding-left:18px; font-size:11px; line-height:1.5; color:#41506b; } .mk_beats li { margin-bottom:4px; } .mk_beats li:last-child { margin-bottom:0; } .mk_beat_t { display:block; overflow-wrap:anywhere; } .mk_beat_s { display:block; font-size:10px; font-style:italic; color:#6b7280; overflow-wrap:anywhere; } body.appbuilder-dark .mk_board_head { color:#9aa0ac; } body.appbuilder-dark .mk_board_head i { color:#6b7280; } body.appbuilder-dark .mk_steps .mk_hlrow .mk_board_head { color:#e0b871; } body.appbuilder-dark .mk_beats { color:#c3c8d0; } body.appbuilder-dark .mk_beat_s { color:#9aa0ac; } /* A screenshot, full size: the image fits the popup, the caption under it. */ .mk_shotpop { display:flex; flex-direction:column; align-items:center; gap:8px; background:#eef0f3; padding:10px; } .mk_shotpop img { max-width:100%; height:auto; display:block; box-shadow:0 2px 12px rgba(0,0,0,0.18); } .mk_shotcap { font-size:11px; color:#6b7280; text-align:center; overflow-wrap:anywhere; } body.appbuilder-dark .mk_shotpop { background:#1e2226; } body.appbuilder-dark .mk_shotcap { color:#9aa0ac; } /* ---- the app map, screen by screen (View): a group per first hop, a row per screen — its screenshot door (.mk_thumb), title, path, chip lines. The full-size screenshot lies OVER the list in the same dialog, so Back finds the list where it was. ---- */ .mk_atlas_wrap { position:relative; height:100%; } .mk_atlas_list { padding:2px 8px 10px 4px; } .mk_atlas_head { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12px; color:#41506b; } .mk_atlas_head b { font-weight:600; color:#27251E; } .mk_atlas_list > .mk_atlas_what { margin:6px 0 2px; } .mk_atlas_grp { margin-top:16px; } .mk_atlas_row { display:flex; align-items:flex-start; gap:12px; padding:9px 4px; border-bottom:1px solid #f0f2f5; } .mk_atlas_row:last-child { border-bottom:0; } .mk_atlas_row.is-focus { background:#eaf1fd; box-shadow:inset 3px 0 0 #269DF0; } .mk_atlas_list .mk_thumb { flex-direction:column; gap:3px; box-sizing:border-box; } .mk_atlas_list .mk_thumb span { font-size:10.5px; } .mk_atlas_list .mk_thumb.is-failed { color:#b3261e; } .mk_atlas_main { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; } .mk_atlas_t { display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px; font-size:12.5px; color:#27251E; } .mk_atlas_t b { font-weight:600; } .mk_atlas_kind { font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; } .mk_atlas_id { font-size:10px; color:#9aa0a8; overflow-wrap:anywhere; } .mk_atlas_path { font-size:11px; line-height:1.45; color:#6b7280; } .mk_atlas_line { display:flex; align-items:baseline; gap:8px; } .mk_atlas_k { flex:0 0 58px; font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; } .mk_atlas_chips { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:4px; } .mk_atlas_full { position:absolute; top:0; right:0; bottom:0; left:0; z-index:2; display:flex; flex-direction:column; gap:8px; background:#fff; } .mk_atlas_fullbar { flex:0 0 auto; display:flex; align-items:center; gap:12px; } .mk_atlas_fullcap { flex:1 1 auto; min-width:0; font-size:11.5px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_atlas_full .mk_shotpop { flex:1 1 auto; min-height:0; overflow:auto; } body.appbuilder-dark .mk_atlas_head { color:#c3c8d0; } body.appbuilder-dark .mk_atlas_head b { color:#e6e6ea; } body.appbuilder-dark .mk_atlas_row { border-bottom-color:#33373d; } body.appbuilder-dark .mk_atlas_row.is-focus { background:#1e2c44; box-shadow:inset 3px 0 0 #4a9eff; } body.appbuilder-dark .mk_atlas_list .mk_thumb.is-failed { color:#f09a95; } body.appbuilder-dark .mk_atlas_t { color:#e6e6ea; } body.appbuilder-dark .mk_atlas_kind, body.appbuilder-dark .mk_atlas_id, body.appbuilder-dark .mk_atlas_k { color:#7a808c; } body.appbuilder-dark .mk_atlas_path { color:#9aa0ac; } body.appbuilder-dark .mk_atlas_full { background:var(--w2-bg-panel, #26292e); } body.appbuilder-dark .mk_atlas_fullcap { color:#9aa0ac; } /* ---- Files: a panel per version, a row per file ---- */ .mk_files { padding-top:4px; padding-bottom:4px; } .mk_file { display:flex; align-items:center; gap:10px; padding:7px 0; font-size:12px; border-bottom:1px solid #f0f2f5; } .mk_file:last-child { border-bottom:0; } .mk_file_i { flex:0 0 16px; text-align:center; color:#6b7280; } .mk_file_n { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; } .mk_file_k, .mk_file_p { flex:0 0 auto; font-size:11px; color:#9aa0a8; white-space:nowrap; } /* A kit folder kept as a group (the Tell-Show-Tell): its row, then its files indented under it — each still a row of its own, a video with its ▶. */ .mk_file_dir .mk_file_n { font-weight:600; } .mk_file_dir .mk_file_i { color:#c4932b; } .mk_file.is-sub { padding-left:22px; border-bottom-color:#f5f6f8; } body.appbuilder-dark .mk_file { border-bottom-color:#33373d; } body.appbuilder-dark .mk_file_i { color:#8b919b; } body.appbuilder-dark .mk_file_k, body.appbuilder-dark .mk_file_p { color:#8b919b; } body.appbuilder-dark .mk_file_dir .mk_file_i { color:#e0b871; } body.appbuilder-dark .mk_file.is-sub { border-bottom-color:#2e3237; } /* ---- Runs: the list on the left, the picked run's stages on the right, each scrolling inside itself ---- */ .mk_runs { flex:1 1 auto; min-height:0; display:grid; gap:12px; grid-template-columns:330px minmax(0, 1fr); grid-template-rows:minmax(0, 1fr); } .mk_runs > .th_panel { min-height:0; } .mk_run { padding:9px 12px; border-bottom:1px solid #f0f2f5; cursor:pointer; } .mk_run:hover { background:#f7f9fc; } .mk_run.is-sel { background:#eaf1fd; box-shadow:inset 3px 0 0 #269DF0; } .mk_run_top { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#27251E; } .mk_run_meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:3px; font-size:11px; color:#9aa0a8; font-variant-numeric:tabular-nums; } .mk_run_meta i { margin-right:4px; opacity:0.7; } .mk_rundetail .bz_section { flex:1 1 auto; } .mk_stages { margin-top:12px; } /* A stage's note can be long (what the rehearsal refused, why a host could not record): it wraps, a long verb or path included. */ .mk_stages .th_step_note { white-space:pre-wrap; overflow-wrap:anywhere; } .mk_journal { max-height:none; } @media (max-width: 1000px) { /* Stacked, the two cannot both own the height: one page scroller. */ .mk_body[data-tabbody='runs'] { overflow:auto; display:block; } .mk_runs { display:flex; flex-direction:column; } .mk_runs .th_fillscroll { overflow:visible; } } body.appbuilder-dark .mk_run { border-bottom-color:#33373d; } body.appbuilder-dark .mk_run:hover { background:#2b2f35; } body.appbuilder-dark .mk_run.is-sel { background:#1e2c44; box-shadow:inset 3px 0 0 #4a9eff; } body.appbuilder-dark .mk_run_top { color:#e6e6ea; } body.appbuilder-dark .mk_run_meta { color:#8b919b; } /* ================================================================ REVIEW (v7) — one panel that FILLS: the player and the transcript SIDE BY SIDE (the user, 2026-10-05: "arrange horizontally — the image needs to use enough space", the lines enough room) — the video on the left as large as the panel's height lets it, the transcript on the right, its rows the one thing that scrolls; stacked on a narrow screen. A Re-make's job card sits above the panel while it runs. The player's stage is dark in both themes — it is where a video plays. ================================================================ */ .mk_body[data-tabbody='review'] > .mk_jobslot:not(:empty) { flex:0 0 auto; margin-bottom:12px; } .mk_rv { position:relative; } .mk_rv_chips { display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; } .mk_rv .mk_pickhost { min-width:260px; max-width:420px; } .mk_rv_facts { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; font-size:12px; color:#41506b; } .mk_rv_file { font-weight:600; cursor:pointer; overflow-wrap:anywhere; } .mk_rv_dot { color:#c8ccd4; } .mk_rv_notice { display:flex; align-items:baseline; gap:6px; margin-top:5px; font-size:11.5px; line-height:1.5; color:#9a6a10; } .mk_rv_notice i { flex:0 0 auto; } .mk_rv_split { flex:1 1 auto; min-height:0; display:flex; flex-direction:row; } /* The video fills its stage, letterboxed at its own 16:9 (absolute: a percentage height inside a stretched flex item is not to be trusted). */ .mk_rv_stage { position:relative; flex:1 1 62%; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#14171b; } .mk_rv_video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; background:#000; } /* The transcript's column: its bar, then its rows. A container — the correction under a row narrows its indent when the column is narrow. */ .mk_rv_tx { flex:0 1 38%; min-width:420px; max-width:720px; min-height:0; display:flex; flex-direction:column; border-left:1px solid #e2e5ea; container-type:inline-size; } @media (max-width: 960px) { .mk_rv_split { flex-direction:column; } .mk_rv_stage { flex:0 0 auto; border-bottom:1px solid #e2e5ea; } .mk_rv_video { position:static; height:auto; max-width:100%; max-height:42vh; min-height:120px; } .mk_rv_tx { flex:1 1 auto; min-width:0; max-width:none; border-left:0; } } .mk_rv_novideo { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:150px; padding:16px; box-sizing:border-box; text-align:center; font-size:12px; line-height:1.5; color:#c3c8d0; } .mk_rv_novideo > .fa { font-size:22px; color:#6b7280; } .mk_rv_novideo .busy_err { background:#fff; border-radius:6px; } .mk_rv_bar:empty { display:none; } .mk_rv_bar { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:7px 12px; border-bottom:1px solid #eceff4; font-size:11.5px; color:#6b7280; } .mk_rv_filter { display:inline-flex; align-items:center; gap:5px; margin:0; cursor:pointer; color:#41506b; font-weight:600; } .mk_rv_filter input { margin:0; cursor:pointer; } .mk_rv_count { font-variant-numeric:tabular-nums; } .mk_rv_keys { margin-left:auto; color:#9aa0a8; } .mk_rv_keys kbd { display:inline-block; min-width:14px; padding:0 4px; margin:0 1px; border:1px solid #d5d9e0; border-bottom-width:2px; border-radius:3px; background:#f7f8fa; font-family:inherit; font-size:10px; line-height:15px; text-align:center; color:#41506b; } @container (max-width: 560px) { .mk_rv_keys { display:none; } } @media (max-width: 960px) and (max-height: 720px) { .mk_rv_video { max-height:32vh; } } body.appbuilder-dark .mk_rv_facts { color:#c3c8d0; } body.appbuilder-dark .mk_rv_dot { color:#565b64; } body.appbuilder-dark .mk_rv_notice { color:#e0b871; } body.appbuilder-dark .mk_rv_stage { background:#0e1013; border-bottom-color:#3a3f47; } body.appbuilder-dark .mk_rv_tx { border-left-color:#3a3f47; } body.appbuilder-dark .mk_rv_novideo { color:#c3c8d0; } body.appbuilder-dark .mk_rv_novideo > .fa { color:#565b64; } body.appbuilder-dark .mk_rv_novideo .busy_err { background:#26292e; } body.appbuilder-dark .mk_rv_bar { border-bottom-color:#3a3f47; color:#9aa0ac; } body.appbuilder-dark .mk_rv_filter { color:#c3c8d0; } body.appbuilder-dark .mk_rv_keys { color:#7a808c; } body.appbuilder-dark .mk_rv_keys kbd { border-color:#4a4f57; background:#2b2f35; color:#c3c8d0; } /* The transcript: a row per moment of the video — its time and step, what it is, its words and what it shows, then its marks and the door to correct it. Lit as it plays; a doubted line keeps a red edge. */ .mk_rv_list { position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0; } .mk_rv_list > .bz_section { min-height:160px; } .mk_rv_row { display:flex; align-items:flex-start; gap:10px; padding:7px 12px; font-size:12px; border-bottom:1px solid #f0f2f5; cursor:pointer; } .mk_rv_row:hover { background:#f7f9fc; } .mk_rv_row.is-hidden { display:none; } .mk_rv_row.is-flag { box-shadow:inset 3px 0 0 #e8a3a0; } .mk_rv_row.is-on { background:#eaf1fd; box-shadow:inset 3px 0 0 #269DF0; } .mk_rv_row.is-open { background:#fffaf0; } .mk_rv_t { flex:0 0 64px; display:flex; flex-direction:column; gap:1px; padding-top:1px; font-size:11px; color:#6b7280; font-variant-numeric:tabular-nums; } .mk_rv_t .mk_stepid { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_rv_k { flex:0 0 14px; margin-top:2px; text-align:center; color:#9aa0a8; } .mk_rv_main { flex:1 1 auto; min-width:0; } .mk_rv_words { line-height:1.5; color:#27251E; overflow-wrap:anywhere; } .mk_rv_row.is-move .mk_rv_words, .mk_rv_row.is-card .mk_rv_words { color:#6b7280; } .mk_rv_shows { margin-top:2px; font-size:10.5px; font-style:italic; line-height:1.45; color:#6b7280; overflow-wrap:anywhere; } .mk_rv_side { flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:4px 6px; max-width:46%; } .mk_rv_fix.is-on { border-color:#269DF0; color:#1c53b8; } .mk_rv_check, .mk_rv_changed { white-space:nowrap; } body.appbuilder-dark .mk_rv_row { border-bottom-color:#33373d; } body.appbuilder-dark .mk_rv_row:hover { background:#2b2f35; } body.appbuilder-dark .mk_rv_row.is-flag { box-shadow:inset 3px 0 0 #8a4744; } body.appbuilder-dark .mk_rv_row.is-on { background:#1e2c44; box-shadow:inset 3px 0 0 #4a9eff; } body.appbuilder-dark .mk_rv_row.is-open { background:#2f2a20; } body.appbuilder-dark .mk_rv_t { color:#9aa0ac; } body.appbuilder-dark .mk_rv_k { color:#7a808c; } body.appbuilder-dark .mk_rv_words { color:#e6e6ea; } body.appbuilder-dark .mk_rv_row.is-move .mk_rv_words, body.appbuilder-dark .mk_rv_row.is-card .mk_rv_words { color:#9aa0ac; } body.appbuilder-dark .mk_rv_shows { color:#9aa0ac; } body.appbuilder-dark .mk_rv_fix.is-on { border-color:#4a9eff; color:#8ab4f8; } /* A line's frame, on a short rest of the pointer on its row — beside the transcript, never under the pointer (it takes no clicks). */ .mk_rv_peek { position:absolute; right:16px; z-index:5; width:320px; padding:6px; box-sizing:border-box; display:flex; flex-direction:column; gap:4px; pointer-events:none; background:#fff; border:1px solid #dfe3e9; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.16); } .mk_rv_peek[hidden] { display:none; } .mk_rv_peek img { display:block; width:100%; height:auto; border-radius:3px; background:#14171b; } .mk_rv_peek span { font-size:10.5px; color:#6b7280; } body.appbuilder-dark .mk_rv_peek { background:#26292e; border-color:#3a3f47; box-shadow:0 6px 20px rgba(0,0,0,0.5); } body.appbuilder-dark .mk_rv_peek img { background:#0e1013; } body.appbuilder-dark .mk_rv_peek span { color:#9aa0ac; } /* THE CORRECTION, under its row, in the row's amber: a field per thing to correct (a label, its control, a hint under it), the step's notes, the board as it now is, what the last correction did. */ /* Its left edge is the words' (12 + 64 + 10 + 14 + 10 px into the row). */ .mk_rv_ed { display:flex; flex-direction:column; gap:8px; padding:8px 12px 12px 110px; font-size:12px; background:#fffaf0; border-bottom:1px solid #f0e6cc; cursor:default; } .mk_rv_ed .mk_sub_h { margin:6px 0 0; } .mk_rv_ed_head { display:flex; align-items:baseline; gap:10px; } .mk_rv_ed_head .gridurl { font-weight:600; } .mk_rv_ed_click { flex:1 1 auto; min-width:0; font-size:11.5px; color:#6b7280; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_rv_ed_x { margin-left:auto; color:#9aa0a8; } .mk_rv_field { display:grid; grid-template-columns:110px minmax(0, 1fr); gap:4px 12px; align-items:center; } .mk_rv_field > label { margin:0; font-size:11px; font-weight:600; color:#6b7280; } .mk_rv_field > .mk_rv_hint { grid-column:2; } /* A narrow transcript column: the correction starts at the row's own edge. */ @container (max-width: 560px) { .mk_rv_ed { padding-left:12px; } .mk_rv_field { grid-template-columns:96px minmax(0, 1fr); } } .mk_rv_ctl { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; min-width:0; } .mk_rv_hint { font-size:10.5px; line-height:1.45; color:#9aa0a8; } .mk_rv_hold { width:80px; } .mk_rv_text, .mk_rv_dir { flex:1 1 320px; width:100%; min-width:0; box-sizing:border-box; resize:vertical; font-size:12px; line-height:1.45; } .mk_rv_words_split { display:flex; flex-wrap:wrap; gap:2px; } .mk_rv_word { margin:0; padding:1px 4px; border:1px solid transparent; border-radius:3px; background:none; font-size:12px; line-height:1.5; color:#27251E; cursor:pointer; } /* The split falls BEFORE the word under the pointer: its left edge marked. */ .mk_rv_word:hover:not(:disabled) { border-color:#269DF0; box-shadow:inset 2px 0 0 #269DF0; background:#eaf1fd; } .mk_rv_word:disabled { cursor:default; color:#6b7280; } .mk_rv_whole { display:flex; flex-direction:column; gap:4px; } .mk_rv_acts { display:flex; flex-wrap:wrap; gap:8px; } .mk_rv_board li { cursor:pointer; border-radius:3px; padding:2px 4px; } .mk_rv_board li:hover { background:#fbf1dc; } .mk_rv_board li.is-sel { background:#f6e6c2; box-shadow:inset 3px 0 0 #e8a600; } .mk_rv_lock { margin-left:4px; font-style:normal; } .mk_rv_say:empty { display:none; } .mk_rv_say { font-size:11.5px; line-height:1.5; color:#41506b; } .mk_rv_say .fa-check { color:#0f9d76; } .mk_rv_say .busy_err { min-height:0; padding:6px 0 2px; } @media (max-width: 1000px) { .mk_rv_ed { padding-left:12px; } .mk_rv_field { grid-template-columns:minmax(0, 1fr); } .mk_rv_field > .mk_rv_hint { grid-column:1; } } body.appbuilder-dark .mk_rv_ed { background:#2f2a20; border-bottom-color:#4a3f2a; } body.appbuilder-dark .mk_rv_ed_click { color:#9aa0ac; } body.appbuilder-dark .mk_rv_ed_x { color:#7a808c; } body.appbuilder-dark .mk_rv_field > label { color:#9aa0ac; } body.appbuilder-dark .mk_rv_hint { color:#7a808c; } body.appbuilder-dark .mk_rv_word { color:#e6e6ea; } body.appbuilder-dark .mk_rv_word:hover:not(:disabled) { border-color:#4a9eff; box-shadow:inset 2px 0 0 #4a9eff; background:#1e2c44; } body.appbuilder-dark .mk_rv_word:disabled { color:#7a808c; } body.appbuilder-dark .mk_rv_board li:hover { background:#3a3326; } body.appbuilder-dark .mk_rv_board li.is-sel { background:#4a3f2a; box-shadow:inset 3px 0 0 #e8c07a; } body.appbuilder-dark .mk_rv_say { color:#c3c8d0; } body.appbuilder-dark .mk_rv_say .fa-check { color:#4fd1a5; } /* ================================================================ DIALOGS — inside the .charts_wl_dlg shell. ================================================================ */ /* Packages and their screens: one column, a screen indented under its package — the two-column grid of the shell would scatter them. */ .charts_wl_dlg .ms-cfg-list.mk_refs, .charts_wl_dlg .ms-cfg-list.mk_genkinds, .charts_wl_dlg .ms-cfg-list.mk_docs { grid-template-columns:minmax(0, 1fr); } .charts_wl_dlg .ms-cfg-list.mk_refs { max-height:320px; } .charts_wl_dlg .ms-cfg-list.mk_docs { max-height:400px; } .charts_wl_dlg label.ms-cfg-item.mk_ref_pkg { font-weight:600; margin-top:4px; } .charts_wl_dlg label.ms-cfg-item.mk_ref_sub { padding-left:22px; font-size:11.5px; } .mk_ref_group, .mk_ref_none { font-size:9.5px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; color:#9aa0a8; margin:10px 0 2px; } .mk_ref_none { text-transform:none; letter-spacing:0; font-weight:400; font-size:11.5px; } .charts_wl_dlg label.ms-cfg-item i.fa { width:14px; text-align:center; color:#6b7280; } .charts_wl_dlg label.ms-cfg-item.is-warn { color:#9a6a10; } .charts_wl_dlg label.ms-cfg-item.is-off { color:#9aa0a8; cursor:default; } .charts_wl_dlg label.ms-cfg-item i.fa.mk_warn_i { color:#e8850c; } .charts_wl_dlg label.ms-cfg-item.mk_doc { gap:8px; } .mk_doc_t { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_doc_n { flex:1 1 auto; min-width:0; font-size:11px; color:#9aa0a8; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .charts_wl_dlg label.ms-cfg-item.mk_doc.is-added { opacity:0.7; } /* The JSON editors: monospace, and tall enough to read a structure — and the two line lists of the scope dialog (pronunciations, read verbs). */ .charts_wl_dlg textarea#id_mkh_json, .charts_wl_dlg textarea#id_mksc_json, .charts_wl_dlg textarea#id_mka_json, .charts_wl_dlg textarea#id_mks_pron, .charts_wl_dlg textarea#id_mks_verbs, .mk_tpl textarea.mk_code { font-family:Menlo, Consolas, monospace; font-size:11.5px; line-height:1.5; } /* The voice: its picker and the ▶ sample on one line, what is missing under. */ .mk_voicerow { display:flex; align-items:center; gap:6px; } .mk_voicerow .mk_pickhost { flex:1 1 auto; min-width:0; } .mk_vstate:empty { display:none; } .mk_vstate { margin-top:5px; font-size:11px; line-height:1.45; } .mk_vstate .busy_err { margin:0; } /* A picker row's second voice (an accent, "administrator") — in w2menu's own overlay, outside the dialog. */ .w2ui-menu .mk_menu_sub { margin-left:6px; font-size:10.5px; color:#9aa0a8; } /* What the ticked kinds imply (Generate), and why a kind is greyed. */ .mk_gennote:empty { display:none; } .mk_gennote { margin-top:8px; display:flex; flex-direction:column; gap:4px; font-size:11.5px; line-height:1.5; color:#9a6a10; } .mk_gennote i { width:14px; } .charts_wl_dlg label.ms-cfg-item .mk_off_why { font-size:10.5px; color:#9aa0a8; } /* What a kind costs, after its name ("dry run, no model, a few minutes"). */ .charts_wl_dlg label.ms-cfg-item .mk_kind_sub { font-size:10.5px; color:#6b7280; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item .mk_kind_sub { color:#9aa0ac; } /* A kind's own options, under it in Generate's list (the LinkedIn post's type, length, pictures or video; the long brochure's pages): the house two-column rows (.tradingcfg-row), indented under the kind and tied to it by a rule on its left. The list grows with them — the dialog scrolls, not the list, so an option is never hidden inside it. */ .charts_wl_dlg .ms-cfg-list.mk_genkinds { max-height:none; } .mk_kindopts { margin:2px 0 8px 22px; padding:6px 0 4px 12px; border-left:2px solid #e2e5ea; } .charts_wl_dlg .mk_kindopts .tradingcfg-row { margin-bottom:8px; } .charts_wl_dlg .mk_kindopts .cfg-hint { margin-top:0; } .charts_wl_dlg .mk_kindopts input[type=number] { margin-bottom:0; } /* The pictures, greyed while the video is picked (not combined). */ .mk_kindopts .wf-pickbtn:disabled { opacity:0.55; cursor:default; } /* The video's tick, level with the pictures' picker beside it. */ .mk_kindopts .mk_optcheck { display:flex; align-items:flex-end; } .charts_wl_dlg .mk_kindopts .mk_optcheck label.ms-cfg-inline { margin:0; min-height:28px; } .charts_wl_dlg .mk_kindopts label.ms-cfg-inline.is-off { color:#9aa0a8; cursor:default; } body.appbuilder-dark .mk_kindopts { border-left-color:#3a3f47; } body.appbuilder-dark .mk_kindopts .wf-pickbtn:disabled { opacity:0.5; } body.appbuilder-dark .charts_wl_dlg .mk_kindopts label.ms-cfg-inline.is-off { color:#6b7280; } /* Generate's ElevenLabs panel: what each video would bill (its NEW characters, the cache counted), the total and the account's month — a box of its own, apart from the USD budget. No video ticked: not drawn. */ .mk_tts:empty { display:none; } .mk_tts { margin-top:10px; padding:8px 12px 6px; border:1px solid #e2e5ea; border-radius:6px; background:#fbfbfc; } .mk_tts .mk_sub_h { margin:0 0 2px; } .mk_tts .mk_kv { padding:3px 0; } .mk_tts .busy_err { min-height:0; padding:6px 0 2px; } .mk_tts_what { margin-bottom:4px; font-size:11px; line-height:1.45; color:#6b7280; } .mk_tts_total { margin-top:2px; border-top:1px solid #eceff4; } .mk_tts_acct, .mk_tts_warn { display:flex; align-items:baseline; gap:6px; margin-top:6px; font-size:11.5px; line-height:1.45; } .mk_tts_acct { color:#41506b; } .mk_tts_acct b { font-weight:600; color:#27251E; } .mk_tts_acct i { color:#6b7280; } .mk_tts_acct.is-unknown { color:#9a6a10; } .mk_tts_warn { color:#b3261e; } body.appbuilder-dark .mk_tts { border-color:#3a3f47; background:#2b2f35; } body.appbuilder-dark .mk_tts_what { color:#9aa0ac; } body.appbuilder-dark .mk_tts_total { border-top-color:#3a3f47; } body.appbuilder-dark .mk_tts_acct { color:#c3c8d0; } body.appbuilder-dark .mk_tts_acct b { color:#e6e6ea; } body.appbuilder-dark .mk_tts_acct i { color:#9aa0ac; } body.appbuilder-dark .mk_tts_acct.is-unknown { color:#e0b871; } body.appbuilder-dark .mk_tts_warn { color:#f09a95; } /* Greyed with its kind when this host cannot make it. */ .charts_wl_dlg label.ms-cfg-item.is-off .mk_kind_sub { color:inherit; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item.is-off .mk_kind_sub { color:inherit; } /* The Rehearse dialog's lead sentence, above its budget. */ .mk_dlg_lead { margin:0 0 14px; font-size:12.5px; line-height:1.55; color:#414343; } body.appbuilder-dark .w2ui-menu .mk_menu_sub { color:#7a808c; } body.appbuilder-dark .mk_gennote { color:#e0b871; } body.appbuilder-dark .mk_dlg_lead { color:#d6d9de; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item .mk_off_why { color:#6b7280; } body.appbuilder-dark .mk_ref_group, body.appbuilder-dark .mk_ref_none { color:#8b919b; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item i.fa { color:#8b919b; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item.is-warn { color:#e0b871; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item.is-off { color:#6b7280; } body.appbuilder-dark .charts_wl_dlg label.ms-cfg-item i.fa.mk_warn_i { color:#f0a44a; } body.appbuilder-dark .mk_doc_n { color:#8b919b; } /* ---- the brand templates dialog ---- */ .mk_tpl { display:flex; flex-direction:column; gap:10px; height:100%; box-sizing:border-box; padding:2px 4px; font-size:12px; color:#27251E; } .mk_tpl_note { font-size:11.5px; line-height:1.5; color:#6b7280; } .mk_tpl_acts { display:flex; gap:8px; flex-wrap:wrap; } .mk_tpl_list { flex:1 1 auto; min-height:0; overflow:auto; border-top:1px solid #eceff4; } .mk_tpl_list .bz_job { margin:10px 0; } .mk_tpl_row { display:flex; align-items:center; gap:10px; padding:10px 4px; border-bottom:1px solid #f0f2f5; } .mk_tpl_row.is-active { background:#f6fbf8; } .mk_tpl_icon { flex:0 0 24px; font-size:20px; text-align:center; color:#6b7280; } .mk_tpl_icon.is-deck { color:#c4532b; } .mk_tpl_icon.is-document { color:#2b5797; } .mk_tpl_main { flex:1 1 auto; min-width:0; } .mk_tpl_main b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_tpl_sub { display:block; font-size:11px; color:#9aa0a8; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mk_tpl_map { padding:6px 4px 14px 38px; border-bottom:1px solid #f0f2f5; } .mk_tpl_layouts { display:flex; flex-wrap:wrap; gap:4px; } .mk_tpl_map textarea { width:100%; min-height:240px; box-sizing:border-box; resize:vertical; } .mk_tpl_mapacts { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-top:8px; } body.appbuilder-dark .mk_tpl { color:#e6e6ea; } body.appbuilder-dark .mk_tpl_note { color:#9aa0ac; } body.appbuilder-dark .mk_tpl_list { border-top-color:#3a3f47; } body.appbuilder-dark .mk_tpl_row { border-bottom-color:#33373d; } body.appbuilder-dark .mk_tpl_row.is-active { background:#22302a; } body.appbuilder-dark .mk_tpl_icon { color:#8b919b; } body.appbuilder-dark .mk_tpl_icon.is-deck { color:#e07b56; } body.appbuilder-dark .mk_tpl_icon.is-document { color:#7aa2e0; } body.appbuilder-dark .mk_tpl_sub { color:#8b919b; } body.appbuilder-dark .mk_tpl_map { border-bottom-color:#33373d; }