/* ============================================================================
   secos-widgets.css — SecOS desktop widget system visual layer.
   Every rule is html[data-secos]-scoped: with the flag off this stylesheet is
   inert, so prod/dev rendering is untouched. Design language: Signal (violet
   family, zero-radius, JetBrains Mono). Mirrors secos.css §3-§5 look.
   Hard rule: hover is PAINT-ONLY (border/color) — never scale/transform.
   ========================================================================== */

/* ── §1 widget layer + card shell ─────────────────────────────────────────── */
html[data-secos] .secos-widget-layer {
    /* top clears the (removed) header band; bottom clears the taskbar so a
       dragged widget never hides behind it. Keep in sync with the inline in
       secos-widgets.js init(). */
    position: absolute; top: 24px; left: 0; right: 0; bottom: 48px;
    z-index: 1; pointer-events: none;
}
/* clickable widget body: every datum opens its source app (wireWidgetOpen) */
html[data-secos] .secos-widget-body.secos-wg-clickable { cursor: pointer; }
html[data-secos] .secos-widget-body.secos-wg-clickable .secos-wg-row--static { cursor: pointer; }
html[data-secos] .secos-widget {
    position: absolute; width: 260px; pointer-events: auto;
    background: color-mix(in oklab, var(--bg-1, #111016) 85%, transparent);
    border: 1px solid color-mix(in oklab, var(--violet, #7c3aed) 25%, var(--line-2, #2a2733));
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .6);
    -webkit-backdrop-filter: blur(7px) saturate(1.2);
    backdrop-filter: blur(7px) saturate(1.2);
    font-family: 'JetBrains Mono', monospace;
    transition: border-color .15s ease;
}
/* PAINT-ONLY hover: border-color only, no geometry change */
html[data-secos] .secos-widget:hover {
    border-color: color-mix(in oklab, var(--violet, #7c3aed) 48%, var(--line-2, #2a2733));
}
html[data-secos] .secos-widget--drag {
    border-color: var(--violet-bright, #9e74f6);
    box-shadow: 0 22px 44px -16px rgba(0, 0, 0, .72);
}
html[data-secos][data-theme="light"] .secos-widget,
html[data-theme="light"][data-secos] .secos-widget {
    background: color-mix(in oklab, #ffffff 88%, transparent);
    box-shadow: 0 14px 30px -20px rgba(40, 20, 90, .32);
}

/* ── §2 card header ───────────────────────────────────────────────────────── */
html[data-secos] .secos-widget-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    height: 24px; padding: 0 5px 0 9px;
    cursor: grab; touch-action: none;
    background: color-mix(in oklab, var(--violet, #7c3aed) 9%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--violet, #7c3aed) 18%, var(--line-2, #2a2733));
}
html[data-secos] .secos-widget--drag .secos-widget-head { cursor: grabbing; }
html[data-secos] .secos-widget-name {
    font-size: 10px; font-weight: 600; letter-spacing: .06em;
    color: var(--violet-bright, #9e74f6);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-secos] .secos-widget-actions { display: flex; align-items: center; gap: 1px; flex: none; }
html[data-secos] .secos-widget-btn {
    width: 18px; height: 18px; display: grid; place-items: center;
    background: transparent; border: 0; cursor: pointer;
    color: var(--ink-3, #6f6a7f); font-size: 12px; line-height: 1;
    transition: color .14s ease;
}
html[data-secos] .secos-widget-btn:hover { color: var(--ink, #efecf6); }
html[data-secos] .secos-widget-btn--x:hover { color: var(--rose, #fb6f84); }

/* ── §3 card body + shared primitives ─────────────────────────────────────── */
html[data-secos] .secos-widget-body {
    padding: 10px; font-size: 11px; line-height: 1.4;
    color: var(--ink-2, #b9b3c9);
}
html[data-secos] .secos-wg-empty {
    padding: 14px 4px; text-align: center;
    font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3, #6f6a7f);
}
html[data-secos] .secos-wg-loading { color: var(--violet-ink, #c4b5fd); }
html[data-secos] .secos-wg-foot {
    margin-top: 8px; font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3, #6f6a7f);
}

/* numeric tiles */
html[data-secos] .secos-wg-tiles {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
html[data-secos] .secos-wg-tiles--4 { grid-template-columns: repeat(2, 1fr); }
html[data-secos] .secos-wg-tile {
    display: flex; flex-direction: column; gap: 2px; padding: 8px 6px;
    background: color-mix(in oklab, var(--bg-1, #111016) 60%, transparent);
    border: 1px solid var(--line-2, #2a2733);
}
html[data-secos] .secos-wg-tile .n {
    font-size: 17px; font-weight: 700; line-height: 1;
    color: var(--ink, #efecf6);
}
html[data-secos] .secos-wg-tile .l {
    font-size: 8.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3, #6f6a7f);
}

/* horizontal bars */
html[data-secos] .secos-wg-bars { display: flex; flex-direction: column; gap: 7px; }
html[data-secos] .secos-wg-tiles + .secos-wg-bars { margin-top: 10px; }
html[data-secos] .secos-wg-bar-top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    margin-bottom: 3px;
}
html[data-secos] .secos-wg-bar-l {
    font-size: 10px; color: var(--ink-2, #b9b3c9);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-secos] .secos-wg-bar-n { font-size: 9.5px; color: var(--ink-3, #6f6a7f); flex: none; }
html[data-secos] .secos-wg-bar-track {
    height: 4px; background: var(--line, #211d2c); overflow: hidden;
}
html[data-secos] .secos-wg-bar-track i {
    display: block; height: 100%;
    background: var(--violet-bright, #9e74f6);
}

/* list rows (trending / recent / operators) */
html[data-secos] .secos-wg-list { display: flex; flex-direction: column; gap: 3px; }
html[data-secos] .secos-wg-row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 5px 7px; text-align: left;
    background: transparent; border: 1px solid transparent;
    color: var(--ink-2, #b9b3c9); font-family: inherit; font-size: 10.5px;
    cursor: pointer; transition: background .13s ease, border-color .13s ease;
}
html[data-secos] .secos-wg-row:hover {
    background: color-mix(in oklab, var(--violet, #7c3aed) 12%, transparent);
    border-color: color-mix(in oklab, var(--violet, #7c3aed) 32%, transparent);
    color: var(--ink, #efecf6);
}
html[data-secos] .secos-wg-row--static { cursor: default; }
html[data-secos] .secos-wg-row--static:hover { background: transparent; border-color: transparent; color: var(--ink-2, #b9b3c9); }
html[data-secos] .secos-wg-row-id {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--violet-ink, #c4b5fd);
}
html[data-secos] .secos-wg-row-v { flex: none; font-size: 9.5px; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-row-meta { flex: none; font-size: 9px; letter-spacing: .04em; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-row-sev {
    flex: none; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--ink-3, #6f6a7f);
}
html[data-secos] .secos-wg-row-sev[data-sev="critical"] { color: var(--sev-critical, #fb6f84); }
html[data-secos] .secos-wg-row-sev[data-sev="high"]     { color: var(--sev-high, #fdba74); }
html[data-secos] .secos-wg-row-sev[data-sev="medium"]   { color: var(--sev-medium, #fcd34d); }
html[data-secos] .secos-wg-row-sev[data-sev="low"]      { color: var(--sev-low, #7dd3fc); }

/* chips (daily theme tags) */
html[data-secos] .secos-wg-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
html[data-secos] .secos-wg-chip {
    display: inline-flex; align-items: center; padding: 2px 7px;
    font-size: 9.5px; letter-spacing: .02em;
    background: color-mix(in oklab, var(--bg-1, #111016) 55%, transparent);
    border: 1px solid var(--line-2, #2a2733); color: var(--ink-2, #b9b3c9);
}
html[data-secos] .secos-wg-theme {
    font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.5;
    color: var(--ink, #efecf6);
}

/* threat level fallback */
html[data-secos] .secos-wg-tl { display: flex; flex-direction: column; gap: 10px; }
html[data-secos] .secos-wg-tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
html[data-secos] .secos-wg-tl-score {
    font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800;
    font-size: 30px; line-height: 1; color: var(--ink, #efecf6);
}
html[data-secos] .secos-wg-tl-score span { font-size: 12px; font-weight: 600; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-tl-lvl {
    font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--violet-bright, #9e74f6);
}

/* lock state (tier-gated widget) */
html[data-secos] .secos-wg-lock {
    display: flex; flex-direction: column; align-items: center; gap: 7px;
    padding: 16px 8px; text-align: center;
    font-size: 10px; letter-spacing: .05em; color: var(--ink-3, #6f6a7f);
    opacity: .82;
}
html[data-secos] .secos-wg-lock-ic { font-size: 18px; opacity: .7; }

/* operator search */
html[data-secos] .secos-wg-osrch { position: relative; }
html[data-secos] .secos-wg-search {
    width: 100%; box-sizing: border-box; padding: 7px 9px;
    background: color-mix(in oklab, var(--bg-1, #111016) 60%, transparent);
    border: 1px solid var(--line-2, #2a2733);
    color: var(--ink, #efecf6); font-family: inherit; font-size: 11px;
    transition: border-color .14s ease;
}
html[data-secos] .secos-wg-search::placeholder { color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-search:focus { outline: none; border-color: var(--violet-bright, #9e74f6); }
html[data-secos] .secos-wg-dropdown {
    margin-top: 4px; max-height: 200px; overflow-y: auto;
    border: 1px solid var(--line-2, #2a2733);
    background: color-mix(in oklab, var(--bg-1, #111016) 92%, transparent);
}
html[data-secos] .secos-wg-dd-item {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 6px 9px; text-align: left;
    background: transparent; border: 0; border-bottom: 1px solid var(--line, #211d2c);
    color: var(--ink-2, #b9b3c9); font-family: inherit; font-size: 10.5px;
    cursor: pointer; transition: background .12s ease, color .12s ease;
}
html[data-secos] .secos-wg-dd-item:last-child { border-bottom: 0; }
html[data-secos] .secos-wg-dd-item:hover {
    background: color-mix(in oklab, var(--violet, #7c3aed) 14%, transparent);
    color: var(--ink, #efecf6);
}
html[data-secos] .secos-wg-dd-nat { flex: none; font-size: 8.5px; letter-spacing: .05em; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-dd-empty { padding: 8px 9px; font-size: 10px; color: var(--ink-3, #6f6a7f); }

/* ── §4 the widgets.app catalog window ────────────────────────────────────── */
html[data-secos] .secos-wg-catalog { padding: 20px 22px; font-family: 'JetBrains Mono', monospace; }
html[data-secos] .secos-wg-cat-h {
    font-size: 11px; letter-spacing: .2em; color: var(--violet-bright, #9e74f6); margin-bottom: 18px;
}
html[data-secos] .secos-wg-cat-group { margin-bottom: 18px; }
html[data-secos] .secos-wg-cat-sec {
    font-size: 9.5px; letter-spacing: .12em; color: var(--ink-3, #6f6a7f);
    text-transform: uppercase; margin-bottom: 8px;
}
html[data-secos] .secos-wg-cat-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 10px; margin-bottom: 4px;
    background: color-mix(in oklab, var(--bg-1, #111016) 30%, transparent);
    border: 1px solid var(--line-2, #2a2733);
    transition: border-color .14s ease;
}
html[data-secos] .secos-wg-cat-row:hover { border-color: color-mix(in oklab, var(--violet, #7c3aed) 40%, var(--line-2, #2a2733)); }
html[data-secos] .secos-wg-cat-info { min-width: 0; }
html[data-secos] .secos-wg-cat-name {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 600; color: var(--ink, #efecf6);
}
html[data-secos] .secos-wg-cat-desc { margin-top: 3px; font-size: 10px; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-chip--tier {
    padding: 1px 6px; font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    border-radius: 0;
}
html[data-secos] .secos-wg-chip--tier[data-tier="2"] { color: var(--sev-high, #fdba74); border-color: color-mix(in oklab, var(--sev-high, #fdba74) 45%, transparent); }
html[data-secos] .secos-wg-chip--tier[data-tier="3"] { color: var(--violet-bright, #9e74f6); border-color: color-mix(in oklab, var(--violet, #7c3aed) 50%, transparent); }
html[data-secos] .secos-wg-chip--tier[data-tier="4"] { color: var(--sev-medium, #fcd34d); border-color: color-mix(in oklab, var(--sev-medium, #fcd34d) 45%, transparent); }
html[data-secos] .secos-wg-cat-add {
    flex: none; padding: 7px 15px; cursor: pointer;
    font-family: inherit; font-size: 11px;
    background: var(--bg-2, #17151e); color: var(--ink-2, #b9b3c9);
    border: 1px solid var(--line-2, #2a2733);
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
html[data-secos] .secos-wg-cat-add:hover {
    border-color: var(--violet-bright, #9e74f6); color: var(--ink, #efecf6);
    background: color-mix(in oklab, var(--violet, #7c3aed) 16%, var(--bg-2, #17151e));
}
html[data-secos] .secos-wg-cat-add:disabled { cursor: default; opacity: .8; }
html[data-secos] .secos-wg-cat-lock {
    flex: none; font-size: 9.5px; letter-spacing: .04em; color: var(--ink-3, #6f6a7f);
}

/* ── §5 the my_desktop.app window ─────────────────────────────────────────── */
html[data-secos] .secos-wg-desktops { padding: 20px 22px; font-family: 'JetBrains Mono', monospace; }
html[data-secos] .secos-wg-dk-h {
    font-size: 11px; letter-spacing: .2em; color: var(--violet-bright, #9e74f6); margin-bottom: 16px;
}
html[data-secos] .secos-wg-dk-list { display: flex; flex-direction: column; gap: 5px; }
html[data-secos] .secos-wg-dk-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px;
    background: color-mix(in oklab, var(--bg-1, #111016) 30%, transparent);
    border: 1px solid var(--line-2, #2a2733);
    transition: border-color .14s ease;
}
html[data-secos] .secos-wg-dk-row.is-active {
    border-color: color-mix(in oklab, var(--violet, #7c3aed) 50%, transparent);
    background: color-mix(in oklab, var(--violet, #7c3aed) 12%, transparent);
}
html[data-secos] .secos-wg-dk-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
html[data-secos] .secos-wg-dk-name { font-size: 12px; font-weight: 600; color: var(--ink, #efecf6); }
html[data-secos] .secos-wg-dk-count { font-size: 9.5px; letter-spacing: .04em; color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-dk-actions { display: flex; gap: 5px; flex: none; }
html[data-secos] .secos-wg-dk-actions button {
    padding: 5px 10px; cursor: pointer; font-family: inherit; font-size: 10px;
    background: var(--bg-2, #17151e); color: var(--ink-2, #b9b3c9);
    border: 1px solid var(--line-2, #2a2733);
    transition: border-color .14s ease, color .14s ease;
}
html[data-secos] .secos-wg-dk-actions button:hover { border-color: var(--violet-bright, #9e74f6); color: var(--ink, #efecf6); }
html[data-secos] .secos-wg-dk-actions button[data-act="delete"]:hover { border-color: var(--rose, #fb6f84); color: var(--rose, #fb6f84); }
html[data-secos] .secos-wg-dk-rename {
    width: 100%; box-sizing: border-box; padding: 5px 8px;
    background: var(--bg-2, #17151e); border: 1px solid var(--violet-bright, #9e74f6);
    color: var(--ink, #efecf6); font-family: inherit; font-size: 12px;
}
html[data-secos] .secos-wg-dk-rename:focus { outline: none; }
html[data-secos] .secos-wg-dk-new { display: flex; gap: 8px; margin-top: 16px; }
html[data-secos] .secos-wg-dk-input {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px;
    background: color-mix(in oklab, var(--bg-1, #111016) 60%, transparent);
    border: 1px solid var(--line-2, #2a2733);
    color: var(--ink, #efecf6); font-family: inherit; font-size: 11px;
    transition: border-color .14s ease;
}
html[data-secos] .secos-wg-dk-input::placeholder { color: var(--ink-3, #6f6a7f); }
html[data-secos] .secos-wg-dk-input:focus { outline: none; border-color: var(--violet-bright, #9e74f6); }
html[data-secos] .secos-wg-dk-add {
    flex: none; padding: 7px 14px; cursor: pointer;
    font-family: inherit; font-size: 11px;
    background: var(--bg-2, #17151e); color: var(--ink-2, #b9b3c9);
    border: 1px solid var(--line-2, #2a2733);
    transition: border-color .14s ease, color .14s ease, background .14s ease;
}
html[data-secos] .secos-wg-dk-add:hover {
    border-color: var(--violet-bright, #9e74f6); color: var(--ink, #efecf6);
    background: color-mix(in oklab, var(--violet, #7c3aed) 16%, var(--bg-2, #17151e));
}

/* ── §6 mobile: desktop widgets are a large-screen affordance ─────────────── */
@media (max-width: 768px) {
    html[data-secos] .secos-widget-layer { display: none; }
}

/* Touch: give the 18px widget controls a real ≥40px hit area on coarse pointers
   (the glyph stays 18px via the pseudo-element; matches .tl-win-btn's mobile bump). */
@media (pointer: coarse) {
  html[data-secos] .secos-widget-btn { position: relative; }
  html[data-secos] .secos-widget-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%); }
}