/* The product shell: the home page's look (top bar, type, cards, buttons, fields, switches, tabs)
   shared by the builder, dashboard, sign-in page and owner console, so they read as one product.
   Every color, font and shape comes from brand.css. Phone first: tabs along the bottom; from
   900px wide the tabs become a menu down the side, under the top bar. */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--brand-paper); color:var(--brand-ink); font:400 var(--brand-text)/1.5 var(--brand-font-ui)}
a{color:var(--brand-accent)}
:focus-visible{outline:2px solid var(--brand-accent); outline-offset:3px}
.icon{width:24px; height:24px; flex:none; display:block}
.icon path{stroke-width:1.6}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* the top bar: the name (its H the solid mark), like the home page */
.top{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px; min-height:60px;
  padding:max(0px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 0 max(18px, env(safe-area-inset-left, 0px));
  background:var(--brand-bar-glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--brand-rule)}
.brand{display:flex; align-items:center; gap:9px; min-height:var(--brand-tap); color:var(--brand-ink); text-decoration:none; flex:none}
.word .hm{display:inline-block; height:.7em; width:auto; aspect-ratio:828.3/773; margin:0 .02em 0 .03em; vertical-align:baseline; fill:var(--brand-accent-big); position:relative; top:.01em}
.word{font:400 22px/1 var(--brand-font-body); letter-spacing:-.01em; white-space:nowrap}
.word span{color:var(--brand-ink-2)}
.top-tag{font:600 12px/1.4 var(--brand-font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink-2)}
.top-sp{flex:1}
.top-link{display:inline-flex; align-items:center; gap:6px; min-height:var(--brand-tap); padding:0 4px; color:var(--brand-ink); font-weight:500; text-decoration:none; flex:none}
.top-link .icon{width:20px; height:20px}

/* type */
.eyebrow{margin:0; font:600 12px/1.4 var(--brand-font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink-2)}
.screen-title{font:400 40px/1.05 var(--brand-font-body); letter-spacing:-.015em; margin:6px 0 12px; overflow-wrap:anywhere}
.screen-title em{display:block; font-weight:300}
.lede{color:var(--brand-ink-2); margin:0 0 18px; max-width:60ch}
.small{color:var(--brand-ink-2); font-size:var(--brand-text); margin:10px 0}
.empty{color:var(--brand-ink-2); padding:14px 16px; margin:0}
.back{display:inline-flex; align-items:center; gap:4px; min-height:var(--brand-tap); margin:0 0 2px -6px; padding:0 6px; color:var(--brand-ink); font-weight:500; text-decoration:none}
.back .icon{width:20px; height:20px}

/* the linen texture, in a few spots only */
.fabric{position:relative; isolation:isolate; background:var(--brand-panel)}
.fabric::before{content:""; position:absolute; inset:0; z-index:-1; background:url(/brand/fabric.jpg) center/620px; mix-blend-mode:multiply; opacity:.22; pointer-events:none}

/* the frame: top bar, tabs, the screen */
.dash{min-height:100vh; padding-bottom:calc(76px + env(safe-area-inset-bottom, 0px))}
.tabs{position:fixed; z-index:20; left:0; right:0; bottom:0; display:flex;
  padding:0 max(4px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-left, 0px));
  background:var(--brand-bar-glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--brand-rule)}
