/* doccav prototypes — the App Shell's styles, from the menus prototype 0.6 (chat-appearance). Colours, sizes and type come from the skin's variables only. */
@font-face { font-family: "Fraunces"; src: url("../../fonts/Fraunces-variable.woff2") format("woff2"); font-weight: 100 900; }

html, body { margin: 0; height: 100%; background: var(--dc-surface); }

/* ---------------------------------------------------------------- the logo (stand-in, ACT-0257) and the App Shell */
.dc_logo_cell .webix_template { padding: 0; display: flex; align-items: center; height: 100%; }
.dc_logo { display: inline-flex; align-items: center; gap: 7px; font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100, "WONK" 0; }
.dc_badge { width: 24px; height: 24px; background: var(--dc-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.dc_badge b { font-weight: 600; } .dc_badge i { font-style: normal; font-weight: 300; }
.dc_word { font-size: 19px; color: #16261D; } .dc_word b { font-weight: 600; } .dc_word .c { font-weight: 400; }
.dc_word .a { margin-left: -0.052em; } .dc_word .v { margin-left: -0.104em; }

.dc_header { border-bottom: 1px solid var(--dc-border) !important; }
.dc_header .webix_icon_button .webix_icon, .dc_header .webix_icon { color: var(--dc-n700); }

/* The repository's name, in the centre of the header, is the repository switcher */
.dc_repo_cell .webix_template { padding: 0; display: flex; align-items: center; justify-content: center; height: 100%; }
.dc_repo_switch { display: inline-flex; align-items: center; gap: 9px; max-width: 100%; height: 32px; padding: 0 8px 0 6px; border: 1px solid transparent;
  border-radius: var(--dc-radius); background: transparent; cursor: pointer; font: 600 16px/1 var(--dc-font); color: var(--dc-text); }
.dc_repo_switch:hover { background: var(--dc-hover); border-color: var(--dc-border); }
.dc_repo_switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dc-focus); }
.dc_repo_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_repo_switch .ti { font-size: 16px; color: var(--dc-icon); }
.dc_repo_code { display: inline-flex; min-width: 40px; justify-content: center; }
.dc_pop_foot .webix_template { padding: 6px 14px; font-size: var(--dc-font-size-xs); border-top: 1px solid var(--dc-border); }

/* The user's initials */
.dc_avatar_btn .webix_button { padding: 0; display: flex; align-items: center; justify-content: center; }
.dc_avatar_btn .webix_button:hover .dc_ic_text { box-shadow: 0 0 0 3px var(--dc-pressed); }

.dc_rail_col, .dc_rail_col .webix_template, .dc_rail_col .webix_view { background: var(--dc-rail); }
/* Webix overlaps neighbouring views by 1px to share a border; the rail sits on top, so its edge is one straight line */
.webix_view.dc_rail_col { position: relative; z-index: 3; }

/* The rail: an icon and a label for each item; Menu at the top */
.dc_rail_list .webix_list_item, .dc_rail_list .webix_list_item:hover { background: var(--dc-rail); border-bottom: 0; padding: 0; box-shadow: none; }
.dc_rail_item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%;
  font-size: 11px; line-height: 1.1; color: var(--dc-n300); cursor: pointer; }
.dc_rail_item .ti { font-size: 20px; color: var(--dc-rail-icon); }
.dc_rail_item:hover { background: var(--dc-rail-active); color: var(--dc-on-strong); }
.dc_rail_item:hover .ti { color: var(--dc-on-strong); }
.dc_rail_item.dc_on { background: var(--dc-rail-active); color: var(--dc-on-strong); box-shadow: inset 3px 0 0 var(--dc-brand-on-dark); }
.dc_rail_item.dc_on .ti { color: var(--dc-on-strong); }
.dc_rail_menu { border-bottom: 1px solid var(--dc-n800); }
.dc_rail_mark .webix_template { display: flex; align-items: center; justify-content: center; padding: 0; }
.dc_mark { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; background: var(--dc-n700); color: var(--dc-n200);
  font-family: "Fraunces", serif; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: 12px; cursor: pointer; }

