/* ── Daimond workspace file browser (WS-F) — docked panel ── */
.files-card {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 10px;
	overflow: hidden;
	font-size: var(--fs-sm);
}

.files-actions { display: flex; gap: 4px; align-items: center; }

/* Workspace root mode: OPFS sandbox vs an open real folder (FSA). */
/* The chips total 418px, and the Workspace sheet is 380px wide on a phone, so
   the row wraps -- and the second row was then clipped by the foot of the sheet.
   It scrolls sideways below the breakpoint instead: a control on a second row
   the sheet cuts off is one nobody can reach, where a control reached by a swipe
   at least exists. 10px is the dock's one body inset. */
.files-mode {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	flex: none;
}
@media (max-width: 760px) {
	.files-mode {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.files-mode::-webkit-scrollbar { display: none; }
	.files-mode > * { flex: 0 0 auto; }
}
.files-mode-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 999px;
	font-size: var(--fs-2xs); font-weight: 600;
	border: 1px solid var(--border-2);
}
/* The .ic default of 16px belongs to toolbar buttons; on a --fs-2xs chip the
   glyph must sit at cap height. */
.files-mode-chip .ic { width: 13px; height: 13px; }
/* A chip states where things are. Two of them name the workspace root and are
   mutually exclusive; the third names a residency and is additive -- so the
   lit one is not "the selected tab", it is simply what is true. */
.files-mode-chip        { color: var(--text-secondary); background: var(--bg-tertiary); }
.files-mode-chip.active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }
.files-mode-chip.cloud  { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent); }
/* "Nothing in cloud storage yet" -- the chip is quieter because there is nothing
   behind it, NOT because it is switched off: it keeps `role="button"`,
   `tabindex="0"` and its click, and its title is a sentence the reader is meant
   to read. `opacity: 0.55` over the whole chip put those words at 2.22:1 in
   Light and Lollypop, 2.26 in Mist, 2.84 in Dark -- under even the audit's
   invisible-text alarm, and nowhere near the 4.5 an 11px label asks for.
   Opacity cannot be the answer: measured across the eleven palettes it takes
   0.93 before the words clear 4.5, and 0.93 is not a ghost. So the fade moves to
   the GLYPH, which carries no words, and the label drops to the app's own quiet
   rung instead -- 4.51 (Light) to 5.37 (Dusk), and still a rung below the two
   chips beside it. The chip reads as quiet; the sentence stays readable.

   The `:not()` guard is not decoration: `.ghost` is also put on the Machine chip
   when no folder can be picked, and that chip can be the LIT one at the same
   time. The old rule only set an opacity, so the lit accent survived under it; a
   colour would have taken it away. */
.files-mode-chip.ghost:not(.active):not(.cloud) { color: var(--text-muted); }
.files-mode-chip.ghost .ic                      { opacity: 0.55; }
.files-mode-chip.act    { cursor: pointer; }
.files-mode-chip.act:hover  { background: var(--bg-hover); border-color: var(--accent); }
.files-mode-chip.act:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.files-mode-btn {
	padding: 2px 8px; border-radius: 6px;
	font-size: var(--fs-2xs); cursor: pointer;
	color: var(--text-secondary);
	background: var(--bg-tertiary); border: 1px solid var(--border-strong);
}
.files-mode-btn:hover { background: var(--bg-hover); }
.files-mode-btn.accent {
	color: var(--on-fill, #fff); background: var(--accent); border-color: var(--accent);
}
.files-mode-btn.accent:hover { background: var(--accent-hover); }
.files-mode-msg {
	flex-basis: 100%; font-size: var(--fs-2xs); color: var(--text-secondary);
}
.files-mode-msg.err { color: var(--accent-text); }

/* ── Whose files: the workspace, or one Diamond's ──────────────
   A second row under the mode row, and deliberately not part of it: those chips
   name a PLACE the files are (the sandbox, a folder on this disk, cloud
   storage), these name WHOSE files are being shown. Hidden outright when no
   Diamond is open, because a switch with one position is furniture. */
.files-scope {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	flex: none;
}
.files-scope-chip {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 2px 8px; border-radius: 999px;
	font-size: var(--fs-2xs); font-weight: 600;
	color: var(--text-secondary); background: var(--bg-tertiary);
	border: 1px solid var(--border-strong); cursor: pointer;
}
.files-scope-chip:hover { background: var(--bg-hover); border-color: var(--accent); }
.files-scope-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The lit one is what the tree below is showing, so it has to read as a state
   and not as an offer -- the two trees can differ by a whole workspace. */
.files-scope-chip.active {
	color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent);
}

