/* features.css: styles for the 4.0 features (Figure tab, share, settings, timelapse, workspace folders,
   keyboard guide), high contrast, TVs, foldables, installed app window and stylus tablets. */

/* ---- four side panel tabs ---- */
.tabs{grid-template-columns:repeat(4,1fr)}
.tabs .thumb{width:calc((100% - 6px)/4)}
.tab{font-size:12px;gap:4px;padding:0 2px}
.tab svg{width:14px;height:14px}

/* ---- shared bits ---- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.toggle-row small{display:block;font-size:12px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.field option{color:var(--ink);background:var(--sheet)}
select.field{appearance:auto;padding-right:6px}
.chip svg{width:13px;height:13px;vertical-align:-2px}
.chip:focus-visible,.opt:focus-visible,.mini:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.modal-card{animation:pop .32s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ---- align and tidy ---- */
.align-row{grid-template-columns:repeat(5,1fr)}
.align-row svg{width:18px;height:18px}

/* ---- Figure tab ---- */
.snip-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.snip{height:30px;font:500 15px "Times New Roman",Times,serif;padding:0}
.snip:last-child{grid-column:span 6;font:600 12px var(--f-body)}
.view-chips{gap:4px}
.view-chips .chip{height:28px;padding:0 10px;font-size:12px}
.warn-list{margin:0;padding:10px 12px 10px 28px;border-radius:10px;background:color-mix(in srgb,var(--chalk) 18%,var(--sheet));font-size:12.5px;line-height:1.45;color:var(--ink)}
.warn-list li{margin:2px 0}
.ok-note{color:var(--ok)}
.fig-alt{height:auto;min-height:84px;padding:8px 10px;font:500 13px/1.45 var(--f-body);resize:vertical}
#tab-figure code{font:500 12px var(--f-mono);background:var(--brand-2);padding:1px 4px;border-radius:4px}

/* ---- text drawer kinds ---- */
.mode-chips{gap:4px}
.mode-chips .chip{height:28px;padding:0 10px;font-size:12px}

/* ---- export additions ---- */
.alt-box{border:1px solid var(--rule);border-radius:10px;padding:8px 10px;background:var(--paper)}
.alt-box summary{cursor:pointer;font:600 12.5px var(--f-body);color:var(--ink-2)}
.alt-box textarea{width:100%;margin:8px 0;min-height:70px;border-radius:8px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink);padding:8px;font:500 13px/1.45 var(--f-body);resize:vertical}
#exp-size-wrap .row{gap:6px}
#exp-size-note{margin-top:4px}

/* ---- share dialog ---- */
.share-card{width:min(600px,100%)}
.share-card .dr-head{flex-wrap:wrap;row-gap:12px}
.share-card .dr-head .x-btn{order:2;margin-left:auto}
.share-card .dr-head #share-tabs{order:3;flex:1 1 100%;display:flex}
.share-card #share-tabs button{flex:1;white-space:nowrap;padding:0 6px}
.share-url{display:flex;gap:6px}
.share-url .field{flex:1;min-width:0;font:500 12.5px var(--f-mono)}
.embed-code{width:100%;height:auto;min-height:92px;font:500 12px/1.5 var(--f-mono);padding:10px;resize:vertical}
.share-note{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--brand-2);color:var(--ink)}
.share-note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--brand-ink)}
.qr-box{width:min(380px,82vw);margin:4px auto;padding:10px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);animation:pop .4s var(--ease)}
.qr-box svg{display:block;width:100%;height:auto}

/* ---- timelapse ---- */
.tlx-card{width:min(560px,100%)}
#tlx-prev{width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;border:1px solid var(--rule);background:var(--paper)}
#tlx-bar{width:100%;height:8px;accent-color:var(--brand)}

/* ---- settings ---- */
.settings-card{width:min(620px,100%)}
.set-sec{display:grid;gap:8px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.set-sec:last-of-type{border-bottom:0}
.set-sec h3{display:flex;align-items:center;gap:8px;margin:4px 0 0;font:750 14px var(--f-display);font-stretch:108%}
.set-sec h3 svg{width:17px;height:17px;color:var(--brand)}
.set-sec label{font:600 10.5px/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.lang-row .opt{font:600 15px var(--f-body);height:40px}
.lang-row .opt[lang="hi"]{font-family:"Hind","Mukta",var(--f-body)}
.lang-row .opt[lang="ta"]{font-family:"Mukta Malar","Noto Sans Tamil",var(--f-body)}
.lang-row .opt[lang="te"]{font-family:"Mandali","Noto Sans Telugu",var(--f-body)}
.set-foot{text-align:center;color:var(--ink-3)}

/* ---- keyboard guide ---- */
.keys-card{width:min(860px,100%)}
.keys-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 24px}
.keys-grid h3{margin:0 0 6px;font:750 14px var(--f-display);font-stretch:108%}
.keys-grid dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:center;font-size:13px}
.keys-grid dt{white-space:nowrap}
.keys-grid dd{margin:0;color:var(--ink-2)}

