:root { --pico-font-size: 16px; --pico-font-family-sans-serif: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif, var(--pico-font-family-emoji); } .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .stat-card { padding: 1rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); text-align: center; } .stat-card .number { font-size: 2rem; font-weight: bold; display: block; } .stat-card .label { font-size: 0.85rem; color: var(--pico-muted-color); } .action-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; } .action-buttons form { margin: 0; } .action-buttons a[role="button"], .action-buttons button { white-space: nowrap; padding: 0.5rem 1rem; font-size: 0.95rem; line-height: 1.4; margin: 0; width: auto; } .hidden { display: none !important; } nav .brand { font-weight: bold; font-size: 1.1rem; } /* Tab bar */ .tab-bar { display: flex; gap: 0; border-bottom: 2px solid var(--pico-primary); margin-bottom: 1rem; } .tab { padding: 0.5rem 1.2rem; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px; cursor: pointer; font-size: 0.95rem; color: var(--pico-muted-color); } .tab:focus { outline: none; box-shadow: none; } .tab.active { color: var(--pico-primary-inverse); background: var(--pico-primary); border-bottom-color: var(--pico-primary); border-radius: var(--pico-border-radius) var(--pico-border-radius) 0 0; font-weight: 600; } .tab:hover { color: var(--pico-primary); } .tab.active:hover { color: var(--pico-primary-inverse); } .tab-content { display: none; } .tab-content.active { display: block; } /* Calendar widget */ .calendar-widget { margin-bottom: 1.5rem; } .calendar-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .calendar-nav button { padding: 0.3rem 0.8rem; } .calendar-grid { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .calendar-grid th, .calendar-grid td { text-align: center; padding: 0.3rem; } .cal-dim { opacity: 0.4; } .cal-wk { font-weight: 600; font-size: 0.85rem; color: var(--pico-primary); cursor: pointer; } .cal-week, .cal-week-multi { cursor: pointer; } .cal-week:hover > td, .cal-week-multi:hover > td { background: var(--pico-primary-hover-background); color: var(--pico-primary-inverse); } .cal-week:hover .cal-wk, .cal-week-multi:hover .cal-wk { color: var(--pico-primary-inverse); } .cal-week:hover .has-articles::after, .cal-week-multi:hover .has-articles::after { background-color: var(--pico-primary-inverse); } .cal-week.selected > td, .cal-week-multi.selected > td { background: var(--pico-primary-background); color: var(--pico-primary-inverse); } .cal-week-multi.in-range > td { background: var(--pico-primary-focus); color: var(--pico-primary-inverse); } .cal-week.selected .cal-wk, .cal-week-multi.selected .cal-wk, .cal-week-multi.in-range .cal-wk { color: var(--pico-primary-inverse); } .has-articles { font-weight: bold; position: relative; } .has-articles::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background-color: var(--pico-primary); } .cal-week.selected .has-articles::after, .cal-week-multi.selected .has-articles::after, .cal-week-multi.in-range .has-articles::after { background-color: var(--pico-primary-inverse); } /* Publish page */ .publish-summary { padding: 0.5rem; border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); margin-bottom: 1rem; } .publish-actions { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; } .article-check-item, .article-radio-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--pico-muted-border-color); } /* Issue actions */ .issue-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .issue-actions form { margin: 0; } .issue-actions a[role="button"], .issue-actions button { padding: 0.25rem 0.6rem; font-size: 0.8rem; line-height: 1.4; margin: 0; width: auto; } .btn-danger { color: var(--pico-del-color); } .btn-danger-fill { background: var(--pico-del-color); border-color: var(--pico-del-color); color: #fff; } /* Consistent interactive elements */ button, [role="button"], input[type="submit"], select, input[type="text"], input[type="number"], input[type="search"], input[type="date"], input[type="url"] { font-size: 0.95rem; }