/* The word in front of the chips. They pick a TREE and change no permission,
   and without a label they read as a setting for how much the daimon may
   touch -- which is exactly how they were read. */
.files-scope-label, .files-reach-label {
	font-size: var(--fs-2xs); font-weight: 600; color: var(--text-secondary);
}

/* ── Where this Diamond's daimon may actually work ─────────────
   Under the chips because it answers the question the chips were being asked:
   what may be written, and where a search that names no path will look. Drawn
   in BOTH trees and built from the same `Files.bounds` that composes the fence,
   so it cannot come to disagree with what a turn is confined to. Nothing here
   waits for a hover: a fence nobody can see is a fence nobody trusts. */
.files-reach {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	flex: none;
}
/* A place inside the fence. The accent edge is the app's one mark for "this
   grants something", worn by the workspace rail in the chat footer and by a
   granted toolchain beside it. */
.files-reach-chip {
	display: inline-flex; align-items: center;
	padding: 2px 8px; border-radius: 999px;
	font-size: var(--fs-2xs); font-weight: 600;
	max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
	color: var(--accent-text); background: var(--accent-soft);
	border: 1px solid var(--accent);
}
/* Consulted, not worked in. It reads as a place and not as a grant, so it drops
   the accent and keeps the ordinary control edge. */
.files-reach-chip.ro {
	color: var(--text-secondary); background: var(--bg-tertiary);
	border-color: var(--border-strong);
}
.files-reach-says {
	flex: 1 1 100%;
	font-size: var(--fs-3xs-2xs); color: var(--text-secondary); line-height: 1.5;
}
/* The state that most needs saying, and the one a person is most likely to be
   in without knowing: the daimon can write nowhere of theirs. */
.files-reach-says.none { color: var(--accent-text); }
/* One press, from the folder already on screen. A button and not a chip: the
   row beside it reports, and this changes something. */
.files-mark-here {
	display: inline-flex; align-items: center;
	padding: 2px 9px; border-radius: 999px;
	font-size: var(--fs-2xs); font-weight: 600;
	color: var(--text-secondary); background: var(--bg-tertiary);
	border: 1px dashed var(--border-strong); cursor: pointer;
}
.files-mark-here:hover { color: var(--accent-text); border-color: var(--accent); }
.files-mark-here:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── What a Diamond may reach that is not a folder ─────────────
   A toolchain grant. It sits under the scope row because it answers the same
   question the row above and the tree below answer -- what this Diamond may
   open -- and it is the one answer that is not a path in the workspace: a
   compiler lives on the machine, outside anything the user granted as a folder.
   Off unless the user says so, and a daimon never chooses one. */
.files-kits {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--border);
	flex: none;
}
.files-kits-label {
	font-size: var(--fs-2xs); font-weight: 600;
	color: var(--text-secondary);
}
.files-kit-chip {
	display: inline-flex; align-items: center;
	padding: 2px 8px; border-radius: 999px;
	font-size: var(--fs-2xs); font-weight: 600;
	color: var(--text-secondary); background: var(--bg-tertiary);
	border: 1px solid var(--border-strong); cursor: pointer;
}
.files-kit-chip:hover { background: var(--bg-hover); border-color: var(--accent); }
.files-kit-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* A granted toolchain is a PERMISSION in force, so it reads as a state. */
.files-kit-chip.active {
	color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent);
}
/* Said out loud rather than left to be inferred from four unlit chips: "none"
   is the ordinary state and the safe one, and a person should be able to see
   that it is deliberate. */
