/* Portal del panel — Vibe Coding CEDIA 2026 (same tokens as backup.css / final-project.css) */
body[data-page="panel"] main{max-width:980px}
.pn-intro{padding:1.6rem 0 .6rem}
.pn-intro h1{font-size:clamp(1.9rem,3.4vw,2.5rem);max-width:none;margin:0}
.pn-intro p{color:#dbcebd;max-width:70ch;margin-top:.5rem}
.pn-who-line{color:#dbcebd;font-size:.9rem;margin:.4rem 0 .2rem}
.pn-who-line b{color:var(--gold)}
#pn-who{margin-bottom:.9rem}
.pn-link{background:none;border:0;padding:0;font:inherit;font-size:.85rem;font-weight:600;color:var(--gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:32px}
.card .pn-link{color:var(--berry)}
.pn-login{margin:0 0 1rem}
.pn-login label{display:block;font-size:.85rem;font-weight:600;margin:.4rem 0}
.pn-login input{display:block;width:100%;margin-top:.3rem;padding:.6rem .7rem;border:1px solid #a68f93;border-radius:10px;font:inherit;background:#fff;color:var(--ink)}
.pn-two{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;margin-bottom:.6rem}
.pn-msg{font-size:.86rem!important;margin:.5rem 0 0!important;min-height:1.2em}
.pn-msg.ok{color:#1f6b46;font-weight:600}.pn-msg.er{color:#a3301f}
.pn-note{margin:0 0 .9rem;padding:.6rem .85rem;border-left:4px solid var(--gold);border-radius:8px;background:rgba(255,198,41,.1);color:#f3e7d3;font-size:.9rem}
.pn-state h2,.pn-pick h2{font-family:Fraunces,Georgia,serif;font-size:1.45rem;margin:.1rem 0 .4rem;color:var(--berry)}
.pn-sub-txt{margin:0 0 .4rem;font-size:.9rem;color:#4a3a41}
/* subgroup chooser */
.pn-pick{margin-bottom:1rem}
.pn-ch-l{margin:.7rem 0 .35rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5F4B54}
.pn-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.pn-chip{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:52px;min-height:48px;padding:.3rem .6rem;border:1.5px solid #c9b6a9;border-radius:12px;background:rgba(255,255,255,.6);color:var(--berry);font:inherit;font-size:1.15rem;font-weight:800;line-height:1;cursor:pointer;transition:border-color .15s,background .15s}
.pn-chip small{font-size:.66rem;font-weight:600;color:#5F4B54;margin-top:.2rem;letter-spacing:0}
.pn-chip:hover:not(:disabled){border-color:var(--berry)}
.pn-chip[aria-pressed="true"]{background:var(--berry);border-color:var(--berry);color:#fff}
.pn-chip[aria-pressed="true"] small{color:#f3e2e8}
.pn-chip.is-done:not([aria-pressed="true"]){border-color:#2f7d58;background:#eaf5ee}
.pn-chip.is-done:not([aria-pressed="true"]) small{color:#1f6b46;font-size:.8rem}
.pn-chip:disabled{cursor:not-allowed;opacity:.55;border-style:dashed}
.pn-chip:focus-visible{outline:3px solid #a47710;outline-offset:2px}
.pn-done{margin:.8rem 0 0;font-size:.84rem;color:#4a3a41}
/* rating form */
.pn-current{margin-bottom:.4rem}
.pn-current .kicker{color:var(--berry);margin-bottom:.2rem}
.pn-current h2{margin:0;outline:none}
.pn-pick h2{outline:none}
#pn-which,#pn-mineq,#pn-team{scroll-margin-top:150px}
@media(max-width:900px){#pn-which,#pn-mineq,#pn-team{scroll-margin-top:1rem}}
.pn-sub{display:inline-grid;place-items:center;min-width:3.2rem;padding:.1rem .7rem;border-radius:999px;background:var(--berry);color:#fff;font-family:Inter,system-ui,sans-serif;font-size:1.3rem;font-weight:800}
.pn-again{margin:.2rem 0 .4rem;font-size:.86rem;color:#7a4a12}
.pn-form{margin-bottom:1.2rem;scroll-margin-top:1rem}
.pn-crit{border:0;border-top:1px solid #cdbfaf;margin:0;padding:.75rem 0 .5rem}
.pn-crit legend{padding:0;display:block;width:100%;margin-bottom:.45rem}
.pn-crit legend b{display:block;color:var(--berry);font-size:.98rem}
.pn-crit legend span{display:block;font-size:.86rem;color:#4a3a41}
.pn-opts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.pn-opt{position:relative;display:flex;flex-direction:column;gap:.15rem;border:1.5px solid #c9b6a9;border-radius:12px;padding:.5rem .6rem .55rem;background:rgba(255,255,255,.55);cursor:pointer;min-height:64px;transition:border-color .15s,background .15s}
.pn-opt input{position:absolute;opacity:0;width:1px;height:1px}
.pn-opt:hover{border-color:var(--berry)}
.pn-opt:has(input:checked){border-color:var(--berry);background:#fff;box-shadow:inset 0 0 0 2px var(--berry)}
.pn-opt:has(input:focus-visible){outline:3px solid #a47710;outline-offset:2px}
.pn-n{font-weight:800;color:var(--berry);font-size:1.05rem;line-height:1}
.pn-lv{font-weight:700;font-size:.82rem;color:#2B1720}
.pn-d{font-size:.76rem;line-height:1.35;color:#5F4B54}
.pn-com{display:block;font-size:.88rem;font-weight:600;margin:.8rem 0 .2rem;color:#2B1720}
.pn-com textarea{display:block;width:100%;margin-top:.35rem;padding:.55rem .65rem;border:1px solid #a68f93;border-radius:10px;font:inherit;font-weight:400;background:#fff;color:var(--ink);resize:vertical}
.pn-count{display:block;text-align:right;font-size:.74rem;font-weight:400;color:#5F4B54;margin-top:.15rem}
.pn-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.6rem}
.pn-actions .pn-msg{margin:0!important}
@media(max-width:700px){
  .pn-two{grid-template-columns:1fr}
  .pn-opts{grid-template-columns:1fr 1fr}
  .pn-chip{min-width:48px}
}
@media(prefers-reduced-motion:reduce){.pn-opt,.pn-chip{transition:none}}

.pn-lost{font-size:.8rem!important;color:#5F4B54;margin:.6rem 0 0!important}

/* ---- rubric grid (900 px and up): level names once in a header row, one row per question ---- */
.pn-colh,.pn-wait-form{display:none}
@media(min-width:900px){
  .pn-ghead,.pn-crit{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));column-gap:.4rem}
  .pn-ghead{align-items:end;padding-bottom:.4rem}
  .pn-ghead .pn-current{margin:0;display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}
  .pn-ghead .pn-current .kicker{margin:0}
  .pn-colh{display:block;font-size:.76rem;font-weight:700;line-height:1.25;color:#2B1720;padding:0 .2rem}
  .pn-colh b{color:var(--berry);margin-right:.15rem}
  .pn-crit{padding:.38rem 0;align-items:stretch}
  .pn-crit legend{float:left;width:auto;margin:0;padding:0 .5rem 0 0;font-size:.82rem;line-height:1.38;align-self:center}
  .pn-crit legend b,.pn-crit legend span{display:inline;font-size:inherit}
  .pn-crit legend b{margin-right:.3rem}
  .pn-opts{display:contents}
  .pn-opt{min-height:0;padding:.38rem .55rem;justify-content:center;border-radius:10px}
  .pn-opt .pn-n,.pn-opt .pn-lv{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .pn-d{font-size:.77rem;line-height:1.3;color:#3d2a32}
  .pn-opt:has(input:checked) .pn-d{color:var(--berry);font-weight:600}
  .pn-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1rem;align-items:end;margin-top:.55rem}
  .pn-foot .pn-actions{display:contents}
  .pn-foot .pn-send{grid-column:2;grid-row:1;align-self:end}
  .pn-foot .pn-msg{grid-column:1/-1}
  .pn-com{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:.6rem;align-items:baseline}
  .pn-com textarea{grid-column:1/-1;grid-row:2}
  .pn-count{grid-column:2;grid-row:1;margin:0}
}

/* ---- one-screen workspace on laptops and desktops (same sizes as the final-deliverable page) ---- */
@media(min-width:1024px) and (min-height:600px){
  body[data-page="panel"] main{max-width:1440px;padding-inline:16px;padding-bottom:.4rem}
  body[data-page="panel"] footer{display:none}
  body[data-page="panel"] .wa-fab{width:46px;height:46px;padding:0;gap:0;justify-content:center;right:.65rem;bottom:.75rem}
  body[data-page="panel"] .wa-fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  body[data-page="panel"] .wa-fab:hover,body[data-page="panel"] .wa-fab:focus-visible{width:auto;padding:.7rem 1rem;gap:.5rem}
  body[data-page="panel"] .wa-fab:hover span,body[data-page="panel"] .wa-fab:focus-visible span{position:static;width:auto;height:auto;clip:auto}
  .pn-intro{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.4rem;align-items:center;padding:.5rem 0 .45rem}
  .pn-intro .kicker{grid-column:1;grid-row:1;margin:0;max-width:none;align-self:end}
  .pn-intro h1{grid-column:1;grid-row:2;font-size:1.6rem;line-height:1.15;max-width:none;align-self:start}
  .pn-intro p:not(.kicker){grid-column:2;grid-row:1/span 2;margin:0;font-size:.85rem;line-height:1.45;max-width:none}
  #pn-who .pn-who-line{margin:.05rem 0;font-size:.8rem;line-height:1.45}
  .pn-note{font-size:.78rem;line-height:1.42;padding:.4rem .65rem}
  /* rubric grid, tighter */
  .pn-work .card{padding:.7rem .95rem;border-radius:.95rem}
  .pn-work .pn-ghead,.pn-work .pn-crit{grid-template-columns:minmax(0,2.1fr) repeat(4,minmax(0,1fr))}
  .pn-work .pn-ghead{padding-bottom:.22rem}
  .pn-work .pn-crit{padding:.17rem 0}
  .pn-work .pn-crit legend{font-size:.79rem;line-height:1.3}
  .pn-work .pn-opt{padding:.24rem .4rem}
  .pn-work .pn-d{font-size:.74rem;line-height:1.27}
  .pn-work .pn-sub{font-size:1rem;min-width:2.6rem;padding:.02rem .55rem}
  .pn-work .pn-form .hint{display:none}   /* the same sentence is in the page intro, on the same screen */
  .pn-work .pn-msg{min-height:0}
  .pn-work .pn-foot{margin-top:.38rem}
  .pn-work .pn-com{position:relative;font-size:.78rem;line-height:1.35;grid-template-columns:12.5rem minmax(0,1fr);align-items:center}
  .pn-work .pn-com textarea{grid-column:2;grid-row:1;margin:0;padding:.3rem 4.2rem .3rem .55rem;font-size:.83rem;line-height:1.36}
  .pn-work .pn-count{position:absolute;right:.55rem;bottom:.3rem;font-size:.68rem;pointer-events:none}
  .pn-work .pn-send{min-height:38px;padding:.45rem 1.05rem}
  .pn-wait-form{display:grid;place-items:center;min-height:13rem;text-align:center}
  .pn-wait-form p{max-width:34ch;margin:0;color:#5F4B54;font-size:.95rem}
  /* chooser, compact */
  .pn-work .pn-pick h2{font-size:1.02rem;line-height:1.25;margin:0}
  .pn-work .pn-ch-l{margin:.45rem 0 .2rem;font-size:.68rem}
  .pn-work .pn-chips{gap:.25rem}
  .pn-work .pn-chip{min-width:30px;min-height:32px;padding:.12rem .22rem;font-size:.93rem;border-radius:9px}
  .pn-work .pn-chip small{font-size:.56rem;margin-top:.05rem}
  .pn-work .pn-done,.pn-work .pn-gfirst{font-size:.76rem;margin:.4rem 0 0}
  .pn-work #pn-ok{font-size:.8rem!important;margin-top:.4rem!important}
  /* 1024-1199: the chooser is one strip above a full-width rubric */
  .pn-work{display:grid;grid-template-columns:minmax(0,1fr);row-gap:.55rem}
  .pn-work>.pn-note,.pn-work>.pn-pick,.pn-work>.pn-form,.pn-work>.pn-wait-form{margin:0}
  .pn-work>.pn-pick{display:flex;flex-wrap:wrap;align-items:center;column-gap:.8rem;row-gap:.25rem;padding:.6rem 1rem}
  .pn-work>.pn-pick .pn-ch-l{margin:0}
  .pn-work>.pn-pick>p:not(.pn-ch-l){flex:0 0 100%}
  .pn-work>.pn-wait-form{min-height:8rem}
}
/* 1200 and wider: note + chooser in a slim left column; the "who" line sits above the rubric, which gets the rest */
@media(min-width:1200px) and (min-height:600px){
  body[data-page="panel"] main:has(>#pn-main.pn-work){display:grid;grid-template-columns:226px minmax(0,1fr);grid-template-rows:auto auto auto auto 1fr;column-gap:.9rem;row-gap:.45rem;align-items:start}
  main:has(>#pn-main.pn-work)>.pn-intro{grid-column:1/-1;grid-row:1}
  main:has(>#pn-main.pn-work)>#pn-who{grid-column:2;grid-row:2;margin:0;display:flex;flex-wrap:wrap;column-gap:1.4rem;align-items:baseline}
  #pn-main.pn-work{display:contents}
  .pn-work>.pn-note{grid-column:1;grid-row:2/span 2}
  .pn-work>.pn-pick{grid-column:1;grid-row:4/span 2;display:block;padding:.75rem .8rem}
  main:not(:has(.pn-work>.pn-note)) .pn-work>.pn-pick{grid-row:2/span 4}
  .pn-work>.pn-pick .pn-ch-l{margin:.45rem 0 .2rem}
  .pn-work>.pn-form,.pn-work>.pn-wait-form{grid-column:2;grid-row:3/span 3}
  .pn-work>.pn-wait-form{min-height:15rem}
}
/* 1024-1199: "who" and the note each on one line */
@media(min-width:1024px) and (max-width:1199px) and (min-height:600px){
  #pn-who{display:flex;flex-wrap:wrap;column-gap:1.4rem;align-items:baseline;margin-bottom:.4rem}
  .pn-work .pn-ghead{padding-bottom:.2rem}
}