/* ForgeBox OS — Home tray flyout + tabs.
   Inherits .os-flyout positioning from shell.css. */

.os-tray-home[hidden] { display: none; }

.os-home-tabs {
    display: flex;
    gap: 4px;
    padding: 2px 0;
    border-bottom: 1px solid var(--os-surface-border);
}
.os-home-tabs button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--os-fg-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 6px;
}
.os-home-tabs button:hover { color: var(--os-fg); background: rgba(255,255,255,0.06); }
.os-home-tabs button.active,
.os-home-tabs button[aria-selected="true"] {
    color: var(--os-fg);
    background: var(--os-accent-soft);
}

.os-home-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-top: 6px;
    min-height: 140px;
}

.os-home-empty {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
    padding: 24px 8px 16px;
    color: var(--os-fg-muted);
}
.os-home-empty-msg { margin: 0; text-align: center; font-size: 13px; }
.os-home-loading { padding: 20px 8px; color: var(--os-fg-muted); text-align: center; font-size: 13px; }
.os-home-error   { padding: 20px 8px; color: #ff8585;            text-align: center; font-size: 13px; }

.os-home-add-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}
.os-home-add-tile {
    appearance: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--os-surface-border);
    border-radius: 8px;
    color: var(--os-fg);
    padding: 12px 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.os-home-add-tile small {
    color: var(--os-fg-muted);
    font-size: 11px;
}
.os-home-add-tile[disabled] {
    cursor: not-allowed;
    opacity: 0.55;
}

.os-home-pair-panel {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--os-surface-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.os-home-pair-panel[hidden] { display: none; }
.os-home-pair-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}
.os-home-pair-title { color: var(--os-fg); font-weight: 500; }
.os-home-pair-cancel {
    appearance: none;
    background: transparent;
    border: 1px solid var(--os-surface-border);
    border-radius: 6px;
    color: var(--os-fg-muted);
    cursor: pointer;
    padding: 4px 10px;
    font: inherit;
    font-size: 12px;
}
.os-home-pair-cancel:hover { color: var(--os-fg); }
.os-home-pair-empty { color: var(--os-fg-muted); font-size: 12px; margin: 0; }

.os-home-pair-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.os-home-pair-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    font-size: 13px;
}
.os-home-pair-name { color: var(--os-fg); }
.os-home-pair-addr { color: var(--os-fg-muted); font-size: 11px; font-family: monospace; }
.os-home-pair-claim {
    appearance: none;
    background: var(--os-accent);
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
}
.os-home-claim-form {
    grid-column: 1 / -1;
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.os-home-claim-form input {
    flex: 1;
    appearance: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--os-surface-border);
    border-radius: 6px;
    color: var(--os-fg);
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
}
.os-home-claim-form button {
    appearance: none;
    background: var(--os-accent);
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
}
.os-home-pair-success {
    color: var(--os-fg);
    background: rgba(60, 200, 110, 0.18);
    border: 1px solid rgba(60, 200, 110, 0.5);
    padding: 8px 10px;
    border-radius: 6px;
    margin: 0;
    font-size: 13px;
}

.os-home-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.os-home-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
}
.os-home-row:hover { background: rgba(255,255,255,0.06); }
.os-home-row-label { color: var(--os-fg); }
.os-home-row-sub   { color: var(--os-fg-muted); font-size: 12px; }