.files-kits-none {
	flex: 1 1 100%;
	font-size: var(--fs-3xs-2xs); color: var(--text-secondary);
}

/* The step out of this folder, at the top of the listing where every file
   manager has put it. Dimmer than a real entry, because it is navigation and
   not a thing in the folder, and it carries none of the controls a real row
   does. It replaced a button in the panel's header on 2026-08-24. */
.files-row.files-up .files-name { color: var(--text-secondary); }

/* A row for something attached from elsewhere in the workspace. It is a
   pointer, not a copy: the file lives where it always did, and every other
   Diamond holding it goes on holding it. */
.files-row.attached .files-name { font-style: italic; }
.files-badge {
	flex: none; font-size: var(--fs-3xs-2xs);
	color: var(--text-secondary);
	border: 1px solid var(--border-2); border-radius: 999px;
	padding: 0 5px; line-height: 1.6;
}
.files-badge.files-elsewhere { border: none; padding: 0 2px; font-size: var(--fs-2xs); }
/* Read-only says what a daimon may do with it, so it stays visible: a hover-only
   badge is a permission nobody reads. */
.files-badge.files-ro { white-space: nowrap; }
/* ◈ on a row: put this folder in the open Diamond's workspace, or take it out.
   Like the pin, the LIT state is standing information and must not hide until
   the pointer finds it. */
.files-res.files-hold.on { visibility: visible; color: var(--accent-text); }
/* The hint under an empty Diamond workspace, which sits below real rows rather
   than replacing them. */
.files-dws-hint { text-align: left; font-size: var(--fs-2xs); line-height: 1.5; }

/* A folder row with a Diamond in focus: the paperclip is the control that puts
   that folder inside the write fence, so it does not wait for a hover. The same
   rule `.files-hold.on` already follows, for the same reason. */
.attach-btn.mark { visibility: visible; }

/* The paperclip: "Attach to current focus" (ATTACH_CONTRACT.md §4), on a
   folder row, a file row, and the Doc header. Its own class rather than a
   `.files-res` modifier for the reason `.files-pin` already has one -- '📎' is
   an emoji, drawn at full size in a colour font, so the size bump `.files-res`
   gives its thin dingbats would only inflate it. Lit and away are standing
   information, exactly as the pin's `.on` is, and must not hide until the
   pointer finds them. */
.attach-btn {
	background: transparent; border: none; color: var(--text-secondary);
	cursor: pointer; padding: 0 3px; visibility: hidden; font-size: var(--fs-sm);
}
.files-row:hover .attach-btn { visibility: visible; }
.attach-btn:hover { color: var(--accent-text); }
.attach-btn.on { visibility: visible; color: var(--accent-text); }
.attach-btn.away { visibility: visible; color: var(--text-muted); }

/* Touch. The scope chips take the same 24px floor as the mode row's, and the ◈
   comes out of hiding: there is no hover on a phone, so a control that waits for
   one cannot be reached at all. */
@media (max-width: 760px), (pointer: coarse) {
	.files-scope-chip { min-height: 24px; padding-top: 4px; padding-bottom: 4px; }
	.files-mark-here { min-height: 24px; padding-top: 4px; padding-bottom: 4px; }
	.files-row .files-hold { visibility: visible; padding: 4px 6px; }
	.files-row .attach-btn { visibility: visible; padding: 4px 6px; }
}

.files-path {
	padding: 6px 10px; color: var(--text-secondary);
	font-family: var(--font-mono); font-size: var(--fs-2xs);
	border-bottom: 1px solid var(--border);
	flex: none;
	display: flex; flex-wrap: wrap; align-items: center;
}