.tab{flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:68px; padding:6px 2px;
  color:var(--brand-ink-2); text-decoration:none; font:600 12px/1 var(--brand-font-ui); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.tab.on{color:var(--brand-ink)}
.tab.on .icon path{stroke-width:2.1}
.tab.wide{display:none}
.screen{max-width:980px; margin:0 auto; padding:22px max(18px, env(safe-area-inset-right, 0px)) 32px max(18px, env(safe-area-inset-left, 0px))}

@media (min-width:900px){
  .top{min-height:68px; padding:0 32px}
  .dash{display:grid; grid-template-columns:250px minmax(0, 1fr); grid-template-rows:auto 1fr; padding-bottom:0}
  .dash > .top{grid-column:1 / -1}
  .tabs{position:sticky; top:68px; grid-column:1; grid-row:2; height:calc(100vh - 68px); flex-direction:column; gap:4px;
    padding:20px 14px; background:var(--brand-paper); -webkit-backdrop-filter:none; backdrop-filter:none; border-top:0; border-right:1px solid var(--brand-rule)}
  .tab{flex:none; flex-direction:row; justify-content:flex-start; gap:12px; min-height:48px; padding:0 14px; border-radius:12px;
    font:500 var(--brand-text)/1 var(--brand-font-ui); letter-spacing:0; text-transform:none}
  .tab.on{background:var(--brand-panel)}
  .tab.on .icon path{stroke-width:1.9}
  .tab.wide{display:flex}
  .tab.narrow{display:none}
  .screen{grid-column:2; width:100%; padding:30px 40px 56px; margin:0}
  .screen-title{font-size:48px}
}

/* groups of rows, like a phone's Settings app */
.group{margin:0 0 28px}
.group-title{font:600 12px/1.4 var(--brand-font-ui); letter-spacing:.16em; text-transform:uppercase; color:var(--brand-ink-2); margin:0 0 10px}
.group-lede{color:var(--brand-ink-2); margin:0 0 12px}
.rows{background:var(--brand-card); border-radius:var(--brand-radius-md); box-shadow:inset 0 0 0 1px var(--brand-line); overflow:hidden}
.drow{display:flex; align-items:center; gap:14px; width:100%; min-height:60px; padding:10px 16px; margin:0;
  font:inherit; color:inherit; text-align:left; text-decoration:none; background:none; border:0; border-top:1px solid var(--brand-rule)}
.rows > .drow:first-child, .rows > :first-child .drow:first-child{border-top:0}
.drow.tap{cursor:pointer}
.drow.tap:active{background:var(--brand-paper)}
.row-icon{display:grid; place-items:center; width:38px; height:38px; flex:none; border-radius:10px; background:var(--brand-panel); color:var(--brand-ink)}
.row-icon .icon{width:20px; height:20px}
.row-text{flex:1; min-width:0; display:flex; flex-direction:column}
.row-label{overflow-wrap:anywhere}
.row-sub{color:var(--brand-ink-2); font-size:var(--brand-text); line-height:1.35; overflow-wrap:anywhere}
.row-value{color:var(--brand-ink-2); font-variant-numeric:tabular-nums; flex:none}
.row-go{color:var(--brand-ink-2); display:flex; flex:none}
.row-go .icon{width:20px; height:20px}
.row-btns{display:flex; flex-wrap:wrap; gap:10px; padding:12px 16px; border-top:1px solid var(--brand-rule)}
.rows > .dmsg{padding:0 16px}

/* switches */
.switch-row{cursor:pointer}
.switch{appearance:none; -webkit-appearance:none; flex:none; width:52px; height:32px; margin:0; border-radius:999px; position:relative; cursor:pointer;
  background:var(--brand-line); transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%; background:var(--brand-card); box-shadow:var(--brand-shadow); transition:transform .2s}
.switch:checked{background:var(--brand-ink)}
.switch:checked::after{transform:translateX(20px)}
.switch:disabled{opacity:.6}

/* buttons: solid ink, or an ink outline; clay on hover, like the home page */
.dbtn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:10px 20px;
  font:500 var(--brand-text)/1.2 var(--brand-font-ui); text-decoration:none; cursor:pointer; border-radius:var(--brand-radius);
  color:var(--brand-ink); background:transparent; border:0; box-shadow:inset 0 0 0 1.5px var(--brand-ink); transition:background .2s, color .2s, box-shadow .2s}
