/* Privacy and Terms (templates/drobo/legal/layout_v2.html, privacy_v2.html, terms_v2.html), in the app frame.
   Loaded after css/drobo-ui.css and css/drobo-ui-support-tabs.css (the two documents' tabs). Every colour is one of the
   kit's tokens (--ui-*), so light and dark follow the theme.
   The page is for reading: one card, the text held to a measure of about 70 characters, a hairline between sections,
   "On this page" beside it (a plain rail, as in the Docs) or folded into a bar above it where there is no room.
   Type, the Help center's and Contact's scale: header 2.15-2.9rem, section titles 1.25rem (1.125rem on phones), text
   and sub-headings 1rem (.9375rem on phones), the list of sections and captions .875rem, labels .75rem.
   Motion: the kit's blur fade (.ui-fade) as a section arrives, and a 2px lift on the two cards at the end. Nothing
   moves on its own; reduced motion turns all of it off (css/drobo-ui.css).
   Behaviour: js/drobo-ui-legal.js. */

/* ── Header: sized as on the Help center and Contact; the tabs sit on its bottom rule ── */
.lg-hero .ui-hero__inner { padding-top: 3.25rem; padding-bottom: 2.25rem; }
.lg-hero .ui-hero__text { gap: .85rem; }
.lg-hero .ui-h1 { font-size: clamp(2.15rem, 3.4vw, 2.9rem); letter-spacing: -.035em; line-height: 1.08; }
.lg-hero .ui-lead { font-size: 1rem; line-height: 1.6; }
.lg-hero .ui-gradient-anim { animation: none; }   /* the header's colour, standing still */
.lg-date { justify-self: start; margin-top: .3rem; }

/* ── Layout: the text, and "On this page" beside it when the page itself has the room (so a collapsed sidebar
   gives the room back). --lg-wide tells the script which of the two it is. ── */
.lg { --lg-gutter: 2rem; --lg-main-top: 1.75rem; container: lg / inline-size; padding-top: .5rem; }
.lg-grid { --lg-wide: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; }
.lg-aside, .lg-doc, .lg-related { min-width: 0; }
.lg-doc, .lg-related, .lg-toc { box-sizing: border-box; width: 100%; max-width: 38.5rem; }

