/* routine.css — Routine & Profile page (same board look: paper, dot grid, handwriting headings) */

.rt { font-family: 'Kalam', cursive; color: #23201b; background-color: #fbf9f4; background-image: radial-gradient(#e4ddd1 1px, transparent 1.2px); background-size: 24px 24px; border-radius: 6px; }
.rt *, .rt *::before, .rt *::after { box-sizing: border-box; }
.rt-wrap { max-width: 1180px; margin: 0 auto; padding: 40px 32px 80px; display: flex; flex-direction: column; gap: 44px; }
.rt-hand { font-family: 'Caveat', cursive; }
.rt-h1 { margin: 0; font-size: 64px; font-weight: 700; line-height: .95; }
.rt-tag { margin: 6px 0 0; font-size: 18px; color: #6f6a60; font-weight: 300; }
.rt-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.rt-first { margin: -20px 0 0; font-size: 16px; background: rgba(255, 253, 250, .94); border-radius: 6px; padding: 14px 18px; }
.rt-lbl { font-size: 13px; color: #6f6a60; letter-spacing: .02em; }
.rt-sub { margin: -6px 0 0; font-size: 15px; color: #6f6a60; }
.rt-note { margin: 0; font-size: 16px; }
.rt-sec { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt-sec h2 { margin: 0; font-family: 'Caveat', cursive; font-size: 36px; font-weight: 700; line-height: 1; }
.rt-row2 { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.rt-row2 > * { flex: 1 1 360px; }
.rt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px 26px; }
.rt-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rt-in { width: 100%; border: 0; border-bottom: 1.5px solid #e2dbcf; background: transparent; font: inherit; font-size: 17px; padding: 6px 2px; color: #23201b; border-radius: 0; }
.rt-in:focus { outline: none; border-bottom-color: #c2634a; }
.rt-days { display: flex; flex-wrap: wrap; gap: 4px; }
.rt-day { min-width: 46px; min-height: 38px; border-radius: 6px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #6f6a60; cursor: pointer; }
.rt-day:hover { background: #efebe3; }
.rt-day.is-on { background: #23201b; color: #fffdfa; }
.rt-day--sm { min-width: 32px; }
.rt-prot .rt-days { flex-wrap: nowrap; gap: 2px; }
.rt-day--wide { padding: 0 14px; }
.rt-checks { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-chk { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 6px; background: #efebe3; font-size: 15px; cursor: pointer; }
.rt-chk input { width: 18px; height: 18px; accent-color: #c2634a; }
.rt-prot { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, 2.2fr) 110px 80px 90px; gap: 12px; align-items: end; padding: 8px 0; border-top: 1px dashed #e7e2d8; }
.rt-prot__src { padding-bottom: 10px; }
.rt-x { width: 36px; height: 38px; border: 0; background: transparent; color: #8b8478; cursor: pointer; border-radius: 6px; font-size: 18px; }
.rt-x:hover { color: #a85338; background: #f8e9e3; }

/* week ribbon */
.rt-rib { display: flex; flex-direction: column; gap: 6px; }
.rt-rib__row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; }
.rt-rib__day { font-size: 14px; color: #6f6a60; }
.rt-rib__bar { position: relative; height: 22px; border-radius: 4px; background: #f4f1ea; overflow: hidden; }
.rt-seg { position: absolute; top: 0; bottom: 0; }
.rt-seg--sleep { background: #c9d3e2; }
.rt-seg--wind { background: repeating-linear-gradient(135deg, #dfe5ee 0 4px, #f4f1ea 4px 8px); }
.rt-seg--work { background: #23201b; }
.rt-seg--commute { background: #8b8478; }
.rt-seg--gym { background: #2c6342; }
.rt-seg--meal { background: #d9a35a; }
.rt-seg--protect { background: #e6f0e8; border: 1.5px dashed #2c6342; }
.rt-rib__ticks { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
.rt-rib__ticks div { display: flex; justify-content: space-between; font-size: 12px; color: #8b8478; }
.rt-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: #4a463f; }
.rt-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rt-sw { position: static; width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.rt-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.rt-stat { display: flex; flex-direction: column; }
.rt-stat b { font-family: 'Caveat', cursive; font-weight: 700; font-size: 54px; line-height: 1; }

/* Zuly setup */
.rt-zq { background: rgba(255, 253, 250, .94); border-radius: 6px; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; }
.rt-zq__head { display: flex; align-items: center; gap: 12px; }
.rt-zq__head .rt-hand { font-size: 28px; font-weight: 700; }
.rt-zav { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2b8a2, #c2634a 70%); flex: none; }
.rt-q { margin: 0; font-size: 20px; line-height: 1.45; }
.rt-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-step { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-size: 15px; color: #6f6a60; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.rt-step b { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; background: #efebe3; font-weight: 400; font-size: 13px; }
.rt-step.is-on { color: #a85338; }
.rt-step.is-on b { background: #c2634a; color: #fff; }
.rt-step.is-done b { background: #2c6342; color: #fff; }
.rt-wiznav { display: flex; flex-wrap: wrap; gap: 8px; }

#view-routine .view__header { display: none; }
#view-routine .sub-panel { padding-top: 0; }

@media (max-width: 720px) {
  .rt-wrap { padding: 24px 16px 64px; gap: 36px; }
  .rt-h1 { font-size: 52px; }
  .rt-prot { grid-template-columns: 1fr 1fr; }
  .rt-stat b { font-size: 44px; }
}