/* shell2/paper.css — the brutal («کاغذ و مداد») skin for the PAGE BODY.
   ui.css skins the player device (bar/sheet/menu/sidebar); this sheet extends
   the same identity to the shell chrome and page content. Everything is scoped
   under html[data-ir2-skin="brutal"], so warm/engine keep the dark site as-is.
   Loaded LAST from shell.php so it can override page stylesheets.

   Identity rules (same language as ui.css):
   - paper #fbfaf5, graphite #1f1f1f, monochrome; the ONE allowed color is the
     red live-dot (the classic red pencil) + photos themselves
   - boxes are sketched: 1.6-2px graphite borders, wobbled corners, offset
     pencil shadows, slight alternating tilts (glued-photo feel)
   - dividers/underlines are the hand-wavy stroke, never a ruler line */

html[data-ir2-skin="brutal"] {
  --bg: #fbfaf5;
  --panel: #f1efe6;
  --line: #1f1f1f;
  --muted: rgba(31,31,31,.55);
  --gold: #1f1f1f;               /* monochrome: the old gold accents become pencil */
  --accent: #1f1f1f;
  --pp-wob-a: 14px 10px 16px 9px / 10px 15px 9px 16px;
  --pp-wob-b: 10px 13px 9px 14px / 13px 9px 14px 10px;
  --pp-shadow: 3px 4px 0 rgba(31,31,31,.14);
  --pp-pencil: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='5'%20viewBox='0%200%20120%205'%3E%3Cpath%20d='M0,2.5%20Q10,1.4%2020,2.4%20T40,2.6%20T60,2.4%20T80,2.6%20T100,2.4%20T120,2.5'%20fill='none'%20stroke='%231f1f1f'%20stroke-width='1.7'%20stroke-linecap='round'/%3E%3C/svg%3E");
}
html[data-ir2-skin="brutal"] body { background: var(--bg); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .app-main { color: #1f1f1f; }

/* ---------- topbar ---------- */
html[data-ir2-skin="brutal"] .app-top {
  background: var(--bg);
  border-bottom: 2px solid var(--line);
  box-shadow: none;
}
/* the new «رادیو بوفی» owl logo is dark + colored for a LIGHT background, so it
   needs NO filter on paper (the old invert existed only to darken the old
   light-on-dark gold logo). Brand marks are a sanctioned color exception to the
   P-02 monochrome rule, same as photos and the red live dot. */
html[data-ir2-skin="brutal"] .tb-burger { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-search { background: #fff; border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .tb-search input { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-search input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .tbs-ic { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .tb-lang { color: #1f1f1f; border-color: var(--line); }
html[data-ir2-skin="brutal"] .tb-login { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .tb-drop { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; box-shadow: 4px 5px 0 rgba(31,31,31,.14); }
html[data-ir2-skin="brutal"] .tb-drop * { color: inherit; }
html[data-ir2-skin="brutal"] .tb-avamenu { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .tb-avamenu a, html[data-ir2-skin="brutal"] .tb-avamenu button { color: #1f1f1f; }

/* ---------- left nav + mobile tabs ---------- */
html[data-ir2-skin="brutal"] .app-left { background: var(--bg); border-color: var(--line); box-shadow: none; }
html[data-ir2-skin="brutal"] .litem { color: rgba(31,31,31,.62); }
html[data-ir2-skin="brutal"] .litem[style] { color: #1f1f1f !important; }   /* the inline-gold فال item joins the monochrome */
html[data-ir2-skin="brutal"] .litem[style] svg { stroke: #1f1f1f; }
html[data-ir2-skin="brutal"] .litem:hover { color: #1f1f1f; background: rgba(31,31,31,.06); }
html[data-ir2-skin="brutal"] .litem.active {
  color: #fbfaf5 !important; background: #1f1f1f;
  border-radius: var(--pp-wob-b);            /* sketched fill */
}
html[data-ir2-skin="brutal"] .litem.active svg { stroke: #fbfaf5; }
html[data-ir2-skin="brutal"] .app-tabs { background: var(--bg); border-top: 2px solid var(--line); }
html[data-ir2-skin="brutal"] .app-tabs .tab { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .app-tabs .tab.active { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .app-right { background: var(--bg); border-color: var(--line); }

/* ---------- section headers: bold graphite + hand-wavy underline ---------- */
html[data-ir2-skin="brutal"] .lsect .lh h2,
html[data-ir2-skin="brutal"] .hwel { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .lsect .lh h2 {
  padding-bottom: 7px;
  background: var(--pp-pencil) left bottom / 120px 5px repeat-x;
}
html[data-ir2-skin="brutal"] .lsect .lh .more { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .lsect .lh .more:hover { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .lsect .lh .hint { color: rgba(31,31,31,.5); }

/* ---------- tiles & strips: glued photos in pencil frames ---------- */
html[data-ir2-skin="brutal"] .ctile, html[data-ir2-skin="brutal"] .albtile, html[data-ir2-skin="brutal"] .artile { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ctile .cta, html[data-ir2-skin="brutal"] .albtile .als { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .ctile .ccov,
html[data-ir2-skin="brutal"] .albtile .alcov,
html[data-ir2-skin="brutal"] .redisc .bigtile,
html[data-ir2-skin="brutal"] .redisc .smtile {
  border: 1.6px solid var(--line);
  border-radius: var(--pp-wob-b);
  box-shadow: var(--pp-shadow);
  background-color: #efede3;
}
html[data-ir2-skin="brutal"] .artile .acirc {
  border: 1.6px solid var(--line);
  border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%;   /* potato circle */
  box-shadow: var(--pp-shadow);
  background-color: #efede3;
  color: rgba(31,31,31,.6);
}
/* glued-in tilt, alternating so the page feels laid out by hand */
html[data-ir2-skin="brutal"] .strp > *:nth-child(odd) { transform: rotate(.6deg); }
html[data-ir2-skin="brutal"] .strp > *:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .strp > *:hover { transform: rotate(0deg) translateY(-3px); }
html[data-ir2-skin="brutal"] .redisc .bigtile:nth-child(odd), html[data-ir2-skin="brutal"] .redisc .smtile:nth-child(odd) { transform: rotate(.5deg); }
html[data-ir2-skin="brutal"] .redisc .bigtile:nth-child(even), html[data-ir2-skin="brutal"] .redisc .smtile:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .redisc .bigtile:hover, html[data-ir2-skin="brutal"] .redisc .smtile:hover { transform: rotate(0deg) translateY(-3px); }
/* photo tiles keep their dark gradient + white caption (text sits ON the photo) */

/* ---------- live hero cards: sketched boxes, graphite play, red-pencil dot ---------- */
html[data-ir2-skin="brutal"] .live-card {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--pp-wob-a);
  box-shadow: var(--pp-shadow);
  color: #1f1f1f;
}
html[data-ir2-skin="brutal"] .live-card:hover { border-color: var(--line); box-shadow: 4px 5px 0 rgba(31,31,31,.2); }
html[data-ir2-skin="brutal"] .live-card.on { background: #ece9dd; }
html[data-ir2-skin="brutal"] .live-card .lc-cov { border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); box-shadow: none; background-color: #efede3; transform: rotate(-.6deg); }
html[data-ir2-skin="brutal"] .live-card .lc-badge { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .live-card .lc-dot { background: #d23c3c; }   /* the one color: red pencil */
html[data-ir2-skin="brutal"] .live-card .lc-name { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .live-card .lc-track { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .live-card .lc-play {
  background: #1f1f1f; color: #fbfaf5;
  border-radius: 52% 48% 55% 45% / 46% 56% 44% 54%;   /* pencil blob */
  box-shadow: 2px 3px 0 rgba(31,31,31,.18);
  transform: rotate(-1.2deg);
}
html[data-ir2-skin="brutal"] .live-card.on .lc-play { color: #fbfaf5; }
/* connecting = dashed pencil frame instead of the golden pulse */
html[data-ir2-skin="brutal"] .live-card.connecting { animation: none; border-style: dashed; }
html[data-ir2-skin="brutal"] .live-card.connecting .lc-play::before { border-color: rgba(251,250,245,.35); border-top-color: #fbfaf5; }

/* ---------- featured podcast + CTAs + banner ---------- */
html[data-ir2-skin="brutal"] .ep-feat { background: var(--panel); border: 2px solid var(--line); border-radius: var(--pp-wob-a); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .ep-feat:hover { border-color: var(--line); transform: translateY(-2px); }
html[data-ir2-skin="brutal"] .ep-feat .ef-cov { border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); box-shadow: none; transform: rotate(.6deg); }
html[data-ir2-skin="brutal"] .ep-feat .ef-k { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ep-feat .ef-t { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .ep-feat .ef-s { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .ep-feat .ef-p { background: #1f1f1f; color: #fbfaf5; border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; }
html[data-ir2-skin="brutal"] .brcta { background: var(--panel); border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .brcta .brsub { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .brcta .brarr { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .gbanner { background: var(--panel); border: 1.6px solid var(--line); border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .gbanner .gbtxt b { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .gbanner .gbtn { background: #1f1f1f; color: #fbfaf5; }

/* ---------- personal radio cards: paper card, colored-pencil glow kept ---------- */
html[data-ir2-skin="brutal"] .mradios .mrcard {
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: var(--pp-wob-a);
  color: #1f1f1f;
  box-shadow: var(--pp-shadow);
}
html[data-ir2-skin="brutal"] .mradios .mrcard::before { opacity: .3; }   /* the seed tint reads as colored pencil on paper */
html[data-ir2-skin="brutal"] .mradios .mrcard:hover { transform: translateY(-4px); box-shadow: 4px 6px 0 rgba(31,31,31,.2); border-color: var(--line); }
html[data-ir2-skin="brutal"] .mradios .mrbadge { background: #1f1f1f; color: #fbfaf5; backdrop-filter: none; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .mradios .mrcov { border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; box-shadow: none; border: 2px solid var(--line); background-color: #efede3; }
html[data-ir2-skin="brutal"] .mradios .mrmini { border-radius: 52% 48% 55% 45% / 46% 56% 44% 54%; box-shadow: none; border: 1.6px solid var(--line); background-color: #efede3; }
html[data-ir2-skin="brutal"] .mradios .mrt { color: #1f1f1f; text-shadow: none; }
html[data-ir2-skin="brutal"] .mradios .mra { color: rgba(31,31,31,.6); text-shadow: none; }

/* ---------- shared page primitives (rows/cards most pages reuse) ---------- */
html[data-ir2-skin="brutal"] .trow:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .trow .ta,
html[data-ir2-skin="brutal"] .ta { color: rgba(31,31,31,.55); }
html[data-ir2-skin="brutal"] .trow img.th { background: #efede3; border: 1px solid rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .mhero { background: var(--panel); border: 1.6px solid var(--line); box-shadow: var(--pp-shadow); }
html[data-ir2-skin="brutal"] .kebab, html[data-ir2-skin="brutal"] .row-addq { color: rgba(31,31,31,.5); }
html[data-ir2-skin="brutal"] .kebab:hover, html[data-ir2-skin="brutal"] .row-addq:hover { background: rgba(31,31,31,.08); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .rowlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .rowlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .relsep { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .relsep::before, html[data-ir2-skin="brutal"] .relsep::after { background: none; height: 5px; background-image: var(--pp-pencil); background-repeat: repeat-x; background-size: 120px 5px; }

/* ---------- login modal (its own css is hardcoded dark) ---------- */
html[data-ir2-skin="brutal"] .rlogincard { background: #fbfaf5; border: 2px solid #1f1f1f; border-radius: var(--pp-wob-a); box-shadow: 5px 6px 0 rgba(31,31,31,.25); }
html[data-ir2-skin="brutal"] .rloginpop .rlptitle, html[data-ir2-skin="brutal"] .rloginpop .rlpsub { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .rloginx { background: rgba(31,31,31,.08); color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .elform input { background: #fff; border: 1.6px solid #1f1f1f; color: #1f1f1f; }
html[data-ir2-skin="brutal"] .elform input::placeholder { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .elform .elcode { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .elform .elbtn { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .elform .ellink { color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .elform .elhint { color: rgba(31,31,31,.65); }

/* ---------- /list (playlist page — its inline styles assume the dark site) ---------- */
html[data-ir2-skin="brutal"] .playall {
  background: #1f1f1f; color: #fbfaf5;
  border-radius: var(--pp-wob-a);
  box-shadow: 2px 3px 0 rgba(31,31,31,.18);
  transform: rotate(-.8deg);
}
html[data-ir2-skin="brutal"] .editbtn {
  background: none; border: 1.6px solid var(--line); color: #1f1f1f;
  border-radius: var(--pp-wob-b);
}
html[data-ir2-skin="brutal"] .editbtn.on { background: #1f1f1f; border-color: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .edinput { background: #fff; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .addcur {
  background: rgba(31,31,31,.06);
  border: 1.6px solid var(--line); color: #1f1f1f;
  border-radius: var(--pp-wob-b);
}
html[data-ir2-skin="brutal"] .addcur:hover { background: #1f1f1f; color: #fbfaf5; }
html[data-ir2-skin="brutal"] .herobtn { background: #fbfaf5; border: 1.6px solid var(--line); color: #1f1f1f; backdrop-filter: none; border-radius: 47% 53% 46% 54% / 54% 46% 55% 45%; }
html[data-ir2-skin="brutal"] #plhero h1, html[data-ir2-skin="brutal"] #plhero .mc { text-shadow: none; }
html[data-ir2-skin="brutal"] .gate h2, html[data-ir2-skin="brutal"] .gate p { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .msg a { color: #1f1f1f; font-weight: 800; }
html[data-ir2-skin="brutal"] .lw .trow .idx { color: rgba(31,31,31,.5); }

/* ---------- /browse hub: data-colored tiles become colored-pencil patches ---------- */
html[data-ir2-skin="brutal"] .brw .sub { color: rgba(31,31,31,.6); opacity: 1; }
html[data-ir2-skin="brutal"] .brw .sectitle {
  opacity: 1; color: #1f1f1f;
  display: inline-block; padding-bottom: 7px;
  background: var(--pp-pencil) left bottom / 120px 5px repeat-x;
}
html[data-ir2-skin="brutal"] .brw .sec.bare { border-top: none; background: var(--pp-pencil) left top / 120px 5px repeat-x; }
html[data-ir2-skin="brutal"] .brw .subsec { border-inline-start: 2px solid rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .brw .subtitle { opacity: 1; color: rgba(31,31,31,.6); }
html[data-ir2-skin="brutal"] .brw .tile,
html[data-ir2-skin="brutal"] .brw .grouptile {
  border: 1.6px solid var(--line);
  border-radius: var(--pp-wob-b);
  box-shadow: var(--pp-shadow);
}
html[data-ir2-skin="brutal"] .brw .tiles > *:nth-child(odd), html[data-ir2-skin="brutal"] .brw .gtiles > *:nth-child(odd) { transform: rotate(.5deg); }
html[data-ir2-skin="brutal"] .brw .tiles > *:nth-child(even), html[data-ir2-skin="brutal"] .brw .gtiles > *:nth-child(even) { transform: rotate(-.5deg); }
html[data-ir2-skin="brutal"] .brw .tile:hover, html[data-ir2-skin="brutal"] .brw .grouptile:hover { transform: rotate(0deg) translateY(-3px); }
html[data-ir2-skin="brutal"] .brw .backlink { background: none; border: 1.6px solid var(--line); color: #1f1f1f; opacity: 1; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .brw .backlink:hover { background: rgba(31,31,31,.06); }
html[data-ir2-skin="brutal"] .brw .trow:hover { background: rgba(31,31,31,.05); }
html[data-ir2-skin="brutal"] .brw .trow .th { box-shadow: none; }
html[data-ir2-skin="brutal"] .brw .rlike { color: rgba(31,31,31,.4); }
html[data-ir2-skin="brutal"] .brw .rlike.isliked { color: #1f1f1f; }
html[data-ir2-skin="brutal"] .brw .qpbtn { background: #1f1f1f; color: #fbfaf5; border-radius: var(--pp-wob-a); box-shadow: 2px 3px 0 rgba(31,31,31,.18); }
html[data-ir2-skin="brutal"] .brw .qpbtn.save { background: none; border: 1.6px solid var(--line); color: #1f1f1f; }
html[data-ir2-skin="brutal"] .brw .pager a { background: none; border: 1.6px solid var(--line); color: #1f1f1f; border-radius: var(--pp-wob-b); }
html[data-ir2-skin="brutal"] .brw .empty { color: rgba(31,31,31,.5); opacity: 1; }

/* ---------- scrollbars ---------- */
html[data-ir2-skin="brutal"] .app-main:hover, html[data-ir2-skin="brutal"] .right-scroll:hover { scrollbar-color: rgba(31,31,31,.3) transparent; }
html[data-ir2-skin="brutal"] .app-main:hover::-webkit-scrollbar-thumb,
html[data-ir2-skin="brutal"] .right-scroll:hover::-webkit-scrollbar-thumb { background: rgba(31,31,31,.3); }