/* ── The document ── */
body.ui-app .lg-doc { padding: 0; counter-reset: lg-section; }
.lg-section { min-width: 0; padding: 2rem 2.25rem 2.1rem; scroll-margin-top: 4rem; }   /* lands under the top bar (3.5rem) */
.lg-section + .lg-section { border-top: 1px solid var(--ui-border); }
.lg-section > * { max-width: 34rem; }
.lg-section h2 {
  display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 .9rem; font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em;
  line-height: 1.3; color: var(--ui-fg);
}
.lg-section h2::before {   /* the section's number: drawn here, not written in the text */
  counter-increment: lg-section; content: counter(lg-section); display: grid; place-items: center; flex: 0 0 auto; box-sizing: border-box;
  min-width: 1.625rem; height: 1.625rem; padding: 0 .4rem; font-size: .75rem; font-weight: 650; letter-spacing: 0; line-height: 1; color: var(--ui-muted);
  background: var(--ui-subtle); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-sm); font-variant-numeric: tabular-nums;
}
.lg-section h3 { margin: 1.5rem 0 .45rem; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.4; color: var(--ui-fg); }
.lg-section h2 + h3 { margin-top: 0; }
.lg-section p, .lg-section li { font-size: 1rem; line-height: 1.7; color: var(--ui-fg-2); overflow-wrap: break-word; }
.lg-section p, .lg-section ul { margin: 0 0 .9rem; }
.lg-section > :last-child { margin-bottom: 0; }
.lg-section ul { display: grid; gap: .45rem; padding: 0; list-style: none; }
.lg-section li { position: relative; min-width: 0; padding-left: 1.2rem; }
.lg-section li::before { content: ""; position: absolute; top: .72em; left: .15rem; width: .35rem; height: .35rem; background: var(--ui-primary); border-radius: 50%; }
.lg-section strong { font-weight: 600; color: var(--ui-fg); }
body.ui-app .lg-section p a, body.ui-app .lg-section li a {
  color: var(--ui-primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--ui-primary) 40%, transparent); transition: text-decoration-color .15s;
}
body.ui-app .lg-section p a:hover, body.ui-app .lg-section li a:hover { text-decoration-color: currentColor; }
/* A heading's link to itself (added by the script), shown while the pointer is on the heading. */
body.ui-app .lg-anchor {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.625rem; height: 1.625rem; margin-left: -.2rem; font-size: 1rem; color: var(--ui-faint);
  text-decoration: none; border-radius: var(--ui-radius-sm); opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.lg-section h2:hover .lg-anchor, .lg-anchor:focus-visible { opacity: 1; }
body.ui-app .lg-anchor:hover { color: var(--ui-primary); background: var(--ui-primary-soft); }
@media (hover: none) { body.ui-app .lg-anchor { display: none; } }

/* ── On this page ── */
.lg-toc { position: relative; }
.lg-toc__head { display: flex; align-items: center; gap: .55rem; list-style: none; }
.lg-toc__head::-webkit-details-marker { display: none; }
.lg-toc__title { flex: 0 0 auto; font-size: .875rem; font-weight: 600; color: var(--ui-fg); }
.lg-toc__icon { font-size: 1.05rem; color: var(--ui-muted); }
.lg-toc__now { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: .875rem; color: var(--ui-muted); text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.lg-toc__chev { flex: 0 0 auto; font-size: 1rem; color: var(--ui-muted); transition: transform .2s var(--ui-ease); }
.lg-toc[open] .lg-toc__chev { transform: rotate(180deg); }
.lg-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: lg-toc; }
body.ui-app .lg-toc a {
  position: relative; display: flex; align-items: baseline; gap: .65rem; padding: .45rem .7rem; font-size: .875rem; line-height: 1.45; color: var(--ui-fg-2);
  text-decoration: none; border-radius: var(--ui-radius-control); transition: background .15s, color .15s;
}
.lg-toc a::before { counter-increment: lg-toc; content: counter(lg-toc); flex: 0 0 1.1rem; font-size: .75rem; color: var(--ui-faint); text-align: right; font-variant-numeric: tabular-nums; transition: color .15s; }
body.ui-app .lg-toc a:hover { color: var(--ui-fg); background: var(--ui-hover); }
body.ui-app .lg-toc a.is-active { font-weight: 500; color: var(--ui-primary); background: var(--ui-primary-soft); }
.lg-toc a.is-active::before { color: var(--ui-primary); }

/* Beside the text: a plain rail that stays in view; its heading is a label, not a button. */
@container lg (min-width: 58rem) {
  .lg-grid { --lg-wide: 1; grid-template-columns: minmax(0, 38.5rem) 17.25rem; justify-content: start; column-gap: 2.25rem; }   /* the rail holds the longest name on one line */
  .lg-doc { grid-column: 1; grid-row: 1; }
  .lg-related { grid-column: 1; grid-row: 2; }
  .lg-aside {
    position: sticky; top: 4.75rem; grid-column: 2; grid-row: 1 / span 2; align-self: start; max-height: calc(100vh - 6rem); overflow-y: auto;
    overscroll-behavior: contain; scrollbar-width: none;
  }
  .lg-aside::-webkit-scrollbar { display: none; }
  .lg-toc__head { margin: .15rem 0 .5rem; padding: 0 .7rem; pointer-events: none; }
  .lg-toc__title { font-size: .75rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ui-muted); }
  .lg-toc__icon, .lg-toc__now, .lg-toc__chev { display: none; }
}

/* Above the text: a card that opens and closes. With the script it becomes a bar that stays under the top bar, and
   its list opens over the text instead of pushing it down. */
@container lg (max-width: 57.99rem) {
  .lg-toc { background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-sm); }
  .lg-toc__head { height: var(--ui-h); padding: 0 .9rem; cursor: pointer; border-radius: inherit; }   /* a toolbar's height: it becomes the bar below */
  .lg-toc__nav { padding: 0 .4rem .45rem; }
  body.ui-app .lg-toc a { padding: .6rem .75rem; }   /* a finger's height */

  .lg[data-lg-js] { padding-top: 0; }
  .lg[data-lg-js] .lg-aside {
    position: sticky; top: 3.5rem; z-index: 20; margin: calc(-1 * var(--lg-main-top)) calc(-1 * var(--lg-gutter)) 0; padding: .45rem var(--lg-gutter);
    background: var(--ui-panel); border-bottom: 1px solid var(--ui-border);   /* solid: a second sheet of frosted glass under the top bar's takes the blur from both */
  }
  .lg[data-lg-js] .lg-toc__nav {
    position: absolute; z-index: 1; top: calc(100% + .4rem); right: 0; left: 0; max-height: min(30rem, calc(100vh - 9.5rem)); padding: .4rem; overflow-y: auto;
    overscroll-behavior: contain; background: var(--ui-card); border: 1px solid var(--ui-border); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow-lg);
    animation: ui-pop .16s var(--ui-ease);
  }
  .lg[data-lg-js] .lg-section { scroll-margin-top: 7.25rem; }   /* under the top bar (3.5rem) and this bar (3.5rem) */
}