.dc_side, .dc_side .webix_template, .dc_side .webix_list, .dc_side .webix_tree, .dc_side .webix_list_item { background: var(--dc-bg); }
.dc_side { border-right: 1px solid var(--dc-border) !important; }
.dc_side_head .webix_template { padding: 0 8px 0 14px; display: flex; align-items: center; justify-content: space-between; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); }
.dc_expand { font-size: 18px; color: var(--dc-n600); cursor: pointer; padding: 4px; border-radius: var(--dc-radius); text-transform: none; }
.dc_expand:hover { background: var(--dc-pressed); color: var(--dc-text); }
.dc_side_list .webix_list_item { border-bottom: 0; }
.dc_side_empty .webix_template { padding: 24px 16px; color: var(--dc-text-muted); text-align: center; font-size: var(--dc-font-size-sm); }
.dc_side_empty .ti { font-size: 32px; color: var(--dc-n300); }

/* The sidebar's menu: sections as branches, items with their icons */
.dc_side_tree .webix_tree_item { display: flex; align-items: center; }
.dc_tree_sec { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--dc-font-size-ui); color: var(--dc-text); }
.dc_tree_leaf { display: inline-flex; align-items: center; gap: 8px; padding-left: 10px; min-width: 0; }
.dc_tree_leaf .dc_ic, .dc_tree_leaf .dc_ic_text { flex: none; }
.dc_tree_leaf > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.dc_side_tree .webix_tree_item.dc_disabled, .dc_side_tree .webix_tree_item.dc_disabled .dc_ic { color: var(--dc-text-disabled) !important; }

/* ---------------------------------------------------------------- the Open Items strip */
.dc_tab { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.dc_tab > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_tab .dc_ic_text { flex: none; }

/* ---------------------------------------------------------------- one row: icon, reference, label (lists, popups, settings) */
.dc_row { display: flex; align-items: center; gap: 8px; height: 100%; min-width: 0; }
.dc_row .dc_ic_slot { width: 22px; flex: none; display: inline-flex; justify-content: center; }
.dc_row_lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_row_note { color: var(--dc-text-muted); font-size: var(--dc-font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_row_kind { margin-left: auto; color: var(--dc-text-muted); font-size: var(--dc-font-size-sm); white-space: nowrap; }
.dc_ref { display: inline-block; font: 600 11px/16px var(--dc-font); color: var(--dc-n700); background: var(--data-yellow-soft); border: 1px solid #E8DC7A;
  border-radius: var(--dc-radius-sm); padding: 0 4px; margin-right: 2px; flex: none; letter-spacing: .02em; }

/* ---------------------------------------------------------------- icons: a glyph in a palette colour, or text in a shape */
.dc_ic { display: inline-block; line-height: 1; flex: none; }
.dc_ic_text { display: inline-flex; align-items: center; justify-content: center; padding: 0 3px; box-sizing: border-box; border-radius: 2px;
  font-family: var(--dc-font); font-weight: 600; letter-spacing: .03em; line-height: 1; flex: none; }
.dc_ic_text.dc_circle { border-radius: 50%; padding: 0; letter-spacing: 0; }
.dc_ic_tile { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--dc-radius-lg); flex: none; }

/* ---------------------------------------------------------------- the launcher (the full main-menu panel) */
/* Menu entries are links, but read as menu entries: the skin's underlined link style is for links in text */
.webix_view.dc_launcher a.dc_li[href] { text-decoration: none; font-weight: 400; color: var(--dc-text); }
.webix_view.dc_launcher a.dc_item[href]:hover .dc_label { text-decoration: underline; text-decoration-color: var(--dc-border-hover); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.webix_view.dc_launcher a.dc_li.dc_disabled[href] { color: var(--dc-text-disabled); }
.dc_lp_bar { border-bottom: 1px solid var(--dc-border) !important; }
.dc_launcher { overflow-y: auto; background: var(--dc-surface); }
.dc_lw { padding: 16px 24px 40px; box-sizing: border-box; min-height: 100%; }
.dc_lw h2, .dc_lw h3 { margin: 0; }

.dc_strips { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dc-border); }
.dc_strip { display: flex; align-items: flex-start; gap: 12px; }
.dc_strip + .dc_strip { margin-top: 8px; }
.dc_strip_head { width: 84px; flex: none; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); line-height: 30px; }
.dc_chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dc_chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px 0 8px; box-sizing: border-box; max-width: 260px;
  border: 1px solid var(--dc-border-strong); border-radius: var(--dc-radius); background: var(--dc-surface);
  color: var(--dc-text); text-decoration: none; font-size: var(--dc-font-size-ui); white-space: nowrap; }
