.of-page{container:observation-sheet / inline-size;padding:24px 20px 28px;--of-line:#bbd7c8;--of-dark:#075e36;--of-green:#008444;background:#edf6f1}
.of-reference-note{padding:14px 18px;background:#f2f8f4;border-bottom:1px solid var(--of-line);color:#285c43;font-size:14px;line-height:1.55}.of-reference-note p{margin:0 0 5px}.of-reference-note small{display:block;color:#466552;overflow-wrap:anywhere}.of-reference-note [role=status]:not(:empty){display:block;margin-top:7px;font-weight:700}
.of-page .mp-header{grid-template-columns:1fr auto;align-items:center}.of-page .mp-header h1{font-size:clamp(30px,3.1vw,48px)}.of-page .mp-header nav{padding:0}
.of-context{display:flex;gap:16px;align-items:end;margin-bottom:20px}.of-context label{display:grid;gap:7px}.of-context label:first-child{flex:1;max-width:740px}.of-context select{width:100%}
.of-paper,.of-close{border:1px solid #d1e4da;border-radius:20px;overflow:hidden;background:#fff}.of-banner{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(110deg,#03552e,#078b48);padding:24px;color:white}
.of-banner h2{display:flex;align-items:center;gap:12px;font-size:21px;line-height:1.4;margin:0;font-weight:800;color:white}.of-banner h2 svg{box-sizing:content-box;padding:10px;border:1px solid #ffffff60;border-radius:12px;background:#ffffff16;flex-shrink:0}.of-banner p{font-size:15px;line-height:1.6;margin:8px 0 0;color:#e5f2e9;font-weight:500}
.of-banner-tags{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.of-banner-tags span{background:#fff;color:#075537;font-size:12px;font-weight:750;padding:10px 16px;border-radius:25px;white-space:nowrap}
.of-paper-body{padding:20px;background:linear-gradient(120deg,#f7fbf8,#fafffc)}.of-statusbar{display:grid;grid-template-columns:1.2fr .7fr 1.5fr;gap:18px;align-items:center;padding:20px;border:1px solid #cfe6d8;border-radius:20px;margin-bottom:20px;background:#f7fbf9}
.of-statusbar label,.of-statusbar>div>span{font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#142c3d}.of-statusbar select{width:100%;display:block;margin-top:8px;font-weight:700;min-height:52px;font-size:16px}.of-statusbar strong{display:block;border:1px solid #d5e2de;background:#f4f7f8;border-radius:14px;margin-top:8px;padding:14px;font-size:15px;min-height:52px;line-height:1.4}
.of-statusbar>p{display:flex;gap:12px;align-items:center;border:1px dashed #bce2c9;background:#eff8f1;padding:18px;border-radius:18px;color:#305b45;font-size:16px;line-height:1.65;font-weight:650;margin:0}.of-statusbar svg{flex-shrink:0;color:#078044}
.of-sheet{border:1px solid var(--of-line);border-radius:23px;background:#f8fcf9;padding:20px}.of-sheet-title{font-size:clamp(22px,2.05vw,32px);line-height:1.3;font-weight:800;text-align:center;color:#132837;margin:8px 0 24px}
.of-general{border:1px solid #acd4b9;border-radius:18px 18px 0 0;overflow:hidden}.of-section-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px;background:linear-gradient(115deg,#00733c,#056739);color:white}
.of-section-header h3{display:flex;align-items:center;gap:10px;margin:0;font-size:20px;font-weight:800;line-height:1.5;color:white;letter-spacing:.2px}.of-section-header p{margin:5px 0 0;font-size:13px;color:#e7f4e9;font-weight:550;line-height:1.5}
.of-general-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}.of-general-grid>div,.of-general-grid>label{min-width:0}.of-general-grid .of-field{display:grid;grid-template-columns:minmax(115px,.8fr) minmax(0,1.7fr);gap:0;margin:0;height:100%;font-size:14px;font-weight:700;color:#103f2b;border-bottom:1px solid var(--of-line);border-right:1px solid var(--of-line);background:#fff;align-items:stretch}
.of-field>span{background:linear-gradient(120deg,#e5f0dd,#dcefd5);padding:18px 14px;display:flex;align-items:center;justify-content:flex-end;text-align:right;line-height:1.5}.of-general-grid .of-field>input,.of-general-grid .of-field>select,.of-general-grid .of-field>textarea{margin:10px;width:calc(100% - 20px);border:1px solid #bfdbcd;border-radius:12px;background:#fff;font-size:15px;font-weight:650;padding:14px;min-height:52px;align-self:center;color:#133243}
.of-general-grid .of-field>textarea{font:500 16px/1.65 "Segoe UI",Arial,sans-serif;resize:vertical;min-height:95px}.of-general-grid input[readonly]{background:#f5f8f7}.of-observer{grid-column:span 9}.of-date{grid-column:span 3}.of-general-grid .of-date .of-field{grid-template-columns:90px minmax(0,1fr)}
.of-teacher{grid-column:span 6}.of-level,.of-shift{grid-column:span 3}.of-grade,.of-section,.of-area{grid-column:span 4}.of-time{grid-column:span 6}.of-full{grid-column:span 12}.of-general-grid .of-full{grid-template-columns:200px minmax(0,1fr)}
.of-teacher>div{padding:10px;min-width:0;align-self:center}.of-teacher-picker{display:flex;min-width:0}.of-teacher-picker input{width:100%;border-radius:11px 0 0 11px;min-height:52px;font-weight:650;min-width:0}.of-teacher-picker button{border-radius:0 11px 11px 0;font-size:14px}.of-teacher small{display:block;font-size:12px;font-weight:500;margin-top:5px;color:#536c60}
.of-load-note{grid-column:span 12;display:flex;gap:14px;align-items:center;margin:12px;border:1px solid #a9dec1;border-radius:15px;padding:14px;background:#edf9f1;color:#10543a}.of-load-note>span{background:#087b46;border-radius:13px;color:white;padding:12px;display:flex}.of-load-note strong{font-size:14px;font-weight:800}.of-load-note p{font-size:13px;line-height:1.65;margin:3px 0 0;color:#365b4b;font-weight:500}
.of-evidence{margin-top:22px;border:1px solid #078f49;border-radius:20px;overflow:hidden;background:white}.of-evidence>.of-section-header{background:linear-gradient(110deg,#007b3b,#088b48)}.of-evidence>.of-section-header h3{font-size:22px}.of-evidence>.of-section-header>span{white-space:nowrap;border:1px solid #ffffff55;background:#05683980;border-radius:24px;padding:12px 14px;font-size:13px;font-weight:700}
.of-aspect-head{display:grid;grid-template-columns:18% 23% 59%;background:#c4eab0;color:#123f22;font-weight:800;font-size:15px}.of-aspect-head>span{padding:22px 16px;border-right:1px solid #78b589}
.of-performance{--of-accent:#2b7639;--of-tint:#e1f1d6;display:grid;grid-template-columns:18% minmax(0,1fr);border-top:1px solid #26975a}.of-performance.d2{--of-accent:#a14a9e;--of-tint:#f0d6ed}.of-performance.d3{--of-accent:#1a7197;--of-tint:#ceeaf4}.of-performance.d4{--of-accent:#9a4913;--of-tint:#f7d6bc}.of-performance.d5{--of-accent:#6959b2;--of-tint:#dfd9f6}
.of-performance>header{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--of-tint);border-left:7px solid var(--of-accent);border-right:1px solid #26975a;padding:24px 16px;gap:16px}
.of-performance>header>span{background:var(--of-accent);color:white;border-radius:30px;padding:9px 16px;font-size:19px;font-weight:800;box-shadow:0 7px 14px #183f191a}.of-performance h4{font-size:17px;line-height:1.5;font-weight:800;margin:0;color:#172f25}.of-performance header small{color:var(--of-accent);font-size:12px;font-weight:800;line-height:1.5}
.of-aspect{display:grid;grid-template-columns:28.05% minmax(0,1fr);border-bottom:1px solid #26975a}.of-aspect:last-child{border-bottom:0}.of-aspect-label{padding:26px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;border-right:1px solid #26975a;background:linear-gradient(115deg,#f9fcf9,#fff)}.of-aspect-label>span{color:var(--of-accent);border:1px solid color-mix(in srgb,var(--of-accent) 30%,white);background:color-mix(in srgb,var(--of-tint) 65%,white);border-radius:8px;padding:7px 10px;font-size:12px;letter-spacing:.6px;font-weight:800}.of-aspect-label h5{font-size:16px;line-height:1.6;margin:13px 0 0;font-weight:750;color:#1b3228}
.of-evidence-input{padding:20px;min-width:0}.of-evidence-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.of-evidence-tools>label{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.4px;font-weight:800;color:#53685c}.of-evidence-tools>label svg{color:var(--of-accent)}
.of-reference{display:flex;align-items:center;gap:5px;flex-wrap:wrap;border:1px solid #cfe1d5;border-radius:12px;padding:5px;background:#f5f9f7;max-width:100%}.of-reference>span{font-size:10px;font-weight:800;padding:5px;color:#526e5d}.of-reference button{display:inline-flex;align-items:center;gap:4px;font:700 11px "Segoe UI",Arial,sans-serif;background:white;border:1px solid var(--level-border);border-radius:8px;padding:6px;color:var(--level-color);cursor:pointer}.of-reference b{display:inline-flex;align-items:center;justify-content:center;border:1px solid currentColor;border-radius:50%;font-size:10px;min-width:21px;min-height:21px;font-weight:750}
.of-level-I{--level-color:#b12136;--level-border:#f1abb6;--level-tint:#fce9ed}.of-level-II{--level-color:#876100;--level-border:#e9c550;--level-tint:#fff4cf}.of-level-III{--level-color:#00783e;--level-border:#9ed7b8;--level-tint:#dcf5e6}.of-level-IV{--level-color:#15629e;--level-border:#a5cae7;--level-tint:#dfedfb}.of-reference button[aria-pressed=true]{background:var(--level-tint);box-shadow:0 0 0 2px var(--level-color);border-color:var(--level-color)}.of-reference button:disabled{cursor:default}
.of-evidence-input textarea{display:block;box-sizing:border-box;width:100%;min-height:162px;border:1px solid #cadfd2;border-left:5px solid var(--of-accent);border-radius:14px;background:#fafdfb;padding:17px;font:400 16px/1.65 "Segoe UI",Arial,sans-serif;color:#1c3434;resize:vertical;box-shadow:inset 0 1px 3px #2145230b}.of-evidence-input textarea:focus{outline:3px solid color-mix(in srgb,var(--of-accent) 18%,white);outline-offset:2px;background:#fff}
.of-close{margin-top:22px}.of-close-tag{padding:10px 15px;border:1px solid #ffffff50;border-radius:25px;background:#ffffff14;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}.of-close-body{padding:24px;background:linear-gradient(115deg,#f7fbf8,#fffefa)}.of-suggestion-note{margin:0 0 18px;padding:18px;border:1px solid #d0e6d9;border-radius:14px;background:#f4faf6;color:#395f4b;font-size:13px;line-height:1.7;font-weight:550}
.of-close-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.of-close-card{--close-color:#148b50;border:1px solid #cfdfd5;border-top:5px solid var(--close-color);border-radius:17px;background:white;padding:18px;box-shadow:0 9px 22px #12573208;min-width:0}.of-close-card:nth-child(2){--close-color:#c69000}.of-close-card:nth-child(3){--close-color:#256faf}
.of-close-card header{display:flex;gap:12px;align-items:flex-start}.of-close-card header>span{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex-shrink:0;background:var(--close-color);color:#fff;border-radius:12px;font-size:14px;font-weight:800}.of-close-card h3{margin:2px 0 5px;line-height:1.4}.of-close-card h3 label{font-size:16px;font-weight:800;color:#123728}.of-close-card header p{font-size:11px;line-height:1.6;color:#556e60;margin:0}.of-suggest{border:1px solid #b5d8c3;border-radius:7px;padding:9px 11px;background:#edf8f1;color:#006e3a;font:700 12px "Segoe UI",Arial,sans-serif;margin:15px 0 12px;cursor:pointer}.of-suggest:hover{background:#daf0e2}.of-close-card textarea{width:100%;box-sizing:border-box;border:1px solid #cfe1d7;min-height:190px;border-radius:14px;background:white;padding:15px;font:400 15px/1.7 "Segoe UI",Arial,sans-serif;resize:vertical;color:#1b3546}
.of-savebar{display:flex;justify-content:space-between;align-items:center;gap:16px;border-top:1px solid #d6e4de;padding:20px 24px;background:white}.of-savebar>span{font-size:13px;color:#566d60}.of-savebar>div{display:flex;gap:12px;flex-wrap:wrap}.of-savebar .mp-solid{font-size:17px}.of-savebar .of-cancel{border-color:#acb9b1;color:#647367}.of-page #of-error:not(:empty){padding:0 24px 22px}
.of-teacher-results{display:grid;gap:10px}.of-teacher-results button{display:flex;justify-content:space-between;align-items:center;gap:15px;border:1px solid #bedccd;border-radius:12px;background:white;padding:17px;color:#123a2a;text-align:left;cursor:pointer}.of-teacher-results button:hover{background:#edf8f2}.of-teacher-results strong{font-size:15px}.of-teacher-results small{display:block;font-size:12px;color:#526f60;margin-top:5px}.of-teacher-results button>span:last-child{font-weight:650;font-size:13px;color:#007a3c}
@container observation-sheet (max-width:1100px){.of-banner{align-items:flex-start;flex-direction:column;gap:15px}.of-banner-tags{justify-content:flex-start}.of-statusbar{grid-template-columns:1.2fr 1fr}.of-statusbar>p{grid-column:span 2}.of-general-grid .of-field{grid-template-columns:1fr}.of-field>span{justify-content:flex-start;text-align:left;padding:12px}.of-general-grid .of-date .of-field{grid-template-columns:1fr}.of-general-grid .of-full{grid-template-columns:180px minmax(0,1fr)}.of-aspect-label{padding:20px 14px}.of-aspect-label h5{font-size:15px}.of-performance h4{font-size:15px}.of-evidence-input{padding:16px}.of-close-grid{grid-template-columns:1fr}.of-close-card textarea{min-height:150px}.of-page .mp-header{grid-template-columns:1fr}.of-evidence>.of-section-header h3{font-size:18px}}
@media(max-width:800px){.of-page{padding:18px 12px}.of-context{flex-wrap:wrap}.of-context label:first-child{flex-basis:100%}.of-paper-body{padding:12px}.of-sheet{padding:12px}.of-banner{padding:20px 16px}.of-banner h2{font-size:18px}.of-banner p{font-size:14px}.of-statusbar{grid-template-columns:1fr;padding:16px}.of-statusbar>p{grid-column:auto;font-size:14px}.of-sheet-title{font-size:24px}.of-observer,.of-date,.of-teacher,.of-level,.of-shift,.of-grade,.of-section,.of-area,.of-time{grid-column:span 6}.of-observer,.of-teacher{grid-column:span 12}.of-general-grid .of-full{grid-template-columns:1fr}.of-evidence>.of-section-header{align-items:flex-start;flex-direction:column}.of-aspect-head{display:none}.of-performance{grid-template-columns:1fr}.of-performance>header{align-items:flex-start;text-align:left;padding:20px;border-right:0;border-bottom:1px solid #26975a;gap:12px}.of-performance h4{font-size:17px}.of-aspect{grid-template-columns:1fr}.of-aspect-label{padding:20px;border-right:0}.of-aspect-label h5{font-size:16px}.of-evidence-input{padding:0 16px 22px}.of-close-body{padding:16px}.of-savebar{flex-direction:column;align-items:flex-start;padding:18px 16px}.of-savebar>div{width:100%}.of-savebar button{flex:1;white-space:nowrap}.of-banner-tags span{font-size:11px;padding:9px 11px}.of-close-tag{white-space:normal}}
@media(max-width:480px){.of-date,.of-level,.of-shift,.of-grade,.of-section,.of-area,.of-time{grid-column:span 12}.of-general-grid .of-field>input,.of-general-grid .of-field>select{font-size:14px}.of-load-note{margin:9px;gap:10px;align-items:flex-start;padding:12px}.of-load-note>span{padding:8px}.of-load-note strong{font-size:12px}.of-reference button{font-size:10px}.of-evidence-tools>label{font-size:10px}.of-teacher-picker button{padding:9px}.of-savebar button{flex-basis:100%}.of-teacher-results button{align-items:flex-start;flex-direction:column}}

.of-load-note{flex-wrap:wrap}.of-load-note>div{flex:1;min-width:140px}.of-load-note>.mp-button{font-size:12px;flex-shrink:0}

.of-close-card{display:flex;flex-direction:column}.of-close-card>header{min-height:82px}.of-close-card>.of-suggest{align-self:flex-start}.of-close-card>textarea{flex:1}
@container observation-sheet (max-width:1100px){.of-close-card>header{min-height:0}}