/* Written by Richard Christopher, Copyright 2026 Mindfull */
.unified-section-page { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.unified-section-page-tabs { flex: none; min-width: 0; max-width: 100%; overflow-x: auto; padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--bg-raised); }
.unified-section-page-tabs .cloudcanvas-ui-tabs { flex-wrap: nowrap; width: max-content; min-width: 100%; }
.unified-section-page-tabs .cloudcanvas-ui-tabs-tab { min-height: 44px; padding: 5px 10px; font-size: var(--text-base); }
.unified-section-page-panel { flex: 1; min-width: 0; min-height: 0; padding: 12px; }
.resource-assets { display: grid; gap: var(--space-3); min-width: 0; }
.resource-logs-compose { display: grid; gap: var(--space-2); min-width: 0; }
.resource-logs-compose textarea,
.resource-assets-controls input {
  box-sizing: border-box; max-width: 100%; min-width: 0; width: 100%;
  color: var(--text); background: var(--bg-sunken); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: var(--space-2); font: inherit;
}
.resource-logs-compose textarea { min-height: 100px; resize: vertical; }
.resource-assets-controls { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }
.resource-assets-status { color: var(--text-dim); font-size: var(--text-sm); overflow-wrap: anywhere; }
.resource-assets-list { display: grid; gap: var(--space-2); min-width: 0; }
.resource-assets-file { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--bg-raised); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; overflow-wrap: anywhere; }
.resource-assets-file button { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: start; }
.resource-assets-entry { display: grid; gap: var(--space-2); min-width: 0; }
.resource-assets-attach { justify-self: start; }
.mf-inspector-context-status { margin: 0; color: var(--text-dim); overflow-wrap: anywhere; }
.mf-inspector-context-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); min-width: 0; }
.context-filters { flex: 1 0 100%; display: grid; gap: var(--space-1); min-width: 0; }
.context-filter-scope { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.context-filter-scope .cloudcanvas-ui-select { flex: 1; min-width: 0; }
.context-filter-coverage, .context-filter-notice { color: var(--text-dim); font-size: var(--text-sm); margin: 0; overflow-wrap: anywhere; }
.context-filter-chips { max-height: 4rem; overflow: auto; min-width: 0; }
/* The "x" of a keyword chip is as wide as its glyph (15px); under a finger it is a full target. */
@media (pointer: coarse) { .context-filter-chips .cloudcanvas-ui-chips-remove { min-width: 44px; justify-content: center; } }
.unified-input-action { flex: none; align-self: start; }

/* ------------------ RESOURCES › CONTROLS: COMPACT SETTINGS PAGES ------------------ */
/* A bounded reading column, quiet navigation and aligned settings rows. Touch stays 44px. */
.resource-controls {
  --controls-row-min: 30px;
  --cc-control-min: var(--controls-row-min);
  display: grid; grid-template-columns: 132px minmax(0, 760px); align-items: start;
  gap: 20px; min-width: 0; max-width: 912px;
}
.resource-controls [hidden] { display: none !important; }
.resource-card-content { min-width: 0; overflow: auto; padding: var(--space-3); }
.resource-controls.resource-controls-content-only { display: block; max-width: 100%; }
.resource-controls :is(select, .cloudcanvas-ui-button, .cloudcanvas-ui-switch) { min-height: var(--controls-row-min); max-width: 100%; }
.resource-controls :is(select, .cloudcanvas-ui-button) { padding-block: 4px; }
.resource-controls-nav {
  position: sticky; top: 0; display: flex; flex-direction: column; gap: 2px;
  min-width: 0; padding-inline-end: 10px; border-inline-end: 1px solid var(--border);
}
.resource-controls-tab.cloudcanvas-ui-button {
  min-height: 32px; padding: 5px 8px; border: 0; border-inline-start: 2px solid transparent;
  border-radius: 0 4px 4px 0; background: transparent; text-align: start;
  white-space: normal; color: var(--text-dim);
}
.resource-controls-tab[aria-selected="true"] {
  color: var(--accent); background: var(--accent-wash); border-inline-start-color: var(--accent);
  font-weight: var(--weight-medium);
}
.resource-controls-content { min-width: 0; container-type: inline-size; }
.resource-group, .resource-group-body, .resource-data, .resource-access { display: grid; gap: 12px; min-width: 0; }
.resource-group-title { margin: 0; padding-block-end: 8px; border-bottom: 1px solid var(--border); font-size: var(--text-lg); font-weight: var(--weight-medium); line-height: var(--leading-tight); }
.resource-group-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.resource-group-body > .momentum-settings-pane > .mindfull-settings-heading { display: none; }
.resource-controls .mindfull-settings-body { gap: 12px; margin-block-start: 0; }
.resource-controls .mindfull-settings-status:has(.is-quiet) { display: none; }
.resource-controls .mindfull-settings-line { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 8px 16px; }
.resource-controls .mindfull-settings-field { max-width: none; }
.resource-controls .mindfull-settings-line > .mindfull-settings-field .cloudcanvas-ui-select { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 132px); align-items: center; gap: 8px; }
.resource-controls .mindfull-settings-aside { grid-column: 1 / -1; min-height: 0; font-size: var(--text-sm); }
.resource-controls .mindfull-settings-note { font-size: var(--text-sm); }

