:root { font-family: system-ui, sans-serif; color: #172535; background: #f5f7fa; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 0; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button { background: #174d77; color: white; border: 1px solid #174d77; border-radius: .35rem; padding: .55rem .8rem; cursor: pointer; }
button:hover { background: #103653; }
button:disabled { opacity: .55; cursor: wait; }
button.secondary, .tabs button { background: white; color: #174d77; }
:focus-visible { outline: 3px solid #b44e00; outline-offset: 2px; }
[hidden] { display: none !important; }
.site-header { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .75rem max(1rem, calc((100vw - 1400px)/2)); background: #132e45; color: white; }
h1 { margin: 0 auto 0 0; font-size: 1.3rem; }
h2 { font-size: 1.2rem; margin: .25rem 0 .75rem; }
h3 { font-size: 1.05rem; margin: .25rem 0 .65rem; }
main { max-width: 1400px; margin: auto; padding: 1rem; }
.panel { border: 1px solid #cbd5df; border-radius: .45rem; padding: 1rem; background: white; min-width: 0; }
#login-panel { max-width: 30rem; margin: 2rem auto; }
#digest-settings { margin-bottom: 1rem; }
#digest-settings summary { cursor: pointer; font-weight: 600; }
#digest-form { margin: .75rem 0; }
#present-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1rem; }
#notice { border: 1px solid #bc6900; background: #fff5db; padding: .75rem; margin-bottom: 1rem; border-radius: .35rem; white-space: pre-wrap; }
#notice.error { border-color: #a32121; background: #fff0f0; }
.tabs, .toolbar, .button-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.tabs button[aria-current="page"] { background: #174d77; color: white; }
.toolbar h2 { margin-right: auto; }
.toolbar label { font-weight: 600; }
input, select, textarea { border: 1px solid #8699a9; border-radius: .3rem; padding: .48rem; background: white; color: inherit; }
textarea { width: 100%; min-height: 5rem; resize: vertical; }
label { display: inline-block; }
.field { display: grid; gap: .3rem; margin-bottom: .7rem; }
.task-layout { display: grid; grid-template-columns: minmax(15rem, 1fr) minmax(20rem, 1.3fr); gap: 1rem; align-items: start; }
#task-list { max-height: 75vh; overflow: auto; }
.task-row { display: block; width: 100%; text-align: left; background: white; color: #172535; border: 1px solid #cbd5df; padding: .7rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.task-row:hover, .task-row[aria-current="true"] { background: #eaf3fa; color: #172535; border-color: #174d77; }
.task-row strong, .task-row small { display: block; }
.task-row small, .muted { color: #455a6c; }
.badge { display: inline-block; padding: .12rem .42rem; border-radius: .3rem; background: #e7eff8; }
.badge.blocked, .badge.pending_review { background: #fff0cf; }
.badge.done { background: #def5e6; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem; margin-bottom: 1rem; }
.detail-grid div, .event, .draft-card, .calendar-day { overflow-wrap: anywhere; }
.detail-grid dt { font-weight: 700; }
.detail-grid dd { margin: .15rem 0 .5rem; white-space: pre-wrap; }
.action-form { border-top: 1px solid #d6dfe8; padding-top: .75rem; margin-top: .75rem; }
.action-form h4 { margin: 0 0 .5rem; }
.action-form .button-row { margin-bottom: 0; }
.event { border-left: 3px solid #9ab2c6; padding: .4rem .7rem; margin: .5rem 0; background: #f5f7fa; white-space: pre-wrap; }
.event small { display: block; }
.draft-card { border: 1px solid #cbd5df; border-radius: .3rem; padding: .8rem; margin: .75rem 0; }
.draft-card legend { font-weight: 700; }
#proposal { background: #f0f7fd; padding: 1rem; margin-top: 1rem; border-radius: .35rem; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem; }
.calendar-day { min-height: 5.5rem; border: 1px solid #cbd5df; padding: .4rem; }
.calendar-day button { display: block; width: 100%; margin-top: .3rem; padding: .25rem; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.calendar-day.outside { background: #f5f7fa; }
.calendar-weekday { font-weight: 700; min-height: 0; }
#pair-result a { overflow-wrap: anywhere; }
@media (max-width: 750px) {
  main { padding: .65rem; }
  .site-header { padding: .75rem; }
  .task-layout { display: block; }
  #task-list { max-height: none; margin-bottom: .7rem; }
  .toolbar { align-items: stretch; }
  .toolbar h2 { flex-basis: 100%; }
  .toolbar select, .toolbar input { flex: 1 1 9rem; min-width: 0; }
  .detail-grid { grid-template-columns: 1fr; }
  .calendar-grid { display: block; }
  .calendar-weekday, .calendar-day.outside, .calendar-day:empty { display: none; }
  .calendar-day { min-height: 0; margin-bottom: .4rem; }
  .calendar-day:not(:has(button)) { display: none; }
  .panel { padding: .7rem; }
}