/* One folder in the path line, or the whole trail's root. A plain button reset
   rather than a link -- there is nowhere to navigate TO, only a tree to relist --
   so it takes the surrounding text colour and only the current, disabled one
   (the folder already on screen) reads differently. */
.path-crumb {
	background: none; border: none; padding: 0; margin: 0;
	font: inherit; color: inherit; cursor: pointer;
	border-radius: 3px;
}
.path-crumb:hover:not(:disabled) { color: var(--text-primary); text-decoration: underline; }
.path-crumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.path-crumb:disabled { color: var(--text-primary); cursor: default; font-weight: 600; }
.path-sep { margin: 0 3px; opacity: 0.55; }

/* Residency controls on a row: fetch, pin, free up space. Like .files-del they
   stay out of the way until the row is under the pointer -- except a pin, which
   is a standing state and must be visible without hunting for it.
   The pin is its OWN class rather than a `.files-res` modifier, because the two
   want different type sizes and a shared class can only carry one. Everything
   else about them is identical, so the shape is stated once for both. */
.files-res, .files-pin {
	background: transparent; border: none; color: var(--text-secondary);
	cursor: pointer; padding: 0 3px; visibility: hidden;
}
/* '⤓', '⤒' and '◈' are dingbats drawn well inside their em box -- the same
   reason `.files-ren` needs a size of its own. At the 13px they had, they
   carried visibly less ink than the 15px '×' on the same row and read as specks
   rather than as controls. A step ABOVE the cross, not level with it, because
   the cross fills its box and these do not. */
.files-res { font-size: var(--fs-xl); }
/* '📌' is an emoji: the platform draws it at full size in a colour font, so it
   was never the undersized one and the bump above would only have inflated it. */
.files-pin { font-size: var(--fs-sm); }
.files-row:hover .files-res,
.files-row:hover .files-pin { visibility: visible; }
.files-res:hover, .files-pin:hover { color: var(--accent-text); }
.files-pin.on { visibility: visible; opacity: 0.9; }
/* A cloud row is the user's file, safe, and simply not here at the moment --
   so it is quieter than a held file, never struck through or greyed to junk. */
.files-row.cloud .files-name { color: var(--text-secondary); }
.files-row.cloud .files-size { font-style: italic; }

.files-tree { flex: 1; overflow-y: auto; padding: 4px 0; }
.files-empty { padding: 16px; text-align: center; color: var(--text-secondary); }

