/* nanoflow.io data and tool pages (2026-10-11): /data/social-media-cost/ and /tools/social-media-time-calculator/.
   Builds on home.css, prospect.css and site.css: same tokens, radii, shadows and type. Adds the comparison table that
   stacks into cards on phones, the sources list, and the calculator form and result card. */

/* ---------- comparison table (cards on phones) ---------- */
.dt-sec{background:var(--paper)}
.dt-panel{max-width:1140px;margin:0 auto}
.dt-table{width:100%;border-collapse:collapse;font-size:16px}
.dt-table th,.dt-table td{padding:18px 20px;text-align:left;vertical-align:top;line-height:1.5;border-top:1px solid rgba(33,29,43,.07)}
.dt-table thead th{border-top:0;font-family:'DM Sans','Nunito',system-ui,sans-serif;font-weight:700;color:var(--ink);font-size:15px}
.dt-table tbody th{font-family:'DM Sans','Nunito',system-ui,sans-serif;font-weight:700;color:var(--ink);font-size:18px;width:18%}
.dt-table td{color:var(--body-c)}
.dt-table td b{color:var(--ink)}
.dt-table .dt-num{font-family:'DM Sans','Nunito',system-ui,sans-serif;font-weight:700;color:var(--violet-ink);font-size:18px;white-space:nowrap}
.dt-table .dt-us th,.dt-table .dt-us td{background:rgba(109,40,217,.06)}
.dt-table .dt-us th{color:var(--violet)}
.dt-table a{color:var(--violet-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.dt-src{display:block;margin-top:6px;font-size:14px}
.dt-ex{display:block;margin-top:6px;font-size:14px;color:var(--body-c)}
.dt-tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:4px}

/* ---------- method + sources ---------- */
.dt-method{max-width:860px;margin:0 auto}
.dt-method p,.dt-method li{color:var(--body-c);font-size:17px;line-height:1.65}
.dt-method p+p{margin-top:14px}
.dt-method ul{margin:14px 0 0 20px;display:grid;gap:8px}
.dt-sources{max-width:960px;margin:0 auto;display:grid;gap:12px;counter-reset:src;list-style:none;padding:0}
.dt-sources li{background:var(--card);border:1px solid rgba(33,29,43,.10);border-radius:16px;padding:18px 22px 18px 64px;position:relative;counter-increment:src}
.dt-sources li::before{content:counter(src);position:absolute;left:20px;top:18px;width:30px;height:30px;border-radius:50%;background:rgba(109,40,217,.10);color:var(--violet-deep);font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
.dt-sources a{font-weight:700;color:var(--ink);text-decoration:underline;text-decoration-color:rgba(109,40,217,.35);text-underline-offset:4px;overflow-wrap:anywhere}
.dt-sources a:hover{color:var(--violet-deep);text-decoration-color:currentColor}
.dt-sources .dt-meta{display:block;font-size:14px;color:var(--body-c);margin-top:4px}
.dt-sources .dt-used{display:block;font-size:16px;color:var(--body-c);margin-top:6px}

/* ---------- calculator ---------- */
.calc-sec{background:var(--cream)}
.calc-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;max-width:1140px;margin:0 auto;align-items:start}
.calc-form{background:var(--card);border:1px solid rgba(33,29,43,.10);border-radius:18px;padding:28px 28px 30px;box-shadow:var(--shadow)}
.calc-form fieldset{border:0;margin:0;padding:0}
.calc-form fieldset+fieldset{margin-top:26px;padding-top:22px;border-top:1px solid rgba(33,29,43,.08)}
.calc-form legend{float:left;width:100%;font-family:'DM Sans','Nunito',system-ui,sans-serif;font-weight:700;font-size:20px;color:var(--ink);padding:0;margin-bottom:6px}
.calc-form legend+*{clear:both}
.calc-hint{font-size:15px;color:var(--body-c);line-height:1.5;margin-bottom:14px}
.calc-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field--full{grid-column:1/-1}
.calc-field label{font-weight:700;font-size:15px;color:var(--ink)}
.calc-field small{font-size:13.5px;color:var(--body-c);line-height:1.4}
.calc-field input,.calc-field select{font:inherit;font-size:17px;color:var(--ink);background:#fff;border:1.5px solid rgba(33,29,43,.28);border-radius:12px;height:48px;padding:0 14px;width:100%;min-width:0}
.calc-field select{padding-right:36px}
.calc-field input:focus-visible,.calc-field select:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-color:var(--violet)}
.calc-unit{position:relative}
.calc-unit input{padding-left:30px}
.calc-unit span{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--body-c);font-weight:600;pointer-events:none}
.calc-out{background:var(--night);color:#f4f1fa;border-radius:18px;padding:30px 28px;box-shadow:var(--shadow);position:sticky;top:24px}
.calc-out h2{font-size:22px;font-weight:700;color:#fdfdfd;margin-bottom:16px}
.calc-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.calc-kpi{background:rgba(253,253,253,.07);border:1px solid rgba(253,253,253,.12);border-radius:14px;padding:16px 16px 14px}
.calc-kpi b{display:block;font-family:'DM Sans','Nunito',system-ui,sans-serif;font-size:40px;line-height:1.05;font-weight:800;color:#fff}
.calc-kpi span{display:block;font-size:14.5px;color:#ddd6ea;margin-top:6px}
.calc-line{margin-top:16px;font-size:16px;line-height:1.55;color:#e9e4f2}
.calc-line b{color:#fff}
.calc-plan{margin-top:18px;background:rgba(253,253,253,.06);border-left:4px solid #b79cf5;border-radius:12px;padding:14px 16px;font-size:16px;line-height:1.55;color:#e9e4f2}
.calc-plan b{color:#fff}
.calc-plan a{color:#d9c8ff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.calc-cta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:22px}
.calc-cta .btn{width:100%;padding:0 16px;font-size:17px}
.calc-fine{margin-top:14px;font-size:13.5px;color:#cfc7de}
.calc-formula{max-width:860px;margin:0 auto}
.calc-formula code{display:block;background:var(--card);border:1px solid rgba(33,29,43,.10);border-radius:14px;padding:16px 18px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15.5px;line-height:1.7;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
.calc-formula p{color:var(--body-c);font-size:17px;line-height:1.65;margin-top:14px}
.calc-noscript{margin-top:14px;font-size:15px;color:#e9e4f2}
.dt-note{max-width:860px;margin:28px auto 0;text-align:center;font-size:15px;color:var(--body-c)}
.res-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (max-width:1100px){
  .calc-grid{grid-template-columns:1fr}
  .calc-out{position:static}
}
@media (max-width:760px){
  /* table rows become cards */
  .dt-panel .day-bar{display:none}
  .dt-panel{background:transparent;box-shadow:none}
  .dt-table,.dt-table tbody,.dt-table tr,.dt-table th,.dt-table td{display:block;width:100%}
  .dt-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .dt-table tr{background:var(--card);border:1px solid rgba(33,29,43,.10);border-radius:16px;margin-bottom:14px;overflow:hidden}
  .dt-table tbody th{border-top:0;font-size:20px;padding:16px 18px 6px;width:100%}
  .dt-table td{border-top:0;padding:8px 18px}
  .dt-table td:last-child{padding-bottom:18px}
  .dt-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--violet);margin-bottom:2px}
  .dt-table .dt-num{white-space:normal}
  .calc-form{padding:22px 18px 24px}
  .calc-fields{grid-template-columns:1fr}
  .calc-out{padding:24px 18px}
  .calc-kpi b{font-size:34px}
  .calc-cta{grid-template-columns:1fr}
  .dt-sources li{padding:16px 18px 16px 58px}
  .dt-sources li::before{left:16px}
  .res-grid--4{grid-template-columns:1fr}
}