body[data-layout]{--ink:#202925;--muted:#7b827d;--bg:#f4f5f1;--paper:#fff;--line:#dfe3db}
body[data-layout] .app-shell{max-width:1720px;padding:0 clamp(14px,2.8vw,48px);min-height:520px}
body[data-layout] .topbar{height:68px}
body[data-layout] .overview{padding:18px 0;gap:20px}
body[data-layout] h1{font-size:25px;margin:7px 0 4px;letter-spacing:-.8px}
body[data-layout] .intro p{font-size:10px}
body[data-layout] .eyebrow{font-size:8px;letter-spacing:1.3px}
body[data-layout] .summary{width:auto;min-width:320px;background:transparent;border:0;border-radius:0;gap:22px}
body[data-layout] .metric{padding:0 0 0 20px;border:0;border-left:1px solid var(--line);background:none;display:grid;grid-template-columns:1fr auto;align-items:center;gap:3px 12px}
body[data-layout] .metric strong{font-size:30px;grid-column:2;grid-row:1/3;letter-spacing:-1.5px}
body[data-layout] .metric>span{font-size:10px;gap:12px}
body[data-layout] .metric small{font-size:9px}
body[data-layout] .metric svg{display:none}
body[data-layout] .calendar-toolbar{padding:12px 16px}
body[data-layout] .month-nav h2{font-size:18px}
body[data-layout] .view-actions{gap:8px}
body[data-layout] .filterbar{padding:0 19px 10px}
body[data-layout] .filters{gap:18px}
body[data-layout] .filters button{font-size:11px}
body[data-layout] footer{height:37px;font-size:9px}
body[data-layout] footer a{color:inherit;text-decoration:none}
body[data-layout] .panel-footer{height:37px;font-size:10px}
body[data-layout] .calendar-panel{border-radius:7px}
body[data-layout] .range-info{font-size:10px}

/* 01 — a restrained horizontal ledger, inspired by Attendance Compass. */
body[data-layout=rail]{--bg:#f4f4ee;--ink:#242923;--line:#d9ddd1;--green:#335441}
body[data-layout=rail] .topbar{border-bottom:1px solid #353d31}
body[data-layout=rail] .brand img{border-radius:0;width:32px;height:32px}
body[data-layout=rail] .calendar-panel{border-radius:0;border-top:2px solid var(--ink)}
body[data-layout=rail] .grid{grid-template-columns:210px repeat(var(--days),minmax(22px,1fr));grid-template-rows:48px repeat(var(--rows),minmax(50px,1fr));padding-right:0}
body[data-layout=rail] .track-label{padding-left:16px;gap:10px}
body[data-layout=rail] .track-info b{font-size:12px}
body[data-layout=rail] .track-info small{font-size:10px}
body[data-layout=rail] .track-icon{border-radius:7px}
body[data-layout=rail] .date-head{font-size:12px}
body[data-layout=rail] .date-head small{font-size:9px}
body[data-layout=rail] .track-label-head{font-size:10px;padding-left:16px}
body[data-layout=rail] .day-cell{border-right:1px solid #f0f1e9}
body[data-layout=rail] .day-cell.done .dot{width:11px;height:11px;box-shadow:none}
body[data-layout=rail] .day-cell.due .dot{border-width:1.5px}
body[data-layout=rail] .day-cell.today{background:#eef3db}
body[data-layout=rail] .calendar-toolbar{padding-top:15px;padding-bottom:15px}
body[data-layout=rail] .summary{gap:15px}
body[data-layout=rail] .metric{padding-left:15px}


@media(max-width:1100px){body[data-layout] .summary{min-width:280px;gap:9px}body[data-layout] .metric{gap:2px 8px;padding-left:12px}body[data-layout] .metric strong{font-size:27px}}
@media(max-width:760px){
  body[data-layout] .app-shell{padding:0 12px;min-height:500px}
  body[data-layout] .brand{font-size:14px;gap:8px}
  body[data-layout] .brand img{width:27px;height:27px}
  body[data-layout] .brand small{font-size:6px}
  body[data-layout] .top-actions{margin-left:auto;gap:0}
  body[data-layout] .overview{padding:12px 0;display:flex;align-items:center;gap:10px}
  body[data-layout] .intro{min-width:0}
  body[data-layout] .intro h1{font-size:17px;letter-spacing:-.5px;margin:0}
  body[data-layout] .intro p,body[data-layout] .intro .eyebrow{display:none}
  body[data-layout] .summary{width:auto;min-width:0;margin:0;display:flex;gap:10px;flex-shrink:0;margin-left:auto}
  body[data-layout] .metric{display:flex;flex-direction:column;gap:0;border:0;padding:0;min-height:0}
  body[data-layout] .metric>span{font-size:7px;white-space:nowrap}
  body[data-layout] .metric strong{font-size:21px;letter-spacing:-1px;line-height:1.2}
  body[data-layout] .metric small,body[data-layout] .completed-metric{display:none}
  body[data-layout] .calendar-toolbar{padding:10px 6px}
  body[data-layout] .month-nav h2{font-size:14px}
  body[data-layout] .filterbar{padding:0 10px 7px}
  body[data-layout] .filters{gap:16px}
  body[data-layout] .filters button{font-size:10px}
  body[data-layout] .legend{display:none}
  body[data-layout] footer{height:29px;font-size:7px}
  body[data-layout] .panel-footer{height:32px;padding:0 9px;font-size:8px}
  body[data-layout] .calendar-panel{min-height:0}
  body[data-layout=rail] .grid.month-grid{grid-template-columns:123px repeat(var(--days),22px)}
  body[data-layout=rail] .track-label{padding-left:10px;gap:7px}
  body[data-layout=rail] .track-info b{font-size:10px;max-width:74px}
  body[data-layout=rail] .track-info small{font-size:8px}
  body[data-layout=rail] .date-head{font-size:10px}
  body[data-layout=rail] .date-head small{font-size:7px}
body[data-layout] .topbar{height:62px;gap:8px}
}
@media(max-height:720px) and (min-width:761px){body[data-layout] .topbar{height:55px}body[data-layout] .overview{padding:10px 0}body[data-layout] h1{font-size:21px}body[data-layout] .intro p{display:none}}