/* The agent dashboard's How to use tab, on top of dashboard.css (the shell: tabs, banner, header chips, phone page).
   Settled on the How to use and first-login tour board (round 2, 2026-10-23): the pen rules sign, the tour card and the
   help box. The look is the board's, in the site's own styles. */

/* ---------- buttons and links ---------- */
.btnp,.btnw,.lkb{all:unset;box-sizing:border-box;cursor:pointer}
.btnp,.btnw{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;font:700 14px/1 var(--tiny);text-transform:uppercase}
.btnp{background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);box-shadow:0 0 0 3px var(--plum),0 5px 0 3px var(--plum)}
.btnp:hover{filter:brightness(1.08)}
.btnp:disabled{cursor:default;filter:grayscale(1) opacity(.55)}
.btnw{background:#fff;color:var(--teal-dark);box-shadow:0 0 0 3px var(--teal-dark),0 4px 0 3px var(--teal-dark)}
.btnw:hover{background:#fff6c8}
.lkb{font:700 12px/1.2 var(--tiny);text-transform:uppercase;color:#c9347d;text-decoration:underline;text-underline-offset:3px}
:is(.btnp,.btnw,.lkb):focus-visible{outline:3px dashed var(--pink);outline-offset:5px}
.main button *{pointer-events:none}

/* ---------- the page: the sign on the left, the tour card and help on the right ---------- */
.htu{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.htu .side{display:grid;gap:22px;min-width:0}

/* ---------- the pen rules sign ---------- */
.sign{position:relative;min-width:0;padding:16px 20px 18px;background:#c9935e;box-shadow:0 -4px 0 0 #6b4226,0 4px 0 0 #6b4226,-4px 0 0 0 #6b4226,4px 0 0 0 #6b4226,8px 10px 0 0 rgba(8,60,54,.16);
  background-image:repeating-linear-gradient(180deg,transparent 0 22px,rgba(107,66,38,.25) 22px 25px)}
.sign .sh{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 10px}
.sign .sh h2{font:700 28px/1.1 var(--pxf);color:#fff6c8;text-shadow:2px 2px 0 #6b4226}
.sign .sh .lkb{margin-left:auto;color:#fff6c8}
.sign ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 18px;margin:0;padding:0;list-style:none}
.sign li{display:grid;grid-template-columns:40px minmax(0,1fr);gap:14px;align-items:start;padding:12px 14px;background:#fff6c8;box-shadow:0 0 0 3px #6b4226;font:600 15px/1.45 var(--pxf)}
.sign li canvas{width:39px;height:39px;margin-top:1px}
.sign li b{display:block;margin-bottom:3px;font:700 18px/1.2 var(--pxf);color:var(--teal-dark)}
.sign .sf{margin-top:14px;font:600 14px/1.4 var(--pxf);color:#fff6c8}
.phd{display:inline;padding:2px 6px;background:#fff1a8;border:1px dashed #b98a10;color:#4a3500;font:700 13px/1.6 var(--pxf)}

/* ---------- the tour card ---------- */
.tourcard{display:grid;gap:10px;padding:14px 16px 16px;background:#fff6c8;box-shadow:0 -3px 0 0 #8a5a00,0 3px 0 0 #8a5a00,-3px 0 0 0 #8a5a00,3px 0 0 0 #8a5a00,5px 7px 0 0 rgba(8,60,54,.14)}
.tourcard .tch{display:grid;grid-template-columns:72px minmax(0,1fr);gap:10px;align-items:center}
.tourcard .tch canvas{width:72px;height:58px}
.tourcard .tch b{display:block;font:700 19px/1.2 var(--pxf);color:var(--teal-dark)}
.tourcard .st{font:600 13px/1.35 var(--pxf);color:var(--muted)}
.tourcard .btnp{width:100%}
.tourcard .at{font:400 8px/1.65 var(--ps);text-transform:uppercase;color:#8a5a00}
.minitabs{display:flex;flex-wrap:wrap;gap:4px}
.minitabs button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;place-items:center;width:28px;height:28px;background:var(--paper);box-shadow:0 0 0 2px var(--teal-dark)}
.minitabs button canvas{width:20px;height:20px}
.minitabs button:hover{background:var(--coin)}
.minitabs button:focus-visible{outline:3px dashed var(--pink);outline-offset:3px}
.minitabs button .tt{left:50%;top:calc(100% + 14px);transform:translateX(-50%)}
.minitabs button .tt::after{left:50%;top:-10px;margin:0 0 0 -4px;box-shadow:0 -3px 0 #fff}

/* ---------- help articles and support ---------- */
.helpbox canvas{width:36px;height:36px;margin:0}
.helpbox span{display:block}
.helpbox span+span{margin-top:8px}

/* ---------- narrower desktops and laptops: the right column drops under the sign ---------- */
@media (max-width:1180px){
  .htu{grid-template-columns:minmax(0,1fr)}
  .htu .side{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:900px){
  .sign ol{grid-template-columns:minmax(0,1fr)}
}