/* Appearance uses the same label/control tracks, not a stack of full-width form blocks. */
.selection-glow-settings { display: grid; gap: 6px; min-width: 0; margin: 0; padding: 10px 0 0; border: 0; border-top: 1px solid var(--border); }
.selection-glow-settings legend { padding: 0 8px 0 0; font-size: var(--text-base); font-weight: var(--weight-medium); }
.selection-glow-row { display: grid; grid-template-columns: minmax(104px, 1fr) minmax(100px, 180px) minmax(0, 7rem); align-items: center; gap: 10px; min-height: var(--controls-row-min); min-width: 0; }
.selection-glow-row > label { display: flex; align-items: center; align-self: stretch; }
.selection-glow-row input { min-width: 0; max-width: 100%; accent-color: var(--accent); }
.selection-glow-row input[type="range"] { width: 100%; height: var(--controls-row-min); padding: 0; }
.selection-glow-row input[type="checkbox"] { grid-column: 3; justify-self: end; width: 18px; height: 18px; min-height: 18px; padding: 0; }
.selection-glow-row input[type="color"] { justify-self: end; width: 40px; height: 26px; min-height: 26px; padding: 2px; }
.selection-glow-row output { text-align: end; font-size: var(--text-sm); color: var(--text-dim); white-space: nowrap; }
.selection-glow-fade .cloudcanvas-ui-select { display: grid; grid-template-columns: minmax(104px, 1fr) minmax(160px, 292px); align-items: center; gap: 10px; }
.selection-glow-color > button { justify-self: end; font-size: var(--text-sm); padding-inline: 6px; white-space: normal; }
.selection-glow-actions { display: flex; justify-content: flex-end; padding-block-start: 4px; }
.selection-glow-actions > button { color: var(--text-dim); background: transparent; font-size: var(--text-sm); }
/* In the user icon's dropdown these rows have a phone's width on any screen. */
.unified-account-menu .selection-glow-row { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); gap: 4px 10px; }
.unified-account-menu .selection-glow-row :is(output, input[type="checkbox"]), .unified-account-menu .selection-glow-color > button { grid-column: 2; }
.unified-account-menu .selection-glow-fade .cloudcanvas-ui-select { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); }

