/* The signed-in home (readme/PLAN-HOME.md; js/home.js). Shown only once someone is
   signed in (html.dmH-in); visitors keep the front page. One color per job
   (readme/COLOR.md): the accent only on what you can tap; gray is information;
   BJ's atlas mark is green (the kind of timeline, data like a track color). */
html.dmH-in body > .wrap { display:none; }
/* The front page pads its body and styles its own headings; the home has its own. */
html.dmH-in:not(.dmH-about) body { padding:0; }
html.dmH-in.dmH-about body { padding-top:0; }
.dmH h2 { font-family:inherit; font-size:28px; letter-spacing:-.015em; text-transform:none; opacity:1; font-weight:700; margin:0; color:var(--fg); }
.dmH > * { min-width:0; }
html.dmH-in.dmH-about body > .wrap { display:block; }
html.dmH-in.dmH-about .dmH { display:none; }
.dmH-back { display:none; }
html.dmH-in.dmH-about .dmH-back { display:block; position:sticky; top:0; z-index:5; padding:12px 20px; background:#06080d; border-bottom:1px solid #22232a; font:14px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; }
.dmH-back a { color:#5ab4ff; text-decoration:none; }

.dmH { --fg:#e6e5e1; --dim:#9a9a98; --faint:#6a6a6e; --edge:#24252b; --panel:#0e0f13; --accent:#5ab4ff; --green:#3fa34d; --dash:#4c8de0;
  display:grid; grid-template-columns:200px 1fr; grid-template-rows:auto 1fr; min-height:100vh; box-sizing:border-box; padding:14px 22px 22px 18px; gap:0 18px;
  color:var(--fg); font:15px/1.45 -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.dmH a { color:inherit; text-decoration:none; }
.dmH button { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
.dmH-ic { width:18px; height:18px; display:block; flex:none; }

.dmH-top { grid-column:1 / -1; display:flex; align-items:center; gap:22px; padding:0 0 14px; }
.dmH-logo img { height:40px; display:block; }   /* one logo size per device, as the timelines draw it: 40px laptop, 36px phone */
.dmH-search { flex:1; max-width:420px; display:flex; align-items:center; gap:10px; background:#1b1c21; border-radius:22px; padding:0 16px; height:40px; color:var(--faint); }
.dmH-search input { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--fg); font:inherit; }
.dmH-search input::placeholder { color:var(--faint); }
.dmH-search:focus-within { box-shadow:0 0 0 1.5px var(--accent); }
.dmH-sp { flex:1; }
.dmH-me { width:38px; height:38px; border-radius:50%; background-color:#6f8a5c !important; background-position:center !important; background-size:cover !important; background-repeat:no-repeat !important; color:#fff !important; font:600 16px/38px -apple-system,sans-serif !important;
  text-align:center; box-shadow:0 0 0 2px #06080d, 0 0 0 3px rgba(230,229,225,.25); }
.dmH-plus { width:34px; height:34px; border-radius:50%; border:1px solid #3a3a40 !important; color:var(--accent) !important; font-size:22px !important; line-height:30px; }

.dmH-nav { display:flex; flex-direction:column; gap:4px; padding-top:30px; }
.dmH-nav a { display:flex; align-items:center; gap:13px; padding:9px 12px; border-radius:8px; font-weight:500; }
.dmH-nav a:hover { background:rgba(230,229,225,.05); }
.dmH-nav a.on { background:rgba(230,229,225,.09); }
.dmH-nav .dmH-ic { width:20px; height:20px; }
.dmH-new { margin:0 0 16px; padding:8px 12px !important; border:1px solid #3a3a40 !important; border-radius:20px; color:var(--accent) !important; font-size:14px !important; font-weight:500; }
.dmH-nav .dmH-about { margin-top:32px; color:var(--dim); font-weight:400; font-size:13.5px; }

.dmH-main { background:var(--panel); border-radius:14px; padding:24px 26px 26px; min-width:0; }
.dmH-sec { font:600 11px "SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; margin:26px 0 10px; }
.dmH-sec small { font:inherit; color:#4d4d52; margin-left:6px; }
.dmH-dim { color:var(--dim); padding:20px 4px; }
.dmH-blank { border:1.5px dashed #34353c; border-radius:12px; min-height:110px; display:flex; align-items:center; justify-content:center; text-align:center;
  color:var(--faint); font-size:13.5px; padding:18px 24px; margin-top:6px; }

.dmH-hero { display:grid; grid-template-columns:1.4fr 1fr; border-radius:12px; overflow:hidden; background:#15161b; border:1px solid var(--edge); }
.dmH-hero .pic { min-height:190px; background:#202127 center/cover no-repeat; }
.dmH-hero .pic.none { display:flex; align-items:center; justify-content:center; color:#55565c; font-size:64px; font-weight:700; }
.dmH-hero .pic.none .dmH-ic { width:72px; height:72px; color:var(--green); }
.dmH-hero .t { padding:20px 22px; display:flex; flex-direction:column; gap:6px; }
.dmH-hero .k { font:600 10.5px "SF Mono",ui-monospace,Menlo,monospace; letter-spacing:.12em; color:var(--faint); text-transform:uppercase; }
.dmH-hero b { font-size:24px; letter-spacing:-.01em; }
.dmH-hero .d { color:var(--dim); font-size:14px; }
.dmH-hero .go { margin-top:auto; align-self:flex-start; background:var(--accent); color:#06080d; font-weight:600; font-size:14px; border-radius:18px; padding:7px 16px; }
.dmH-learn { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.dmH-learn div { background:#15161b; border:1px solid var(--edge); border-radius:10px; padding:13px 15px; font-weight:500; color:var(--dim); }
.dmH-learn small { display:block; font-weight:400; font-size:12.5px; color:var(--faint); margin-top:3px; }
.dmH-help { display:flex; gap:24px; color:var(--faint); font-size:14px; flex-wrap:wrap; }
.dmH-about2 { display:block; margin-top:26px; color:var(--dim) !important; font-size:14px; }

.dmH-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:18px 0 8px; }
.dmH-chips { display:flex; gap:8px; flex-wrap:wrap; }
.dmH-chips button { font-size:13px !important; padding:5px 13px !important; border-radius:16px; border:1px solid #33343b !important; color:var(--dim) !important; }
.dmH-chips button.on { background:rgba(230,229,225,.12) !important; color:var(--fg) !important; border-color:transparent !important; }
.dmH-seg { display:flex; border:1px solid #33343b; border-radius:18px; overflow:hidden; }
.dmH-seg button { padding:6px 12px !important; color:var(--dim) !important; }
.dmH-seg button.on { background:rgba(230,229,225,.12) !important; color:var(--fg) !important; }

.dmH-table { width:100%; border-collapse:collapse; font-size:14.5px; }
.dmH-table th { text-align:left; font-weight:500; color:var(--dim); font-size:13px; padding:9px 10px; border-bottom:1px solid var(--edge); white-space:nowrap; }
.dmH-table td { padding:11px 10px; border-bottom:1px solid var(--edge); white-space:nowrap; }
.dmH-table tbody tr:hover td { background:rgba(230,229,225,.035); }
.dmH-table td.name { width:100%; white-space:normal; }
.dmH-table td.name a { display:flex; align-items:center; gap:13px; }
.dmH-table td.dim { color:var(--dim); }
.dmH-kind { width:20px; display:inline-flex; justify-content:center; flex:none; }
.dmH-kind i { width:16px; height:2.5px; border-radius:2px; background:var(--dash); display:block; }
.dmH-kind.atlas { color:var(--green); }
.dmH-kind.atlas .dmH-ic { width:20px; height:20px; }
.dmH-acc { color:var(--faint); display:inline-flex; margin-left:-4px; }
.dmH-acc .dmH-ic { width:15px; height:15px; }
.dmH-owner { display:inline-flex; align-items:center; gap:9px; color:var(--dim); }
.dmH-owner i { width:26px; height:26px; border-radius:50%; background:#6f8a5c center/cover no-repeat; color:#fff; font:600 12px/26px -apple-system,sans-serif; text-align:center; font-style:normal; }
.dmH-dots { color:var(--dim) !important; padding:4px !important; border-radius:6px; }
.dmH-dots:hover { background:rgba(230,229,225,.08) !important; color:var(--fg) !important; }

.dmH-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; margin-top:4px; }
.dmH-card { background:#15161b; border:1px solid var(--edge); border-radius:10px; overflow:hidden; display:block; }
.dmH-card:hover { border-color:#3a3b42; }
.dmH-card .pic { display:flex; align-items:center; justify-content:center; height:110px; background:#202127 center/cover no-repeat; color:#55565c; font-size:34px; font-weight:700; }
.dmH-card .t { display:flex; flex-direction:column; gap:5px; padding:11px 13px 13px; }
.dmH-card b { font-weight:500; }
.dmH-card small { display:flex; align-items:center; gap:8px; color:var(--dim); font-size:12.5px; }

/* A phone: the menu becomes tabs at the bottom; Owner and the date's heading go. */
html.dmH-phone .dmH { grid-template-columns:1fr; padding:calc(10px + env(safe-area-inset-top)) 14px calc(76px + env(safe-area-inset-bottom)); }
html.dmH-phone .dmH-top { gap:8px; }
html.dmH-phone .dmH-search input::placeholder { font-size:14px; }   /* the typed text stays 16px (no iPhone zoom on tap) */
html.dmH-phone .dmH-logo img { height:36px; }
html.dmH-phone .dmH-logo img.w { height:38px; margin-left:2.5px; }   /* the W (BJ, 2026-10-25), its left edge on the page's headings; 38px, the height of your circle on every phone page */
html.dmH-phone .dmH-search { height:36px; padding:0 12px; }
html.dmH-phone .dmH-nav { position:fixed; left:0; right:0; bottom:0; z-index:4; flex-direction:row; justify-content:space-around; gap:0; padding:8px 0 calc(10px + env(safe-area-inset-bottom));
  background:#0a0b0f; border-top:1px solid var(--edge); }
html.dmH-phone .dmH-nav a { flex-direction:column; gap:4px; font-size:11px; padding:4px 14px; color:var(--dim); background:none; }
html.dmH-phone .dmH-nav a.on { color:var(--fg); }
html.dmH-phone .dmH-main { background:none; padding:6px 2px; }
html.dmH-phone .dmH h2 { font-size:22px; }
html.dmH-phone .dmH-hero { grid-template-columns:1fr; }
html.dmH-phone .dmH-hero .pic { min-height:150px; }
html.dmH-phone .dmH-learn { grid-template-columns:1fr; }
html.dmH-phone .dmH-table td { padding:12px 6px; }
html.dmH-phone .dmH-table td.name { white-space:normal; }
html.dmH-phone .dmH-search { flex:1; max-width:none; min-width:0; }
html.dmH-phone .dmH-sp { display:none; }
html.dmH-phone .dmH-cards { grid-template-columns:1fr 1fr; }

/* The invitation (mockup-cta.html): under the logo, and again at the end. */
.dmH-cta { font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; }
.dmH-cta.first { border-radius:14px; padding:20px 26px 24px; margin:0 0 34px; background:linear-gradient(180deg,#14151b,#0d0e13); border:1px solid #262833; }
.dmH-cta.last { text-align:center; border-top:1px solid rgba(255,255,255,.1); margin-top:56px; padding:40px 0 8px; }
.dmH-cta h3 { margin:0; font-size:30px; font-weight:700; letter-spacing:-.025em; line-height:1.15; }
.dmH-cta.last h3 { font-size:27px; }
.dmH-cta p { margin:8px 0 20px; font-size:16px; line-height:1.5; color:rgba(240,239,236,.62); max-width:520px; }
.dmH-cta.last p { margin-left:auto; margin-right:auto; }
.dmH-cta .go { font:600 15px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; color:#06080d; background:var(--accent);
  border:0; border-radius:22px; padding:11px 22px; cursor:pointer; transition:filter .15s; }
.dmH-cta .go:hover { filter:brightness(1.1); }
.dmH-cta .have { margin-top:14px; font-size:14px; color:rgba(240,239,236,.55); }
.dmH-cta .have button { font:inherit; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; }
.dmH-cta-tl { position:relative; height:62px; margin:0 0 12px; font:10px "SF Mono",ui-monospace,Menlo,monospace; }
.dmH-cta-tl .ln { position:absolute; left:0; right:0; top:30px; height:2px; border-radius:2px; background:#c74a44; }
.dmH-cta-tl .d { position:absolute; top:31px; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); }
.dmH-cta-tl .ring { position:absolute; top:31px; width:18px; height:18px; border-radius:50%; border:1.5px dashed rgba(240,239,236,.7); transform:translate(-50%,-50%); box-sizing:border-box; }
.dmH-cta-tl span { position:absolute; transform:translateX(-50%); white-space:nowrap; color:rgba(240,239,236,.42); }
.dmH-cta-tl .up { top:6px; } .dmH-cta-tl .dn { top:43px; }
.dmH-cta-tl .you { color:#f0efec; }
html.dmH-phone .dmH-cta.first { padding:16px 18px 20px; }
html.dmH-phone .dmH-cta h3 { font-size:24px; }
html.dmH-phone .dmH-cta p { font-size:15px; }
html.dmH-phone .dmH-cta .go { width:100%; padding:13px; }
html.dmH-phone .dmH-cta-tl span.up, html.dmH-phone .dmH-cta-tl span:not(.you) { display:none; }

/* Home's welcome (mockup-welcome.html): the invitation card with you on its line. */
.dmH .dmH-wel { margin:0 0 6px; }
.dmH-cta-tl .me { position:absolute; left:86%; top:31px; width:30px; height:30px; border-radius:50%; transform:translate(-50%,-50%); font-style:normal;
  background-color:#6f8a5c; background-size:cover; background-position:center; color:#fff; font:600 14px/30px -apple-system,BlinkMacSystemFont,sans-serif; text-align:center;
  box-shadow:0 0 0 2px #121318, 0 0 0 3.5px #c74a44; }
.dmH-cta-tl .name { top:50px; color:#f0efec; font:600 12px -apple-system,BlinkMacSystemFont,sans-serif; }
.dmH-cta .btns { display:flex; gap:10px; flex-wrap:wrap; }
.dmH .dmH-cta .go { display:inline-block; text-decoration:none; }
.dmH .dmH-cta .ghost { font:500 15px -apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif; color:var(--accent); background:none;
  border:1px solid rgba(90,180,255,.55); border-radius:22px; padding:10px 20px; cursor:pointer; }
.dmH .dmH-cta .ghost:hover { background:rgba(90,180,255,.1); }
.dmH-cta .not { margin-top:18px; padding-top:13px; border-top:1px solid rgba(255,255,255,.07); font-size:14px; color:rgba(240,239,236,.5); }
.dmH .dmH-cta .not button { font:inherit; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; }
html.dmH-phone .dmH-cta .btns { flex-direction:column; }
html.dmH-phone .dmH .dmH-cta .ghost { width:100%; padding:13px; }
html.dmH-phone .dmH-cta .go { text-align:center; }

/* The icon credit, at the foot of Home. */
.dmH .dmH-credit { margin-top:34px; font-size:11.5px; color:var(--faint); }
.dmH .dmH-credit a { color:inherit; text-decoration:underline; text-decoration-color:rgba(230,229,225,.25); text-underline-offset:2px; }
.dmH .dmH-credit a:hover { color:var(--dim); }

/* Discover: an atlas without a picture shows the atlas mark, large. */
.dmH-card .pic .dmH-kind.atlas .dmH-ic { width:46px; height:46px; }