.dc_chip .dc_label { overflow: hidden; text-overflow: ellipsis; }
.dc_chip .dc_ic_slot { display: inline-flex; }
.dc_chip:hover { border-color: var(--dc-border-hover); background: var(--dc-hover); }
.dc_strip_recent .dc_chip { border-color: transparent; background: var(--dc-bg-alt); }
.dc_strip_recent .dc_chip:hover { border-color: var(--dc-border-strong); }

.dc_band { display: flex; align-items: baseline; gap: 10px; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--dc-text-muted); margin: 6px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--dc-border); }
.dc_secs + .dc_band { margin-top: 18px; }
.dc_band em { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--dc-font-size-sm); color: var(--dc-text-disabled); }

/* Sections in fixed-width columns: left-aligned, and never reordered by use */
.dc_flow_grid { display: grid; grid-template-columns: repeat(auto-fill, 240px); column-gap: 32px; row-gap: 22px; align-items: start; }
.dc_flow_columns { column-width: 236px; column-gap: 36px; }
.dc_flow_columns .dc_sec { break-inside: avoid; margin-bottom: 20px; }
.dc_sec ul { list-style: none; margin: 0; padding: 0; }
.dc_sec_head { display: flex; align-items: center; gap: 8px; font-size: var(--dc-font-size-ui); font-weight: 600; color: var(--dc-text);
  padding: 0 4px 6px; margin-bottom: 4px; border-bottom: 1px solid var(--dc-border); }
.dc_sec_head .dc_ic { color: var(--dc-n600) !important; }
.dc_sec_head em { margin-left: auto; font-style: normal; font-weight: 400; font-size: var(--dc-font-size-xs); color: var(--dc-text-disabled); }

.dc_item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 2px; border-radius: var(--dc-radius);
  color: var(--dc-text); text-decoration: none; font-size: var(--dc-font-size); position: relative; outline: none; }
