document types

frontend/src/styles.css

@@ -2012,6 +2012,43 @@ button.danger:hover:not([disabled]) {
   color: inherit;
 }
 
+.doc-type-label {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.05rem 0.4rem;
+  margin-right: 0.35rem;
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--muted);
+  font-size: 0.75rem;
+  line-height: 1.2;
+  cursor: default;
+  gap: 0.25rem;
+}
+
+.doc-type-label[role='button'] {
+  cursor: pointer;
+  color: var(--accent);
+  background: color-mix(in oklch, var(--accent) 12%, transparent);
+}
+
+.doc-type-label[role='button']:hover,
+.doc-type-label[role='button']:focus-visible {
+  color: var(--accent-strong, var(--accent));
+  background: color-mix(in oklch, var(--accent) 20%, transparent);
+}
+
+.doc-type-label[role='button']:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.doc-type-label.active {
+  background: color-mix(in oklch, var(--accent) 28%, transparent);
+  color: var(--accent-strong, var(--accent));
+  font-weight: 600;
+}
+
 .doc-correspondent-link {
   background: none;
   background-color: transparent;
@@ -2492,6 +2529,27 @@ button.danger:hover:not([disabled]) {
   margin: 0.4rem 0 0.6rem;
 }
 
+.detail-field {
+  margin: 0.9rem 0;
+}
+
+.detail-field__label {
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.detail-field__value {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 0.5rem;
+}
+
+.detail-field__value .meta {
+  color: var(--muted);
+}
+
 .detail-panel dl {
   margin: 0;
 }