@dirwell/theme-ledger 0.0.2 → 0.0.4

package/dist/styles.css

@@ -1,9 +1,3 @@
-
-.entry-data{min-width:0;overflow-wrap:anywhere}
-
-[data-dirwell-actions] button,[data-dirwell-actions] a{min-height:44px;padding:8px 12px;border:1px solid var(--rule);border-radius:4px;background:var(--control);color:var(--ink)}
-@media(max-width:720px){.entry[data-custom-columns=true]{grid-template-columns:minmax(0,1fr)!important}.entry-head[data-custom-columns=true]{display:none}.entry[data-custom-columns=true]>.kind,.entry[data-custom-columns=true]>.timestamp-button{display:block!important}}
-
 :root {
   color-scheme: light dark;
   --dw-control-height: 2.75rem;
@@ -76,14 +70,12 @@
     --shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
   }
 }
+
 * {
   box-sizing: border-box;
 }
 html {
   min-height: 100%;
-  scroll-padding-top: calc(
-    var(--dw-sticky-header-height) + var(--dw-sticky-columns-height) + 0.5rem
-  );
   background: var(--paper);
   color: var(--ink);
 }
@@ -105,359 +97,188 @@ input,
 select {
   font: inherit;
 }
+a {
+  color: var(--accent);
+  text-decoration-thickness: 0.08em;
+  text-underline-offset: 0.22em;
+}
+button,
+select,
+input {
+  accent-color: var(--accent);
+}
+button:disabled,
+select:disabled,
+input:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+a:focus-visible,
+button:not(:disabled):focus-visible,
+input:not(:disabled):focus-visible,
+select:not(:disabled):focus-visible {
+  outline: 3px solid var(--focus);
+  outline-offset: 3px;
+}
+button:not(:disabled):active {
+  background: var(--hover);
+}
 main {
+  --dw-sticky-header-height: 0px;
+  --dw-sticky-columns-height: 44px;
   width: min(72rem, 100%);
   margin: 0 auto;
   background: var(--surface);
   border: 1px solid var(--rule);
   border-radius: 0.875rem;
   box-shadow: var(--shadow);
-  overflow: visible;
 }
