/* uso.dropnook.app — one stylesheet, no web fonts; the same family as dropnook.app.
   Light and dark follow the system, unless the ☀/☾ switch set data-theme on <html> (theme.js).
   The accent is the office's own: Unraid's orange (office.css: --brand-orange #ff8c2f),
   darkened in light mode so it reads as text on white. */
:root{
  --bg:#FAF7F3; --surface:#FFFFFF; --band:#F3EDE6; --ink:#1C1A19; --ink-2:#3B3632; --muted:#6B635D;
  --line:#E4DCD3; --accent:#B8500B; --accent-ink:#8A3D06; --accent-soft:#FCEBDD; --accent-2:#C62A22;
  --on-accent:#FFFFFF; --shadow:0 24px 60px -28px rgba(40,22,8,.42), 0 4px 14px -8px rgba(40,22,8,.16);
  --no:#C93A2E; --yes:#1E8A43; --yes-soft:#EAF6EE;
  --other-bg:#F4F1EE; --other-ink:#4A4440; --other-head:#6B635D;
  --avatar-bg:#F3EDE6;
  --radius:14px; color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121110; --surface:#1C1A19; --band:#171514; --ink:#F2EFEC; --ink-2:#D3CEC9; --muted:#A39B94;
    --line:#2F2A27; --accent:#FF9A4D; --accent-ink:#FFC08A; --accent-soft:#3A2414; --accent-2:#FF6A3D;
    --on-accent:#140A02; --shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 4px 14px -8px rgba(0,0,0,.6);
    --no:#F07167; --yes:#4CC77A; --yes-soft:#11261A;
    --other-bg:#1A1817; --other-ink:#ABA39C; --other-head:#A39B94;
    --avatar-bg:#262220;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121110; --surface:#1C1A19; --band:#171514; --ink:#F2EFEC; --ink-2:#D3CEC9; --muted:#A39B94;
  --line:#2F2A27; --accent:#FF9A4D; --accent-ink:#FFC08A; --accent-soft:#3A2414; --accent-2:#FF6A3D;
  --on-accent:#140A02; --shadow:0 24px 60px -28px rgba(0,0,0,.9), 0 4px 14px -8px rgba(0,0,0,.6);
  --no:#F07167; --yes:#4CC77A; --yes-soft:#11261A;
  --other-bg:#1A1817; --other-ink:#ABA39C; --other-head:#A39B94;
  --avatar-bg:#262220;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:76px}
body{margin:0; background:var(--bg); color:var(--ink);
     font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-text-size-adjust:100%}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
a:focus-visible, button:focus-visible, summary:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}
code{font:.9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; background:var(--accent-soft);
     color:var(--accent-ink); padding:.1em .35em; border-radius:4px; white-space:nowrap}
kbd{font:.88em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; padding:.05em .4em; border:1px solid var(--line);
    border-bottom-width:2px; border-radius:5px; background:var(--surface); color:var(--ink)}
h1,h2,h3{line-height:1.15; letter-spacing:-.02em; margin:0}
h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem); text-align:center; margin-bottom:14px}
h1 em, h2 em{font-style:normal; color:var(--accent)}   /* the key words of a heading, in the office's orange */
h3{font-size:1.08rem; letter-spacing:-.01em}
.wrap{max-width:1160px; margin:0 auto; padding:0 24px}
.narrow{max-width:760px}
section{padding:84px 0}
.band{background:var(--band)}
.sub{color:var(--muted); text-align:center; max-width:640px; margin:0 auto 34px}
.sub.wide{max-width:780px}
.center{text-align:center; justify-content:center}
.ctas + .sub{margin-top:18px}
.skip{position:absolute; left:-9999px; top:8px; z-index:20; background:var(--accent); color:var(--on-accent);
      padding:8px 14px; border-radius:8px; font-weight:650; text-decoration:none}
.skip:focus{left:12px}

/* Screenshots come in two sets: .lt (Unraid's white theme) and .dk (black theme). The one for the
   page's theme shows; the other is display:none and, being loading="lazy", is never fetched.
   data-theme is set by theme.js in <head>, so the right set is there from the first paint. */
:root .dk{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .lt{display:none}
  :root:not([data-theme="light"]) .dk{display:block}
}
:root[data-theme="dark"] .lt{display:none}
:root[data-theme="dark"] .dk{display:block}

