/* ============================================================================
   learning-styles.css — the seven-learning-styles matching game (learning-styles.js)
   A copy of home.css's .hp-ls rules under the .ls- prefix, so a page other than
   the homepage can carry the game without loading home.css — plus the pop-up
   definitions (.ls-tip) and the no-JavaScript definitions list (.ls-defs).
   ========================================================================== */
.ls-key{max-width:760px;margin:0 auto;padding-left:1.4em;columns:2;column-gap:36px;font-size:.92rem}
.ls-key li{margin-bottom:6px;break-inside:avoid}
.ls-key[hidden],.ls[hidden],.ls-defs[hidden]{display:none}
.ls-defs{max-width:860px;margin:18px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px 22px;font-size:.88rem}
.ls-defs dt{font-weight:800;color:var(--navy,#12324d)}
.ls-defs dd{margin:0 0 6px;color:var(--text-dim)}
.ls-how{margin:0 auto 10px;max-width:760px;text-align:center;font-size:.9rem;color:var(--text-dim)}
.ls-board{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(56px,14vw,200px);max-width:860px;margin:0 auto}
.ls-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:5px}
.ls-colh{margin:0 0 2px;text-align:center;font-size:.66rem;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--teal,#2f7f86)}
.ls-item{position:relative;display:flex;align-items:center;gap:6px;min-height:34px;padding:5px 30px 5px 12px;
  border:2px solid var(--navy,#12324d);border-radius:6px;background:#f7fbf8;color:var(--navy,#12324d);
  font-family:var(--serif);font-weight:700;font-size:.86rem;line-height:1.2;text-align:left;cursor:pointer;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;box-shadow:2px 2px 0 rgba(18,50,77,.18);
  transition:background .14s,color .14s,border-color .14s}
.ls-item small{font-family:var(--sans);font-weight:600;font-size:.72rem;color:var(--text-dimmer)}
.ls-item[data-side="s"]{padding:5px 12px 5px 30px}
.ls-item::before{content:"";position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;
  background:#f7fbf8;border:2px solid var(--navy,#12324d)}
.ls-item[data-side="m"]::before{right:-8px}
.ls-item[data-side="s"]::before{left:-8px}
.ls-item.is-linked::before{background:var(--navy,#12324d)}
.ls-item:hover{border-color:var(--chartred,#b33a2e)}
.ls-item[aria-pressed="true"]{background:var(--navy,#12324d);color:#f7fbf8;box-shadow:0 0 0 3px var(--buoy,#e8b92f)}
.ls-item[aria-pressed="true"] small{color:#cfe0e8}
.ls-item:focus-visible{outline:3px solid var(--buoy,#e8b92f);outline-offset:2px}
/* a style has a definition: a dotted underline says so */
.ls-item[data-side="s"] .ls-name{text-decoration:underline dotted rgba(18,50,77,.45);text-underline-offset:3px}
.ls-item[aria-pressed="true"] .ls-name{text-decoration-color:rgba(247,251,248,.6)}
.ls-mark{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--sans);font-size:.95rem;font-weight:800}
.ls-item[data-side="m"] .ls-mark{right:10px}
.ls-item[data-side="s"] .ls-mark{left:10px}
.ls-item.is-ok{border-color:#2c6b3c;background:#e3f1e6}
.ls-item.is-ok .ls-mark{color:#2c6b3c}
.ls-item.is-alt{border-color:#9a6f00;background:#fbf2d6}
.ls-item.is-alt .ls-mark{color:#7a5800}
.ls-item.is-no{border-color:var(--chartred,#b33a2e);background:#f8e4e1}
.ls-item.is-no .ls-mark{color:#a3281b}
.ls-item[aria-pressed="true"].is-ok,.ls-item[aria-pressed="true"].is-alt,.ls-item[aria-pressed="true"].is-no{color:var(--navy,#12324d)}
.ls-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ls-line{stroke:var(--navy,#12324d);stroke-width:3;stroke-linecap:round}
.ls-line.is-ok{stroke:#2c6b3c}
.ls-line.is-alt{stroke:#b58a12;stroke-dasharray:9 5}
.ls-line.is-no{stroke:var(--chartred,#b33a2e);stroke-dasharray:2 6}
.ls-line.is-drag{stroke:var(--chartred,#b33a2e);stroke-dasharray:6 6;opacity:.8}
.ls-board.is-dragging{cursor:crosshair}
.ls-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 18px;
  max-width:860px;margin:14px auto 0}
.ls-fb{flex:1 1 320px;min-height:2.8em;margin:0;font-size:.88rem;line-height:1.4;color:var(--text);font-weight:600}
.ls-btns{display:flex;flex-wrap:wrap;gap:8px}
.ls-note{max-width:760px;margin:12px auto 0;text-align:center;font-size:.8rem;color:var(--text-dimmer)}

/* The pop-up definition. Fixed to the window and placed by learning-styles.js,
   clamped 8px inside each edge, so a phone never cuts it off. */
.ls-tip{position:fixed;z-index:60;left:8px;top:8px;width:max-content;max-width:min(300px,calc(100vw - 16px));
  padding:9px 12px;border-radius:6px;background:var(--navy,#12324d);color:#f7fbf8;
  font-family:var(--sans);font-size:.84rem;font-weight:500;line-height:1.4;text-align:left;
  box-shadow:0 8px 22px rgba(18,50,77,.28);pointer-events:auto}
.ls-tip[hidden]{display:none}
.ls-tip b{display:block;margin-bottom:2px;font-family:var(--serif);color:var(--buoy,#e8b92f)}
.ls-tip::after{content:"";position:absolute;left:var(--ls-arrow,50%);bottom:-6px;width:12px;height:12px;margin-left:-6px;
  background:var(--navy,#12324d);transform:rotate(45deg)}
.ls-tip.is-below::after{bottom:auto;top:-6px}
.ls-tips{position:static}

@media (max-width:620px){
  .ls-key{columns:1}
  .ls-board{column-gap:40px}
  .ls-item{font-size:.76rem;min-height:40px;padding:5px 24px 5px 8px}
  .ls-item[data-side="s"]{padding:5px 8px 5px 24px}
  .ls-item small{display:none}
  .ls-mark{font-size:.8rem}
  .ls-item[data-side="m"] .ls-mark{right:11px}
  .ls-item[data-side="s"] .ls-mark{left:11px}
  .ls-drag{display:none}
  .ls-fb{flex-basis:100%}
}
@media (hover:none){.ls-drag{display:none}}
@media (prefers-reduced-motion:reduce){.ls-item{transition:none}}