-main > header {
-  position: sticky;
+main > .page-header {
+  position: static;
   top: 0;
   z-index: 3;
-  background: var(--surface);
-  border-radius: calc(0.875rem - 1px) calc(0.875rem - 1px) 0 0;
-}
-main[data-sticky-header-disabled] > header {
-  position: static;
-}
-.chrome {
   display: flex;
   flex-wrap: wrap;
-  min-height: 3.4rem;
   align-items: center;
   justify-content: space-between;
-  gap: 1rem;
-  padding: 0 1.4rem;
+  gap: 0.5rem 1rem;
+  min-height: 3.4rem;
+  padding: 0.3rem 1.4rem;
   border-bottom: 1px solid var(--soft-rule);
+  border-radius: calc(0.875rem - 1px) calc(0.875rem - 1px) 0 0;
+  background: var(--surface);
 }
-.breadcrumbs {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.15rem;
-  font-size: 0.95rem;
-  font-weight: 650;
+main[data-sticky-ready]:not([data-sticky-header-disabled]) > .page-header {
+  position: sticky;
 }
-.breadcrumbs a,
-.breadcrumbs span {
-  color: inherit;
-  overflow-wrap: anywhere;
+.page-header > * {
   min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
-.breadcrumbs a {
-  color: var(--accent);
-  text-decoration-thickness: 0.08em;
+.page-header nav a {
   display: inline-flex;
-  min-height: var(--dw-control-height);
   align-items: center;
-  padding: 0 0.2rem;
+  min-height: 44px;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
-.separator {
-  display: inline-flex;
-  color: var(--muted);
-  font-weight: 400;
+.wordmark {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.4rem 1rem;
 }
-.summary {
+.wordmark h1 {
   margin: 0;
+  font-size: 1.2rem;
+}
+.wordmark span {
   color: var(--muted);
-  font-size: 0.76rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  white-space: nowrap;
+  font-size: 0.8rem;
 }
 .toolbar {
-  display: flex;
-  justify-content: space-between;
-  gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  align-items: start;
+  gap: 0.8rem;
   padding: 1.25rem 1.4rem;
-  align-items: flex-start;
 }
-.search-cluster {
+.toolbar > label {
   display: flex;
-  flex-wrap: wrap;
-  min-width: 0;
-  flex: 1;
-  gap: 0.6rem;
-  align-items: center;
-}
-.search {
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-  width: min(28rem, 100%);
-  min-height: var(--dw-control-height);
-  padding: 0.5rem 0.7rem;
-  border: 1px solid var(--rule);
-  border-radius: 0.5rem;
-  background: var(--control);
-}
-.search:focus-within {
-  outline: 3px solid var(--focus);
-  outline-offset: 2px;
-}
-.search input {
-  width: 100%;
+  flex-direction: column;
+  gap: 0.3rem;
   min-width: 0;
-  border: 0;
-  outline: 0;
-  background: transparent;
-  color: var(--ink);
-}
-.search input::placeholder {
   color: var(--muted);
-  opacity: 1;
-}
-.type-filters {
-  display: flex;
-  flex-wrap: nowrap;
-  align-items: center;
+  font-size: 0.8rem;
+}
+.toolbar input[type="search"],
+.toolbar select,
+.toolbar > button,
+dialog input,
+dialog button,
+[data-dirwell-actions] button,
+[data-dirwell-actions] a {
   min-width: 0;
-  min-height: var(--dw-control-height);
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-  border: 1px solid var(--rule);
-  border-radius: 0.5rem;
-  background: var(--control);
-  color: var(--ink);
-  font-size: 0.78rem;
-  overflow: hidden;
-}
-.type-filters label {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: calc(var(--dw-control-height) - 2px);
-  padding: 0.35rem 0.7rem;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.type-filters label + label {
-  border-left: 1px solid var(--rule);
-}
-.type-filters label:hover {
-  background: var(--hover);
-}
-.type-filters label:has(input:checked) {
-  background: color-mix(in srgb, var(--accent) 16%, var(--control));
-  color: var(--accent-strong);
-}
-.type-filters label:has(input:focus-visible) {
-  box-shadow: inset 0 0 0 3px var(--focus);
-}
-.type-filters input {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  opacity: 0;
-}
-.sort-menu select {
-  min-height: var(--dw-control-height);
+  min-height: 44px;
+  padding: 0.5rem 0.6rem;
   border: 1px solid var(--rule);
-  border-radius: 0.5rem;
+  border-radius: 6px;
   background: var(--control);
   color: var(--ink);
-  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
 }
-.search-all,
-.dialog-close {
-  min-height: var(--dw-control-height);
-  border: 1px solid var(--rule);
-  border-radius: 0.5rem;
-  padding: 0.4rem 0.75rem;
-  background: var(--control);
-  color: var(--accent);
-  white-space: nowrap;
-  cursor: pointer;
-}
-.search-all:hover,
-.dialog-close:hover {
-  background: var(--hover);
-}
-.global-search {
-  width: min(58rem, calc(100vw - 2rem));
-  max-height: min(85vh, 55rem);
-  padding: 0;
-  border: 1px solid var(--rule);
-  border-radius: 0.875rem;
-  background: var(--surface);
-  color: var(--ink);
-  box-shadow: var(--shadow);
+.toolbar input[type="search"],
+.toolbar select,
+.toolbar > button {
+  width: 100%;
 }
-.global-search::backdrop {
-  background: rgba(10, 12, 10, 0.62);
+.toolbar .search-field,
+.toolbar fieldset {
+  grid-column: span 2;
 }
-.global-search-head,
-.global-search-controls {
+.toolbar fieldset {
   display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 1rem 1.25rem;
-}
-.global-search-head {
   flex-wrap: wrap;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--soft-rule);
-}
-.global-search h2 {
+  gap: 0.7rem;
+  min-width: 0;
+  min-height: 44px;
   margin: 0;
-  font-size: 1.2rem;
+  padding: 0.4rem 0.6rem;
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+  font-size: 0.8rem;
 }
-.global-search > p {
-  margin: 0;
-  padding: 0.75rem 1.25rem;
+.toolbar fieldset legend {
   color: var(--muted);
 }
-.global-search-controls .search {
-  flex: 1;
-}
-.global-results {
-  max-height: 50vh;
-  overflow: auto;
-}
-.virtual-spacer {
-  display: block;
-  padding: 0;
-  margin: 0;
-  border: 0;
-  pointer-events: none;
-}
-.toolbar-actions {
+.toolbar fieldset label {
   display: flex;
-  align-items: flex-start;
-  gap: 0.6rem;
-}
-.scheme {
-  display: inline-flex;
   align-items: center;
-  gap: 0.45rem;
-  color: var(--muted);
-  font-size: 0.78rem;
-  white-space: nowrap;
+  gap: 0.35rem;
+  min-height: 32px;
 }
-.scheme select {
-  min-height: var(--dw-control-height);
-  border: 1px solid var(--rule);
-  border-radius: 0.5rem;
-  padding: 0.35rem 1.65rem 0.35rem 0.6rem;
-  background: var(--control);
-  color: var(--ink);
-  cursor: pointer;
-}
-.sort-panel {
-  position: relative;
-}
-.sort-panel > summary {
-  display: flex;
-  min-height: var(--dw-control-height);
+.toolbar > label:has(input[type="checkbox"]) {
+  flex-direction: row;
   align-items: center;
-  list-style: none;
-  border: 1px solid var(--rule);
-  border-radius: 0.5rem;
-  background: var(--control);
-  padding: 0.45rem 0.7rem;
-  cursor: pointer;
+  align-self: end;
+  min-height: 44px;
 }
-.sort-panel > summary::-webkit-details-marker {
-  display: none;
-}
-.sort-panel[open] > summary {
-  outline: 2px solid var(--focus);
-  outline-offset: 1px;
-}
-.sort-menu {
-  position: absolute;
-  z-index: 2;
-  right: 0;
-  top: calc(100% + 0.4rem);
-  display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  width: 16rem;
-  gap: 0.7rem;
-  padding: 1rem;
-  border: 1px solid var(--rule);
-  border-radius: 0.75rem;
-  background: var(--surface);
-  box-shadow: var(--shadow);
+.toolbar > button {
+  align-self: end;
 }
-.sort-menu select {
-  min-width: 0;
-  width: 100%;
-}
-.sort-menu label {
-  display: grid;
-  gap: 0.3rem;
-  color: var(--muted);
-  font-size: 0.76rem;
-}
-.sort-menu label[hidden] {
-  display: none;
+button:not(:disabled) {
+  cursor: pointer;
 }
-.sort-menu label:last-child {
+.listing-summary {
   display: flex;
-  align-items: center;
-  color: var(--ink);
+  flex-wrap: wrap;
+  gap: 0.6rem;
+  padding: 0.7rem 1.4rem;
+  color: var(--muted);
+  font-size: 0.85rem;
 }
 .entry-head,
 .entry {
   display: grid;
-  grid-template-columns: minmax(12rem, 1fr) minmax(8rem, auto) 12rem;
+  grid-template-columns: var(--dw-entry-columns, minmax(12rem, 1fr) minmax(8rem, auto) 12rem);
+  align-items: center;
   gap: 1.25rem;
+  padding-inline: 1.4rem;
 }
 .entry-head {
   position: sticky;
   top: var(--dw-sticky-header-height);
   z-index: 2;
-  min-height: var(--dw-control-height);
-  align-items: center;
-  padding: 0 1.4rem;
-  border-top: 1px solid var(--soft-rule);
-  border-bottom: 1px solid var(--soft-rule);
+  min-height: 44px;
+  border-block: 1px solid var(--soft-rule);
   background: var(--paper);
-}
-.sort-heading {
-  display: inline-flex;
-  min-height: var(--dw-control-height);
-  align-items: center;
-  gap: 0.25rem;
-  width: max-content;
-  border: 0;
-  background: transparent;
   color: var(--muted);
-  padding: 0;
   font-size: 0.68rem;
   font-weight: 720;
   letter-spacing: 0.09em;
   text-transform: uppercase;
-  cursor: pointer;
-}
-button.sort-heading {
-  min-width: var(--dw-control-height);
-}
-.sort-heading[aria-pressed="true"] {
-  color: var(--accent);
 }
-.sort-indicator {
-  display: none;
-  align-items: center;
-}
-.sort-heading[aria-pressed="true"] .sort-indicator {
-  display: inline-flex;
-}
-.sort-heading[data-direction="desc"] .sort-indicator {
-  transform: rotate(180deg);
-}
-.sort-heading .sort-indicator .icon {
-  color: currentColor;
-}
-.entries {
+.entry-list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -465,73 +286,65 @@ button.sort-heading {
 }
 .entry {
   min-height: 3.25rem;
-  align-items: center;
-  padding: 0.72rem 1.4rem;
+  padding-block: 0.2rem;
   border-bottom: 1px solid var(--soft-rule);
+  scroll-margin-top: calc(
+    var(--dw-sticky-header-height) + var(--dw-sticky-columns-height) + 0.5rem
+  );
 }
-.entry:hover,
 .entry[data-active="true"] {
   background: var(--hover);
 }
-.entry[hidden] {
-  display: none;
-}
-a {
-  color: var(--accent);
-  text-decoration-thickness: 0.08em;
-  text-underline-offset: 0.22em;
+.entry > * {
+  min-width: 0;
 }
 .identity {
   display: flex;
-  min-width: 0;
   flex-wrap: wrap;
   row-gap: 0.15rem;
 }
-.entry-name {
+.entry .name {
   display: inline-flex;
   align-items: center;
   gap: 0.55rem;
-}
-.name {
+  min-height: 44px;
+  max-width: 100%;
+  color: var(--accent);
   font-weight: 650;
   overflow-wrap: anywhere;
-}
-.entry .name {
   text-decoration: none;
 }
-.entry .name:hover,
 .entry .name:focus-visible {
   text-decoration: underline;
 }
-.icon {
-  display: inline-block;
+.file-icon {
+  display: inline-flex;
   flex: none;
-  vertical-align: -0.15em;
-  color: var(--status);
+  width: 18px;
+  height: 18px;
 }
-.file-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-  object-fit: contain;
+.file-icon svg {
+  width: 100%;
+  height: 100%;
 }
 .file-icon--dark,
 :root[data-theme="dark"] .file-icon--light {
   display: none;
 }
 :root[data-theme="dark"] .file-icon--dark {
-  display: inline-block;
+  display: inline-flex;
 }
 @media (prefers-color-scheme: dark) {
   :root[data-theme="system"] .file-icon--light {
     display: none;
   }
   :root[data-theme="system"] .file-icon--dark {
-    display: inline-block;
+    display: inline-flex;
   }
 }
 .target {
   flex-basis: 100%;
-  padding-left: 1.8rem;
+  padding-inline-start: 1.8rem;
   color: var(--muted);
   font:
     500 0.8rem/1.6 ui-monospace,
@@ -539,216 +352,94 @@ a {
     monospace;
   overflow-wrap: anywhere;
 }
-.target-status {
-  font-family: ui-sans-serif, system-ui, sans-serif;
-  font-weight: 650;
-}
-.target-unavailable {
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-.unavailable {
-  color: var(--muted);
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
 .kind,
 time {
   color: var(--muted);
   font-size: 0.82rem;
 }
 .timestamp-button {
-  border: 0;
+  width: fit-content;
+  min-height: 44px;
   padding: 0;
+  border: 0;
   background: transparent;
-  text-align: left;
-  cursor: pointer;
-  min-height: 2.75rem;
-  width: fit-content;
-  font: inherit;
-}
-.timestamp-button:hover time {
-  text-decoration: underline;
-  text-underline-offset: 0.2em;
-}
-.timestamp-zone {
-  font-weight: 500;
-  letter-spacing: 0;
-  text-transform: none;
-}
-.timestamp-details {
-  position: fixed;
-  z-index: 10;
-  width: min(26rem, calc(100vw - 1rem));
-  max-height: calc(100vh - 1rem);
-  overflow: auto;
-  padding: 1rem;
-  border: 1px solid var(--rule);
-  border-radius: 0.75rem;
-  background: var(--paper);
-  color: var(--ink);
-  font-size: 0.85rem;
-}
-.timestamp-details-head {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 1rem;
-}
-.timestamp-details dl {
-  margin: 0.75rem 0 0;
-}
-.timestamp-details dt {
-  margin-top: 0.75rem;
   color: var(--muted);
+  text-align: start;
 }
-.timestamp-details dd {
-  margin: 0.25rem 0 0;
+.entry-data {
   overflow-wrap: anywhere;
-  font-variant-numeric: tabular-nums;
 }
-.size-stack {
-  display: grid;
-  gap: 0.1rem;
-  font-variant-numeric: tabular-nums;
-  white-space: nowrap;
-}
-.size-stack b {
-  color: var(--ink);
-  font-weight: 650;
-}
-a:focus-visible,
-button:focus-visible,
-select:focus-visible,
-summary:focus-visible {
-  outline: 3px solid var(--focus);
-  outline-offset: 3px;
-}
-.empty {
-  margin: 0;
-  padding: 2rem 1.4rem;
-  color: var(--muted);
-  border-bottom: 1px solid var(--soft-rule);
-}
-.folder-loading {
-  margin: 0;
-  padding: 2rem 1.4rem;
-  color: var(--muted);
-}
-::selection {
-  background: var(--accent);
-  color: var(--surface);
-}
-.brand-footer { padding: 0.7rem 1.4rem; overflow-wrap: anywhere; }
-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.7rem 1.4rem;
+.keyboard-help,
+.brand-footer,
+main > nav {
+  padding-inline: 1.4rem;
+  font-size: 0.8rem;
   color: var(--muted);
-  font-size: 0.78rem;
-}
-.project-meta,
-.shortcuts {
-  margin: 0;
-}
-.project-meta {
-  line-height: 1.9;
-}
-.meta-item,
-.project-credit {
-  white-space: nowrap;
-}
-.shortcuts {
-  text-align: right;
 }
-kbd {
-  display: inline-block;
-  min-width: 1.6em;
-  margin: 0 0.12rem;
-  padding: 0.02rem 0.3rem;
+dialog {
+  width: min(42rem, 90vw);
+  max-height: 80vh;
+  overflow: auto;
+  padding: 1.5rem;
   border: 1px solid var(--rule);
-  border-radius: 0.2rem;
-  background: var(--control);
-  text-align: center;
-  font: inherit;
+  border-radius: 12px;
+  background: var(--surface);
+  color: var(--ink);
 }
-.visually-hidden {
-  position: absolute !important;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+dialog::backdrop {
+  background: #0006;
 }
-.sort-heading:not(button) {
-  cursor: default;
+dialog input {
+  width: 100%;
 }
-@media (max-width: 60rem) {
-  .toolbar {
-    align-items: stretch;
-    flex-direction: column;
-  }
-  .search-cluster {
-    align-items: stretch;
-    flex-wrap: wrap;
-  }
-  .search {
-    width: 100%;
+dialog li,
+dialog p {
+  overflow-wrap: anywhere;
+}
+@media (hover: hover) {
+  button:not(:disabled):hover,
+  [data-dirwell-actions] a:hover {
+    background: var(--hover);
   }
-  .toolbar-actions {
-    width: 100%;
-    justify-content: space-between;
+  .entry:hover {
+    background: var(--hover);
   }
-  .sort-menu {
-    right: auto;
-    left: 0;
+  .entry .name:hover,
+  .timestamp-button:not(:disabled):hover time {
+    text-decoration: underline;
   }
 }
 @media (max-width: 42rem) {
-  :root {
-    --dw-sticky-columns-height: 0px;
-  }
   body {
     padding: 0;
     background: var(--surface);
   }
   main {
+    --dw-sticky-columns-height: 0px;
     min-height: 100vh;
     border: 0;
     border-radius: 0;
     box-shadow: none;
   }
-  main > header {
+  main > .page-header {
+    display: block;
+    padding: 0.3rem 1rem;
     border-radius: 0;
   }
-  .chrome {
-    padding-inline: 1rem;
-  }
-  .breadcrumbs {
-    flex: 1 1 auto;
-  }
-  .summary {
-    margin-left: auto;
-  }
   .toolbar {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
     padding: 1rem;
+    gap: 0.6rem;
   }
-  .toolbar-actions {
-    flex-wrap: wrap;
-  }
-  .sort-menu {
-    width: min(16rem, calc(100vw - 2rem));
+  .toolbar .search-field,
+  .toolbar fieldset {
+    grid-column: 1 / -1;
   }
-  .global-search-controls {
-    flex-wrap: wrap;
-  }
-  .global-search-controls .search {
-    flex-basis: 100%;
+  .listing-summary,
+  .keyboard-help,
+  .brand-footer,
+  main > nav {
+    padding-inline: 1rem;
   }
   .entry-head {
     display: none;
@@ -756,66 +447,24 @@ kbd {
   .entry {
     grid-template-columns: minmax(0, 1fr) auto;
     gap: 0.25rem 1rem;
-    padding: 0.78rem 1rem;
-  }
-  .entry .name {
-    display: inline-flex;
-    min-height: 2.75rem;
-    align-items: center;
-  }
-  .entry time,
-  .entry .timestamp-button {
-    grid-column: 1/-1;
-  }
-  .kind {
-    text-align: right;
-  }
-  footer {
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: flex-start;
-    gap: 0.25rem;
     padding: 0.3rem 1rem;
   }
-  .project-meta a {
-    display: inline-flex;
-    min-height: 2.75rem;
-    align-items: center;
+  .entry .identity {
+    grid-column: 1 / -1;
   }
-  .shortcuts {
-    margin: 0;
-    text-align: left;
+  .entry > .timestamp-button {
+    grid-column: 2;
+    justify-self: end;
+    max-width: 100%;
   }
-}
-@media (max-width: 19.5rem) {
-  .search-cluster {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
+  .entry time {
+    overflow-wrap: anywhere;
   }
-}
-@media (pointer: coarse) {
-  .entry .name,
-  .project-meta a {
-    display: inline-flex;
-    min-height: 2.75rem;
-    align-items: center;
+  .entry[data-custom-columns="true"] {
+    grid-template-columns: minmax(0, 1fr);
   }
-}
-@media (prefers-reduced-motion: reduce) {
-  * {
-    scroll-behavior: auto !important;
+  .entry[data-custom-columns="true"] > .timestamp-button {
+    grid-column: auto;
+    justify-self: start;
   }
 }
-
-.page-header{width:min(72rem,100%);margin:0 auto 1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.5rem 1.4rem}
-.wordmark{display:flex;align-items:baseline;gap:1rem}.wordmark h1{font-size:1.2rem;margin:0}.wordmark span{font-size:.8rem;color:var(--muted)}
-.toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;gap:.8rem}
-.toolbar>label{display:flex;flex-direction:column;gap:.3rem;font-size:.8rem;color:var(--muted);min-width:0}
-.toolbar input[type=search],.toolbar select,.toolbar>button{min-height:44px;border:1px solid var(--rule);border-radius:6px;background:var(--control);color:var(--ink);padding:.5rem .6rem;min-width:0;width:100%}
-.toolbar .search-field{grid-column:span 2}.toolbar fieldset{grid-column:span 2;border:1px solid var(--rule);border-radius:6px;margin:0;min-height:44px;padding:.4rem .6rem;display:flex;flex-wrap:wrap;gap:.7rem;font-size:.8rem}.toolbar fieldset legend{color:var(--muted)}
-.toolbar fieldset label{display:flex;align-items:center;gap:.35rem;min-height:32px}.toolbar>label:has(input[type=checkbox]){flex-direction:row;align-items:center;align-self:end;min-height:44px}
-.toolbar button{align-self:end;cursor:pointer}.listing-summary{padding:.7rem 1.4rem;color:var(--muted);font-size:.85rem;display:flex;gap:.6rem;flex-wrap:wrap}
-.entry-list{padding-inline:1.4rem}.entry{min-height:76px;box-sizing:border-box}.entry .identity{min-width:0}.file-icon{display:inline-flex;width:18px;height:18px;vertical-align:middle;margin-right:.35rem}.file-icon svg{width:100%;height:100%}
-.keyboard-help{padding-inline:1.4rem;font-size:.8rem;color:var(--muted)}
-dialog{max-width:min(42rem,90vw);max-height:80vh;border:1px solid var(--rule);border-radius:12px;background:var(--surface);color:var(--ink);padding:1.5rem}dialog::backdrop{background:#0006}
-@media(max-width:42rem){.page-header{padding:1rem;display:block}.wordmark{flex-wrap:wrap;gap:.4rem}.toolbar{grid-template-columns:repeat(2,minmax(0,1fr));padding:1rem;gap:.6rem}.toolbar .search-field,.toolbar fieldset{grid-column:1/-1}.entry-list{padding-inline:1rem}.listing-summary{padding-inline:1rem}}