/* Same cream, forest green and inherited type as the existing site. */
.mdf-tools{margin:24px 0;padding:20px;border:1px solid #bdceba;border-radius:14px;background:#f7f5ed;color:#173b30;font-family:inherit}.mdf-tools summary,.my-note summary{cursor:pointer;font-weight:600}.mdf-tools button,.my-note button{font:inherit;background:#194b37;color:#fffef8;border:0;border-radius:10px;padding:12px 18px;cursor:pointer}.mdf-tools input,.my-note textarea{font:inherit}.mdf-tools small{display:block}.my-note{padding:12px 0;border-top:1px solid #bdceba}.my-note label{display:block}.my-note textarea{display:block;width:100%;box-sizing:border-box;color:#173b30;background:#fffef8;border:1px solid #bdceba;border-radius:10px;padding:12px;resize:vertical;min-height:90px}.my-note small{display:block;color:#53695b}.note-marker{font-size:12px;color:#194b37}.reminder-days{display:flex;flex-wrap:wrap;gap:8px}.reminder-days label{display:flex;align-items:center;gap:6px;min-height:56px;padding:0 10px;background:#e5edda;border-radius:10px}.reminder-days input{width:20px;height:20px}fieldset{border:1px solid #bdceba;border-radius:10px;margin-bottom:12px}.reminder-settings input[type=time]{min-height:48px}.offline-status{font-size:14px}.offline-update{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);max-width:94vw;z-index:10000;background:#194b37;color:white;border:2px solid #d6efb3;padding:16px;border-radius:12px;font:inherit;cursor:pointer}.include-notes{display:inline-flex;align-items:center;gap:8px}.include-notes input{width:20px;height:20px}.only-print{display:none}#printed-notes p{white-space:pre-wrap;overflow-wrap:anywhere}.my-note button[hidden],[data-tonight][hidden]{display:none!important}
.guided{margin-bottom:24px}.guided-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.guided h3{margin:8px 0}.guided button{min-height:56px;min-width:56px}.field-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.field-controls button{padding:12px 8px}#block-time{display:block;font-size:56px;line-height:1.15;font-weight:bold;font-variant-numeric:tabular-nums;color:#fffef0;background:#153d2d;border-radius:12px;text-align:center;margin:12px 0;padding:8px}#field-caption{font-size:clamp(21px,3vw,30px);line-height:1.2;font-weight:bold;margin:0}#field-status{font-size:13px;line-height:1.3}#field-board[hidden],#field-extra[hidden],#field-caption[hidden]{display:none!important}
body.field-mode{overflow:hidden}body.field-mode #guided{position:fixed;inset:0;z-index:9000;margin:0;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));height:100dvh;border:0;border-radius:0;background:#f7f5ed;display:grid;grid-template-columns:minmax(0,1fr) 190px;grid-template-rows:auto minmax(0,1fr) auto auto;gap:8px;overflow:hidden}body.field-mode .guided-top{grid-column:1/-1}body.field-mode .guided-top h3{font-size:20px;line-height:1.2}body.field-mode #field-board{grid-column:1;grid-row:2;min-height:0;overflow:hidden}body.field-mode #motionBox{height:100%;margin:0!important;padding:0!important}body.field-mode #motionBox>p,body.field-mode #motionBox>.toolbar,body.field-mode #motionBox>#diagramDots,body.field-mode #motionBox>input,body.field-mode #motionOverlay{display:none!important}body.field-mode #motionBox>div:first-child{height:100%}body.field-mode #board{height:100%}body.field-mode #board>svg{width:100%;height:100%;max-height:100%;object-fit:contain}body.field-mode #field-instruction{grid-column:2;grid-row:2;align-self:center}body.field-mode #block-copy{font-size:17px;line-height:1.35;margin:0 0 12px}body.field-mode #block-time{grid-column:1;grid-row:3;margin:0;font-size:48px}body.field-mode .field-controls{grid-column:1/-1;grid-row:4}body.field-mode #field-status{grid-column:2;grid-row:3;margin:0;align-self:center}body.field-mode #field-extra{position:absolute;inset:80px 12px 80px;background:#f7f5ed;border:1px solid #bdceba;border-radius:12px;overflow:auto;display:none}body.field-mode #field-extra.options-open{display:block;z-index:2}body.field-mode .guided-top>div{flex:1}body.field-mode #field-options{font-size:13px;padding:8px}body.field-mode .guided-top .eyebrow{font-size:11px}body.field-mode #field-details{padding:12px}
@media(max-width:600px) and (orientation:portrait){body.field-mode #guided{grid-template-columns:1fr;grid-template-rows:auto minmax(120px,1fr) auto auto auto auto}body.field-mode #field-board{grid-row:2;grid-column:1}body.field-mode #field-instruction{grid-row:3;grid-column:1}body.field-mode #block-copy{font-size:15px;margin:0 0 5px}body.field-mode #block-time{grid-row:4;grid-column:1;font-size:52px}body.field-mode .field-controls{grid-row:5;grid-column:1}body.field-mode #field-status{grid-row:6;grid-column:1;font-size:12px}body.field-mode .guided-top h3{font-size:18px}.field-controls button{font-size:15px}}
@media print{.mdf-tools,.my-note,.guided,.offline-update,.include-notes{display:none!important}.only-print{display:block}.field-mode{overflow:visible!important}}

#field-options[hidden]{display:none!important}body.field-mode #field-extra{padding:16px}body.field-mode #field-extra summary{min-height:56px}

[hidden]{display:none!important}.field-mode .offline-update{bottom:auto;top:80px;font-size:13px;max-width:70vw}
@media(max-width:600px) and (orientation:portrait){body.field-mode .guided-top{flex-wrap:wrap;gap:6px}body.field-mode .guided-top>div{flex-basis:100%}body.field-mode .guided-top button{flex:1}body.field-mode .guided-top h3{margin:2px 0 4px}}
body.field-mode #guided:has(#field-board[hidden]) #field-instruction{grid-column:1/-1;text-align:center;max-width:650px;justify-self:center}body.field-mode #guided:has(#field-board[hidden]) #block-copy{font-size:clamp(22px,4vw,32px);line-height:1.4}
@media(max-height:680px){body.field-mode #guided{gap:5px}body.field-mode .guided-top h3{font-size:16px}body.field-mode #block-time{font-size:38px;padding:4px}body.field-mode .field-controls button{min-height:56px;padding:6px;font-size:14px}body.field-mode #field-status{font-size:11px}body.field-mode #field-caption{font-size:20px}body.field-mode #guided:has(#field-board:not([hidden])) #block-copy{display:none}}
@media(max-width:600px) and (max-height:680px) and (orientation:portrait){body.field-mode #guided{grid-template-rows:auto minmax(0,1fr) auto auto auto auto}}