.dc_item .dc_ic_slot { width: 28px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.dc_item .dc_label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_item:hover { background: var(--dc-hover); }
.dc_item:hover .dc_label { text-decoration: underline; text-decoration-color: var(--dc-border-hover); text-underline-offset: 3px; }
.dc_li:focus-visible { box-shadow: inset 0 0 0 2px var(--dc-focus); }
.dc_item.dc_disabled { color: var(--dc-text-disabled); cursor: not-allowed; }
.dc_item.dc_disabled:hover { background: transparent; }
.dc_item.dc_disabled:hover .dc_label { text-decoration: none; }
.dc_item.dc_disabled .dc_ic, .dc_item.dc_disabled .dc_ic_text, .dc_item.dc_disabled .dc_ic_tile { opacity: .45; }
.dc_lw mark { background: var(--data-yellow-soft); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px #E8DC7A; }
.dc_empty { color: var(--dc-text-muted); margin: 24px 4px; }

/* The star: shown on hover; a favourite's star stays, filled */
.dc_star { margin-left: auto; width: 18px; height: 18px; flex: none; visibility: hidden; cursor: pointer; background-color: var(--dc-n400);
  -webkit-mask: var(--dc-star) center / 100% 100% no-repeat; mask: var(--dc-star) center / 100% 100% no-repeat; }
.dc_star:hover { background-color: var(--dc-n700); }
.dc_item:hover .dc_star, .dc_item:focus-visible .dc_star { visibility: visible; }
/* A favourite's star: amber alone is too light for an icon (AM-090 §3.7 A), so it is an amber fill inside a dark amber edge */
.dc_star.dc_on { visibility: visible; position: relative; background-color: var(--data-amber-text); --dc-star: var(--dc-star-filled); }
.dc_star.dc_on::after { content: ""; position: absolute; inset: 2.5px 3px 3.5px; background-color: var(--data-amber-strong);
  -webkit-mask: var(--dc-star-filled) center / 100% 100% no-repeat; mask: var(--dc-star-filled) center / 100% 100% no-repeat; }
.dc_star.dc_on:hover::after { background-color: var(--data-amber-text); }
:root {
  --dc-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E");
  --dc-star-filled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000' stroke='%23000' stroke-width='1.5' stroke-linejoin='round'%3E%3Cpath d='M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z'/%3E%3C/svg%3E");
}

/* Tiles: one row of tiles per section */
.dc_flow_tiles .dc_sec { margin-bottom: 22px; }
.dc_flow_tiles .dc_sec ul { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.dc_mode_tiles .dc_sec_head { max-width: 1000px; }
.dc_mode_tiles .dc_item { flex-direction: column; justify-content: center; gap: 8px; width: 120px; height: 100px; padding: 8px 6px; box-sizing: border-box;
  border: 1px solid var(--dc-border); text-align: center; font-size: var(--dc-font-size-ui); line-height: 1.25; }
.dc_mode_tiles .dc_item:hover { border-color: var(--dc-border-hover); }
.dc_mode_tiles .dc_item .dc_ic_slot { width: auto; height: 40px; }
.dc_mode_tiles .dc_item .dc_label { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dc_mode_tiles .dc_star { position: absolute; top: 5px; right: 5px; margin: 0; width: 16px; height: 16px; }
.dc_mode_tiles .dc_ref { position: absolute; top: 5px; left: 5px; }

/* The flyout (from the top left, sized to its content) and the full page */
.dc_menu_overlay { box-shadow: var(--dc-shadow); animation: dc_in .12s ease-out; }
.dc_menu_overlay.dc_ov_flyout { border: 1px solid var(--dc-border-strong); border-left: 0; border-top: 0; border-radius: 0 0 var(--dc-radius-lg) 0; overflow: hidden; }
.dc_ov_flyout .dc_lw { min-height: 0; padding-bottom: 20px; }
.dc_menu_overlay.dc_ov_full { box-shadow: 0 8px 24px rgba(21, 33, 27, .18); }
/*
 * The menu's colours are Theme variables (AM-090 §4 B, AM-091 §3.5): :root holds doccav's values, Mid,
 * and an admin's Theme replaces them. Theme Builder checks each against what sits on it: muted text 4.5:1,
 * the palette's icon colours 3:1. The darkest light background that passes is --dc-n200.
 */
:root {
  --dc-menu-bg: var(--dc-n150);
  --dc-menu-bar: var(--dc-n200);
  --dc-menu-hover: var(--dc-n200);
  --dc-menu-line: var(--dc-n300);
  --dc-menu-chip: var(--dc-n200);
}
/* Light tint, for comparison only: the side panel's colour, with the tab strip's for the top bar */
.dc_menu_overlay.dc_light { --dc-menu-bg: var(--dc-bg); --dc-menu-bar: var(--dc-bg-alt); --dc-menu-hover: var(--dc-bg-alt); --dc-menu-line: var(--dc-border-strong); --dc-menu-chip: var(--dc-pressed); }
.dc_menu_overlay.dc_tinted .dc_launcher, .dc_menu_overlay.dc_tinted .dc_lw { background: var(--dc-menu-bg); }
.dc_menu_overlay.dc_tinted .dc_lp_bar, .dc_menu_overlay.dc_tinted .dc_lp_bar.webix_toolbar,
.dc_menu_overlay.dc_tinted .dc_lp_bar .webix_layout_toolbar { background: var(--dc-menu-bar) !important; border-bottom-color: var(--dc-menu-line) !important; }
.dc_menu_overlay.dc_tinted .dc_item:hover { background: var(--dc-menu-hover); }
.dc_menu_overlay.dc_tinted .dc_mode_tiles .dc_item { background: var(--dc-surface); }
.dc_menu_overlay.dc_tinted .dc_mode_tiles .dc_item:hover { background: var(--dc-surface); }
.dc_menu_overlay.dc_tinted .dc_strip_recent .dc_chip { background: var(--dc-menu-chip); }
.dc_menu_overlay.dc_tinted .dc_sec_head, .dc_menu_overlay.dc_tinted .dc_strips { border-bottom-color: var(--dc-menu-line); }
.dc_menu_overlay.dc_ov_flyout.dc_tinted { border-color: var(--dc-menu-line); }

/* Dark: the menu in the rail's near-black, as if it opens out of the rail; its top bar one step lighter */
.dc_menu_overlay.dc_ov_flyout.dc_dark { border-color: var(--dc-n800); }
.dc_menu_overlay.dc_dark .dc_launcher, .dc_menu_overlay.dc_dark .dc_lw { background: var(--dc-rail); }
.dc_menu_overlay.dc_dark .dc_lp_bar, .dc_menu_overlay.dc_dark .dc_lp_bar.webix_toolbar,
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_layout_toolbar { background: var(--dc-n800) !important; border-bottom-color: var(--dc-n700) !important; }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_inp_label, .dc_menu_overlay.dc_dark .dc_lp_bar label { color: var(--dc-n300); }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_icon_button .webix_icon { color: var(--dc-n300); }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_icon_button:hover .webix_icon { color: var(--dc-on-strong); }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_icon_button:hover:before { background-color: var(--dc-n700); }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_segment_0, .dc_menu_overlay.dc_dark .dc_lp_bar .webix_segment_1, .dc_menu_overlay.dc_dark .dc_lp_bar .webix_segment_N {
  background: var(--dc-n800); border-color: var(--dc-n600); color: var(--dc-n200); box-shadow: none; }
.dc_menu_overlay.dc_dark .dc_lp_bar .webix_selected { background: var(--dc-n700); color: var(--dc-on-strong); box-shadow: inset 0 -2px 0 var(--dc-brand-on-dark); }
.dc_menu_overlay.dc_dark .webix_view.dc_launcher a.dc_li[href] { color: var(--dc-n100); }
.dc_menu_overlay.dc_dark .webix_view.dc_launcher a.dc_li.dc_disabled[href] { color: var(--dc-n600); }
.dc_menu_overlay.dc_dark .dc_item:hover { background: var(--dc-n800); }
.dc_menu_overlay.dc_dark .webix_view.dc_launcher a.dc_item[href]:hover .dc_label { text-decoration-color: var(--dc-n500); }
.dc_menu_overlay.dc_dark .dc_li:focus-visible { box-shadow: inset 0 0 0 2px var(--dc-brand-on-dark); }
.dc_menu_overlay.dc_dark .dc_sec_head { color: var(--dc-on-strong); border-bottom-color: var(--dc-n700); }
.dc_menu_overlay.dc_dark .dc_sec_head .dc_ic { color: var(--dc-n400) !important; }
.dc_menu_overlay.dc_dark .dc_strip_head, .dc_menu_overlay.dc_dark .dc_band, .dc_menu_overlay.dc_dark .dc_empty { color: var(--dc-n400); }
.dc_menu_overlay.dc_dark .dc_strips { border-bottom-color: var(--dc-n700); }
.dc_menu_overlay.dc_dark .dc_chip { background: var(--dc-n800); border-color: var(--dc-n700); }
.dc_menu_overlay.dc_dark .dc_chip:hover { border-color: var(--dc-n500); }
.dc_menu_overlay.dc_dark .dc_strip_recent .dc_chip { border-color: transparent; }
.dc_menu_overlay.dc_dark .dc_strip_recent .dc_chip:hover { border-color: var(--dc-n600); }
/* The palette's strong shades are made for white; on near-black the glyphs are lightened (a dark theme needs its own icon shades) */
.dc_menu_overlay.dc_dark .dc_ic { filter: brightness(1.75) saturate(.9); }
.dc_menu_overlay.dc_dark .dc_star { background-color: var(--dc-n600); }
.dc_menu_overlay.dc_dark .dc_star:hover { background-color: var(--dc-n300); }
.dc_menu_overlay.dc_dark .dc_star.dc_on { background-color: var(--data-amber-soft); }
.dc_menu_overlay.dc_dark .dc_mode_tiles .dc_item { background: var(--dc-n800); border-color: var(--dc-n700); }
.dc_menu_overlay.dc_dark .dc_mode_tiles .dc_item:hover { border-color: var(--dc-n500); }
.dc_menu_overlay.dc_dark .dc_mode_tiles .dc_ic_tile .ti { filter: none; }
.dc_menu_overlay.dc_dark .dc_lw mark { background: rgba(225, 205, 45, .35); box-shadow: none; }
.dc_scrim { position: fixed; background: rgba(21, 33, 27, .18); animation: dc_fade .12s ease-out; }
@keyframes dc_fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dc_in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- pages opened from a menu (stand-ins) */
.dc_page_bar { border-bottom: 1px solid var(--dc-border) !important; }
.dc_page_title { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--dc-text); }
.webix_view.dc_ph_view, .dc_ph_view .webix_template, .webix_view.dc_admin_body, .dc_admin_body .webix_template { background: var(--dc-bg) !important; }
.dc_back { display: inline-flex; align-items: center; gap: 6px; color: var(--dc-text); }
.dc_back .ti { font-size: 18px; color: var(--dc-n700); }
.dc_ph { padding: 24px; }
.dc_ph_card { max-width: 720px; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); padding: 18px 22px 8px; }
.dc_ph_kind { font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-brand); }
.dc_ph h2 { display: flex; align-items: center; gap: 10px; margin: 6px 0 6px; font-size: 22px; font-weight: 600; color: var(--dc-text); }
.dc_ph p { margin: 6px 0 12px; color: var(--dc-text); line-height: 1.45; }
.dc_ph .dc_ph_note { color: var(--dc-text-muted); margin-top: 0; }
.dc_ph dl { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--dc-border); font-size: var(--dc-font-size-sm); }
.dc_ph dt { color: var(--dc-text-muted); }
.dc_ph dd { margin: 0; color: var(--dc-text); }
.dc_ph code, .dc_muted code { font: 12.5px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--dc-bg-alt); padding: 1px 5px; border-radius: 2px; }
.dc_crumb { display: flex; align-items: center; gap: 6px; color: var(--dc-text-muted); font-size: var(--dc-font-size-sm); margin-bottom: 12px; }
.dc_crumb .ti { font-size: 14px; color: var(--dc-n400); }
.dc_muted { color: var(--dc-text-muted); }

