/* The panels of the arguments and quotes (templates/site/argument.html,
   static/js/site-args.js). The panel reuses the look of the record panels
   (.drawer, .drawer__bar, .drawer__body of site-pages.css); it is a modal
   <dialog>, so it also opens above a tile of the week in review. Cards dark
   and bordered #353641, the red of the site, the display face for figures;
   no coloured edge on a box. Three formats: phone up to 640 px, tablet up to
   1000 px, computer. */

/* ---- the panel: a modal dialog on the right, the record panel's look -------- */
dialog.drawer--args {position:fixed;inset:0 0 0 auto;margin:0;padding:0;border:0;border-left:1px solid #3a3c44;max-width:none;max-height:none;height:100%;width:min(1100px,96vw);color:#eeede9;overflow:hidden;z-index:auto}
dialog.drawer--args:not([open]) {display:none}
dialog.drawer--args::backdrop {background:rgba(6,8,12,.55);opacity:0;transition:opacity .25s ease}
dialog.drawer--args.is-open::backdrop {opacity:1}
dialog.drawer--args .drawer__body {padding:6px 26px 48px;overscroll-behavior:contain}
dialog.drawer--args .drawer__loading {display:flex;align-items:center;gap:10px}
body.argx-open {overflow:hidden}
@media (max-width:760px) {dialog.drawer--args {width:100vw;border-left:0} dialog.drawer--args .drawer__body {padding:6px 14px 40px}}
@media (prefers-reduced-motion:reduce) {dialog.drawer--args::backdrop {transition:none}}

/* ---- the sheet ---------------------------------------------------------------- */
.argx-section {padding-top:18px}
.drawer__body .argx-section {padding-top:12px}
.argx {min-width:0}
.argx-head {display:grid;gap:14px;max-width:1040px}
.argx-kicker {display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:0;font-size:.8rem;color:#aab0bc}
.argx-kicker__theme {display:inline-flex;align-items:center;gap:7px;color:#f3e8eb;font-weight:600;text-decoration:none}
a.argx-kicker__theme:hover {color:#ff8589}
.argx-kicker .theme-icon {width:17px;height:17px;color:#ff8589}
.observatory .argx .argx-title {margin:10px 0 8px;font-family:var(--font-body)!important;font-weight:600;font-size:clamp(1.18rem,1.9vw,1.5rem);line-height:1.38;letter-spacing:-.005em;color:#fff7e6}
.observatory .argx .argx-title--plain {font-family:var(--font-display)!important;font-weight:700;font-size:clamp(1.6rem,2.8vw,2.3rem);line-height:1.08;color:#f3e8eb;margin:2px 0 0}
.argx-lead {margin:0;max-width:80ch;font-size:.95rem;line-height:1.65;color:#c6c9d1}
.argx-claim {margin:0}
.argx-flag {display:flex;gap:9px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid #353641;border-radius:4px;background:#191c23;font-size:.84rem;line-height:1.5;color:#c6c9d1}
.argx-flag .ico {width:16px;height:16px;margin:2px 0 0;flex:none;color:#ff8589}
.argx-flag a {color:#e9b4b8;margin-left:4px}

/* the figures: tiles as on the video record */
.argx-figs,.argx-stats {list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px}
.argx-figs li,.argx-stats li {border:1px solid #353641;background:rgba(20,23,32,.9);border-radius:4px;padding:10px 12px;display:grid;grid-template-columns:20px minmax(0,1fr);gap:2px 10px;align-items:center;min-width:0}
.argx-figs .ico,.argx-stats .ico {width:18px;height:18px;margin:0;grid-row:span 2;color:#ff8589}
.argx-figs b,.argx-stats b {font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:#f3e8eb;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.argx-figs span,.argx-stats span {font-size:.72rem;color:#9aa1ae;line-height:1.3}

/* who puts it forward, who contests it: one bar per orientation */
.argx-sharebox {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 28px;padding:16px 18px;border:1px solid #353641;border-radius:4px;background:rgba(20,23,32,.9)}
.argx-sharebox--one {grid-template-columns:minmax(0,1fr)}
.argx-sharebox > .argx-note {grid-column:1 / -1;margin:0}
.argx-cap {display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:#9aa1ae;margin:0 0 8px}
.argx-shares {list-style:none;margin:0;padding:0;display:grid;gap:9px}
.argx-share {display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.5fr) 3.2em;grid-template-areas:'l b v' '. n n';gap:2px 10px;align-items:center}
.argx-share__label {grid-area:l;font-size:.84rem;color:#e8e6df;display:inline-flex;align-items:center;gap:7px;min-width:0}
.argx-share__label i {width:9px;height:9px;border-radius:50%;background:var(--o,#64748b);flex:none}
.argx-share__bar {grid-area:b;height:8px;border-radius:999px;background:#ffffff0d;overflow:hidden}
.argx-share__bar b {display:block;height:100%;width:0;background:var(--o,#64748b);border-radius:999px;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.bars--on .argx-share__bar b {width:var(--w)}
.argx-share__v {grid-area:v;text-align:right;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:#f3e8eb;font-variant-numeric:tabular-nums}
.argx-share__n {grid-area:n;font-size:.72rem;color:#9aa1ae}
.argx-orients {display:grid;gap:4px}
.argx-orients .split-legend {margin:0}

/* ---- the stage and the list ------------------------------------------------- */
.argx-main {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(300px,.9fr);gap:24px;align-items:start;margin-top:24px}
.argx-stagecol,.argx-listcol {min-width:0}
.argx-stage {display:grid;gap:14px;animation:argxIn .3s ease;scroll-margin-top:calc(var(--tools-h,0px) + 16px)}
dialog.drawer--args .argx-stage {scroll-margin-top:10px}
.argx-stage[hidden] {display:none}
@keyframes argxIn {from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce) {.argx-stage {animation:none} .argx-share__bar b {transition:none}}

/* the quote chosen, verbatim: italic between guillemets, no coloured edge */
.argx-said {margin:0;padding:16px 18px 14px;border:1px solid #353641;border-radius:4px;background:#191c23}
.argx-said blockquote {margin:0}
.argx-said p {margin:0;font-size:1.04rem;line-height:1.66;color:#f1efe9;font-style:italic}
.argx-said figcaption {display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;margin-top:10px;font-size:.78rem;color:#aab0bc}
.argx-said figcaption span {display:inline-flex;align-items:center;gap:7px}
.argx-said figcaption i {width:8px;height:8px;border-radius:50%;background:var(--o,#64748b);flex:none}
.argx-said figcaption b {font-weight:600;color:#ff8589;font-size:.74rem}
.argx-said figcaption b.argx-tag--kept {color:#e9b4b8}
.argx-said--contest {background:#1b1a21}

/* the player: the thumbnail and a button; the platform's player on request */
.argx-player {position:relative;aspect-ratio:16/9;background:#101216;border:1px solid #353641;border-radius:4px;overflow:hidden}
.argx-player--tt {aspect-ratio:9/16;max-height:min(70vh,640px);width:auto;max-width:100%;margin:0 auto}
.argx-player img {width:100%;height:100%;object-fit:cover;display:block;opacity:.82;transition:opacity .2s,transform .4s}
.argx-player:hover img {opacity:.95;transform:scale(1.01)}
.argx-player iframe {position:absolute;inset:0;width:100%;height:100%;border:0}
.argx-player__tt {position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;padding:24px;text-align:center;background:linear-gradient(160deg,#2a1f23,#15181e);color:#e9b4b8;font-size:.95rem;line-height:1.45}
.argx-player__tt .plat {width:34px;height:34px;color:#ff8589}
.argx-play {position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(180deg,transparent 40%,#0008);border:0;cursor:pointer;color:#fff;font:inherit;padding:0}
.argx-play span {display:inline-flex;align-items:center;gap:9px;background:#b82330;padding:11px 18px;border-radius:3px;font-size:.92rem;font-weight:600;box-shadow:0 10px 30px #0009;transition:background .2s,transform .2s}
.argx-play .ico {width:20px;height:20px;margin:0;color:#fff}
.argx-play:hover span,.argx-play:focus-visible span {background:#d32b3a;transform:translateY(-1px)}
.argx-pos {margin:-4px 0 0;font-size:.78rem;line-height:1.55;color:#9aa1ae}
.argx-pos b {color:#e9b4b8;font-weight:600}
.argx-pos button {appearance:none;background:none;border:0;padding:0;margin-left:4px;color:#e9b4b8;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.argx-pos button:hover {color:#fff}

/* a video removed since: said, no player */
.argx-gone {display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px 18px;border:1px solid #4a2b32;border-radius:4px;background:#1d1518}
.argx-gone__ico .ico {width:30px;height:30px;margin:2px 0 0;color:#ff8589}
.argx-gone strong {display:block;color:#f3e8eb;font-size:.98rem;margin-bottom:4px}
.argx-gone p {margin:0 0 6px;font-size:.88rem;line-height:1.6;color:#c6c9d1}
.argx-gone a {font-size:.84rem;color:#e9b4b8}

/* the video: what it is, where it comes from, its audience */
.argx-video {display:grid;gap:8px;padding:16px 18px;border:1px solid #353641;border-radius:4px;background:rgba(20,23,32,.9)}
.argx-video__k {display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:0;font-size:.76rem;color:#aab0bc}
.argx-video__k span {display:inline-flex;align-items:center;gap:6px}
.argx-video__k i {width:8px;height:8px;border-radius:50%;background:var(--o,#64748b)}
.argx-video__k .plat {width:14px;height:14px}
.observatory .argx .argx-video__title {margin:0;font-family:var(--font-display)!important;font-weight:700;font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.12;letter-spacing:.005em}
.argx-video__title a {color:#f3e8eb;text-decoration:none}
.argx-video__title a:hover {color:#ff8589}
.argx-video__orig {margin:0;font-size:.8rem;color:#9aa1ae;line-height:1.45}
.argx-video__ch {margin:0;display:inline-flex;align-items:center;gap:7px;font-size:.88rem}
.argx-video__ch .ico {width:15px;height:15px;margin:0;color:#ff8589}
.argx-video__ch a {color:#e9b4b8;text-decoration:none}
.argx-video__ch a:hover {color:#fff}
.argx-stats {margin:4px 0 0;grid-template-columns:repeat(4,minmax(0,1fr))}
.argx-stats b {font-size:1.25rem}
.argx-video__links {display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:6px 0 0}
.argx-ext {font-size:.84rem;color:#e9b4b8;text-decoration:none}
.argx-ext:hover {color:#fff}
.argx-sum,.argx-box {margin:0}
.argx-box h3 {display:flex;align-items:center;gap:8px;font-size:.95rem;font-weight:600;margin:0 0 10px;color:#f1efe9}
.argx-box h3 .ico {width:16px;height:16px;margin:0;color:#ff8589;flex:none}
.argx-theses a {color:#e8e6df;text-decoration:none}
.argx-theses a:hover {color:#fff;text-decoration:underline;text-decoration-color:#ff8589;text-underline-offset:3px}
.argx-theses li.is-mark a {color:#fff}
.argx-theses li.is-mark small b {color:#ff8589;font-weight:600}
.argx-theses li.is-on {background:#2a1f23;margin:0 -10px;padding:9px 10px;border-radius:3px;border-bottom-color:transparent}
.argx-theses li.is-on a {color:#fff}
.argx-note {margin:10px 0 0;font-size:.76rem;line-height:1.55;color:#8e95a3}

/* the list: every quote or video, the one shown marked */
.argx-listh {display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:.95rem;font-weight:600;color:#f1efe9}
.argx-listh .ico {width:16px;height:16px;margin:0;color:#ff8589;flex:none}
.argx-listh b {margin-left:auto;font-family:var(--font-display);font-size:1.1rem;color:#ff8589}
.argx-list + .argx-listh,.argx-others + .argx-listh,.argx-note + .argx-listh {margin-top:22px}
.argx-list {list-style:none;margin:0;padding:0;display:grid;gap:8px}
.argx-item {display:grid;grid-template-columns:96px minmax(0,1fr);gap:11px;padding:8px;border:1px solid #30323a;border-radius:4px;background:#191c23;color:inherit;text-decoration:none;transition:border-color .18s,background .18s,transform .18s}
.argx-item:hover {border-color:#8a4b55;transform:translateY(-1px)}
.argx-item.is-on {border-color:#d85a64;background:#221a1e;box-shadow:0 0 0 1px #d85a6433}
.argx-item__thumb {position:relative;width:96px;aspect-ratio:16/9;border-radius:2px;overflow:hidden;background:#101216;display:grid;place-items:center;align-self:start}
.argx-item__thumb img {width:100%;height:100%;object-fit:cover;display:block}
.argx-item__thumb--tt {background:#2a1f23}
.argx-item__thumb .plat {width:22px;height:22px}
.argx-item__thumb em {position:absolute;right:3px;bottom:3px;font-style:normal;font-size:.62rem;font-weight:600;color:#fff;background:#000c;padding:1px 4px;border-radius:2px;font-variant-numeric:tabular-nums}
.argx-item__body {display:grid;gap:5px;min-width:0}
.argx-item__text {font-size:.86rem;line-height:1.5;color:#e6e3dc;font-style:italic;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.argx-item__title {font-size:.88rem;line-height:1.4;font-weight:600;color:#eeede9;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.argx-item small {font-size:.72rem;color:#9aa1ae;line-height:1.4}
.argx-item small i {display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--o,#64748b);margin-right:5px;vertical-align:1px}
.argx-item small b {color:#e9b4b8;font-weight:600}
.argx-item.is-on .argx-item__text {color:#fff}
.argx-item--contest .argx-item__text {color:#cfd0d6}

/* other arguments, other claims, the theme arguments quoting the video */
.argx-others,.argx-related {list-style:none;margin:0;padding:0;display:grid;gap:6px}
.argx-others a {display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:9px 10px;border:1px solid #30323a;border-radius:4px;background:#191c23;color:#e6e3dc;text-decoration:none;font-size:.88rem;line-height:1.5;transition:border-color .18s}
.argx-others a:hover {border-color:#8a4b55;color:#fff}
.argx-others a.is-on {border-color:#d85a64;background:#221a1e;color:#fff}
.argx-others small {display:block;color:#9aa1ae;font-size:.72rem;margin-top:2px}
.argx-others__n {font-family:var(--font-display);font-weight:800;font-size:1.05rem;line-height:1.3;color:#ff8589;min-width:1.6em}
.argx-related a {display:grid;gap:4px;padding:10px 12px;border:1px solid #30323a;border-radius:4px;background:#191c23;color:inherit;text-decoration:none;transition:border-color .18s}
.argx-related a:hover {border-color:#8a4b55}
.argx-related__k {display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:#9aa1ae}
.argx-related__k .theme-icon {width:14px;height:14px;color:#ff8589}
.argx-related__t {font-size:.9rem;line-height:1.45;color:#f1efe9;font-weight:600}
.argx-related__q {font-size:.8rem;line-height:1.5;color:#c6c9d1;font-style:italic;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.argx-foot {display:grid;gap:14px;margin-top:28px;max-width:1040px}
.argx--gone .argx-box {margin-top:18px}
.argx--gone .argx-links {margin-top:16px}
.argx-links {display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;font-size:.86rem}
.argx-links a {color:#e9b4b8}
.argx-links a:hover {color:#fff}

/* a quote, an argument, a claim that opens its panel (theme page, week in review,
   panel of the week, video record) */
.argx-open {display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:600;color:#e9b4b8;text-decoration:none;padding:6px 11px;border:1px solid #5a3a41;border-radius:3px;background:#2a1f23;transition:border-color .18s,color .18s}
.argx-open:hover {border-color:#d85a64;color:#fff}
.argx-open .ico {width:15px;height:15px;margin:0;color:#ff8589}
/* the theme page: the quotes and the clearest sentences are links to their panel */
a.quote__video,a.said__video {text-decoration:none;color:inherit}
.framing-arg__open {margin:0;padding:0 20px 18px}
a.argx-link {color:inherit;text-decoration:none}
a.argx-link:hover {color:#fff;text-decoration:underline;text-decoration-color:#ff8589;text-underline-offset:3px}

/* ---- tablet (641-1000): the stage above, the list below on two columns -------- */
@media (max-width:1000px) {
  .argx-main {grid-template-columns:minmax(0,1fr)}
  .argx-list {grid-template-columns:repeat(2,minmax(0,1fr))}
  .argx-main--claim .argx-listcol {display:grid;gap:0}
}
/* ---- phone (up to 640): one column; the shares one under the other ------------ */
@media (max-width:640px) {
  .argx-sharebox {grid-template-columns:minmax(0,1fr);padding:14px}
  .argx-share {grid-template-columns:minmax(0,1fr) 3em;grid-template-areas:'l v' 'b b' 'n n'}
  .argx-list {grid-template-columns:minmax(0,1fr)}
  .argx-figs {grid-template-columns:repeat(2,minmax(0,1fr))}
  .argx-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
  .argx-item {grid-template-columns:84px minmax(0,1fr)}
  .argx-item__thumb {width:84px}
  .argx-said {padding:14px}
  .argx-said p {font-size:.98rem}
  .argx-video {padding:14px}
  .argx-kicker {gap:4px 14px}
  .argx-figs li:last-child:nth-child(odd) {grid-column:1 / -1}
  .argx-figs li,.argx-stats li {padding:9px 10px}
  .framing-arg__open {padding:0 14px 14px}
}