/* ---------------------------------------------------------------- Header */
.top{position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 86%, transparent);
     -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line)}
.top-in{display:flex; align-items:center; gap:24px; height:64px}
.brand{flex:none}
.brand img{height:22px; width:auto}
.links{display:flex; gap:22px; margin-left:auto}
.links a{color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:550}
.links a:hover{color:var(--accent)}
.top-right{display:flex; align-items:center; gap:14px}
.langs{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.langs a{color:var(--muted); text-decoration:none; font-size:13px; font-weight:650; padding:6px 10px}
.langs a[aria-current="page"]{background:var(--accent); color:var(--on-accent)}
.langs a:focus-visible{outline-offset:-3px}
/* ☀/☾: the side the page shows is in the accent colour, the side chosen by hand is filled. */
.theme-switch{display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden}
.theme-switch[hidden]{display:none}
.theme-switch button{border:0; background:transparent; color:var(--muted); padding:7px 9px; line-height:0; cursor:pointer;
  transition:background .15s, color .15s}
.theme-switch button + button{border-left:1px solid var(--line)}
.theme-switch svg{width:16px; height:16px; display:block; fill:none; stroke:currentColor; stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round}
.theme-switch button:hover{background:var(--accent-soft); color:var(--accent)}
.theme-switch button.shown{color:var(--accent)}
.theme-switch button[aria-pressed="true"]{background:var(--accent); color:var(--on-accent)}
.theme-switch button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

/* ---------------------------------------------------------------- Buttons */
/* Filled buttons wear Unraid's red → orange, as the office's own buttons do. */
.btn{display:inline-block; background:linear-gradient(90deg, var(--accent-2), var(--accent)); color:var(--on-accent);
     text-decoration:none; font-weight:650; font-size:16px; padding:12px 22px; border-radius:10px; border:1px solid var(--accent);
     transition:filter .15s, background .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--line)}
.btn.ghost:hover{background:var(--accent-soft); filter:none}
.btn.small{font-size:14px; padding:7px 14px; border-radius:8px}
.ctas{display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 0}
.ctas .btn{display:inline-flex; flex-direction:column; align-items:center; justify-content:center}
.btn.two{line-height:1.25; padding:9px 22px}
.btn.two small{font-size:13.5px; font-weight:550; opacity:.85}

/* ---------------------------------------------------------------- Hero */
.hero{padding:72px 0 88px;
      background:radial-gradient(900px 520px at 85% 0%, var(--accent-soft), transparent 70%)}
.hero-in{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr); gap:56px; align-items:center}
.kicker{color:var(--accent); font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; margin:0 0 14px}
h1{font-size:clamp(2.3rem, 5.2vw, 3.7rem); font-weight:780; letter-spacing:-.03em}
.lead{font-size:1.18rem; color:var(--ink-2); margin:22px 0 0; max-width:34em}
.note{color:var(--muted); font-size:14px; margin:22px 0 0}
.hero-shot{display:block; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow);
           border:1px solid var(--line); transition:transform .2s}
.hero-shot:hover{transform:translateY(-2px)}
/* the team's faces in a row under the hero text */
.faces{display:flex; flex-wrap:wrap; gap:6px; margin:26px 0 0; padding:0; list-style:none}
.faces img{width:40px; height:40px; padding:5px; border-radius:50%; background:var(--avatar-bg); border:1px solid var(--line)}

/* ---------------------------------------------------------------- Why: usually ✗ / with the office ✓ */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.why{max-width:980px; margin:34px auto 0; background:var(--surface); border:1px solid var(--line);
     border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.why-head, .why li{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.15fr)}
.why-head > span{padding:12px 20px 12px 56px; font-size:12.5px; font-weight:700; letter-spacing:.07em;
               text-transform:uppercase; color:var(--other-head); background:var(--other-bg)}
