/**
 * mobile/assets/css/app.css
 *
 * m.dnslister.com — Phase 1 static mobile companion site.
 * No build step, no framework — matches the main site's "no npm" rule.
 * Colors sampled from the approved mockup (prompt 49860/49870):
 * navy from the main site's navbar/webmanifest theme_color (#101c30),
 * teal as the new accent for this mobile surface.
 *
 * @version 2.974.0
 */
:root{
  --navy:#101c30;
  --navy-2:#16263f;
  --teal:#178a6e;
  --teal-dark:#106955;
  --teal-light:#e4f4ef;
  --cream:#f4f3ee;
  --ink:#111826;
  --muted:#6b7280;
  --line:#e6e4dd;
  --card:#ffffff;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  /* System font stack, same choice as the main site (no self-hosted
     text font there either — only the Bootstrap Icons glyph font). */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--cream);
  color:var(--ink);
  display:flex;
  justify-content:center;
  min-height:100vh;
}
.phone{
  width:100%;
  max-width:480px;
  min-height:100vh;
  background:var(--cream);
  display:flex;
  flex-direction:column;
}
header.appbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  background:var(--cream);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;color:var(--ink);text-decoration:none;}
.brand .logo{
  width:26px;height:26px;border-radius:7px;
  background:var(--teal);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;
}
main{
  flex:1;
  padding:4px 18px calc(100px + env(safe-area-inset-bottom));
}
.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--teal-dark);margin:14px 0 6px;display:flex;align-items:center;gap:6px;
}
h1.page-title{font-size:30px;line-height:1.1;font-weight:800;margin:0 0 6px;}
h1.page-title .accent{color:var(--teal);}
p.sub{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0 0 18px;}

.hero-card{
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius);
  padding:20px;
  margin-bottom:20px;
  box-shadow:0 10px 30px -12px rgba(16,28,48,.5);
}
.hero-card .eyebrow{color:#8fd9c4;}
.hero-card label{display:block;font-size:12.5px;font-weight:600;color:#cfd7e3;margin:14px 0 6px;}
.hero-card label:first-of-type{margin-top:4px;}
.search-row{display:flex;gap:8px;}
input[type=text], select{
  width:100%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  border-radius:10px;
  padding:12px 13px;
  font-size:15px;
  font-family:inherit;
  outline:none;
}
input[type=text]::placeholder{color:#8692a3;}
.search-row input{flex:1;}
.icon-btn{
  background:var(--teal);
  border:none;
  border-radius:10px;
  width:46px;
  min-width:46px;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}
.icon-btn:active{background:var(--teal-dark);}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.chip{
  font-size:12.5px;font-weight:600;
  border-radius:999px;padding:6px 12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);
  color:#dfe4ec;
  cursor:pointer;
}
.chip.on{background:var(--teal);border-color:var(--teal);color:#fff;}
.hero-foot{margin-top:16px;font-size:12px;color:#9fb0c4;line-height:1.4;}

.btn-primary{
  width:100%;background:var(--teal);color:#fff;border:none;border-radius:10px;
  padding:13px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
  text-align:center;text-decoration:none;display:block;
}
.btn-primary:active{background:var(--teal-dark);}
.btn-outline{
  width:100%;background:#fff;color:var(--navy);border:1px solid var(--line);border-radius:10px;
  padding:13px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;
  text-align:center;text-decoration:none;display:block;
}

.section-title{display:flex;align-items:center;justify-content:space-between;margin:22px 0 2px;}
.section-title .label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal-dark);}
.section-title h2{font-size:19px;font-weight:800;margin:3px 0 0;}
.count-pill{font-size:12px;color:var(--muted);font-weight:600;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:14px;}

.tool-grid{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.tool-card{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:15px;cursor:pointer;text-decoration:none;color:inherit;
}
.tool-card .ticon{
  width:38px;height:38px;border-radius:11px;background:var(--teal-light);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:18px;
}
.tool-card .ttitle{font-weight:700;font-size:15px;margin-bottom:2px;}
.tool-card .tdesc{font-size:13px;color:var(--muted);line-height:1.4;}
.tool-card .chev{margin-left:auto;align-self:center;color:#c3c9d2;font-size:16px;}

.idea-row{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid var(--line);}
.idea-row:first-of-type{border-top:none;}
.idea-name{font-weight:700;font-size:14.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;}
.idea-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.idea-actions{display:flex;gap:6px;}
.ghost-btn{
  background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;
  width:32px;height:32px;border-radius:8px;
}
.ghost-btn:hover{background:var(--teal-light);color:var(--teal-dark);}
.ghost-btn.liked{color:#e0577a;}

.note{font-size:12px;color:var(--teal-dark);background:var(--teal-light);border-radius:10px;padding:10px 12px;margin:14px 0;line-height:1.45;}
.note.gray{color:#6b7280;background:#f0efe9;}

.empty{text-align:center;padding:40px 14px;}
.empty .ic{
  width:52px;height:52px;border-radius:14px;background:var(--teal-light);color:var(--teal-dark);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:24px;
}
.empty h3{font-size:16.5px;margin:0 0 6px;}
.empty p{font-size:13.5px;color:var(--muted);margin:0 0 18px;line-height:1.5;}
.empty .btn-primary{width:auto;padding:11px 22px;margin:0 auto;}

select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%23cfd7e3' stroke-width='1.6' fill='none'/></svg>");background-repeat:no-repeat;background-position:right 14px center;}

nav.tabbar{
  position:sticky;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid var(--line);
  display:flex;justify-content:space-around;
  padding:8px 4px calc(10px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  background:none;border:none;font-family:inherit;cursor:pointer;
  color:#9aa3b2;font-size:10.5px;font-weight:600;padding:4px 2px;position:relative;
  text-decoration:none;
}
.tab .ti{font-size:18px;}
.tab.active{color:var(--teal-dark);}
.tab.disabled{opacity:.4;pointer-events:none;}
.soon-dot{position:absolute;top:2px;right:22%;width:6px;height:6px;border-radius:50%;background:#e0a94d;}

.toast{
  position:fixed;left:50%;bottom:92px;transform:translateX(-50%) translateY(20px);
  background:var(--navy);color:#fff;font-size:13px;font-weight:600;
  padding:10px 16px;border-radius:999px;opacity:0;pointer-events:none;
  transition:all .25s ease;max-width:320px;text-align:center;z-index:50;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}