/* Hooperska: warm graph paper and the pastel palette of planetka.io.
   Screen chrome only. Course scale, geometry and print colors stay independent. */
@media screen{
 :root{--paper:#f2efe6;--paper-panel:#fcfaf4;--paper-line:#d6d1c5;--sage:#dcecef;--peach:#efe0c9;--ink:#293b40;--muted:#6e736b;--line:var(--paper-line);--mint:#dcecef;--green:#237985}
 body{min-height:100dvh;color:var(--ink);background-color:var(--paper);background-image:linear-gradient(to right,rgba(22,27,24,.065) 1px,transparent 1px),linear-gradient(to bottom,rgba(22,27,24,.065) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px}
 body .app-bar{background:#f7f4ec;border-color:var(--paper-line)}
 body .settings-trigger,body input,body select,body textarea{background:#fffdf8;border-color:var(--paper-line)}
 body .app-bar .button.primary:not(.export-trigger){background:transparent;color:var(--ink);box-shadow:none}
 body .app-bar .button.primary:not(.export-trigger):hover:not(:disabled){background:#e9e5d9}
 body .app-bar .button.export-trigger{background:var(--peach);color:#293b40;box-shadow:inset 0 0 0 1px #d3be9e}
 body .app-bar .button.export-trigger:hover{background:#e4d0b0}
 body .app-bar button:not(.primary):not(.export-trigger):hover:not(:disabled){background:#e9e5d9}
 body #rotate-view[aria-pressed=true],body .category-options button[aria-pressed=true],body .size-options label:has(input:checked){background:#dcecef;color:#293b40;border-color:#a8cbd0}
 body .canvas-wrap{border-color:#d5d4c9;box-shadow:0 1px 5px #403b2810;background:white}
 body .popover,body dialog:not(.pwa-preview){background:var(--paper-panel);border-color:var(--paper-line);color:var(--ink);box-shadow:0 8px 30px #342f2520}
 body dialog::backdrop{background:#292c264d}
 body .popover button:hover,body dialog button:hover{background:#dcecef}
 body .popover .primary,body dialog .primary{background:var(--green);color:white;border-color:var(--green)}
 body .top{background:#f7f4ec;border-color:var(--paper-line)}
 body .brand img{display:block;width:190px;max-width:100%;height:auto}
 body .top .brand img{width:160px}
 body .auth,body .card,body .detail,body .empty,body .account-grid section,body .course-list{background:var(--paper-panel);border-color:var(--paper-line)}
 body .auth{box-shadow:0 5px 24px #5146300b}
 body .dashboard .primary,body .auth .primary{background:var(--green)!important;color:white!important;border-color:var(--green)!important}
 body .top button,body .dashboard button:not(.card):not(.primary),body .auth button:not(.primary):not(.link){background:#fffdf8;border-color:var(--paper-line)}
 body .top button:hover,body .dashboard button:not(.card):not(.primary):hover,body .auth button:not(.primary):not(.link):hover{background:#e9e5d9}
 body .thumb{background:white;border-color:#e6e1d5}
 body .card.selected,body button:focus-visible,body a:focus-visible{outline-color:#237985}
 body .course-list th{color:#696f65}
 body .course-list th,body .course-list td{border-color:#e1dcd1}
 body .course-list tr.selected,body .dashboard .view-toggle .active{background:#dcecef!important}
 body .pwa-dialog{background:var(--paper-panel);border-color:var(--paper-line);color:var(--ink)}
}
@media screen{body .canvas-top .title-input{background:transparent}}

@media screen{body .popover{top:calc(var(--header-height) + var(--device-safe-top,0px) + 6px);max-height:calc(var(--app-height,100dvh) - var(--header-height) - var(--device-safe-top,0px) - 14px)}}
/* Consistent typography and neutral action controls. Color denotes selection,
   validation or primary actions, never a persistent view orientation. */
@media screen{
 :root{--control-font:12px;--panel-font:13px;--control-icon:20px}
 body .app-bar{font-size:var(--control-font)}
 body .app-bar .button,body .app-bar .zoom #zoom-fit{font-size:var(--control-font);font-weight:400;line-height:1.25}
 body .app-bar .button.export-trigger{font-weight:600}
 body .app-bar .dimensions-trigger,body #rotate-view,body #rotate-view[aria-pressed=true]{color:var(--ink);background:transparent}
 body #rotate-view:hover{background:#e9e5d9}
 body .app-bar .icon-button svg,body .app-bar .button svg{width:var(--control-icon);height:var(--control-icon);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 body .app-bar .zoom button:not(#zoom-fit){font-size:22px;color:var(--ink)}
 body .app-bar .chevron,body .popover .field,body .popover .label{color:var(--ink)}
 body .app-bar .export-trigger .chevron{color:inherit}
 body .popover{font-size:var(--panel-font)}
 body .popover .field,body .popover .label{font-size:12px}
 body #save-state{font-size:12px;color:var(--ink)}
 body .canvas-top .plan-brand{width:85px}
 body #validation-dialog .dialog-header{background:var(--paper-panel)}
}
/* Compact icon-only fallbacks keep their existing readable symbols. */
@media screen and (max-height:500px) and (min-width:601px) and (max-width:1000px){
 body .app-bar #view-trigger,body .app-bar #new-course,body .app-bar .zoom #zoom-fit,body .app-bar #cloud-menu,body .app-bar #save-state{font-size:0}
}
@media screen and (max-width:600px){body .app-bar .zoom #zoom-fit{font-size:0}}

@media screen{body .canvas-wrap[data-orientation="landscape"] .canvas-top{grid-template-columns:minmax(85px,1fr) minmax(0,1fr) minmax(0,1fr)}body .canvas-top .plan-brand{max-width:none}}

@media screen{body .course-tools .smart-tool:not([aria-pressed="true"]){color:var(--ink)}body .stock-badge{color:var(--ink);border-color:var(--ink)}body .rules-setting>a{color:var(--ink)}}

/* Move document/view actions to the spare side only when the fitted arena grows. */
@media screen{
 body[data-bar-layout="side"] .app-bar{position:absolute;left:env(safe-area-inset-left,0px);top:env(safe-area-inset-top,0px);width:var(--bar-width);height:calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));min-height:0;padding:4px;display:grid;grid-template-columns:repeat(var(--bar-columns),44px);grid-auto-rows:44px;gap:2px;align-content:start;justify-content:start;overflow:auto;border-bottom:0;border-right:1px solid var(--paper-line)}
 body[data-bar-layout="side"] .workspace{margin-left:var(--bar-width);width:calc(100% - var(--bar-width));height:calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px))}
 body[data-bar-layout="side"] .app-bar .bar-space,body[data-bar-layout="side"] .app-bar .bar-divider,body[data-bar-layout="side"] .app-bar #dimensions-trigger{display:none}
 body[data-bar-layout="side"] .app-bar .zoom{display:contents}
 body[data-bar-layout="side"] .app-bar :is(.button,.icon-button,.zoom button){width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:3px;margin:0;line-height:1.25}
 body[data-bar-layout="side"] .app-bar :is(#new-course,#view-trigger,#cloud-menu,.zoom #zoom-fit){font-size:0}
 body[data-bar-layout="side"] .app-bar #new-course:before{content:attr(data-bar-symbol);font-size:24px}
 body[data-bar-layout="side"] .app-bar #view-trigger:before{content:'☷';font-size:24px}
 body[data-bar-layout="side"] .app-bar #cloud-menu:after{content:'⋯';font-size:24px}
 body.guest-editor[data-bar-layout="side"] .app-bar #cloud-menu:after{content:'↪';font-size:22px}
 body[data-bar-layout="side"] .app-bar .zoom #zoom-fit:after{content:'⛶';font-size:22px}
 body[data-bar-layout="side"] .app-bar :is(.preview-trigger,.export-trigger)>span,body[data-bar-layout="side"] .app-bar .settings-trigger .chevron{display:none}
 body[data-bar-layout="side"] .app-bar #save-state{display:flex;align-items:center;justify-content:center;max-width:44px;width:44px;height:44px;margin:0;font-size:0;overflow:hidden}
 body[data-bar-layout="side"] .app-bar #save-state:after{content:attr(data-symbol);font-size:12px}
 body[data-bar-layout="side"] .popover:not(.issue-popover){inset:auto;top:calc(env(safe-area-inset-top,0px) + 6px);left:calc(env(safe-area-inset-left,0px) + var(--bar-width) + 6px);max-width:calc(100vw - var(--bar-width) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 14px);max-height:calc(var(--app-height,100dvh) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 12px);overflow:auto}
}
@media print{body[data-bar-layout="side"] .workspace{margin-left:0!important;width:auto!important}}

/* Keep related actions together in the side rail at both supported widths. */
@media screen{
 body[data-bar-layout="side"] .app-bar #new-course{grid-area:1/1}
 body[data-bar-layout="side"] .app-bar #settings-trigger{grid-area:1/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #view-trigger{grid-area:2/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #cloud-menu{grid-area:2/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #undo{grid-area:3/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #redo{grid-area:3/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-out{grid-area:4/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-in{grid-area:4/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #zoom-fit{grid-area:5/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #rotate-view{grid-area:5/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #print-course{grid-area:6/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #preview-course{grid-area:6/2}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #export-trigger{grid-area:7/1}
 body[data-bar-layout="side"][data-bar-columns="2"] .app-bar #save-state{grid-area:7/2}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #view-trigger{grid-area:1/3}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #cloud-menu{grid-area:2/1}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #save-state{grid-area:2/2}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #undo{grid-area:3/1}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #redo{grid-area:3/2}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #rotate-view{grid-area:3/3}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #zoom-out{grid-area:4/1}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #zoom-fit{grid-area:4/2}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #zoom-in{grid-area:4/3}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #print-course{grid-area:5/1}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #preview-course{grid-area:5/2}
 body[data-bar-layout="side"][data-bar-columns="3"] .app-bar #export-trigger{grid-area:5/3}
}

/* Product help belongs to the display menu, never to the printable sheet. */
.product-help{display:grid;gap:10px;border-top:1px solid #d9d8cd;margin-top:16px;padding-top:16px;font:12px/1.5 Arial,sans-serif}.product-help a{color:#293b40;text-underline-offset:3px}