.why-head > span + span{color:var(--yes); background:var(--yes-soft)}
.why ul{list-style:none; margin:0; padding:0}
.why li{border-top:1px solid var(--line)}
.why p{position:relative; margin:0; padding:15px 20px 15px 56px; font-size:15.5px; line-height:1.45}
.why .no{color:var(--other-ink); background:var(--other-bg)}
.why .yes{color:var(--ink); font-weight:600; background:var(--yes-soft)}
.why p::before{content:""; position:absolute; left:20px; top:14px; width:22px; height:22px; border-radius:50%;
               background:var(--no) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='m8 8 8 8M16 8l-8 8'/%3E%3C/svg%3E") center/13px no-repeat}
.why .yes::before{background:var(--yes) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}

/* ---------------------------------------------------------------- Cards: the team, the backups */
.grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px; margin-top:38px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px}
.card > svg{width:30px; height:30px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round;
          stroke-linejoin:round; margin-bottom:14px}
.card p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}
.person{display:flex; flex-direction:column}
.person header{display:flex; align-items:center; gap:14px; margin-bottom:12px}
.person header img{width:56px; height:56px; flex:none; padding:7px; border-radius:50%; background:var(--avatar-bg);
                   border:1px solid var(--line)}
.person .role{margin:2px 0 0; font-size:14px; color:var(--muted); line-height:1.4}
.person.lead{border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.badge{display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
       color:var(--accent-ink); background:var(--accent-soft); border-radius:999px; padding:2px 9px; margin-left:6px;
       vertical-align:2px}
.card.wide{grid-column:1 / -1; display:grid; grid-template-columns:auto minmax(0, 1fr); gap:22px; align-items:start;
           border-color:color-mix(in srgb, var(--accent) 45%, var(--line))}
.card.wide > img{width:72px; height:72px; padding:9px; border-radius:50%; background:var(--avatar-bg); border:1px solid var(--line)}
.card.wide ul{margin:12px 0 0; padding-left:20px; color:var(--ink-2); font-size:15.5px}
.card.wide li + li{margin-top:4px}

/* ---------------------------------------------------------------- Everywhere: search, languages, themes, phone */
.split{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:48px; align-items:center; margin-top:38px}
.split h2, .split .sub{text-align:left; margin-left:0}
.mini{list-style:none; padding:0; margin:0; display:grid; gap:18px}
.mini li{display:grid; grid-template-columns:30px minmax(0, 1fr); gap:14px}
.mini svg{width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:2px}
.mini p{margin:4px 0 0; color:var(--ink-2); font-size:15.5px}
.framed{display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow)}

/* ---------------------------------------------------------------- Screenshots */
.shots{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px}
.shots a{color:var(--ink-2); text-decoration:none; font-weight:600; font-size:15px}
.shots picture, .shots img{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--line);
               box-shadow:var(--shadow); margin-bottom:10px; transition:transform .2s}
.shots a:hover img{transform:translateY(-3px)}
.shots a:hover{color:var(--accent)}
.shots-note{color:var(--muted); font-size:14px; text-align:center; margin:26px auto 0; max-width:640px}