/* ---------------------------------------------------------------- administration and My settings: sections on the left */
.dc_admin_nav, .dc_settings_nav { border-right: 1px solid var(--dc-border) !important; }
.dc_admin_nav, .dc_admin_nav .webix_tree, .dc_admin_nav .webix_view, .dc_settings_nav, .dc_settings_nav .webix_view, .dc_settings_list .webix_list_item { background: var(--dc-bg); }
.dc_nav_bar { border-bottom: 0 !important; }
.dc_tree_band { font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); }
.dc_admin_tree .dc_tree_sec { font-weight: 500; }
.dc_admin_tree .dc_tree_sec .dc_ic { color: var(--dc-n600) !important; }
.dc_admin_tree .dc_tree_leaf { padding-left: 4px; }
.dc_nav_head .webix_template { padding: 0 14px; display: flex; align-items: center; height: 100%; }
.dc_nav_title { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; }
.dc_settings_list .webix_list_item { border-bottom: 0; }

.dc_set_head .webix_template { padding: 18px 24px 0; }
.dc_set_head h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--dc-text); }
.dc_set_src { font-size: var(--dc-font-size-sm); color: var(--dc-text-muted); margin-top: 2px; }
.dc_set_note .webix_template { padding: 2px 0 8px; color: var(--dc-text-muted); font-size: var(--dc-font-size-sm); line-height: 1.4; }
.dc_set_favs { border: 1px solid var(--dc-border) !important; border-radius: var(--dc-radius); }
.dc_fav_remove { font-size: 18px; color: var(--dc-icon); cursor: pointer; margin-left: 10px; }
.dc_fav_remove:hover { color: var(--dc-error); }
.dc_swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
.dc_avatar_preview .webix_template { display: flex; align-items: center; justify-content: center; padding: 0; }