/* ---- workspace: folders, tags, trash, backup ---- */
.ws-chips{gap:4px}
.ws-chips .chip{height:28px;padding:0 10px;font-size:12px;display:inline-flex;align-items:center;gap:5px}
.tagchip{font-family:var(--f-mono)!important}
.chip-input{height:28px;width:130px;font-size:12.5px;border-radius:14px}
.b-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.b-tags span{font:500 10.5px var(--f-mono);color:var(--brand-ink);background:var(--brand-2);padding:1px 6px;border-radius:9px}
.b-item.trash{opacity:.85}
.b-item.trash img{filter:grayscale(1)}
.b-move{flex-wrap:wrap;gap:4px}
.storage-note{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.bk-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:14px;border:1px solid var(--rule);background:var(--sheet);color:var(--ink-2);font:600 11.5px var(--f-body);cursor:pointer}
.bk-chip svg{width:14px;height:14px}
.bk-chip.on{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,var(--rule))}
.bk-chip.paused,.bk-chip.off{color:var(--brand-ink)}
.bk-status.on{color:var(--ok)}

/* ---- presenting ---- */
.present-hud .rb[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.stage.blackout::after{content:"";position:absolute;inset:0;background:#000;z-index:30;animation:fade .25s}

/* ---- high contrast: stronger lines, bigger focus rings, no see through panels ---- */
:root[data-contrast]{--rule:#5B6B67;--ink-2:#1E2B28;--ink-3:#33413D;--grid:rgba(0,0,0,.14)}
:root[data-contrast].is-dark{--rule:#9DB2AC;--ink-2:#E2ECE9;--ink-3:#C5D3CF}
:root[data-contrast] :focus-visible{outline:3px solid var(--brand)!important;outline-offset:3px}
:root[data-contrast] .rb,:root[data-contrast] .opt,:root[data-contrast] .mini,:root[data-contrast] .chip{border-width:2px}
:root[data-contrast] .modal{backdrop-filter:none;-webkit-backdrop-filter:none}
@media (forced-colors: active){.rb[aria-pressed="true"],.opt[aria-pressed="true"],.chip[aria-pressed="true"]{forced-color-adjust:none;background:Highlight;color:HighlightText}}

/* ---- less motion, when chosen in Settings (the system setting is handled in tokens.css) ---- */
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* ---- TVs and projectors: read from across the room, move with a remote ---- */
.tv{font-size:118%}
.tv :focus-visible{outline:4px solid var(--chalk)!important;outline-offset:4px}
.tv .present-hud{transform:translateX(-50%) scale(1.35);transform-origin:bottom center}
@media (pointer: none){:focus-visible{outline:4px solid var(--chalk)!important;outline-offset:4px}}

/* ---- installed app with the window title bar hidden (Chrome and Edge on a computer) ---- */
@media (display-mode: window-controls-overlay){
  .appbar{margin-top:0;padding-left:max(10px,env(titlebar-area-x,0px));width:env(titlebar-area-width,100%);height:max(54px,env(titlebar-area-height,54px));-webkit-app-region:drag;app-region:drag}
  .appbar button,.appbar input,.appbar a,.appbar .seg-style{-webkit-app-region:no-drag;app-region:no-drag}
}

/* ---- foldables and dual screen: canvas on one screen, side panel on the other ---- */
@media (horizontal-viewport-segments: 2){
  .shell{display:grid;grid-template-columns:env(viewport-segment-width 0 0) env(viewport-segment-width 1 0);column-gap:calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0))}
  .shell .rail{position:absolute;left:0;top:0;bottom:0;z-index:7}
  .shell .stage{grid-column:1;padding-left:60px}
  .shell .inspector,.shell .inspector.collapsed{grid-column:2;width:auto;transform:none;visibility:visible;position:relative;border-left:0}
  .shell .insp-inner{width:100%}
}
@media (vertical-viewport-segments: 2){
  .shell{flex-direction:column}
  .stage{flex:0 0 env(viewport-segment-height 0 0)}
}

/* ---- stylus tablets: thinner hover ring cursor, no text selection while drawing ---- */
@media (any-pointer: fine) and (any-pointer: coarse){#cv{cursor:crosshair}}

/* ---- app bar: the new Share and Settings buttons need room, so secondary labels hide sooner ---- */
@media (max-width:1520px){#btn-templates .lbl,#btn-present .lbl,#btn-share .lbl{display:none}}
@media (max-width:1240px){#btn-code,#btn-settings{display:none}}
@media (max-width:860px){#btn-share{display:none}}

/* Workspace rows on touch screens and narrow panels: the actions get their own line,
   so the board name keeps its room, and they are always visible because there is no hover. */
@media (pointer: coarse), (max-width: 520px) {
  .b-item{grid-template-columns:70px minmax(0,1fr)}
  .b-acts{grid-column:1 / -1;justify-content:flex-end;opacity:1;gap:4px;margin-top:-2px}
  .b-acts button{min-width:40px;min-height:36px}
}

/* Very large screens at 1x (a 4K TV or monitor with no system scaling): the controls are
   scaled up so they can be read and tapped from a distance. The drawing canvas itself is
   not zoomed, so lines stay sharp and pointer positions stay exact. */
@media (min-width: 2400px) and (max-resolution: 1.3dppx) {
  .appbar, .rail, .inspector, #editor .pill, .drawer, .modal-card, .present-hud, #toasts { zoom: 1.3 }
}
@media (min-width: 3000px) and (max-resolution: 1.3dppx) {
  .appbar, .rail, .inspector, #editor .pill, .drawer, .modal-card, .present-hud, #toasts { zoom: 1.75 }
}