/* GLP-1 guide, fitted to the TableMacros marketing site.
   Chain numbers and guide copy stay in the HTML. This file only styles them. */

.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:12px;top:12px;z-index:30;background:#fff;color:#0E1A16;padding:12px 16px;border-radius:12px;outline:3px solid #0B7A5E}

.guide-nav{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-top:12px;padding-bottom:12px;background:var(--bg2);border-bottom:1px solid var(--line)}
.guide-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 14px;border-radius:999px;background:var(--card);color:var(--fg);text-decoration:none;font-weight:700;font-size:15px;border:1px solid var(--line)}
.guide-nav a[aria-current="page"]{background:var(--acc2);color:var(--acc);border-color:transparent}
.guide-nav a:hover{border-color:var(--acc)}

.notice{background:#fff4e0;color:#6b3a00;border-bottom:1px solid #ecd3a6}
.notice p{max-width:1080px;margin:0 auto;padding:12px 20px;font-size:16px;line-height:1.4}
.notice strong{font-weight:800}

.crumbs{font-size:14px;color:var(--mut);margin:0 0 10px}
.crumbs a{color:var(--mut);display:inline-flex;align-items:center;min-height:44px}

.doc .card h2{font-size:20px;margin:12px 0 6px}
.doc .cta-card{margin:16px 0 20px}
.cards{display:grid;gap:12px;margin:8px 0 4px}
@media(min-width:640px){.cards{grid-template-columns:1fr 1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:4px 18px 16px;box-shadow:var(--shadow)}
.card p{margin:0 0 8px}

.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);margin:12px 0 4px;-webkit-overflow-scrolling:touch}
.tablewrap:focus-visible{outline:3px solid #0B7A5E;outline-offset:2px}
.tablewrap table{width:100%;border-collapse:collapse;min-width:520px;font-size:15px;margin:0}
.tablewrap caption{text-align:left;caption-side:top;padding:12px 14px 0;font-weight:700;color:var(--mut)}
.tablewrap th,.tablewrap td{border:0;border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top;background:transparent}
.tablewrap thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
.tablewrap tr:last-child>*{border-bottom:0}
@media(max-width:600px){
  .tablewrap table{font-size:14px}
  .tablewrap th,.tablewrap td{padding:10px 8px}
  .tablewrap::after{content:"Swipe sideways to see every column.";display:block;padding:4px 14px 12px;font-size:13px;color:var(--mut)}
}

.chainlist{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px}
@media(min-width:640px){.chainlist{grid-template-columns:1fr 1fr}}
.chainlist li{margin:0;break-inside:auto}
.chainlist a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;font-weight:700;color:var(--fg)}
.chainlist a:hover{border-color:var(--acc);color:var(--acc)}

.cmp-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line)}
.cmp-row label{display:block;font-weight:700;margin:0 0 .2rem}
.cmp-row input{width:100%;box-sizing:border-box}
@media(max-width:600px){.cmp-row{grid-template-columns:1fr 1fr}.cmp-row>div:first-child{grid-column:1/-1}}
.logform fieldset{border:1px solid var(--line);border-radius:18px;padding:8px 16px 16px;margin:0 0 12px}
input,select,textarea{min-height:44px;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:10px;width:100%;max-width:30rem;font-family:inherit;background:var(--card);color:var(--fg)}
button.btn{border:0;cursor:pointer}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid #0B7A5E;outline-offset:2px}
.small{font-size:.9rem;color:var(--mut)}
#cmp-out{padding:12px 16px}
footer .disclaimer{color:inherit}
footer .row a{text-align:center}

@media(prefers-color-scheme:dark){
  html:not(.sunny){color-scheme:dark}
  html:not(.sunny) body{background:#10211C;color:#E7F2EC}
  html:not(.sunny) nav{background:rgba(16,33,28,.94);border-bottom-color:#234038;color:#E7F2EC}
  html:not(.sunny) nav .links a{color:#C9D6D0}
  html:not(.sunny) nav .links a:hover{color:#7FE0BE}
  html:not(.sunny) .brand{color:#F4FBF8}
  html:not(.sunny) .brand em{color:#7FE0BE}
  html:not(.sunny) h1,
  html:not(.sunny) h2,
  html:not(.sunny) h3,
  html:not(.sunny) .doc p,
  html:not(.sunny) .doc li{color:#E7F2EC}
  html:not(.sunny) a{color:#7FE0BE}
  html:not(.sunny) .lead,
  html:not(.sunny) .small,
  html:not(.sunny) .crumbs,
  html:not(.sunny) .crumbs a,
  html:not(.sunny) .tablewrap caption,
  html:not(.sunny) .tablewrap thead th{color:#C9D6D0}
  html:not(.sunny) .guide-nav{background:#0E1A16;border-bottom-color:#234038}
  html:not(.sunny) .guide-nav a{background:#163028;color:#E7F2EC;border-color:#234038}
  html:not(.sunny) .guide-nav a[aria-current="page"]{background:#1C4336;color:#7FE0BE}
  html:not(.sunny) .notice{background:#3A2A12;color:#FFE7C2;border-bottom-color:#6B4E1E}
  html:not(.sunny) .card,
  html:not(.sunny) .tablewrap,
  html:not(.sunny) .chainlist a,
  html:not(.sunny) .logform fieldset,
  html:not(.sunny) #cmp-out{background:#13241F;border-color:#234038;color:#E7F2EC}
  html:not(.sunny) .chainlist a{color:#E7F2EC}
  html:not(.sunny) .chainlist a:hover{color:#7FE0BE;border-color:#7FE0BE}
  html:not(.sunny) .tablewrap th,
  html:not(.sunny) .tablewrap td{border-bottom-color:#234038;color:#E7F2EC}
  html:not(.sunny) .cta-card{background:#163028;color:#E7F2EC;border-color:#234038}
  html:not(.sunny) .cta-card h2,
  html:not(.sunny) .cta-card p{color:#E7F2EC}
  html:not(.sunny) .cta-card .btn{background:#7FE0BE;color:#0E1A16}
  html:not(.sunny) input,
  html:not(.sunny) select,
  html:not(.sunny) textarea{background:#0E1A16;color:#E7F2EC;border-color:#3D5C52}
  html:not(.sunny) footer{background:#08110F;color:#C9D6D0;border-top:1px solid #234038}
  html:not(.sunny) footer p,
  html:not(.sunny) footer .disclaimer{color:#C9D6D0}
  html:not(.sunny) footer a{color:#7FE0BE}
  html:not(.sunny) .skip:focus{background:#13241F;color:#E7F2EC}
  html:not(.sunny) .tablewrap::after{color:#C9D6D0}
}

@media print{
  .top,.notice,footer,.cta-card,nav{display:none!important}
  body{color:#000;background:#fff}
}