/* Areas share one column system. A rule, not another card, distinguishes each section. */
.resource-data-status:has(.is-quiet) { display: none; }
.resource-data-list { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr) max-content; column-gap: 16px; row-gap: 12px; min-width: 0; }
.resource-data-setting, .resource-data-rows, .resource-data-row, .resource-data-row > :is(.cloudcanvas-ui-switch, .cloudcanvas-ui-select) { display: grid; grid-template-columns: subgrid; column-gap: normal; min-width: 0; }
.resource-data-setting { grid-column: 1 / -1; padding-block-end: 12px; border-bottom: 1px solid var(--border); }
.resource-data-setting:last-child { border-bottom: 0; padding-block-end: 0; }
.resource-data-head { grid-column: 1; align-self: start; display: grid; align-content: center; gap: 2px; min-height: var(--controls-row-min); min-width: 0; }
.resource-data-area { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.resource-data-hint { margin: 0; color: var(--text-dim); font-size: var(--text-sm); line-height: 1.5; }
.resource-data-rows { grid-column: 2 / -1; }
.resource-data-row { grid-column: 1 / -1; align-items: center; min-height: var(--controls-row-min); }
.resource-data-row > :is(.cloudcanvas-ui-switch, .cloudcanvas-ui-select) { grid-column: 1 / -1; align-items: center; }
.resource-data-row:has(select:disabled) { color: var(--text-dim); }
.resource-data-row .cloudcanvas-ui-switch-box { justify-self: end; }
.resource-data-row .cloudcanvas-ui-select-control { box-sizing: border-box; inline-size: 11rem; max-inline-size: 100%; }

/* Access starts with one bounded resource/action row, followed by readable permission rows. */
.resource-access-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; min-width: 0; }
.resource-access-bar .cloudcanvas-ui-select { flex: 1 1 14rem; min-width: 0; max-width: 30rem; }
.resource-access-manage { flex: none; }
.resource-access-people { display: grid; min-width: 0; }
.resource-access-said { margin: 0; padding: 6px 8px; font-size: var(--text-sm); background: var(--accent-wash); border-radius: var(--feed-radius); overflow-wrap: anywhere; }
.resource-access-status:not(:has(.is-quiet)) { margin-block-end: 4px; }
.resource-access-sharing { min-width: 0; }
.resource-access-sharing:empty { display: none; }
.resource-access-sharing .unified-shared-sharing { justify-items: start; }
.resource-access-sharing .unified-shared-field { justify-self: stretch; max-width: 28rem; }
.resource-access-list { display: grid; grid-template-columns: minmax(8rem, 20rem) minmax(5rem, 1fr) max-content max-content; column-gap: 16px; min-width: 0; }
.resource-access-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; min-height: calc(var(--controls-row-min) + 6px); min-width: 0; border-bottom: 1px solid var(--border); }
.resource-access-row:last-child { border-bottom: 0; }
.resource-access-name { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.resource-access-role, .resource-access-until { color: var(--text-dim); font-size: var(--text-sm); overflow-wrap: anywhere; }
.resource-access-until { font-variant-numeric: tabular-nums; white-space: nowrap; }
.resource-access-act { display: flex; justify-content: flex-end; }
.resource-group .feed-details { padding: 0; }
.resource-access-ends { display: grid; gap: 6px; }
.resource-access-ends:not(:empty) { margin-block-start: 6px; }
@media (max-width: 760px) {
  .resource-controls { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
  .resource-controls-nav { padding-inline-end: 6px; }
  .resource-controls-tab.cloudcanvas-ui-button { padding-inline: 5px; }
  .resource-assets-controls button { width: 100%; white-space: normal; }
}
@container (max-width: 580px) {
  .resource-controls .mindfull-settings-line { grid-template-columns: minmax(0, 1fr); }
  .resource-data-list { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 12px; }
  .resource-data-head { grid-column: 1 / -1; min-height: 0; padding-block-end: 6px; }
  .resource-data-rows { grid-column: 1 / -1; }
  .resource-data-row .cloudcanvas-ui-select-control { inline-size: 10rem; }
  .selection-glow-row { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); gap: 4px 10px; }
  .selection-glow-row output { grid-column: 2; }
  .selection-glow-row input[type="checkbox"] { grid-column: 2; }
  .selection-glow-fade .cloudcanvas-ui-select { grid-template-columns: minmax(0, 1fr) minmax(80px, 1fr); }
  .selection-glow-color > button { grid-column: 2; }
  .resource-access-list { grid-template-columns: minmax(0, 1fr) max-content max-content; column-gap: 10px; }
  .resource-access-row { align-content: center; }
  .resource-access-name { grid-column: 1; grid-row: 1; }
  .resource-access-role { grid-column: 1; grid-row: 2; }
  .resource-access-until { grid-column: 2; grid-row: 1 / span 2; white-space: normal; }
  .resource-access-act { grid-column: 3; grid-row: 1 / span 2; }
}
@container (max-width: 320px) {
  .resource-data-row > :is(.cloudcanvas-ui-switch, .cloudcanvas-ui-select) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
  .resource-data-row .cloudcanvas-ui-select-control { min-width: 0; max-width: 100%; inline-size: auto; }
  .resource-access-bar .cloudcanvas-ui-select { flex-basis: 100%; }
  .resource-access-manage { margin-inline-start: auto; }
}
@media (pointer: fine) {
  :root[data-density="comfortable"] .resource-controls { --controls-row-min: 36px; }
}
@media (pointer: coarse) {
  .resource-controls { --controls-row-min: 44px; }
  .resource-controls-tab.cloudcanvas-ui-button { min-height: 44px; }
  .selection-glow-row input[type="color"] { width: 44px; height: 44px; }
}

/* ------------------ YOUR DATA ON THIS DEVICE: EXPORT, IMPORT, AND THE REVIEW AN IMPORT ASKS ------------------ */
/*
 * The section stands on the list's own columns like a setting does (`.resource-data-setting`, its head and its rows); its two
 * buttons are one row and its status the next, each across both columns. The buttons are the kit's and 44px high inside
 * Controls. The review is the content of a question drawn at the document (`confirmation.js`), so nothing here depends on
 * the page: lines of words, short lists, and the kit's own chips for the one choice.
 */
.resource-transfer .resource-data-rows { row-gap: var(--space-2); }
.resource-transfer .resource-data-rows > * { grid-column: 1 / -1; min-width: 0; }
.resource-transfer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.resource-transfer-status { overflow-wrap: anywhere; }
.resource-transfer-status:has(.is-quiet) { display: none; }
.transfer-review { display: grid; gap: var(--space-2); min-width: 0; }
.transfer-review-heading { margin: var(--space-2) 0 0; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--text-dim); }
.transfer-review-line { margin: 0; overflow-wrap: anywhere; }
.transfer-review-line.is-dim { color: var(--text-dim); }
.transfer-review-list { margin: 0; padding-inline-start: var(--space-4); display: grid; gap: var(--space-1); overflow-wrap: anywhere; }
.transfer-review-choice { margin-block-start: var(--space-1); }
.transfer-review-final { margin-block-start: var(--space-2); font-weight: var(--weight-medium); }