.os-home-device-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.os-home-device-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
}
.os-home-device-row[data-online="0"] { opacity: 0.6; }
.os-home-device-head {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px;
}
.os-home-device-controls {
    display: flex; align-items: center; gap: 8px;
}
.os-home-volume {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 4px;
    background: rgba(255,255,255,0.18);
    border-radius: 2px;
    outline: none;
}
.os-home-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--os-accent);
    cursor: pointer;
    border: 0;
}
.os-home-volume::-moz-range-thumb {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--os-accent);
    cursor: pointer;
    border: 0;
}
.os-home-volume:disabled { opacity: 0.45; cursor: not-allowed; }
.os-home-volume-pct {
    min-width: 38px;
    text-align: right;
    color: var(--os-fg-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* Scenes */
.os-home-scene-add summary {
    cursor: pointer;
    color: var(--os-accent);
    font-size: 13px;
    padding: 4px 0;
    user-select: none;
}
.os-home-scene-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 8px;
    border: 1px solid var(--os-surface-border);
    border-radius: 6px;
    background: rgba(255,255,255,0.03);
}
.os-home-scene-form input,
.os-home-scene-form textarea {
    appearance: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--os-surface-border);
    border-radius: 4px;
    color: var(--os-fg);
    font: inherit;
    font-size: 12px;
    padding: 6px 8px;
}
.os-home-scene-form textarea { font-family: ui-monospace, Menlo, monospace; }
.os-home-scene-form button {
    appearance: none;
    background: var(--os-accent);
    color: white;
    border: 0;
    border-radius: 6px;
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    align-self: flex-end;
}
.os-home-scene-error input,
.os-home-scene-error textarea { border-color: #e05a5a; }
.os-home-scene-hint { margin: 0; color: var(--os-fg-muted); font-size: 11px; }

.os-home-scene-list { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 2px; }
.os-home-scene-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
}
.os-home-scene-row:hover { background: rgba(255,255,255,0.06); }
.os-home-scene-run, .os-home-scene-delete {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--os-fg-muted);
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 4px;
    font-size: 14px;
}
.os-home-scene-run:hover { color: var(--os-accent); background: rgba(255,255,255,0.1); }
.os-home-scene-run.busy { opacity: 0.5; pointer-events: none; }
.os-home-scene-delete:hover { color: #ff8585; background: rgba(255,255,255,0.1); }
.os-home-scene-label { color: var(--os-fg); }
.os-home-scene-meta { color: var(--os-fg-muted); font-size: 11px; }

/* Editable lists (zones, people) */
.os-home-editable {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.os-home-add-row {
    display: flex;
    gap: 6px;
    align-items: center;
}
.os-home-add-input {
    flex: 1;
    appearance: none;
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--os-surface-border);
    border-radius: 6px;
    color: var(--os-fg);
    font: inherit;
    font-size: 13px;
    padding: 6px 8px;
}
.os-home-add-input:focus { outline: 2px solid var(--os-accent); outline-offset: 0; border-color: var(--os-accent); }
.os-home-add-input.os-home-input-error { border-color: #e05a5a; }
.os-home-add-commit {
    appearance: none;
    background: var(--os-accent);
    color: white;
    border: 0;
    border-radius: 6px;
    width: 30px; height: 30px;
    font: inherit; font-size: 16px; line-height: 1;
    cursor: pointer;
}
.os-home-add-commit:disabled { opacity: 0.5; cursor: progress; }

.os-home-edit-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.os-home-edit-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
}
.os-home-edit-row:hover { background: rgba(255,255,255,0.06); }
.os-home-edit-label {
    flex: 1;
    color: var(--os-fg);
    padding: 2px 4px;
    border-radius: 4px;
    cursor: text;
}
.os-home-edit-label[contenteditable="true"] {
    background: rgba(255,255,255,0.1);
    outline: 1px solid var(--os-accent);
}
.os-home-edit-actions {
    display: inline-flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 80ms ease;
}
.os-home-edit-row:hover .os-home-edit-actions,
.os-home-edit-row:focus-within .os-home-edit-actions { opacity: 1; }
.os-home-edit-actions button {
    appearance: none;
    background: transparent;
    border: 0;
    color: var(--os-fg-muted);
    cursor: pointer;
    width: 26px; height: 26px;
    border-radius: 4px;
    font-size: 13px;
}
.os-home-edit-actions button:hover { background: rgba(255,255,255,0.1); color: var(--os-fg); }