#save-state{font-size:11px;color:#526f60;white-space:nowrap;margin:0 5px}#cloud-panel{display:flex;flex-direction:column;gap:7px}#cloud-panel:not(:popover-open){display:none}#cloud-error{position:fixed;z-index:30;top:calc(var(--header-height) + 8px);right:12px;max-width:370px;background:#fff2dd;border:1px solid #e4b875;padding:12px;border-radius:8px;font:13px Arial;box-shadow:0 3px 15px #0002}.cloud-loading .workspace,.cloud-failed .workspace{visibility:hidden}.readonly .course-tools,.readonly #settings-trigger,.readonly #dimensions-trigger,.readonly #undo,.readonly #redo,.readonly #course-history,.readonly #cloud-menu,.readonly #cloud-panel{display:none!important}.readonly .title-input{pointer-events:none}.readonly .drawing{padding-left:8px}.cloud-dialog{font:14px Arial,sans-serif;border:1px solid #dce3dc;border-radius:14px;padding:24px;width:min(520px,calc(100vw - 28px));max-height:90dvh;color:#293b40;background:white}.cloud-dialog::backdrop{background:#17392c55}.cloud-dialog header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:20px}.cloud-dialog h2{font-size:20px;margin:0}.cloud-dialog p{line-height:1.5}.cloud-dialog label{display:grid;gap:8px}.cloud-dialog input{font:inherit;padding:10px;border:1px solid #dce3dc;border-radius:8px;width:100%}.cloud-dialog button{font:inherit;padding:9px 14px;border:1px solid #dce3dc;border-radius:8px;background:white;cursor:pointer;min-height:40px}.cloud-dialog header button{font-size:23px;padding:3px 10px}.cloud-dialog .primary{background:#237985;color:white}.cloud-dialog .actions{display:flex;gap:8px;margin-top:15px;flex-wrap:wrap}.cloud-dialog a{color:#237985}.version-list{display:grid;gap:8px;max-height:45vh;overflow:auto}@media(max-width:700px){#save-state{font-size:10px;margin:0;max-width:85px;overflow:hidden}#cloud-menu{font-size:12px;padding:4px 7px}}@media print{#cloud-error,.cloud-dialog{display:none!important}}

@media screen and (max-height:500px) and (min-width:601px) and (max-width:1000px){
 .app-bar #save-state{width:18px;max-width:18px;overflow:hidden;white-space:nowrap;margin:0;font-size:11px;flex-shrink:0}
 .app-bar #cloud-menu{width:32px;font-size:0;padding:3px;flex-shrink:0}
 .app-bar #cloud-menu:after{content:'⋯';font-size:24px}
}

@media screen and (max-height:500px) and (min-width:601px) and (max-width:1000px){
 .app-bar #save-state{font-size:0;text-align:center}
 .app-bar #save-state:after{content:attr(data-symbol);font-size:12px}
}

.guest-editor #save-state{white-space:nowrap}.guest-editor #cloud-menu{white-space:nowrap}
@media screen and (max-height:500px) and (min-width:601px) and (max-width:1000px){.guest-editor .app-bar #new-course:before{content:'＋'}.guest-editor .app-bar #cloud-menu{font-size:0}.guest-editor .app-bar #cloud-menu:after{content:'↪';font-size:20px}}

.readonly #edit-trigger{display:none!important}

/* Keep the clock with undo/redo without adding height to the side rail. */
@media screen{
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #course-history{grid-area:4/1}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-out{grid-area:4/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-in{grid-area:5/1}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-fit{grid-area:5/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #rotate-view{grid-area:6/1}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #print-course{grid-area:6/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #preview-course{grid-area:7/1}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #export-trigger{grid-area:7/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #save-state{grid-area:8/1}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="2"] .app-bar #edit-trigger{grid-area:8/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="3"] .app-bar #course-history{grid-area:3/3}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="3"] .app-bar #rotate-view{grid-area:2/2}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="3"] .app-bar #cloud-menu{padding-bottom:12px}
 body:not(.guest-editor):not(.readonly)[data-bar-layout="side"][data-bar-columns="3"] .app-bar #save-state{grid-area:2/1;align-self:end;height:12px;pointer-events:none;z-index:1}
}

/* Close is the final, red action after Export in every toolbar layout. */
@media screen{
 body .app-bar #close-course{color:#ba3434;flex-shrink:0}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #close-course{grid-area:9/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #export-trigger{grid-area:9/1!important}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #close-course{grid-area:6/3}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #export-trigger{grid-area:6/2!important}
 body[data-bar-layout="side"][data-bar-columns="4"] .app-bar #edit-trigger{grid-area:2/2}
 body[data-bar-layout="side"][data-bar-columns="4"] .app-bar #close-course{grid-area:5/4}
 body[data-bar-layout="side"][data-bar-columns="4"] .app-bar #export-trigger{grid-area:5/3}
}

/* Keep the final Close action inside medium-width tablet toolbars. */
@media screen and (min-width:851px) and (max-width:1150px){
 .app-bar .preview-trigger>span,.app-bar .export-trigger>span{display:none}
 .app-bar #save-state{max-width:130px;overflow:hidden;text-overflow:ellipsis}
}

/* The three zoom controls must not push Close onto a third row on iPhone Mini.
   Explicit widths also avoid platform-dependent native button padding. */
@media screen and (max-width:400px){
 body[data-bar-layout="top"] .app-bar .zoom button{width:28px;min-width:28px;padding:3px}
 body[data-bar-layout="top"] .app-bar .zoom #zoom-fit{width:32px;min-width:32px}
}