/* Frameworks are a second view of the kitchen notebook, using Hearth's theme tokens. */
.library-switch { display: flex; gap: 4px; padding: 4px; margin: 16px 0; border: 1px solid var(--border); border-radius: var(--r-input); background: var(--sunken); }
.library-switch a { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 600; }
.library-switch a[aria-current] { background: var(--surface); color: var(--accent-text); }
.finder-header .page-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(48px, auto); gap: 6px 12px; }
.finder-header .page-head .eyebrow { grid-column: 1 / -1; margin: 0; }
.finder-header .page-head h1 { grid-row: 2; }
.finder-header .page-head .btn { grid-column: 2; grid-row: 2; }
.finder-mode-note { display: flex; align-items: center; min-height: 44px; margin: 12px 0; }
@media (max-width: 380px) { .finder-header h1 { font-size: var(--fs-xl); } }
.framework-grid { list-style: none; padding: 0; display: grid; gap: 10px; }
.framework-card { display: flex; align-items: start; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.framework-card:hover { border-color: var(--edge); }
.framework-card > span:nth-child(2) { min-width: 0; flex: 1; }
.framework-card > .icon { margin-top: 6px; color: var(--text-3); }
.framework-cue { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--herb-soft); color: var(--herb); }
.framework-description { display: block; margin: 6px 0; }
.framework-card-meta { color: var(--herb); }
.framework-invitation { margin: 20px 0; padding: 16px; background: var(--herb-soft); border-radius: var(--r-card); }
.framework-invitation p { color: var(--text); }
.framework-component { min-width: 0; margin: 0 0 16px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--surface); }
.framework-component h3, .framework-component legend { font-size: var(--fs-md); font-weight: 650; }
.framework-component legend { padding: 0 8px; }
.framework-guidance { margin: 12px 0; color: var(--text-2); font-size: var(--fs-sm); }
.framework-options { list-style: none; margin: 0; padding: 0; }
.framework-options li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.framework-options strong { font-weight: 550; }
.framework-options p { margin: 3px 0 0; }
.framework-roles { flex: none; max-width: 35%; color: var(--herb); text-align: right; }
.framework-section { margin: 28px 0; }
.framework-version-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.framework-choice { padding: 12px 0; border-top: 1px solid var(--border); }
.framework-choice > label { display: flex; align-items: start; gap: 10px; min-height: 44px; padding: 8px 0; cursor: pointer; }
.framework-choice .hint { display: block; margin-top: 4px; }
.framework-choice > div { margin-left: 28px; }
.framework-choice > div input { margin-top: 4px; }
.framework-section .prose, .framework-guidance { overflow-wrap: anywhere; }
@media (min-width: 700px) { .framework-components { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .framework-components .framework-component { margin: 0; } .framework-choice { display: grid; grid-template-columns: 1fr 12rem; gap: 16px; } .framework-choice > div { margin-left: 0; } }

/* The two finder views share fixed positions and readable touch targets. */
.library-switch { font-size: var(--fs-xs); }
.library-switch .icon { width: 18px; height: 18px; }