/*
 * OS-SETTINGS.CSS - The Settings property sheet (js/apps/os-settings.js):
 * tab row, framed groups (fieldsets), and the footer buttons.
 */
.oss { display: flex; flex-direction: column; height: 100%; padding: 8px; box-sizing: border-box; font-size: 12px; background: var(--ui-face); color: var(--ui-text); }
.oss-tabs { display: flex; gap: 2px; padding-left: 4px; }
.oss-tab {
    padding: 4px 12px; font: inherit; cursor: pointer; background: var(--ui-face); color: inherit;
    border: 2px solid; border-bottom: 0; border-color: var(--ui-light) var(--ui-dark) transparent var(--ui-light);
    border-radius: 3px 3px 0 0;
}
.oss-tab.active { font-weight: bold; position: relative; top: 2px; padding-bottom: 6px; }
.oss-panel {
    flex: 1; overflow-y: auto; padding: 8px 10px;
    border: 2px solid; border-color: var(--ui-light) var(--ui-dark) var(--ui-dark) var(--ui-light);
}
.oss fieldset { border: 2px groove var(--ui-light); margin: 0 0 10px; padding: 6px 10px 8px; }
.oss legend { padding: 0 4px; }
.oss-row { display: flex; align-items: center; gap: 6px; margin: 5px 0; }
.oss-row select { margin-left: auto; font: inherit; }
.oss button.bevel-out { padding: 3px 10px; font: inherit; cursor: pointer; }
.oss-buttons { display: flex; gap: 6px; margin-bottom: 6px; }
.oss-drawer { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.oss-drawer b { width: 80px; }
.oss-foot { display: flex; justify-content: space-between; gap: 6px; padding-top: 8px; }