/* Shared authored instructions: layout tables have no visible grid in preview/play. */
.task-instruction{min-width:0;max-width:100%;white-space:normal;margin-block:0 20px;line-height:1.65}
.task-instruction p{margin:0 0 .65em;font-size:inherit;line-height:inherit;white-space:pre-wrap;overflow-wrap:anywhere}
.task-instruction p:last-child{margin-bottom:0}
.task-instruction img,.instruction-rich-editor img{max-width:100%;height:auto;object-fit:contain;vertical-align:middle;margin:4px 0}
.instruction-table-scroll{max-width:100%;overflow-x:auto;margin:12px 0}
.task-instruction table{width:100%;min-width:max(calc(var(--instruction-columns,2)*110px),var(--instruction-min-width,0px));table-layout:fixed;border-collapse:collapse}
.task-instruction table,.task-instruction tbody,.task-instruction tr,.task-instruction td{border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;color:inherit}
.task-instruction td{padding:8px 12px;vertical-align:top;white-space:pre-wrap;overflow-wrap:anywhere;font-size:inherit;line-height:inherit}
.app-dialog.instruction-dialog{--instruction-dialog-scale:1;width:min(calc(920px / var(--instruction-dialog-scale)),calc((100vw - 48px) / var(--instruction-dialog-scale)));height:min(calc(820px / var(--instruction-dialog-scale)),calc((100dvh - 48px) / var(--instruction-dialog-scale)));max-height:calc((100dvh - 48px) / var(--instruction-dialog-scale));overflow:hidden}
/* Match the desktop body zoom in styles.css when sizing against the viewport. */
@media(min-width:901px){.app-dialog.instruction-dialog{--instruction-dialog-scale:1.1}}
.app-dialog.instruction-dialog form{display:flex;flex-direction:column;height:100%;min-height:0;padding:0;overflow:hidden}
.instruction-dialog-header{flex:none;padding:20px 24px 16px;border-bottom:1px solid #d9e1d8}
.app-dialog.instruction-dialog h2{margin:5px 0 0;font-size:20px}
.instruction-dialog-content{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;padding:16px 24px;overflow:hidden}
.instruction-dialog-content>label{flex:none}
.instruction-dialog-footer{flex:none;padding:12px 24px 16px;border-top:1px solid #d9e1d8;background:var(--panel)}
.instruction-dialog-footer .dialog-error:empty{display:none}
.instruction-dialog-footer .dialog-error:not(:empty){margin:0 0 10px}
.app-dialog.instruction-dialog [data-task-presentation-heading]{padding:9px 10px}
.instruction-dialog .dialog-actions{margin-top:0}
.instruction-field-label{display:flex;flex-direction:column;flex:1;min-height:0;margin:12px 0 0;font-size:14px;font-weight:600}
.instruction-composer{display:flex;flex-direction:column;flex:1;min-height:0;margin-top:8px;border:1px solid #c9d6cd;border-radius:10px;background:white;min-width:0;overflow:hidden;font-weight:400}
.instruction-editor-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.instruction-toolbar{display:flex;flex:none;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:6px;background:#f3f6f1;border-bottom:1px solid #d9e1d8;border-radius:10px 10px 0 0;position:relative;z-index:2}
.instruction-toolbar-group{display:flex;align-items:center;gap:4px;min-width:0;max-width:100%}
.instruction-toolbar-group+.instruction-toolbar-group{padding-left:8px;border-left:1px solid #c9d6cd}
.instruction-toolbar button,.instruction-image-settings button{min-height:32px;padding:5px 8px;margin:0;border:1px solid #c9d6cd;border-radius:6px;background:white;color:#244638;font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;cursor:pointer}
.instruction-toolbar button{display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap;box-shadow:none}
.instruction-toolbar svg,.instruction-table-menu svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.instruction-toolbar .instruction-icon-button{width:32px;padding:6px}
.instruction-toolbar button:not(:disabled):hover,.instruction-color-control:hover{background:#e7efe8;border-color:#8fa99a}
.instruction-toolbar button:focus-visible,.instruction-color-control:focus-within{outline:2px solid #216c57;outline-offset:2px}
.instruction-toolbar button[aria-pressed=true]{background:#dfede4;border-color:#216c57}
.instruction-toolbar button[aria-pressed=mixed]{background:linear-gradient(135deg,#dfede4 50%,#fff 50%);border-color:#216c57;border-style:dashed}
.instruction-toolbar select[data-instruction-font-size]{width:84px;min-height:32px;padding:5px 6px;margin:0;border:1px solid #c9d6cd;border-radius:6px;background:white;color:#244638;font-family:inherit;font-size:14px;font-weight:600;line-height:1.3;cursor:pointer}
.instruction-toolbar select[data-instruction-font-size]:focus-visible{outline:2px solid #216c57;outline-offset:2px}
.instruction-toolbar button:disabled{opacity:.5;cursor:not-allowed}
.instruction-toolbar .instruction-color-control{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;box-sizing:border-box;padding:6px;margin:0;border:1px solid #c9d6cd;border-radius:6px;background:white;color:#244638;cursor:pointer}
.instruction-color-line{stroke:var(--instruction-text-color,#203d36);stroke-width:3.5}
.instruction-color-control[aria-expanded=true]{background:#dfede4;border-color:#216c57}
.instruction-color-menu{position:fixed;z-index:6;width:212px;box-sizing:border-box;padding:8px;overflow:auto;overscroll-behavior:contain;border:1px solid #c9d6cd;border-radius:10px;background:#fff;color:#244638;box-shadow:0 12px 32px #163c2926}
.instruction-color-menu[hidden]{display:none}
.instruction-color-menu button{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:36px;padding:4px;margin:0;border:1px solid transparent;border-radius:6px;background:transparent;color:inherit;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:none}
.instruction-color-menu>button{width:100%;justify-content:flex-start;margin-bottom:6px}
.instruction-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.instruction-color-swatch{display:grid;place-items:center;width:26px;height:26px;flex:none;box-sizing:border-box;border:1px solid #52615b40;border-radius:5px;background:var(--swatch);color:var(--swatch-check)}
.instruction-color-swatch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;visibility:hidden}
.instruction-color-menu button[aria-pressed=true] .instruction-color-swatch svg{visibility:visible}
.instruction-color-menu button[aria-pressed=true]{border-color:#216c57;background:#e7efe8}
.instruction-color-menu button:hover,.instruction-custom-color:hover{background:#eef3ef}
.instruction-color-menu button:focus-visible,.instruction-custom-color:focus-within{outline:2px solid #216c57;outline-offset:-2px}
.instruction-color-menu .instruction-custom-color{position:relative;display:flex;align-items:center;gap:8px;padding:8px 4px 0;margin-top:8px;border-top:1px solid #d9e1d8;color:inherit;font-size:14px;font-weight:600;cursor:pointer}
.instruction-custom-color::before{content:"";width:32px;height:32px;box-sizing:border-box;flex:none;border:2px solid white;border-radius:5px;box-shadow:0 0 0 1px #c9d6cd;background:conic-gradient(#d84958,#edb53c,#66ad5c,#39a6b7,#657bd2,#ad60aa,#d84958)}
.instruction-custom-color input[type=color]{position:absolute;top:8px;left:4px;width:32px;height:32px;min-height:0;padding:0;margin:0;opacity:0;cursor:pointer}
.instruction-toolbar [data-instruction-table-menu][aria-expanded=true]{background:#dfede4;border-color:#216c57}
.instruction-table-menu{position:fixed;z-index:6;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;width:360px;box-sizing:border-box;padding:6px;overflow:auto;overscroll-behavior:contain;border:1px solid #c9d6cd;border-radius:12px;background:#fff;box-shadow:0 12px 32px #163c2926;color:#244638}
.instruction-table-menu[hidden]{display:none}
.instruction-menu-heading{padding:4px 6px;color:#637168;font-size:12px;font-weight:700}
.instruction-table-menu button{display:flex;align-items:center;gap:6px;width:100%;min-height:32px;box-sizing:border-box;padding:5px 6px;margin:0;border:1px solid transparent;border-radius:6px;background:white;box-shadow:none;color:inherit;text-align:left;font-family:inherit;font-size:14px;font-weight:600;line-height:1.35;cursor:pointer}
.instruction-table-menu button span{min-width:0;overflow-wrap:anywhere}
.instruction-table-menu button:hover:not(:disabled),.instruction-table-menu button:focus-visible{background:#e7efe8;border-color:#8fa99a;outline:none}
.instruction-table-menu button:disabled{opacity:.45;cursor:not-allowed}
.instruction-menu-cells{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:4px;border-top:1px solid #d9e1d8}
.instruction-menu-cells .instruction-menu-heading{grid-column:1/-1}
.instruction-table-menu>[data-instruction-table-action=delete]{grid-column:1/-1;color:#a63732;border-top-color:#e8d9d7}
.instruction-column-widths{grid-column:1/-1;padding:8px 6px;border-top:1px solid #d9e1d8}
.instruction-column-widths label,.instruction-column-widths>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;font-weight:600}
.instruction-column-widths select{max-width:150px;min-height:32px;padding:4px 6px;border:1px solid #c9d6cd;border-radius:5px;background:white;color:inherit;font:inherit}
.instruction-column-widths input{flex:1;min-width:0;accent-color:#216c57}
.instruction-column-widths output{min-width:45px;text-align:right;font-size:12px}
.instruction-table-status{margin:0;padding:10px 14px;background:#e6f0e8;color:#244638;font-size:14px;line-height:1.5}
.instruction-table-status:empty{display:none}
.instruction-rich-editor td.instruction-merge-start{outline:2px dashed #216c57;outline-offset:-3px;background:#e6f0e8}
.instruction-rich-editor{min-height:160px;padding:12px;outline:none;font-size:14px;line-height:1.6;color:#203d36;white-space:pre-wrap;overflow-wrap:anywhere}
.instruction-rich-editor:focus-visible{outline:2px solid #216c57;outline-offset:-2px}
.instruction-rich-editor p{margin:0 0 .65em;white-space:pre-wrap}
.instruction-rich-editor table{width:100%;min-width:max(calc(var(--instruction-columns,2)*110px),var(--instruction-min-width,0px));border-collapse:collapse;table-layout:fixed;background:white}
.instruction-rich-editor tr.table-fill-editor-row{display:table-row!important;background:white!important;min-height:0;border:0}
.instruction-rich-editor td.table-fill-editor-cell{display:table-cell!important;min-width:0;min-height:40px;height:48px;padding:10px 12px;border:1px dashed #9daf9e;vertical-align:top;font-size:14px;font-weight:400;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text;background:white}
.instruction-rich-editor td.table-fill-editor-cell.selected{background:#e6f0e8}
.instruction-rich-editor td.table-fill-editor-cell:focus{outline:2px solid #216c57;outline-offset:-2px}
.instruction-rich-editor img:focus{outline:2px solid #216c57;outline-offset:2px}
.instruction-dialog .shared-editor-table-menu{z-index:5}
.instruction-dialog .shared-editor-table-actions{z-index:4}
.instruction-image-settings{display:flex;flex-wrap:wrap;gap:12px;padding:10px;border-bottom:1px solid #d9e1d8;background:#f7f9f5}
.instruction-image-settings[hidden]{display:none}
.instruction-image-settings label{display:grid;gap:4px;margin:0;flex:1;min-width:160px;font-size:12px}
.instruction-image-settings input[type=text]{padding:8px;font-size:14px;margin:0}
.instruction-image-settings output{font-size:12px}
.instruction-editor-error{margin:0;padding:0 14px 10px;color:#a63732;font-size:14px}
.instruction-editor-error:empty{display:none}
#taskPresentationPage[hidden]{display:none}
body.task-presentation-page{height:auto;min-height:100dvh;overflow:visible;background:var(--panel)}
body.task-presentation-page>.topbar,body.task-presentation-page>main:not(#taskPresentationPage),body.task-presentation-page>.workspace-footer{display:none!important}
body.task-presentation-page #diaLauncher,body.task-presentation-page #diaChat,body.task-presentation-page #feedbackLauncher{display:none!important}
#taskPresentationPage{display:block;position:relative;width:100%;height:auto;min-height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;overflow:visible}
#taskPresentationPage form{height:auto;min-height:100dvh;overflow:visible}
#taskPresentationPage .instruction-dialog-header{position:sticky;top:0;z-index:3;background:var(--panel);padding-top:max(16px,env(safe-area-inset-top))}
#taskPresentationPage .instruction-dialog-content{flex:1 0 auto;overflow:visible;padding-inline:max(12px,env(safe-area-inset-left)) max(12px,env(safe-area-inset-right))}
#taskPresentationPage .instruction-field-label,#taskPresentationPage .instruction-composer{flex:1 0 auto;overflow:visible}
#taskPresentationPage .instruction-toolbar{position:sticky;top:var(--instruction-page-header-height,80px);z-index:2}
#taskPresentationPage .instruction-editor-scroll{flex:1 0 auto;overflow:visible;scrollbar-gutter:auto}
#taskPresentationPage .instruction-rich-editor{min-height:240px}
#taskPresentationPage .instruction-dialog-footer{position:sticky;bottom:0;z-index:3;padding-bottom:max(12px,env(safe-area-inset-bottom))}
#taskPresentationPage .dialog-actions{justify-content:space-between}
@media(max-width:800px){
 .app-dialog.instruction-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px);padding:0;max-height:calc(100dvh - 16px)}
 .instruction-dialog-header{padding:16px 16px 12px}
 .instruction-dialog-content{padding:12px 16px}
 .instruction-dialog-footer{padding:12px 16px}
 .instruction-rich-editor{padding:12px;font-size:16px}
 .instruction-rich-editor td.table-fill-editor-cell,.instruction-image-settings input[type=text]{font-size:16px}
 .instruction-toolbar{padding:6px;gap:6px}
 .instruction-toolbar-group+.instruction-toolbar-group{padding-left:0;border-left:0}
 .instruction-toolbar-insert{flex-basis:100%}
 .instruction-toolbar-insert button{flex:1;padding:5px 6px}
 .instruction-toolbar button,.instruction-table-menu button{min-height:44px}
 .instruction-toolbar .instruction-icon-button,.instruction-toolbar .instruction-color-control{width:44px;height:44px}
 .instruction-toolbar select[data-instruction-font-size]{min-height:44px;font-size:16px}
 .instruction-color-menu{width:212px}
 .instruction-color-menu button{min-height:44px}
 .instruction-custom-color input[type=color],.instruction-custom-color::before{width:44px;height:44px}
 .instruction-column-widths select,.instruction-column-widths input{min-height:44px}
 .task-instruction td{padding:6px 8px}
}
@media(max-height:650px){
 .instruction-dialog-header{padding:10px 16px}
 .instruction-dialog-header .eyebrow{display:none}
 .instruction-dialog-content{padding:8px 16px}
 .instruction-dialog-content>label{display:flex;align-items:center;gap:12px}
 .instruction-field-label{margin-top:6px}
 .instruction-composer{margin-top:6px}
 .app-dialog.instruction-dialog [data-task-presentation-heading]{min-width:0;padding:6px 8px}
 .instruction-dialog-footer{padding:8px 16px}
 .instruction-toolbar{flex-wrap:nowrap;overflow-x:auto}
 .instruction-toolbar-group{flex:none;max-width:none}
 .instruction-toolbar-insert{flex-basis:auto}
}

.instruction-audio{display:block;min-width:0;max-width:100%;margin:10px 0;white-space:normal;font-weight:400;font-style:normal}
.instruction-audio>.task-audio-player{display:block;margin:0;max-width:100%}
.instruction-audio .task-audio-timeline{display:block}
.task-instruction table:has([data-instruction-audio]),.instruction-rich-editor table:has([data-instruction-audio]){min-width:max(calc(var(--instruction-columns,2)*280px),var(--instruction-min-width,0px))}
.instruction-audio:focus-visible{outline:2px solid #216c57;outline-offset:3px;border-radius:12px}
.instruction-audio-editor-info{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;padding:6px 8px;background:#f3f6f1;border-radius:0 0 10px 10px;font-size:12px;line-height:1.4;color:#244638}
.instruction-audio-file-info{display:grid;gap:2px;flex:1 1 140px;min-width:0}
.instruction-audio-file-info>strong{overflow-wrap:anywhere;font-size:14px}
.instruction-audio-file-info>span{color:#637168}
.instruction-audio-actions{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.instruction-audio-actions button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:6px;margin:0;border:1px solid #c9d6cd;border-radius:6px;background:white;color:#244638;box-shadow:none;cursor:pointer}
.instruction-audio-actions svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.instruction-audio-actions button:hover{background:#e7efe8;border-color:#8fa99a}
.instruction-audio-actions button:focus-visible{outline:2px solid #216c57;outline-offset:2px}
.instruction-audio-actions button[aria-pressed=true]{background:#dfede4;border-color:#216c57}
.instruction-audio-actions [data-instruction-audio-action=remove]:hover{color:#a63732;background:#fff1ef;border-color:#d9b4af}
.instruction-audio-actions [draggable=true]{cursor:grab}
.instruction-audio-actions [draggable=true]:active{cursor:grabbing}
.instruction-audio.is-moving{outline:2px dashed #216c57;outline-offset:3px;border-radius:10px}
.instruction-audio-move-status{margin:0;padding:10px 14px;color:#244638;background:#e6f0e8;font-size:14px;line-height:1.5}
.instruction-audio-move-status:empty{display:none}
.instruction-audio-drop-marker{position:fixed;z-index:10;width:3px;background:#16775c;pointer-events:none}
.instruction-audio-drop-marker[hidden]{display:none}
@media(max-width:800px){.instruction-audio-actions button{width:44px;height:44px}.instruction-audio-actions{margin-left:0}}