/* ---------------------------------------------------------------- the user popup */
.dc_user_card { display: flex; gap: 12px; align-items: flex-start; padding: 14px 14px 8px; }
.dc_uc_name { font-weight: 600; font-size: 16px; color: var(--dc-text); }
.dc_uc_mail { font-size: var(--dc-font-size-sm); color: var(--dc-text-muted); margin-top: 1px; }
.dc_uc_roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.dc_chip_role { font-size: var(--dc-font-size-xs); background: var(--dc-bg-alt); color: var(--dc-n700); padding: 1px 6px; border-radius: var(--dc-radius-sm); }
.dc_pop_head .webix_template { padding: 8px 14px 0; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); }
.dc_pop_list .webix_list_item { border-bottom: 0; padding-left: 12px; }
.dc_pop_rule .webix_template { border-top: 1px solid var(--dc-border); margin: 4px 0 0; }
.dc_pop_sub { display: block; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); padding-top: 6px; line-height: 22px; }
.dc_check { color: var(--dc-brand); font-size: 18px; }

/* ---------------------------------------------------------------- the prototype's controls (not part of the design) */
.dc_proto { background: var(--dc-bg-alt) !important; border-top: 1px solid var(--dc-border-strong) !important; }
.dc_proto_tag { display: inline-block; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--data-amber-text); background: var(--data-amber-soft); padding: 2px 8px; border-radius: var(--dc-radius-sm); }

