/* Self-host management workspace, using the same visual hierarchy as server configuration. */
.self-host-shell { --sh-bg:var(--bg); --sh-surface:var(--card); --sh-input:var(--field); --sh-text:var(--text); --sh-muted:var(--muted); --sh-line:var(--border); --sh-accent:var(--brand); --sh-selected:var(--selected); background:var(--sh-bg); color:var(--sh-text); margin:0; }
.self-host-workspace { display:grid; grid-template-columns:250px minmax(0,1fr); max-width:var(--portal-content-width); min-height:calc(100vh - 76px); margin:auto; }
.self-host-workspace * { box-sizing:border-box; }
.self-host-workspace [hidden] { display:none!important; }
.sh-sidebar { border-right:1px solid var(--sh-line); padding:30px 20px; }
.sh-sidebar-title { font-size:var(--text-subsection); font-weight:700; margin:0 0 24px; }
.sh-nav-label,.sh-eyebrow { color:var(--sh-muted); font-size:var(--text-eyebrow); font-weight:700; letter-spacing:.08em; margin:0 0 12px; }
.sh-sidebar nav { display:grid; gap:5px; margin-top:26px; }
.sh-sidebar nav a { display:block; padding:12px 14px; border-radius:8px; text-decoration:none; color:var(--sh-muted); font-size:var(--text-description); font-weight:500; }
.sh-sidebar nav a:hover { background:var(--sh-surface); color:var(--sh-text); }
.sh-sidebar nav a[aria-current=page] { background:var(--sh-selected); color:var(--sh-text); font-weight:650; }
.sh-sidebar nav a[aria-disabled=true] { opacity:.5; cursor:not-allowed; }
.sh-sidebar > .sh-nav-label { display:block; }
.sh-sidebar #servers { display:block; box-sizing:border-box; width:100%; min-width:0; min-height:var(--control-height); margin:0; padding:var(--control-padding); border:1px solid var(--sh-line); border-radius:var(--control-radius); background:var(--sh-input); color:var(--sh-text); font:inherit; font-size:var(--control-field-font-size); line-height:var(--control-line-height); text-overflow:ellipsis; }
.sh-sidebar #servers:focus-visible { outline:3px solid var(--focus-color); outline-offset:3px; }
/* Programmatic page focus supports navigation without outlining the whole workspace. */
#selfHostMain:focus { outline: none; }
.sh-sidebar #servers:disabled { opacity:.6; }
.self-host-page { min-width:0; padding:34px 38px 70px; }
.sh-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:24px; }
.sh-heading h1 { font-size:var(--text-title); line-height:1.3; margin:0 0 10px; letter-spacing:-.025em; }
.sh-eyebrow { color:var(--sh-muted); }
.sh-muted,#workspaceDescription { color:var(--sh-muted); font-size:var(--text-description); line-height:1.7; margin:0; max-width:720px; }
.sh-toolbar { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:8px; flex-shrink:0; }
.self-host-page .sh-card,.self-host-page .card { background:var(--sh-surface); border:1px solid var(--sh-line); border-radius:12px; padding:24px; margin:0 0 22px; box-shadow:none; min-width:0; }
.self-host-page h2 { margin:0 0 18px; font-size:var(--text-section); line-height:1.5; }
.self-host-page h3:not(.sh-portal-title):not(.sh-development-title) { margin:26px 0 0; padding-top:24px; border-top:1px solid var(--sh-line); font-size:var(--text-subsection); }
.self-host-page .sh-card>p:not([data-tone]) { color:var(--sh-muted); line-height:1.7; font-size:var(--text-body); }
.self-host-page #message:empty { display:none; }
.self-host-page #message:not(:empty) { padding:12px 16px; margin:0 0 22px; border:1px solid var(--sh-line); border-radius:8px; color:var(--sh-muted); font-size:var(--text-body); overflow-wrap:anywhere; }
.self-host-page form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; align-items:start; margin:20px 0 0; }
.self-host-page label { display:flex; flex-direction:column; gap:8px; min-width:0; font-size:var(--text-body); font-weight:550; margin:0; line-height:1.6; }
.self-host-page :is(input:not([type=checkbox]),select,textarea) { width:100%; min-width:0; min-height:var(--control-height); font:inherit; font-size:var(--control-field-font-size); color:var(--sh-text); background:var(--sh-input); border:1px solid var(--sh-line); border-radius:var(--control-radius); padding:var(--control-padding); }
.self-host-page :is(input,textarea)::placeholder { color:var(--sh-muted); opacity:.55; }
.self-host-page textarea { min-height:110px; resize:vertical; }
.self-host-page select[multiple] { min-height:130px; }
.self-host-page label:has(input[type=checkbox]) { flex-direction:row; align-items:center; justify-content:flex-start; min-height:44px; font-weight:400; grid-column:1/-1; }
.self-host-page input[type=checkbox] { width:18px!important; height:18px; flex:0 0 18px; margin:0; accent-color:var(--brand-text); }
.self-host-page button { min-height:var(--control-height); padding:var(--control-padding); border-radius:var(--control-radius); border:1px solid var(--sh-line); background:var(--brand); color:var(--on-brand); font:inherit; font-size:var(--control-font-size); font-weight:var(--control-font-weight); line-height:var(--control-line-height); box-shadow:none; cursor:pointer; transform:none; }
.self-host-page button:hover { border-color:var(--control-border);  transform:none; }
.self-host-page button.secondary { background:var(--button-secondary); color:var(--text); }
.self-host-page button.secondary:hover:not(:disabled) { background:var(--button-secondary-hover); color:var(--text); }
.self-host-page button:disabled { opacity:.5; cursor:not-allowed; }
.self-host-page form>button { justify-self:start; grid-column:1/-1; background:var(--brand); color:var(--on-brand); border-color:transparent; }
:root[data-theme=light] .self-host-page form>button { color:white; }
.self-host-page :is(a,button,input,textarea,select,summary):focus-visible,.sh-sidebar :is(a,button):focus-visible { outline:3px solid var(--focus-color); outline-offset:3px; }
.self-host-page a:not(.button-link) { color:var(--link); }
.self-host-page pre { white-space:pre-wrap; overflow-wrap:anywhere; background:var(--sh-input); padding:14px; border-radius:8px; font-size:var(--text-body); }
.self-host-page pre:empty { display:none; }
.self-host-page .sh-table-scroll { overflow-x:auto; }
.self-host-page table { width:100%; border-collapse:collapse; font-size:var(--text-body); }
.self-host-page th { color:var(--sh-muted); text-align:left; font-weight:500; font-size:var(--text-caption); padding:10px 12px; border-bottom:1px solid var(--sh-line); white-space:nowrap; }
.self-host-page td { padding:14px 12px; border-bottom:1px solid var(--sh-line); vertical-align:middle; overflow-wrap:anywhere; }
.self-host-page tr:last-child td { border-bottom:0; }
.self-host-page td>div,.sh-device-actions { display:flex; flex-wrap:wrap; gap:8px; }
.sh-device-actions:not(:empty) { margin-top:18px; }
.self-host-page .sh-danger { border-color:color-mix(in srgb,var(--danger) 55%,var(--sh-line)); }
.self-host-page .sh-danger button { color:var(--danger); background:var(--button-danger-soft); border-color:transparent; }
.self-host-page #scheduleTasks { grid-column:1/-1; display:grid; gap:12px; }
.self-host-page .schedule-task { display:grid; grid-template-columns:140px minmax(0,1fr) 120px auto; align-items:end; gap:12px; border:1px solid var(--sh-line); padding:16px; border-radius:8px; min-width:0; }
.self-host-page #recoveryTicket { margin-top:20px; }
.self-host-page #recoveryTicket:placeholder-shown { display:none; }
.self-host-page :is(#assignment,#endpointMigration,#update) label:has(textarea) { grid-column:1/-1; }
.self-host-guide summary { cursor:pointer; font-size:var(--text-description); font-weight:600; min-height:30px; }
.self-host-guide-content { color:var(--sh-muted); font-size:var(--text-description); line-height:1.8; }
.self-host-guide-content h3 { color:var(--sh-text); border:0; padding:0; margin:18px 0 6px; }
.self-host-guide-content p { margin:8px 0; }
#apiResults audio { display:block; max-width:100%; margin:16px 0; }
@media(max-width:1100px){.self-host-workspace{grid-template-columns:220px minmax(0,1fr)}.self-host-page{padding:28px 24px}.sh-heading{flex-direction:column;gap:12px}.self-host-page .schedule-task{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.self-host-workspace{display:block}.sh-sidebar{padding:18px 16px;border-right:0;border-bottom:1px solid var(--sh-line)}.sh-sidebar-title{margin-bottom:12px}.sh-sidebar nav{display:flex;overflow-x:auto;gap:6px;margin-top:16px;padding-bottom:6px}.sh-sidebar nav a{white-space:nowrap;flex-shrink:0;padding:10px 12px}.self-host-page{padding:24px 16px 48px}.self-host-page .sh-card,.self-host-page .card{padding:18px}.self-host-page form{grid-template-columns:minmax(0,1fr)}.sh-heading h1{font-size:24px}.self-host-page .schedule-task{grid-template-columns:1fr}.self-host-page td{min-width:90px}.self-host-page td:last-child{min-width:150px}}
.self-host-page button:hover:not(:disabled) { background:var(--brand-dark); color:var(--on-brand); transform:none; }
.self-host-page form>button:hover:not(:disabled) { background:var(--brand); color:var(--on-brand); }
:root[data-theme=light] .self-host-page form>button:hover:not(:disabled) { color:white; }
:is(.self-host-page,#localUserDialog) .sh-help-heading { display:flex; align-items:center; gap:2px; margin-bottom:16px; }
:is(.self-host-page,#localUserDialog) .sh-help-heading :is(h2,h3) { margin:0; flex:0 1 auto; min-width:0; }
.self-host-page .monitor-card .sh-help-heading:has(h3) { margin:24px 0 12px; padding-top:24px; border-top:1px solid var(--sh-line); }
.self-host-page .monitor-card .sh-help-heading h3 { padding:0; border:0; }
.self-host-page .sh-component-help { margin:0; min-width:0; }
.self-host-page .sh-component-help strong { min-width:0; overflow-wrap:anywhere; }
:is(.self-host-page,#localUserDialog) :is(.sh-toolbar,.monitor-panel-header) .sh-help-heading { margin:0; gap:2px; }
/* Match the settings config label helper: a muted 17px circled icon beside its label. */
:is(.self-host-page,#localUserDialog) .sh-help-trigger { display:grid; place-items:center; flex:0 0 32px; width:32px; height:32px; min-width:32px; min-height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--sh-muted); }
:is(.self-host-page,#localUserDialog) .sh-help-trigger svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:is(.self-host-page,#localUserDialog) .sh-help-trigger:hover { background:transparent; color:var(--sh-text); }
@media(max-width:720px){:is(.self-host-page,#localUserDialog) .sh-help-trigger{flex-basis:44px;width:44px;height:44px;min-width:44px;min-height:44px}}
#selfHostHelpDialog { position:fixed; z-index:100; margin:0; box-sizing:border-box; width:min(360px,calc(100vw - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:18px; border:1px solid var(--sh-line); border-radius:12px; background:var(--sh-surface); color:var(--sh-text); box-shadow:none; }
#selfHostHelpDialog[hidden] { display:none!important; }
#selfHostHelpDialog h2 { margin:0 0 14px; font-size:var(--text-emphasis); line-height:1.4; }
#selfHostHelpDialog h3 { margin:24px 0 10px; font-size:var(--text-subsection); }
#selfHostHelpDialog p,#selfHostHelpDialog li { color:var(--sh-muted); font-size:var(--text-body); line-height:1.8; overflow-wrap:anywhere; }
#selfHostHelpDialog ol { padding-left:24px; margin:0 0 24px; }
#selfHostHelpDialog li+li { margin-top:10px; }
#selfHostHelpDialog button { min-height:var(--control-height); padding:var(--control-padding); border:1px solid var(--sh-line); border-radius:var(--control-radius); background:var(--sh-selected); color:var(--sh-text); cursor:pointer; }
#selfHostHelpDialog button:focus-visible { outline:3px solid var(--focus-color); outline-offset:3px; }
@media(max-width:720px){#selfHostHelpDialog{padding:22px}.self-host-page .sh-toolbar{flex-wrap:wrap}}
.sh-activity-pagination { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:18px; font-size:var(--text-body); color:var(--sh-muted); }

.self-host-workspace.sh-empty{grid-template-columns:minmax(0,1fr)}
.sh-sidebar[hidden]{display:none}
.sh-empty .self-host-page{width:100%;max-width:1000px;margin-inline:auto}
.sh-toolbar{flex-wrap:wrap}

/* Creation occupies the content area without instance-management navigation. */
.sh-wizard-nav,.sh-wizard-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:20px}
.sh-wizard-nav p{margin:0}.sh-wizard-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;list-style:none;padding:0;margin:0 0 24px}
.sh-wizard-steps li{padding:14px 16px;border:1px solid var(--sh-line);border-radius:10px;color:var(--sh-muted)}
.sh-wizard-steps [aria-current=step]{color:var(--sh-text);border-color:var(--brand-text);font-weight:700;background:var(--sh-selected)}
.sh-wizard-panel{width:100%;padding:28px}.sh-wizard-panel h2{margin-top:0}.sh-wizard-panel p{line-height:1.7;margin:16px 0}
.sh-wizard-panel pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:16px;border:1px solid var(--sh-line);border-radius:8px;margin:20px 0}
.sh-wizard-panel button,.sh-download{min-height:var(--control-height)}.sh-wizard-panel form{margin-top:24px}
.sh-wizard-actions{margin:20px 0}.sh-wizard-panel #wizardManage{margin-top:12px}
@media(max-width:600px){.sh-wizard-steps{grid-template-columns:1fr;gap:8px}.sh-wizard-panel{padding:20px}.sh-wizard-actions{align-items:stretch;flex-direction:column}}

.self-host-page .sh-download{display:inline-flex;align-items:center;width:auto;margin-right:8px}

/* Decorative icons retain text labels and survive language changes. */
[data-action-icon]{display:inline-flex;align-items:center;justify-content:center;gap:8px}[data-action-icon]::before{content:"";display:inline-block;width:var(--control-icon-size);height:var(--control-icon-size);flex:0 0 var(--control-icon-size);background:currentColor;-webkit-mask:var(--action-icon) center/contain no-repeat;mask:var(--action-icon) center/contain no-repeat}
[data-action-icon="back"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2019-7-7%207-7M5%2012h14%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="forward"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%205%207%207-7%207M5%2012h14%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="plus"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="refresh"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%207v5h-5M4%2017v-5h5M6%207a7%207%200%200%201%2012-2l2%203M4%2016l2%203a7%207%200%200%200%2012-2%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="copy"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%228%22%20y%3D%228%22%20width%3D%2212%22%20height%3D%2212%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%208V4H4v12h4%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="key"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2215%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22m12%2011%208-8m-3%203%203%203m-6%200%203%203%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="save"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m17%203%204%204v14H3V3h14ZM7%203v6h10V3M7%2021v-8h10v8%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="send"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21%203-7%2018-4-7-7-4%2018-7ZM10%2014%2021%203%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="calendar"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%203v4M8%203v4M3%2011h18m-14%205h4%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="download"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203v12m-5-5%205%205%205-5M4%2016v5h16v-5%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="login"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203h7v18h-7M3%2012h13m-5-5%205%205-5%205%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="list"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="edit"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%205%204%204M4%2020l5-1L21%207l-4-4L5%2015l-1%205Z%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="delete"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M9%206V3h6v3M5%206l1%2015h12l1-15M10%2010v7m4-7v7%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="cancel"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229%22%2F%3E%3Cpath%20d%3D%22m8%208%208%208m0-8-8%208%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="cloud"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%2018H6a4%204%200%200%201-1-8%207%207%200%200%201%2013-2%205%205%200%200%201%200%2010h-1M12%2021V11m-4%204%204-4%204%204%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="play"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m8%204%2012%208-12%208V4Z%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="external"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%203h7v7m0-7L10%2014M10%203H3v18h18v-7%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="users"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M2%2021v-3a7%207%200%200%201%2014%200v3m1-11h5m-2.5-2.5v5%22%2F%3E%3C%2Fsvg%3E")}
[data-action-icon="loader"]{--action-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203a9%209%200%201%201-9%209%22%2F%3E%3C%2Fsvg%3E")}
#assignment{display:block}#assignmentChoices{margin:0;padding:12px;border:1px solid var(--border);border-radius:10px;min-width:0}#assignmentChoices legend{padding:0 6px}.sh-device-choices{max-height:320px;overflow:auto}.sh-device-choice{display:flex!important;align-items:center;gap:12px;min-height:44px;padding:8px;cursor:pointer}.sh-device-choice input{width:18px!important;height:18px;flex:0 0 18px;margin:0}.sh-device-choice span{overflow-wrap:anywhere}#assignmentResult{white-space:pre-wrap;overflow-wrap:anywhere}

.sh-confirm-dialog{box-sizing:border-box;width:min(580px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow:auto;padding:26px;border:1px solid var(--sh-line);border-radius:14px;background:var(--sh-surface);color:var(--sh-text);box-shadow:none}
.sh-confirm-dialog h2{margin:0 0 18px;font-size:20px}
.sh-confirm-dialog p{white-space:pre-line;overflow-wrap:anywhere;line-height:1.7;font-size:var(--text-description);color:var(--sh-muted);margin:0}
.sh-confirm-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px;padding-top:18px;border-top:1px solid var(--sh-line)}
.sh-confirm-actions button{min-height:var(--control-height);border:1px solid var(--sh-line);border-radius:var(--control-radius);padding:8px 16px;background:var(--sh-input);color:var(--sh-text);cursor:pointer}
.sh-confirm-actions #assignmentDialogConfirm{background:var(--brand);color:var(--on-brand);font-weight:650}
.sh-confirm-actions button:focus-visible{outline:2px solid var(--focus-color);outline-offset:3px}

.sh-confirm-heading{display:flex;align-items:center;gap:12px}
.sh-confirm-warning{width:26px;height:26px;flex-shrink:0;color:var(--warn)}

.sh-lifecycle-choice{display:flex;align-items:flex-start;gap:10px;margin:14px 0}.sh-lifecycle-choice input{width:auto;flex:0 0 auto;margin-top:5px}.sh-confirm-dialog fieldset{border:1px solid var(--sh-line);border-radius:8px;padding:12px}.sh-confirm-dialog>input,.sh-deleted-instance input{width:100%;box-sizing:border-box}.sh-deleted-instance{padding:16px 0;border-bottom:1px solid var(--sh-line)}

#deleteInstanceConsequences{margin:12px 0}

.sh-version{font-size:var(--text-body);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:var(--sh-muted);margin:8px 0 0}

/* Management workspace: bounded fields, consistent action rows and clear groups. */
.self-host-page{padding:28px 20px 60px}
.sh-heading{gap:20px;margin-bottom:20px}
.sh-heading h1{font-size:26px;margin-bottom:6px}
.sh-eyebrow{margin-bottom:6px;letter-spacing:.05em}
.sh-toolbar{align-items:center}
.sh-header-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px}
.sh-header-meta[hidden]{display:none}
.sh-version{display:inline-block;margin:0;padding:3px 9px;border:1px solid var(--sh-line);border-radius:6px;font-size:var(--text-caption);background:var(--sh-selected);color:var(--sh-text);font-weight:600}
.self-host-page .sh-card,.self-host-page .card{padding:22px;margin-bottom:20px;border-radius:10px}
.self-host-page .sh-form-card{max-width:840px}
.sh-panel-grid,.sh-device-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.sh-panel-grid>.sh-card,.sh-device-grid>.sh-card{margin-bottom:0}
.self-host-page .sh-span-full{grid-column:1/-1}
.self-host-page form{gap:18px 20px;margin-top:18px}
.self-host-page form.sh-form-stack{grid-template-columns:minmax(0,1fr)}
.self-host-page label{font-size:var(--text-body);font-weight:500;line-height:1.5;gap:7px}
.self-host-page label small{font-size:var(--text-caption);line-height:1.6;font-weight:400}
.self-host-page :is(input:not([type=checkbox]),select,textarea){font-size:var(--control-field-font-size);min-height:var(--control-height);padding:var(--control-padding)}
.self-host-page textarea{min-height:108px;line-height:1.6}
.self-host-page select[multiple]{min-height:120px;max-height:200px}
.self-host-page button,.sh-confirm-dialog button{width:auto;max-width:100%;min-height:var(--control-height);min-width:0;line-height:var(--control-line-height);padding:var(--control-padding);font-size:var(--control-font-size);font-weight:var(--control-font-weight);white-space:normal}
.self-host-page form>button{justify-self:start;width:auto;max-width:100%;grid-column:1/-1}
.self-host-page .sh-form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.self-host-page .sh-form-actions label:has(input[type=checkbox]){min-height:44px;margin:0;flex-direction:row}
.self-host-page .sh-form-actions button:not([type=button]),.sh-confirm-dialog .sh-button-primary{background:var(--brand);color:var(--on-brand);border-color:transparent}
.sh-check-group{display:flex;gap:12px 24px;flex-wrap:wrap;padding:12px 0;border-block:1px solid var(--sh-line)}
.self-host-page .sh-check-group label:has(input[type=checkbox]){min-height:32px}
.self-host-page .sh-command-form{grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(100px,.55fr);max-width:850px}
.self-host-page #schedule>label:first-child{max-width:400px}
.self-host-page .schedule-task{grid-template-columns:minmax(120px,.8fr) minmax(160px,1.5fr) minmax(110px,.75fr) auto;gap:14px;padding:16px;background:var(--sh-input);border-radius:8px}
.self-host-page .schedule-task label{min-width:0}
.self-host-page .schedule-task>button{align-self:end}
.self-host-page #configuration>label:first-child{grid-column:1/-1;max-width:500px}
.self-host-page #configuration label:has(select){max-width:400px}
.self-host-page #cloudNameHelp{font-size:var(--text-caption)}
#delegateList>p{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;border-bottom:1px solid var(--sh-line);overflow-wrap:anywhere}
#delegateList:empty{display:none}
#updateStatus{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:start;gap:6px 18px;margin-top:16px;padding:12px;border:1px solid var(--sh-line);border-radius:7px;background:var(--sh-input)}
#updateStatus p{margin:0;font-size:var(--text-body);line-height:1.6}
#updateStatus p:not([data-tone]){color:var(--sh-muted)}
#updateStatus p:first-child{color:var(--sh-text);font-weight:600}
.self-host-page :is(#update,#endpointMigration) textarea{font-family:ui-monospace,SFMono-Regular,monospace;font-size:var(--text-caption)}
.self-host-page .sh-danger>button{margin-top:12px}

/* Token editor uses the shared dialog and form tokens; only its field layout differs. */
/* Token editor uses explicit field/checkbox layouts to avoid generic label conflicts. */
#tokenDialog .sh-form-stack{display:grid;gap:20px;min-width:0}
#tokenDialog label:not(:has(input[type=checkbox])){display:flex;flex-direction:column;gap:6px;min-width:0}
#tokenDialog .sh-token-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:16px}
#tokenDialog fieldset{display:grid;gap:12px;min-width:0;margin:0;padding:16px}
#tokenDialog legend{font-size:var(--text-body);font-weight:600;padding-inline:6px}
#tokenDialog .sh-token-permission{display:flex;flex-direction:row;align-items:flex-start;gap:12px;min-height:44px;margin:0;text-align:start;cursor:pointer}
#tokenDialog .sh-token-permission-content{display:grid;gap:4px;min-width:0}
#tokenDialog .sh-token-permission-heading{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px}
#tokenDialog .sh-token-permission code{font-family:var(--font-mono,monospace);font-size:var(--text-caption);color:var(--sh-muted)}
#tokenDialog :is(small,.sh-token-help){font-size:var(--text-caption);line-height:1.5;color:var(--sh-muted)}
#tokenDialog .sh-token-help{display:grid;gap:2px}
#tokenDialog :is(input:not([type=checkbox]),select){width:100%;min-width:0;max-width:100%;box-sizing:border-box;font:inherit;margin:0}
#tokenDialog input[type=checkbox]{width:16px;height:16px;min-height:16px;flex:0 0 16px;margin:3px 0 0;accent-color:var(--brand-text)}
#tokenDialog [hidden]{display:none}
#tokenDialog [role=status]:empty{display:none}
#tokenDialog .sh-confirm-actions{margin-top:0}
@media(max-width:600px){#tokenDialog .sh-token-details{grid-template-columns:minmax(0,1fr)}#tokenDialog fieldset{padding:12px}}

#tokenSecret:empty{display:none}
#tokenSecret{display:flex;flex-wrap:wrap;gap:12px;margin-block:16px}
#tokenSecret p{flex-basis:100%}
#tokenSecret input{flex:1 1 20ch;min-width:0;font-family:var(--font-mono,monospace)}
/* API controls align to their fields; other workspace toolbars retain their layout. */
.sh-api-address-actions{justify-content:flex-start}
#tokenStatus{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-body);line-height:1.6;font-weight:500}
#tokenStatus:empty{display:none}
#tokenStatus[data-tone=syncing]{color:var(--info)}
#tokenStatus[data-tone=success]{color:var(--ok)}
#tokenStatus[data-tone=danger]{color:var(--danger)}
#tokenStatus[data-tone=warning]{color:var(--warn)}
#tokenStatus .sh-loading-spinner{flex:0 0 20px;box-sizing:border-box;margin-top:2px;border-top-color:currentColor}
.sh-token-toolbar{display:flex;align-items:flex-end;justify-content:flex-start;flex-wrap:wrap;gap:var(--control-gap,8px);margin-block:16px}
.sh-token-toolbar label{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:100%}
.sh-token-toolbar select{min-width:16ch;max-width:100%}
.sh-token-table table{width:100%;min-width:440px;table-layout:fixed}
.sh-token-table th:first-child{width:22%}
.sh-token-table th:last-child{width:24%}
.sh-token-table :is(td,th){overflow-wrap:anywhere;vertical-align:top}
.sh-token-value{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
/* Bearer values use monospace to make exact copying/inspection unambiguous. */
.sh-token-value code{font-family:var(--font-mono,monospace);overflow-wrap:anywhere;white-space:normal;min-width:0}
.sh-token-actions button{margin-inline-end:8px;margin-block-end:8px;white-space:nowrap}
@media(max-width:720px){.sh-token-table :is(td,th){padding-inline:6px}.sh-token-table th:first-child{width:20%}.sh-token-table th:last-child{width:30%}.sh-token-actions button,.sh-token-value button{white-space:nowrap}}
.sh-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:0}
.sh-summary-grid>div{min-width:0;border-right:1px solid var(--sh-line);padding-right:18px}
.sh-summary-grid>div:nth-child(4n),.sh-summary-grid>div:last-child{border-right:0;padding-right:0}
.sh-summary-grid dt{color:var(--sh-muted);font-size:var(--text-caption);margin-bottom:8px}
.sh-summary-grid dd{margin:0;font-size:var(--text-subsection);line-height:1.5;font-weight:550;overflow-wrap:anywhere}
.sh-portal-address { display:flex; flex-direction:column; gap:16px; margin-bottom:24px; padding:20px; border:1px solid var(--sh-line); border-radius:var(--control-radius); background:var(--sh-input); }
.sh-portal-address h3 { margin:0; font-size:var(--text-body); color:var(--sh-text); }
.sh-portal-route { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.sh-portal-route + .sh-portal-route { padding-top:16px; border-top:1px solid var(--sh-line); }
.sh-portal-address-content { min-width:0; }
.sh-portal-route-title { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 4px; color:var(--sh-muted); font-size:var(--text-caption); font-weight:600; }
.sh-portal-url { margin:0; color:var(--sh-text); font-size:var(--text-subsection); font-weight:600; line-height:1.5; overflow-wrap:anywhere; }
.sh-portal-address .sh-portal-address-help { margin:4px 0 0; color:var(--sh-muted); font-size:var(--text-caption); line-height:1.6; }
.sh-portal-address > .sh-portal-address-help { margin:0; }
.sh-portal-address .button-link { flex-shrink:0; min-height:44px; }
@media(max-width:600px) { .sh-portal-address { padding:16px; } .sh-portal-route { flex-direction:column; align-items:flex-start; gap:12px; } }
.sh-summary-grid .sh-muted{font-size:var(--text-caption);margin-top:6px}
.sh-empty-state{padding:24px 16px;margin:16px 0 0;text-align:center;border:1px dashed var(--sh-line);border-radius:8px;color:var(--sh-muted);font-size:var(--text-body);line-height:1.7}

/* Device placement is distinct from presence and handoff state. */
.sh-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.self-host-page .sh-section-heading h2,.self-host-page .sh-section-heading .sh-help-heading{margin:0}
.sh-count{display:inline-grid;place-items:center;min-width:28px;padding:3px 7px;line-height:1.4;background:var(--sh-selected);color:var(--sh-text);border-radius:6px;font-size:var(--text-caption);font-weight:650}
.self-host-page .sh-section-description{font-size:var(--text-body);line-height:1.7;color:var(--sh-muted);margin:0 0 18px}
.self-host-page #assignment{margin:0}
.self-host-page #assignmentChoices{padding:0;border:0;border-radius:0;margin:0;min-width:0}
.sh-sr-only{position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.self-host-page .sh-device-choice{display:flex;align-items:center;gap:12px;min-height:66px;padding:12px;border:1px solid var(--sh-line);border-radius:8px;font-weight:400;margin:0}
.self-host-page .sh-device-choice:hover{background:color-mix(in srgb,var(--sh-accent) 5%,var(--sh-surface))}
.self-host-page .sh-device-choice:not(.sh-select-all):has(input:checked){background:color-mix(in srgb,var(--sh-accent) 10%,var(--sh-surface));border-color:color-mix(in srgb,var(--sh-accent) 60%,var(--sh-line))}
.self-host-page .sh-device-choice:has(input:focus-visible){outline:2px solid var(--focus-color);outline-offset:1px}
.self-host-page .sh-device-choice input:focus-visible{outline:none;box-shadow:none}
.self-host-page .sh-select-all{min-height:44px;padding:var(--control-padding);margin:0 3px 8px;border-color:transparent;color:var(--sh-muted);font-size:var(--control-field-font-size)}
.sh-device-choices{display:grid;gap:8px;max-height:380px;overflow:auto;padding:3px}
.sh-device-choice .sh-presence{flex-shrink:0}
.sh-device-identity{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.sh-device-identity strong{font-size:var(--text-body);color:var(--sh-text);font-weight:600;overflow-wrap:anywhere}
.sh-device-identity code{font:11px/1.5 ui-monospace,SFMono-Regular,monospace;color:var(--sh-muted);overflow-wrap:anywhere;background:none;padding:0}
.sh-presence{display:inline-flex;align-items:center;padding:3px 8px;border-radius:5px;font-size:var(--text-caption);font-weight:600;white-space:nowrap;background:var(--muted);color:var(--bg)}
.sh-presence[data-status=online]{background:var(--ok);color:var(--on-ok)}
.sh-presence[data-status=offline]{background:var(--danger);color:var(--on-danger)}
.sh-presence[data-status=slow_response]{background:var(--warn);color:var(--on-warn)}
.self-host-page #assignment .sh-form-actions{padding-top:16px;margin:0;justify-content:space-between}
#assignmentStatus:empty,#assignmentResult:empty{display:none}
#assignmentStatus:not(:empty){margin:12px 0}
#assignmentResult:not(:empty){margin:16px 0 0;padding:12px;background:var(--sh-input);border-radius:6px;font-size:var(--text-body);line-height:1.6}
.self-host-page .sh-device-guidance{margin:16px 0 0;color:var(--sh-muted);font-size:var(--text-caption);line-height:1.8;max-width:920px;padding-left:12px;border-left:2px solid var(--sh-line)}
#deviceTable{container-type:inline-size}
#deviceTable :is(table,thead,tbody){display:block;width:100%;min-width:0}
#deviceTable tr{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr) 180px;gap:12px;align-items:center;border-bottom:1px solid var(--sh-line)}
.self-host-page #deviceTable :is(th,td){display:block;width:auto;min-width:0;padding:12px 0;border:0}
.self-host-page #deviceTable td>div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
#deviceTable .sh-device-actions{margin:0}
#deviceTable td:last-child{justify-self:end}
#deviceTable button{font-size:var(--control-font-size);white-space:nowrap;flex-shrink:0}
@container(max-width:650px){
  #deviceTable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #deviceTable tr{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;padding:16px 0}
  .self-host-page #deviceTable td{padding:0}
  #deviceTable td:last-child{grid-column:1/-1}
  #deviceTable tr:last-child{border-bottom:0}
}
.sh-assignment-state{font-size:var(--text-eyebrow);line-height:1.4;color:var(--sh-muted)}

/* Dialog controls have explicit intent; never infer it from an element ID. */
.sh-confirm-dialog{padding:24px;width:min(640px,calc(100vw - 32px))}
.sh-confirm-dialog h2{font-size:19px;margin:0 0 20px}
.sh-confirm-dialog h3{font-size:var(--text-subsection);line-height:1.5;margin:0}
.sh-confirm-dialog button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--sh-line);border-radius:var(--control-radius);background:var(--sh-input);color:var(--sh-text);box-shadow:none;transform:none;cursor:pointer}
.sh-confirm-dialog button:hover:not(:disabled){background:var(--sh-selected);border-color:var(--control-border);color:var(--sh-text);transform:none}
.sh-confirm-dialog button:disabled{opacity:.45;cursor:not-allowed}
.sh-confirm-dialog button:focus-visible{outline:3px solid var(--focus-color);outline-offset:3px}
.sh-confirm-dialog .sh-button-danger,.self-host-page .sh-button-danger{color:var(--danger);background:var(--button-danger-soft);border-color:transparent}
:is(.sh-confirm-dialog,.self-host-page) .sh-button-danger:hover:not(:disabled){color:var(--danger);background:var(--button-danger-soft-hover);border-color:var(--danger)}
.sh-confirm-actions{position:sticky;bottom:-24px;background:var(--sh-surface);margin-top:20px;padding:16px 0 0;gap:10px}
.sh-deleted-instance{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding:18px 0}
.sh-deleted-instance:first-child{padding-top:0}
.sh-deleted-instance:last-child{border-bottom:0;padding-bottom:0}
.sh-deleted-instance>p{font-size:var(--text-caption);line-height:1.6;grid-column:1}
.sh-deleted-instance>button{grid-column:2;grid-row:1/4;align-self:center}
.sh-confirm-dialog fieldset{margin-top:16px}
.sh-confirm-dialog :is(input:not([type=checkbox]):not([type=radio]),textarea){min-height:44px;margin-top:8px}
[data-action-icon="close"]{--action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M18 6 6 18'/%3E%3C/svg%3E")}
@media(max-width:1200px){.sh-device-grid{grid-template-columns:minmax(0,1fr)}.sh-panel-grid{grid-template-columns:minmax(0,1fr)}.self-host-page .sh-span-full{grid-column:1/-1}.sh-device-choices{max-height:300px}.self-host-page{padding-inline:20px}}
@media(max-width:720px){.self-host-page{padding:22px 16px 44px}.self-host-page .sh-card,.self-host-page .card{padding:18px}.sh-heading h1{font-size:24px}.sh-toolbar{gap:8px}.sh-summary-grid{grid-template-columns:1fr;gap:16px}.sh-summary-grid>div{border-right:0;border-bottom:1px solid var(--sh-line);padding:0 0 14px}.sh-summary-grid>div:last-child{border-bottom:0;padding:0}.self-host-page .sh-command-form,.self-host-page .schedule-task{grid-template-columns:minmax(0,1fr)}.self-host-page :is(input:not([type=checkbox]),select,textarea){font-size:var(--text-emphasis);min-height:44px}.sh-form-actions{align-items:flex-start}.self-host-page #assignment .sh-form-actions{align-items:center}.self-host-page #assignmentCount{font-size:var(--text-caption)}.self-host-page #deviceTable button{padding:8px;font-size:var(--control-font-size)}.sh-presence{font-size:var(--text-eyebrow)}.sh-deleted-instance{grid-template-columns:1fr;gap:6px}.sh-deleted-instance>button{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px}.sh-confirm-dialog{padding:20px}.sh-confirm-actions{bottom:-20px}.sh-panel-grid,.sh-device-grid{gap:16px}.sh-check-group{gap:8px 18px}}
@media(prefers-reduced-motion:reduce){.self-host-shell :is(button,a,input,select,textarea){transition:none}}
.self-host-page .sh-check-group label:has(input[type=checkbox]){min-height:44px}
.self-host-page .sh-danger .sh-help-trigger{background:transparent;color:var(--sh-muted);border:0}
.self-host-page .sh-command-form{align-items:end}
@media(max-width:480px){
  #userTable table,#userTable tbody{display:block}
  #userTable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  #userTable tr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;padding:16px 0;border-bottom:1px solid var(--sh-line)}
  #userTable tr:last-child{border-bottom:0}
  .self-host-page #userTable td{display:block;border:0;padding:0}
  #userTable td:first-child{font-weight:600}
  #userTable td:last-child{grid-column:1/-1}
  #userTable td>div{display:flex;flex-wrap:wrap;gap:8px}
}

.sh-deleted-timestamp{grid-column:1;font-size:var(--text-caption);line-height:1.6;color:var(--sh-muted)}
.sh-deleted-instance>button{grid-row:1/5}
@media(max-width:720px){.sh-deleted-instance>button{grid-row:auto}}
@media(min-width:641px) and (max-width:720px){.sh-sidebar,.self-host-page{padding-inline:20px}}

/* Meaningful status colors always accompany explicit text labels. */
.self-host-page [data-tone="success"] { color: var(--ok); }
.self-host-page [data-tone="attention"] { color: var(--warn); }
.self-host-page [data-tone="danger"] { color: var(--danger); }
.self-host-page [data-tone="progress"] { color: var(--info); }
.self-host-page [data-tone="muted"] { color: var(--muted); }
.sh-upgrade-versions { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 48rem; margin-bottom: var(--space-4); }
.sh-upgrade-versions > div:nth-child(2), .sh-upgrade-versions > div:nth-child(2) ~ div { border-right: 0; padding-right: 0; }
@media (max-width: 720px) { .sh-upgrade-versions > div { border-bottom: 0; padding-bottom: 0; } }
.sh-upgrade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 48rem; }
.sh-upgrade-form label { display: grid; gap: .4rem; min-width: 0; }
.sh-upgrade-form > :not(label) { grid-column: 1 / -1; }
.sh-upgrade-form select, .sh-upgrade-form input, .sh-upgrade-form textarea { min-width: 0; width: 100%; box-sizing: border-box; }
.sh-upgrade-window { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.sh-upgrade-window label:last-child { grid-column: 1 / -1; }
.sh-upgrade-form .sh-upgrade-warning { grid-column: 1 / -1; display: flex; align-items: flex-start; line-height: 1.6; }
.sh-upgrade-warning input { width: auto; flex: 0 0 auto; margin-top: .4rem; }
.sh-upgrade-form [hidden] { display: none; }
.sh-upgrade-request { display: grid; gap: .5rem; border-top: 1px solid var(--border); padding: 1rem 0; }
.sh-upgrade-request button { justify-self: start; }
.sh-upgrade-request progress { width: min(100%, 24rem); accent-color: var(--brand-text); }
#upgradeRequests { margin-top: 1rem; }
@media (max-width: 640px) { .sh-upgrade-form, .sh-upgrade-window { grid-template-columns: minmax(0, 1fr); } }
.sh-header-actions { max-width: 440px; min-width: 0; }
.sh-recent-alerts { display: grid; width:max-content; max-width:100%; margin-left:auto; gap: 6px; margin-top: 14px; font-size:var(--text-caption); }
.sh-recent-alerts a { display:grid; grid-template-columns:16px minmax(0,1fr) auto; align-items: center; gap: 7px; text-decoration: none; }
.sh-recent-alerts a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-recent-alerts small { margin-left: 5px; text-align:right; white-space: nowrap; opacity: .8; }
.sh-nav-group { margin-top: 18px; }
.sh-sidebar .sh-nav-group h2 { font-size:var(--text-eyebrow); font-weight: 600; color: var(--sh-muted); margin: 0 12px 7px; }
.sh-sidebar .sh-nav-group a { display: flex; align-items: center; gap: 10px; font-size:var(--text-body); min-height: 42px; }
.sh-nav-toggle { display: none; align-items: center; gap: 10px; box-sizing: border-box; width: 100%; min-height: 44px; margin-top: 10px; padding: var(--control-padding); border: 1px solid var(--sh-line); border-radius: var(--control-radius); background: var(--sh-input); color: var(--sh-text); font: inherit; font-size: var(--control-field-font-size); font-weight: 650; text-align: start; cursor: pointer; }
.sh-sidebar .sh-nav-toggle:hover:not(:disabled),.sh-sidebar .sh-nav-toggle:active:not(:disabled),.sh-sidebar[data-nav-open] .sh-nav-toggle { background: var(--sh-selected); border-color: var(--control-border); color: var(--sh-text); box-shadow: none; transform: none; }
.sh-nav-toggle > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-nav-toggle::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-inline-end: 4px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.sh-sidebar[data-nav-open] .sh-nav-toggle::after { transform: rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) { .sh-nav-toggle::after { transition: transform 150ms var(--ease-standard); } }
@media(max-width: 720px) {
 .sh-sidebar nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
 .sh-nav-group { min-width: 0; margin-top: 8px; }
 .sh-sidebar .sh-nav-group a { white-space: normal; }
 .sh-header-actions { width: 100%; max-width: none; }
 /* Mobile: the section list collapses behind a toggle that shows the current section, so content starts above the fold. */
 .sh-sidebar-title { display: none; }
 .sh-nav-toggle { display: flex; }
 .sh-sidebar:not([data-nav-open]) nav { display: none; }
 .sh-sidebar nav { margin-top: 10px; }
}
.sh-header-actions { flex: 0 0 auto; width: min(440px, 100%); }
.sh-heading > :first-child { min-width: 0; }
/* All workspace badges use filled shared colors and contrasting text tokens. */
.sh-instance-badge { display:inline-block; font-size:var(--text-eyebrow); padding:3px 8px; border-radius:5px; font-weight:600; background:var(--muted); color:var(--bg); }
.sh-instance-badge[data-status=active] { background:var(--ok); color:var(--on-ok); }
.sh-instance-badge[data-status=warning] { background:var(--warn); color:var(--on-warn); }
.sh-instance-badge[data-status=inactive] { background:var(--danger); color:var(--on-danger); }
/* Public access: the address leads the row and long hostnames wrap instead of overflowing. */
#publicAccessLink { justify-content:flex-start; }
#publicAccessUrl { overflow-wrap:anywhere; }
.sh-loading { display: flex; justify-content: center; align-items: center; gap: 12px; min-height: 240px; color: var(--sh-muted); font-size:var(--text-body); }
.sh-loading-spinner { width: 20px; height: 20px; border: 2px solid var(--sh-line); border-top-color: var(--brand-text); border-radius: 50%; animation: spin 1s linear infinite; }
@media(prefers-reduced-motion:reduce) { .sh-loading-spinner { animation: none; } }

.sh-event { padding: 12px 0; border-bottom: 1px solid var(--sh-line); font-size:var(--text-caption); }
.sh-event:first-child { padding-top: 0; }
.sh-event-heading { display: flex; align-items: center; gap: 10px; }
.sh-event-heading strong { flex: 1; min-width: 0; font-size:var(--text-body); overflow-wrap: anywhere; }
.sh-event-heading time { color: var(--sh-muted); white-space: nowrap; font-size:var(--text-caption); }
.sh-event-open { color: var(--warn); }
.sh-event-resolved { color: var(--ok); }
.sh-event details { margin: 4px 0 0 26px; }
.sh-event summary { cursor: pointer; color: var(--sh-muted); width: fit-content; padding: 3px 0; }
.sh-event details p { margin: 6px 0; font-size:var(--text-caption); white-space: pre-wrap; }
.sh-event-pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 16px; font-size:var(--text-caption); color: var(--sh-muted); }
.sh-event-pagination button { width: auto; }
@media(max-width:600px) { .sh-event-heading { flex-wrap: wrap; } .sh-event-heading time { width: 100%; margin-left: 26px; } .sh-event summary { min-height: 32px; } }

/* Service controls use the shared semantic colors, including hover states. */
.self-host-page button[data-service-action="start"] { background:var(--button-positive-soft); color:var(--ok); }
.self-host-page button[data-service-action="start"]:hover:not(:disabled) { background:var(--button-positive-soft-hover); color:var(--ok); }
.self-host-page button[data-service-action="stop"] { background:var(--button-caution-soft); color:var(--warn); }
.self-host-page button[data-service-action="stop"]:hover:not(:disabled) { background:var(--button-caution-soft-hover); color:var(--warn); }
[data-action-icon="stop"] { --action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3C/svg%3E"); }


.sh-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.sh-panel-heading h2{margin:0}
.sh-panel-heading button{white-space:nowrap;flex-shrink:0}
#localUserDialog{max-height:calc(100dvh - 40px);overflow:auto}
#localUserDialog #userSaveStatus:empty{display:none}
#localUserDialog #userSaveStatus{white-space:pre-wrap;overflow-wrap:anywhere}

#localUserDialog form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#localUserDialog label{display:flex;flex-direction:column;gap:6px}
#localUserDialog :is(input:not([type=checkbox]),select){width:100%;min-width:0;margin:0;min-height:var(--control-height)}
#localUserDialog .sh-span-full{grid-column:1/-1}
#localUserDialog .sh-check-group{display:flex;gap:16px;flex-wrap:wrap}
#localUserDialog label:has(input[type=checkbox]){min-height:var(--control-height);min-width:44px;flex:0 0 auto;width:auto;flex-direction:row;align-items:center;gap:8px;white-space:nowrap}
#localUserDialog input[type=checkbox]{width:16px;height:16px;min-width:16px;min-height:16px;flex:0 0 16px;margin:0;padding:0}
#localUserDialog .sh-check-group label span{flex:none;white-space:nowrap}
#localUserDialog form>button{justify-self:start}
@media(max-width:480px){#deviceTable table{min-width:0}#localUserDialog form{grid-template-columns:1fr}}

/* Device management needs room for three readable columns and complete actions. */
.sh-device-grid{grid-template-columns:minmax(0,1fr)}
@container(max-width:650px){
  #deviceTable tr{grid-template-columns:minmax(0,1fr) max-content;gap:6px 12px}
  #deviceTable td:first-child{grid-column:1;grid-row:1}
  #deviceTable td:nth-child(2){grid-column:1;grid-row:2}
  #deviceTable td:last-child{grid-column:2;grid-row:1/3;align-self:center}
  .self-host-page #deviceTable td:nth-child(2)>div{flex-direction:row;flex-wrap:wrap;gap:4px 10px}
}
#userTable td:last-child>div{flex-wrap:nowrap;align-items:center}
#userTable button{white-space:nowrap}

#deviceTable th:last-child{text-align:right}

#localUserDialog .sh-panel-heading .sh-help-heading{margin:0}

.sh-maintenance-confirm{max-height:calc(100dvh - 32px);overflow:auto}
.sh-maintenance-confirm ul{padding-left:20px;font-size:var(--text-body);line-height:1.65}
.sh-maintenance-confirm li+li{margin-top:8px}
.sh-maintenance-ack{display:flex;align-items:flex-start;gap:10px;font-size:var(--text-body);line-height:1.6;margin-top:20px}
.sh-maintenance-ack input{flex:0 0 16px;width:16px;height:16px;min-width:16px;min-height:16px;margin:3px 0 0}
.sh-maintenance-confirm .sh-confirm-actions{display:flex;justify-content:flex-end}

#localUserDialog #userSaveStatus[data-tone="success"]{color:var(--ok)}
#localUserDialog #userSaveStatus[data-tone="danger"]{color:var(--danger)}
#localUserDialog #userSaveStatus[data-tone="progress"]{color:var(--info)}

/* Development-only update row owns its separators; its title has no subsection divider. */
.sh-development-reload { --reload-accent:var(--sh-line); --reload-background:transparent; display:grid; gap:12px; margin-block:20px; padding:16px; border-block:2px solid var(--reload-accent); border-inline:1px solid color-mix(in srgb,var(--reload-accent) 40%,var(--sh-line)); border-radius:var(--control-radius); background:var(--reload-background); }
.sh-development-reload[data-reload-state=success] { --reload-accent:var(--ok); --reload-background:var(--button-positive-soft); }
.sh-development-reload[data-reload-state=failure] { --reload-accent:var(--danger); --reload-background:var(--button-danger-soft); }
.sh-development-reload[data-reload-state=progress] { --reload-accent:var(--warn); --reload-background:var(--button-caution-soft); }
.sh-development-reload[hidden] { display:none; }
.sh-development-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.sh-development-title { margin:0; font-size:var(--text-subsection); line-height:1.5; color:var(--sh-text); }
.sh-development-reload p { margin:0; color:var(--sh-text); font-size:var(--text-body); line-height:1.6; }
.sh-development-reload .sh-form-actions { margin:0; }
.sh-plan-facts{margin:var(--space-3) 0;padding-left:var(--space-5);line-height:1.7}