/* ── At the end: the other document, and Contact ── */
.lg-related { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
body.ui-app .lg-related__link {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.25rem; color: inherit; text-decoration: none;
  transition: translate .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s var(--ui-ease);
}
/* Entrance (.ui-fade) and hover share the transition list: the entrance keeps its pace, the hover answers at once. */
.ui-js .lg .lg-related__link.ui-fade.is-in {
  transition: opacity .7s var(--ui-ease) calc(var(--d, 0) * 80ms), filter .7s var(--ui-ease) calc(var(--d, 0) * 80ms),
              transform .7s var(--ui-ease) calc(var(--d, 0) * 80ms),
              translate .25s var(--ui-ease), box-shadow .25s var(--ui-ease), border-color .2s var(--ui-ease);
}
body.ui-app .lg-related__link:hover { translate: 0 -2px; border-color: var(--ui-border-strong); box-shadow: var(--ui-shadow-lg); }
.lg-related__icon { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; border-radius: 11px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); }
.lg-related__text { display: grid; flex: 1 1 auto; gap: .1rem; min-width: 0; line-height: 1.35; }
.lg-related__text small { font-size: .875rem; color: var(--ui-muted); }
.lg-related__text strong { font-size: 1rem; font-weight: 650; letter-spacing: -.01em; color: var(--ui-fg); }
.lg-related__go { flex: 0 0 auto; font-size: 1.1rem; color: var(--ui-faint); transition: translate .25s var(--ui-ease), color .2s var(--ui-ease); }
.lg-related__link:hover .lg-related__go { color: var(--ui-fg); translate: 3px 0; }
@container lg (max-width: 30rem) { .lg-related { grid-template-columns: minmax(0, 1fr); } }

/* ── Phones and tablets ── */
/* The site's rule against sideways scroll (css/drobo.css, up to 1023px) makes <body> a scroll box that never scrolls,
   and then nothing can stay in view while the page moves. Clipping does the same job and lets the top bar and
   "On this page" stay put. A browser without `clip` keeps the site's rule: both bars then scroll away with the page. */
@media (max-width: 1023px) { body.ui-legal { overflow-x: clip; } }

@media (max-width: 640px) {
  .lg { --lg-gutter: 1rem; --lg-main-top: 1.25rem; }
  .lg-hero .ui-hero__inner { padding-top: 2rem; padding-bottom: 1.5rem; }
  .lg-hero .ui-lead { font-size: .9375rem; }
  .lg-section { padding: 1.5rem 1.25rem 1.6rem; }
  .lg-section p, .lg-section li, .lg-section h3 { font-size: .9375rem; }
  .lg-section h2 { font-size: 1.125rem; }
}

/* The narrowest phones (320px): the document's name in the top bar gives way (…), so the theme switch stays on screen. */
@media (max-width: 374px) {
  body.ui-legal .ui-crumbs, body.ui-legal .ui-crumbs ol, body.ui-legal .ui-crumbs li { min-width: 0; }
  body.ui-legal .ui-crumbs li > span { overflow: hidden; text-overflow: ellipsis; }
}

/* A picked section is reached at once. The site's glide (css/drobo.css) is a long ride down a document this size, and
   when the page is opened on a section (…/terms#billing) it aims before the text has settled and stops short. */
html { scroll-behavior: auto; }

/* ── On paper: the document alone, every section shown ── */
@media print {
  .ui-sidebar, .ui-topbar, .ui-subnav, .ui-dots, .lg-aside, .lg-related, .lg-anchor { display: none !important; }
  .ui-shell { display: block; }
  .ui-inset, body.ui-app .lg-doc { margin: 0; border: 0; box-shadow: none; }
  .lg-doc, .lg-section > * { max-width: none; }
  .lg-section { padding-right: 0; padding-left: 0; break-inside: avoid-page; }
  .ui-js .ui-fade { opacity: 1 !important; filter: none !important; transform: none !important; }
}