/* ---------------------------------------------------------------- the prototypes' additions: tabs, gallery, inspector */
.dc_proto_btn .webix_button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.dc_proto_btn .ti { font-size: 16px; }
.dc_crumb_bar .webix_template { display: flex; align-items: center; padding: 0 16px; background: var(--dc-bg); }
.dc_crumb_bar .dc_crumb { margin: 0; }

.webix_view.dc_gallery_view, .dc_gallery_view .webix_template { background: var(--dc-bg) !important; }
.dc_gallery { padding: 20px 24px 32px; max-width: 1280px; }
.dc_g_intro h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--dc-text); }
.dc_g_intro h3 { margin: 26px 0 4px; font-size: 16px; font-weight: 600; color: var(--dc-text); }
.dc_g_intro p { margin: 0 0 14px; max-width: 760px; line-height: 1.45; color: var(--dc-text-muted); }
.dc_g_grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; }
.dc_g_card { display: flex; flex-direction: column; background: var(--dc-surface); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-lg); padding: 14px 18px 12px; }
.dc_g_card header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.dc_g_card h3 { margin: 0; font-size: 17px; font-weight: 600; color: var(--dc-text); }
.dc_g_card header code, .dc_insp_body code { font: 12px/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--dc-bg-alt); padding: 1px 5px; border-radius: 2px; color: var(--dc-text); }
.dc_g_card p { margin: 10px 0; line-height: 1.45; color: var(--dc-text); flex: 1; }
.dc_g_card dl { display: grid; grid-template-columns: 90px 1fr; gap: 4px 10px; margin: 0 0 12px; font-size: var(--dc-font-size-sm); }
.dc_g_card dt { color: var(--dc-text-muted); } .dc_g_card dd { margin: 0; }
.dc_g_num { display: inline-block; font-weight: 600; font-size: var(--dc-font-size-sm); color: var(--dc-on-strong); background: var(--dc-brand); padding: 1px 7px; border-radius: var(--dc-radius-sm); }
.dc_g_acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--dc-border); }
.dc_g_acts .dc_muted { font-size: var(--dc-font-size-sm); margin-right: 4px; }
.dc_g_btn { font: 500 var(--dc-font-size-sm)/1 var(--dc-font); color: var(--dc-brand); background: var(--dc-surface); border: 1px solid var(--dc-border-strong);
  border-radius: var(--dc-radius); padding: 6px 10px; cursor: pointer; }
.dc_g_btn:hover { background: var(--dc-hover); border-color: var(--dc-brand); }
.dc_g_btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dc-focus); }