/* the gallery: a picture large, browse with the arrow keys (gallery.js) */
.lightbox{border:0; padding:0; margin:auto; max-width:min(1600px, 96vw); width:96vw; background:transparent; color:#F2EFEC; overflow:visible}
.lightbox::backdrop{background:rgba(8,6,5,.88)}
.lightbox figure{margin:0}
.lightbox img{width:100%; max-height:calc(100vh - 150px); object-fit:contain; border-radius:10px; background:#1C1A19}
.lightbox figcaption{display:flex; align-items:center; justify-content:center; gap:14px; margin-top:12px; font-weight:600; text-align:center}
.lightbox button{font:inherit; font-size:20px; line-height:1; width:42px; height:42px; border-radius:50%; cursor:pointer;
                 border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#FFFFFF; flex:none}
.lightbox button:hover{background:rgba(255,255,255,.18)}
.lightbox button:focus-visible{outline:3px solid #FF9A4D; outline-offset:2px}
.lightbox .close{position:fixed; top:14px; right:14px}
.lightbox .count{font-weight:500; opacity:.7; font-size:14px}

/* ---------------------------------------------------------------- How: page → mailbox → agent */
.flow{list-style:none; padding:0; margin:38px auto 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:34px; max-width:980px}
.flow li{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px}
.flow li + li::before{content:""; position:absolute; left:-30px; top:50%; width:26px; height:26px; margin-top:-13px;
     --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-5-5 5 5-5 5'/%3E%3C/svg%3E");
     background:var(--accent); -webkit-mask:var(--arrow) center/22px no-repeat; mask:var(--arrow) center/22px no-repeat}
.flow h3{font-size:1rem}
.flow p{margin:6px 0 0; color:var(--ink-2); font-size:15px}
.flow .where{display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:6px}

/* ---------------------------------------------------------------- Security */
.checks{list-style:none; padding:0; margin:34px auto 0; max-width:820px; display:grid; gap:16px}
.checks li{position:relative; padding:18px 20px 18px 56px; background:var(--surface); border:1px solid var(--line);
           border-radius:var(--radius); color:var(--ink-2)}
.checks li::before{content:""; position:absolute; left:20px; top:20px; width:22px; height:22px; border-radius:50%;
           background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/14px no-repeat}
.checks b{color:var(--ink)}

/* ---------------------------------------------------------------- Steps (how it works, install) */
.steps{list-style:none; padding:0; margin:38px 0 0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
       gap:20px; counter-reset:step}
.steps li{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px 24px;
          counter-increment:step; min-width:0}
.steps li::before{content:counter(step); display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
          background:var(--accent-soft); color:var(--accent-ink); font-weight:750; margin-bottom:14px}
.steps p{color:var(--ink-2); margin:8px 0 0; font-size:15.5px}
.url{display:flex; align-items:stretch; gap:8px; max-width:1000px; margin:26px auto 0}
.url code{flex:1; min-width:0; display:block; white-space:normal; padding:12px 14px; font-size:14px; line-height:1.45; border-radius:10px;
          border:1px solid var(--line); background:var(--surface); color:var(--ink); overflow-wrap:anywhere; user-select:all}
.url button{font:inherit; font-size:14px; font-weight:650; padding:0 16px; border-radius:10px; cursor:pointer;
            border:1px solid var(--line); background:var(--surface); color:var(--accent); flex:none}
.url button:hover{background:var(--accent-soft)}
.url button[hidden]{display:none}
.tip{max-width:820px; margin:22px auto 0; padding:14px 20px 14px 52px; position:relative; font-size:15.5px;
     color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)}
.tip::before{content:"i"; position:absolute; left:18px; top:15px; width:22px; height:22px; border-radius:50%;
     display:grid; place-items:center; background:var(--accent); color:var(--on-accent);
     font:700 14px/1 Georgia,"Times New Roman",serif; font-style:italic}
.tip b{color:var(--ink)}
.tipjar{color:var(--muted); font-size:15px; text-align:center; max-width:680px; margin:30px auto 0}

/* ---------------------------------------------------------------- FAQ */
details{background:var(--surface); border:1px solid var(--line); border-radius:12px; margin:12px 0; padding:0 20px}
summary{cursor:pointer; font-weight:650; padding:16px 0; list-style:none; position:relative; padding-right:28px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; position:absolute; right:0; top:12px; font-size:22px; color:var(--accent); font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:0 0 18px; color:var(--ink-2)}

/* ---------------------------------------------------------------- Footer */
.foot{border-top:1px solid var(--line); padding:34px 0 48px; color:var(--muted); font-size:14.5px; text-align:center}
.foot b{color:var(--ink)}
.foot .fine{font-size:13px; max-width:760px; margin:10px auto 0}

/* ---------------------------------------------------------------- Narrow screens */
@media (max-width:1060px){
  .links{gap:16px}
  .links a{font-size:14px}
}
@media (max-width:960px){
  .hero-in, .split{grid-template-columns:1fr; gap:40px}
  .grid,.shots,.steps{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .links{display:none}
  .top-right{margin-left:auto}
  .flow{grid-template-columns:1fr; gap:30px; max-width:560px}
  .flow li + li::before{left:50%; top:-28px; margin:0 0 0 -13px; transform:rotate(90deg)}
}
@media (max-width:620px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  section{padding:60px 0}
  .hero{padding:44px 0 60px}
  .grid,.shots,.steps{grid-template-columns:1fr}
  .why-head{display:none}
  .why li{grid-template-columns:1fr}
  .why .no{padding-bottom:6px}
  .why .yes{background:transparent}
  .brand img{height:16px}
  .top-in{gap:12px}
  .top-right{gap:8px}
  .top-right .btn{display:none}
  .card.wide{grid-template-columns:1fr}
  .url{flex-direction:column}
  .url button{padding:10px 16px}
}
/* Sliding in on scroll (reveal.js) */
.reveal{opacity:0; transform:translateY(22px);
        transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}}