@media (hover:hover){.dbtn:hover{background:var(--brand-panel)}}
.dbtn.solid{color:var(--brand-paper); background:var(--brand-ink); box-shadow:none}
@media (hover:hover){.dbtn.solid:hover{background:var(--brand-accent); color:var(--brand-accent-ink)}}
.dbtn.danger{color:var(--brand-danger); box-shadow:inset 0 0 0 1.5px var(--brand-danger)}
.dbtn.danger.armed{color:var(--brand-accent-ink); background:var(--brand-danger)}
.dbtn:disabled{opacity:.5; cursor:default}
.dbtn .icon{width:19px; height:19px}
.btns{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0}

/* fields */
.dform{display:grid; gap:10px; margin:0 0 16px}
.dlabel{display:block; font-weight:500}
.dinput, .dform select, .dform textarea{display:block; width:100%; min-height:52px; font:inherit; padding:12px 14px;
  color:var(--brand-ink); background:var(--brand-card); border:1px solid var(--brand-line); border-radius:var(--brand-radius)}
.dinput:focus, .dform select:focus, .dform textarea:focus{outline:2px solid var(--brand-ink); outline-offset:1px}
.dinput.pin{font-size:22px; letter-spacing:.3em; font-variant-numeric:tabular-nums; max-width:220px}
.tag{font-weight:400; color:var(--brand-ink-2); margin-left:6px}
.dmsg{min-height:1.4em; margin:8px 0}
.dmsg.bad{color:var(--brand-danger)}

/* choices: a card each, the picked one outlined in ink */
.choices{border:0; padding:0; margin:0; display:grid; gap:10px}
.choice{display:flex; gap:12px; align-items:flex-start; padding:16px; border-radius:var(--brand-radius-md); background:var(--brand-card); box-shadow:inset 0 0 0 1px var(--brand-line); cursor:pointer}
.choice.on{box-shadow:inset 0 0 0 2px var(--brand-ink)}
.choice input{width:22px; height:22px; margin:2px 0 0; accent-color:var(--brand-ink); flex:none}
.choice span{display:flex; flex-direction:column}
.choice small{color:var(--brand-ink-2); font-size:var(--brand-text)}

/* chips: filters and segmented picks */
.chips, .segs{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px}
.chip, .seg{min-height:var(--brand-tap); padding:8px 16px; font:500 var(--brand-text)/1.2 var(--brand-font-ui); cursor:pointer; white-space:nowrap;
  color:var(--brand-ink); background:var(--brand-card); border:0; box-shadow:inset 0 0 0 1px var(--brand-line); border-radius:999px}
.chip.on, .seg.on{color:var(--brand-paper); background:var(--brand-ink); box-shadow:none}

/* a plain card */
.made{padding:16px 18px; margin:0 0 16px; border-radius:var(--brand-radius-md); background:var(--brand-card); box-shadow:inset 0 0 0 1px var(--brand-line)}
.made p{margin:0 0 8px}

/* big numbers: countdowns and counts */
.counts{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin:0 0 24px}
.count{display:flex; flex-direction:column; padding:16px; border-radius:var(--brand-radius-md); background:var(--brand-card); box-shadow:inset 0 0 0 1px var(--brand-line)}
.count b{font:400 40px/1 var(--brand-font-body); font-variant-numeric:tabular-nums; margin-bottom:6px}
.count small{color:var(--brand-ink-2); font-size:var(--brand-text); overflow-wrap:anywhere}