.webix_view.dc_inspector { border-left: 1px solid var(--dc-border-strong) !important; background: var(--dc-surface); }
.dc_insp_bar { border-bottom: 1px solid var(--dc-border) !important; }
.dc_insp_bar .ti-zoom-code { font-size: 18px; color: var(--dc-icon); }
.dc_insp_tabs { padding: 4px 10px !important; }
.dc_insp_body .webix_template { padding: 0; }
.dc_insp_sec { padding: 10px 14px 20px; font-size: var(--dc-font-size-sm); line-height: 1.45; color: var(--dc-text); }
.dc_insp_sec h4 { margin: 4px 0 6px; font-size: var(--dc-font-size); font-weight: 600; }
.dc_insp_sec h5 { margin: 14px 0 4px; font-size: var(--dc-font-size-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-text-muted); }
.dc_insp_sec p { margin: 0 0 8px; }
.dc_insp_dl { display: grid; grid-template-columns: minmax(80px, max-content) 1fr; gap: 4px 12px; margin: 0; }
.dc_insp_dl dt { color: var(--dc-text-muted); grid-column: 1; }
.dc_insp_dl dd { margin: 0; grid-column: 2; overflow-wrap: anywhere; }
.dc_insp_pre { margin: 0 0 10px; padding: 8px 10px; background: var(--dc-bg-alt); border: 1px solid var(--dc-border); border-radius: var(--dc-radius-sm);
  font: 11.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.dc_insp_calls { margin: 0; padding-left: 22px; }
.dc_insp_calls li { margin-bottom: 6px; }
.dc_insp_calls code { overflow-wrap: anywhere; }
.dc_insp_empty { padding: 24px 16px; color: var(--dc-text-muted); }

/* New on hover (+), beside the star: for an Entity's list the user may create in (LY-092 §8) */
.dc_add { margin-left: auto; width: 22px; height: 22px; flex: none; visibility: hidden; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; font-size: 17px; color: var(--dc-n500); border-radius: var(--dc-radius-sm); }
.dc_add:hover { color: var(--dc-brand); background: var(--dc-brand-tint); }
.dc_add + .dc_star { margin-left: 6px; }
.dc_item:hover .dc_add, .dc_item:focus-visible .dc_add { visibility: visible; }
.dc_mode_tiles .dc_add { position: absolute; top: 4px; left: 4px; margin: 0; }
.dc_side_tree .dc_add { margin-left: 8px; width: 20px; height: 20px; }
.dc_side_tree .webix_tree_item:hover .dc_add { visibility: visible; }
.dc_menu_overlay.dc_dark .dc_add { color: var(--dc-n400); }

/* Tabs (LY-092 §8): icon and text from the left; × on hover and on the active tab */
[view_id="tabs"] .webix_item_tab { text-align: left; padding-left: 12px; }
.dc_tab_txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.webix_item_tab .webix_tab_close { visibility: hidden; }
.webix_item_tab:hover .webix_tab_close, .webix_item_tab.webix_selected .webix_tab_close { visibility: visible; }

/* The admin overview (Paul, 26 Oct 2026): tabs for Core and each module; more room above the first headings; each section's
   items start where its heading's text does, after the heading's icon */
.dc_admin_tabs { border-bottom: 1px solid var(--dc-border) !important; }
.webix_view.dc_admin_lw .dc_lw { padding-top: 26px; }
.webix_view.dc_admin_lw .dc_sec_head + ul .dc_item { padding-left: 30px; }

/* The working context, beside the repository in the header (DC-075 §2.3) */
.dc_ctx_sep { margin: 0 4px 0 6px; color: var(--dc-n400); font-size: 18px; }
.dc_ctx_switch { display: inline-flex; align-items: center; gap: 7px; max-width: 340px; height: 32px; padding: 0 8px; border: 1px solid transparent;
  border-radius: var(--dc-radius); background: transparent; cursor: pointer; font: 500 14px/1 var(--dc-font); color: var(--dc-text); }
.dc_ctx_switch:hover { background: var(--dc-hover); border-color: var(--dc-border); }
.dc_ctx_switch:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--dc-focus); }
.dc_ctx_switch .ti { font-size: 16px; color: var(--dc-icon); }
.dc_ctx_switch.dc_ctx_all .dc_ctx_name { color: var(--dc-text-muted); }
.dc_ctx_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc_ctx_tree .webix_tree_item { display: flex; align-items: center; }
.dc_ctx_item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dc_ctx_item .ti { font-size: 16px; color: var(--dc-icon); }
.dc_ctx_item b { font-weight: 600; }
.dc_ctx_hint { color: var(--dc-text-muted); font-size: var(--dc-font-size-xs); }
.dc_pop_foot .webix_template { line-height: 1.35; }
.dc_ctx_ticks .webix_tree_checkbox { margin-right: 6px; }
.dc_ctx_none span:last-child, .dc_ctx_own span:last-child { color: var(--dc-text-muted); }
.dc_ctx_all > span:nth-child(2) { font-weight: 600; }