/* Preferences, local data and archive UI. */
.food-accents{border:0;padding:0;margin:0 0 28px;min-width:0;}
.food-accents legend{font-size:13px;font-weight:600;margin-bottom:12px;}
.food-choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:8px;}
.food-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:0;padding:10px 4px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--ink);font-size:12px;overflow-wrap:anywhere;}
.food-choice svg{width:40px;height:40px;flex-shrink:0;color:var(--food-color);}
.food-choice span{max-width:100%;}
.food-choice:hover{background:var(--accent-soft);}
.food-choice[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);background:var(--accent-soft);font-weight:700;}
@media (max-width: 480px){
.settings-button{flex-shrink: 0;}
}
.settings-button{display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600;}
.settings-button:hover,.settings-button[aria-pressed="true"]{background: var(--accent-hover);}
#settings-nav{flex: 1 1 0%; overflow: auto;}
.settings-entry{display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 12px 16px; text-align: left; background: var(--surface); font-size: 14px; font-weight: 600;}
.settings-entry:hover,.settings-entry[aria-current="page"]{background: color-mix(in srgb,var(--class-color) 14%,var(--surface-raised));}
.settings-entry[aria-current="page"]{color: var(--class-color);}
.settings-main{flex: 1 1 0%; min-width: 0px; overflow: auto; padding: 44px clamp(24px, 5vw, 80px); background: var(--canvas);}
#settings-content{max-width: 720px; margin: 0px auto;}
.settings-heading{display: flex; align-items: center; gap: 12px; margin-bottom: 28px;}
.settings-heading h2{margin: 0px; font-size: 28px; letter-spacing: -0.7px;}
.settings-card .settings-form-error{color: var(--accent); background: var(--accent-soft); padding: 12px; border-radius: 6px;}
.settings-dot{height: 12px; width: 12px; border-radius: 4px; background: var(--class-color);}
.settings-card{padding: 26px; margin-bottom: 20px; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 9px;}
.settings-card h3{font-size: 15px; margin: 0px 0px 10px;}
.settings-card p{font-size: 13px; color: var(--muted); line-height: 1.7;}
.settings-field{display: flex; flex-direction: column; gap: 9px; font-size: 13px; font-weight: 600; margin-bottom: 23px;}
.settings-field input,.settings-field select{width: 100%; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--field); color: var(--ink); padding: 11px 12px; font-size: 13px; font-weight: 400;}
.settings-field small{font-size: 11px; color: var(--muted); font-weight: 400; line-height: 1.6;}
.settings-danger{border-color: var(--accent-border);}
.settings-preview{padding: 12px; background: var(--surface); border-radius: 6px; margin: 0px;}
.about-logo .icon{width: 48px; height: 48px; margin-bottom: 16px;}
.settings-about h3{font-size: 24px;}
.settings-contact{display: flex; flex-direction: column; gap: 8px; padding: 18px 0px; border-top: 1px solid var(--border); font-size: 13px;}
.settings-contact span{color: var(--muted);}
.settings-contact a{color: var(--accent); overflow-wrap: anywhere;}
@media (max-width: 760px){
.settings-button{padding: 9px; margin-left: auto;}
.settings-button span{display: none;}
#settings-workspace{flex-direction: column;}
#settings-workspace > .sidebar{width: 100%; border-right: 0px;}
#settings-workspace .sidebar-heading{display: none;}
#settings-nav{display: flex; overflow: visible;}
.settings-entry{flex: 1 1 0%; width: auto; min-width: 0px; padding: 12px 8px; font-size: 12px; gap: 6px; border-left-width: 4px;}
#settings-workspace .sidebar-bottom{padding: 5px 12px;}
.settings-main{padding: 24px 16px;}
.settings-card{padding: 20px;}
.settings-heading h2{font-size: 24px;}
}
.topbar .settings-button{background: rgb(255, 255, 255); color: var(--app-hover,#963729);}
.topbar .settings-button:hover,.topbar .settings-button[aria-pressed="true"]{background: var(--app-soft,#faede9); color: var(--app-hover,#963729);}
:root[data-theme="dark"] .topbar .settings-button{background:var(--surface);color:var(--accent);box-shadow:inset 0 0 0 1px var(--border);}
:root[data-theme="dark"] .topbar .settings-button:hover,:root[data-theme="dark"] .topbar .settings-button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-border);}

.archive-search{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,220px);gap:20px}
.archive-search .settings-field{margin-bottom:0;min-width:0}
@media(max-width:600px){.archive-search{grid-template-columns:minmax(0,1fr)}}
.archive-summary{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.archive-card .archive-title{margin:0;overflow-wrap:anywhere;min-width:0}
.archive-tag{flex-shrink:0;padding:5px 10px;border-radius:5px;background:var(--class-light);color:var(--class-dark);font-size:12px;font-weight:600}
.archive-dates{display:flex;flex-wrap:wrap;gap:12px 32px;margin:20px 0;color:var(--muted);font-size:13px}
.archive-dates dt{font-size:12px;margin-bottom:5px}
.archive-dates dd{margin:0;color:var(--ink)}
.archive-actions{display:flex;gap:10px;flex-wrap:wrap}
.archive-empty p{margin:0}
.load-diagrams{border:0;padding:0;margin:15px 0;min-width:0}
.load-diagrams legend{margin-bottom:8px}
.load-diagram-list{display:flex;flex-direction:column;gap:8px;max-height:40vh;overflow-y:auto;padding:3px}
.load-diagram-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer}
.load-diagram-option:has(input:checked){border-color:var(--accent)}
.load-diagram-option:has(input:disabled){opacity:.5;cursor:default}
.load-diagram-option:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.load-diagram-option input{margin:0;accent-color:var(--accent)}
.load-diagram-option .archive-title{overflow-wrap:anywhere}
@media(max-width:480px){.load-diagram-option{grid-template-columns:auto minmax(0,1fr)}.load-diagram-option .archive-tag{grid-column:2;justify-self:start}}
#archive-warning{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 20px}
@media(max-width:760px){.archive-summary{flex-direction:column;gap:10px}.archive-dates{gap:12px 20px}}