/* forms of details: groups of fields, pairs side by side, links, hints, the address check's map (builder, dashboard, editor) */
.form-group{display:grid; gap:4px; padding:14px 16px}
.dfield{margin:0 0 10px}
.dfield .dlabel{margin:0 0 6px}
.pair{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.links{border:0; padding:0; margin:6px 0 10px; display:grid; gap:10px}
.link-row{display:grid; gap:0; padding:14px; border-radius:var(--brand-radius-md); box-shadow:inset 0 0 0 1px var(--brand-line)}
.link-row .dbtn{justify-self:start}
@media (min-width:700px){ .link-row{grid-template-columns:1fr 2fr; column-gap:12px} .link-row .dbtn{grid-column:1 / -1} }
.hint{margin:0 0 6px; color:var(--brand-ink-2); font-size:var(--brand-text); line-height:1.4}
.form-group.bare{padding:0}
.found{display:grid; gap:6px; margin:4px 0}
.found .dlabel{display:flex; align-items:center; gap:6px; color:var(--brand-ok)}
.found-place{margin:0; overflow-wrap:anywhere}
.map{position:relative; height:220px; overflow:hidden; border-radius:var(--brand-radius-md); box-shadow:inset 0 0 0 1px var(--brand-line); background:var(--brand-paper)}
.map-tiles{position:absolute; left:50%; top:50%; display:grid; grid-template-columns:repeat(3, 256px); width:768px}
.map-tiles img{display:block; width:256px; height:256px}
.map.opens{cursor:pointer}
/* "Move the pin": the full-screen map, the pin fixed in the middle */
.bigmap{position:fixed; inset:0; z-index:150; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; background:var(--brand-paper); color:var(--brand-ink)}
.bm-top{display:flex; align-items:center; gap:12px; padding:calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom:1px solid var(--brand-rule)}
.bm-top p{flex:1; margin:0; font-weight:500; line-height:1.35}
.bm-map{position:relative; overflow:hidden; touch-action:none; user-select:none; cursor:grab; background:var(--brand-panel)}
.bm-map:active{cursor:grabbing}
.bm-map img{position:absolute; left:0; top:0; width:256px; height:256px; max-width:none; pointer-events:none}
.bm-map .map-pin svg{width:52px}
.bm-zoom{position:fixed; z-index:151; right:16px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); display:grid; gap:8px}
.bm-zoom button{width:52px; height:52px; border-radius:var(--brand-radius-md); border:1px solid var(--brand-line); background:var(--brand-card); color:var(--brand-ink); font:500 28px/1 var(--brand-font-ui); cursor:pointer}
.bm-zoom button[disabled]{opacity:.4; cursor:default}
.bm-foot{display:flex; justify-content:center; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid var(--brand-rule)}
.bm-foot .dbtn{width:100%; max-width:440px}
.map-pin{position:absolute; left:50%; top:50%; transform:translate(-50%, -91%); pointer-events:none; line-height:0}
.map-pin svg{display:block; width:40px; height:auto; overflow:visible; filter:drop-shadow(0 3px 4px color-mix(in srgb, var(--brand-frame) 40%, transparent))}
.pin-body{fill:var(--brand-accent); stroke:var(--brand-card); stroke-width:2.5}
.pin-dot{fill:var(--brand-card)}
.pin-ground{fill:color-mix(in srgb, var(--brand-frame) 30%, transparent)}
.pin-btns{display:flex; flex-wrap:wrap; gap:10px}
.map-credit{position:absolute; right:0; bottom:0; padding:2px 6px; font-size:11px; background:var(--brand-card); color:var(--brand-ink-2)}

/* the loading animation (brand/loader.js): the mark's pieces coming together */
.loader{display:grid; justify-items:center; gap:20px; text-align:center}
.loader p{margin:0; font:400 26px/1.2 var(--brand-font-body); color:var(--brand-ink)}
.ld-at{display:block; line-height:0}
.ld-mark{display:block; width:78px; height:auto; overflow:visible; color:var(--brand-ink); fill:currentColor}
.ld-mark path{transform-box:fill-box; transform-origin:center}
.loader.small{display:inline-flex; vertical-align:middle; gap:0}
.loader.small .ld-at{display:inline-block}
.loader.small .ld-mark{width:20px}
.loader-spot{display:grid; place-items:center; padding:40px 0}
.loader-spot .loader p{font-size:22px}
.loader-cover{position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:24px; background:var(--brand-paper); isolation:isolate}
.loader-cover::before{content:""; position:absolute; inset:0; z-index:-1; background:url(/brand/fabric.jpg) center/620px; mix-blend-mode:multiply; opacity:.16; pointer-events:none}
@media (prefers-reduced-motion: reduce){ .switch, .switch::after, .dbtn{transition:none} }