.files-row {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 10px; cursor: pointer;
}
.files-row:hover { background: var(--bg-hover); }
.files-name { flex: 1; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A folder is named in the accent, and the accent has TWO tokens because it does
   two jobs. `--accent` is the FILL and the EDGE -- a button's ground, a border,
   a focus ring -- and SC 1.4.11 asks 3.0 of it. `--accent-text` is the accent as
   INK, which SC 1.4.3 asks 4.5 of, and every palette carries it a rung further
   from its own surfaces for exactly that reason.
   This rule, and the three above it, reached for `--accent`. On the four dark
   palettes that is a mid-toned accent on a near-black panel: Midnight measured
   4.19:1 for a folder name on `--bg-secondary` and Amber 4.35, both under the
   floor for 13px. Nothing about the token's VALUE was wrong -- 4.19 is a
   perfectly good ring -- so lifting `--accent` would have paled every accent
   fill in the app to fix four lines of text in one panel. The wrong token was
   named, and naming the right one moves nothing outside these four rules.
   Against all four surfaces of its own palette -- primary, secondary, tertiary
   and hover -- `--accent-text` reads 6.04-10.56 across the dark band and
   4.98-9.38 across the light. */
.files-row.dir .files-name { color: var(--accent-text); }
.files-size { color: var(--text-secondary); font-size: var(--fs-2xs); font-family: var(--font-mono); }
.files-del {
	background: transparent; border: none; color: var(--text-secondary);
	cursor: pointer; font-size: var(--fs-lg); padding: 0 4px; visibility: hidden;
}
.files-row:hover .files-del { visibility: visible; }
.files-del:hover { color: var(--danger); }
/* A control that waits for a hover is a control the keyboard cannot see: tabbing
   to the cross moved the focus to something not on the screen, so the row's
   controls come out when anything inside the row takes focus, exactly as the
   touch rule above brings the ◈ out where there is no pointer at all.
   Appearing is not enough on its own -- `verify_a11y_keyboard` compares the
   focused element's own ink, and rightly, since a control that merely appears
   has not said WHICH of the three now holds the focus. So each draws the ring.
   `:focus`, not `:focus-visible`: these are reached by Tab, but the check
   focuses them from script, and a ring that depends on the browser's guess at
   the user's modality is a ring that is sometimes not there. */
.files-row:focus-within .files-del,
.files-row:focus-within .files-res,
.files-row:focus-within .files-pin { visibility: visible; }
.files-del:focus,
.files-res:focus,
.files-pin:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* The row itself is now a control (`sysRowAsButton`), so it says so as well.
   Inset, because a row is flush with the panel and an outset ring would be
   clipped by the tree's own scroller -- which the desktop sweep already reports
   for the Diamond rail.
   `:focus-visible` here, where the three buttons above keep `:focus`: a row is
   opened by pointer far more often than by Tab, so a bare `:focus` left a ring
   standing on the row of every file anyone clicked. Nothing is lost to the
   keyboard -- `verify_a11y_keyboard` presses Tab before it focuses anything, so
   modality is established and a script focus matches this too. */
.files-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The rename pencil borrows `.files-del` for its shape and needs a size of its
   own: '✎' is drawn well inside its em box where '×' fills it, so at the same
   nominal 15px the pencil carried about half the ink of the cross beside it and
   looked like a fleck. It is not a delete either, so it keeps the neutral
   hover. */
.files-ren { font-size: var(--fs-2xl); }
.files-ren:hover { color: var(--text-primary); }

/* The file VIEW now lives in the Doc panel (see app.css, .doc-view): a document
   you have opened is something you are attending to, and belongs on the stage.
   The inner .files-view-* rules below still apply -- they style the view itself,
   wherever it is rendered. */
.files-view-head {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 7px 10px; border-bottom: 1px solid var(--border); flex: none; flex-wrap: wrap;
}
.files-view-name {
	font-family: var(--font-mono); font-size: var(--fs-xs);
	color: var(--text-primary); word-break: break-all;
}
/* A fixed HEIGHT, not padding alone: ◈ below was set in a larger font than its
   neighbours for legibility, and with only top/bottom padding to hold it that
   grew the button by the same fraction as the glyph, so the row read as four
   buttons of three different heights. Centring a variable-size label inside a
   box of one fixed height is what keeps the row level regardless of which
   button's font changes next. */
.files-btn {
	background: transparent; border: 1px solid var(--border-strong);
	color: var(--text-secondary); border-radius: 6px;
	height: 24px; padding: 0 8px; cursor: pointer; font-size: var(--fs-xs);
	display: inline-flex; align-items: center; line-height: 1;
}
/* The paperclip that attaches the open file to the focus on screen. Always
   visible here -- `.attach-btn`'s hover-hide is for a row in a list, and this
   is a header button among header buttons, none of which hide. Lit when it is
   attached, so the button reports the state rather than only offering the
   action -- it is the only place in the Files panel that says whether this
   file is part of a pursuit. Drawn with an INSET ring: the strip it sits in
   scrolls, and a ring outside the border box is one an overflow rule is
   entitled to slice off. */
.files-btn[data-act="attach"] { visibility: visible; font-size: var(--fs-sm); padding: 0 7px; }
.files-btn[data-act="attach"].on {
	color: var(--accent-text);
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}
.files-btn[data-act="attach"].away { color: var(--text-muted); }
.files-btn:hover { color: var(--text-primary); border-color: var(--accent); }
.files-btn.active { color: var(--accent); border-color: var(--accent); }
.files-btn:disabled { opacity: 0.6; cursor: default; }

/* Typst compile status line and inline PDF pane. */
.files-view-msg {
	flex: none; padding: 7px 10px; border-bottom: 1px solid var(--border);
	font-family: var(--font-mono); font-size: var(--fs-xs);
	color: var(--text-secondary); word-break: break-word; white-space: pre-wrap;
}
.files-view-msg.err { color: var(--danger, #e5484d); }

/* The box the file VIEWER draws into, and it had no rule at all.
   Everything inside it is written to stretch -- `.fileview`, `.fv-body` and each
   tier are all `flex: 1` -- but a flex item with no rule of its own is
   `flex: 0 1 auto`, so the whole chain collapsed to the content's own height.
   For a PDF that is an <embed>'s default 150px, which is why a document opened
   in a full-height panel sat in a letterbox with empty panel under it. */
.files-view-viewer {
	flex: 1; min-height: 0;
	display: flex; flex-direction: column;
	overflow: hidden;
}

.files-view-body {
	flex: 1; margin: 0; padding: 12px 14px; overflow: auto;
	white-space: pre-wrap; word-break: break-word;
	font-family: var(--font-mono); font-size: var(--fs-sm);
	color: var(--text-primary); background: var(--bg-primary);
}

/* Inline editor: swaps in for the <pre> while editing a file.
   Wrapped, like the viewer beside it. `pre` meant every prose line ran off the
   right edge of a ~400px panel and had to be scrolled to be read, one line at a
   time; you cannot edit what you cannot see. Only the EDITOR wraps -- a
   read-only <pre> presentation keeps whatever measure its content asks for. */
.files-edit {
	flex: 1; margin: 0; padding: 12px 14px; border: none; resize: none; outline: none;
	white-space: pre-wrap; word-break: break-word; overflow: auto;
	font-family: var(--font-mono); font-size: var(--fs-sm);
	color: var(--text-primary); background: var(--bg-primary);
}
.files-edit:focus { box-shadow: inset 0 0 0 1px var(--accent); }

/* File viewer line numbers.
   A hanging indent, so a line that wraps continues past the gutter instead of
   returning to the margin and reading as a new line. Invisible in a narrow
   panel where little wrapped; obvious now the document has the stage. The two
   measures must agree: the gutter is the .ln width plus its margin. */
.files-view-body.with-lineno { padding-left: 14px; text-indent: 0; }
/* The hanging indent lives on each line, not on the block: with pre-wrap the
   whole file is one block, so an indent set there applies to its first line
   only. The two measures must agree -- the gutter is the .ln width plus its
   margin. */
.files-view-body .lnrow { display: block; padding-left: 4em; text-indent: -4em; }
/* `--text-muted` at full strength, and NOT `--text-secondary` behind an
   `opacity: 0.55`. The alpha composited the gutter towards the page until it
   sat at 2.28:1 on Light -- half the 4.5:1 floor, on 13px digits that are the
   only way to say which line anything is on. Muted is the token for exactly
   this: the quietest text in the app, and quiet is not the same as faint. */
.files-view-body .ln {
	display: inline-block; width: 3.2em; margin-right: 0.8em;
	text-align: right; color: var(--text-muted);
	user-select: none; -webkit-user-select: none;
}

/* ── Cloud storage view (the stage, not a popup) ──────────────
   What is stored, what it is costing, and what is not on this device. With
   accounts that are keys and have no address, there is nowhere to send a
   statement, so this is the only honest place to say it. */
.cloud-view { white-space: normal; font-family: inherit; }
.cloud-intro { margin: 0 0 12px; color: var(--text-primary); line-height: 1.5; }
.cloud-cap   { margin: 6px 0 16px; color: var(--text-secondary); font-size: var(--fs-xs); line-height: 1.5; }

.cloud-bar {
	height: 8px; border-radius: 999px; overflow: hidden;
	background: var(--bg-tertiary); border: 1px solid var(--border-2);
}
.cloud-bar span { display: block; height: 100%; background: var(--accent); }
.cloud-bar span.hot { background: var(--danger, #e5484d); }

.cloud-row {
	display: flex; align-items: center; gap: 8px;
	padding: 5px 0; border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
}
.cloud-path {
	flex: 1; font-family: var(--font-mono); font-size: var(--fs-xs);
	color: var(--text-primary); word-break: break-all;
}
.cloud-row.away .cloud-path { color: var(--text-secondary); }
.cloud-size { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-2xs); }
.cloud-pin  { font-size: var(--fs-2xs); }

/* ── The rest of the folder, at the foot of the tree ─────────────
   One shut row instead of a filter: the tree used to drop every dotfile
   silently, which is a file its owner cannot see he has. The clutter it was
   avoiding is answered by DESIGN — his own files stay at the top level, and
   what he did not put there himself sits under one row with a count on it, so
   he knows before pressing whether it costs a line or a screenful.
   It borrows the System section's disclosure triangle deliberately: both rows
   say the same thing about the same kind of contents, and two pictures for one
   idea is how a panel stops being read. */
.files-rest { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 4px; }
.files-rest-head {
	display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
	background: none; border: 0; cursor: pointer; padding: 6px 12px;
	font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--text-muted);
}
.files-rest-head::before { content: '\25B8'; display: inline-block; }
.files-rest-head[aria-expanded="true"]::before { content: '\25BE'; }
.files-rest-label { flex: 1; }
/* The count is a number about size, so it is set like every other one in this
   panel — mono, quiet, and not shouted by the row's own uppercase. */
.files-rest-count {
	font-family: var(--font-mono); font-size: var(--fs-3xs);
	text-transform: none; letter-spacing: 0;
}
.files-rest-head:hover { color: var(--text-primary); }
.files-rest-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Indented, so an entry inside the row is plainly the row's and not the tree's
   — the only difference between the two; the controls on it are the same ones. */
.files-rest-body .files-row { padding-left: 26px; }

/* ── The System section: Daimond's own store ─────────────────────
   Its own section under the tree, not part of it. The two resolve against
   different roots — the tree against whatever workspace is active, this always
   against the browser's own store — and a single list quietly spanning both is
   the confusion dev/ROOT_SEPARATION.md exists to prevent. Collapsed by default:
   it answers a question ("where is DAIMOND.md?") rather than being where the
   work is. */
.sys-sec { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 4px; }
.sys-head {
	display: block; width: 100%; text-align: left; background: none; border: 0;
	cursor: pointer; padding: 6px 12px; font-size: var(--fs-2xs);
	text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
}
/* A disclosure triangle the section draws itself, from `aria-expanded` -- the
   one place the state is written, so the picture cannot disagree with what a
   screen reader is told. */
.sys-head::before { content: '\25B8 '; display: inline-block; }
.sys-head[aria-expanded="true"]::before { content: '\25BE '; }
.sys-head:hover { color: var(--text-primary); }
.sys-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.sys-note { padding: 0 12px 6px; font-size: var(--fs-2xs); color: var(--text-muted); line-height: 1.5; }
.sys-path {
	padding: 0 12px 4px; font-family: var(--font-mono); font-size: var(--fs-3xs);
	color: var(--text-muted);
	display: flex; flex-wrap: wrap; align-items: center;
}
/* No × and no rename: this section is for reading and editing, never for
   destroying. A row here is a Diamond's whole directory as often as not. */
.sys-row .files-res, .sys-row .files-pin, .sys-row .files-del { display: none; }
/* A row that can take focus has to SHOW it. These became focusable the hour they
   were written -- they are `role="button"` -- and a focus ring is the other half
   of that: a keyboard user who cannot see where they are is not being offered a
   keyboard route, they are being offered a guess. */
.sys-row:focus {
	outline: 2px solid var(--accent); outline-offset: -2px;
	background: var(--bg-secondary);
}