/* Repàs Actiu: grafisme editorial sobri — intervenció visual 2026-10-11.
   Detalls d'arxiu, paper i fitxes. Sense fonts ni imatges externes. */
:root{
 --detail-ink:#796954;
 --detail-ink-soft:#b7a58c;
 --detail-wash:#eeeae1;
 --detail-fine:color-mix(in srgb,var(--detail-ink) 22%,var(--border));
 --detail-shadow:0 9px 28px rgba(47,43,37,.045);
}
:root[data-theme="dark"]{
 --detail-ink:#c2aa8c;
 --detail-ink-soft:#8d7860;
 --detail-wash:#34302a;
 --detail-fine:color-mix(in srgb,var(--detail-ink) 28%,var(--border));
 --detail-shadow:0 8px 24px rgba(0,0,0,.11);
}
/* La marca adopta una icona de full encunyat, dibuixada amb CSS. */
.site-header .brand{display:inline-flex;align-items:center;gap:.58rem}
.site-header .brand::before{
 content:"";display:block;flex:0 0 22px;width:22px;height:25px;
 border:1.5px solid var(--detail-ink);border-radius:3px 7px 3px 3px;
 background:
  linear-gradient(var(--detail-ink-soft),var(--detail-ink-soft)) 5px 10px/10px 1px no-repeat,
  linear-gradient(var(--detail-ink-soft),var(--detail-ink-soft)) 5px 15px/10px 1px no-repeat,
  linear-gradient(var(--detail-ink-soft),var(--detail-ink-soft)) 5px 20px/6px 1px no-repeat;
 transform:rotate(-3deg);
}
.site-header .primary-nav button{position:relative}
.site-header .primary-nav button:not(:disabled)::after{
 content:"";position:absolute;bottom:3px;left:.65rem;right:.65rem;height:1px;
 background:var(--detail-ink);opacity:0;transform:scaleX(.45);transition:opacity .15s,transform .15s;
}
.site-header .primary-nav button:not(:disabled):hover::after,
.site-header .primary-nav button:not(:disabled):focus-visible::after{opacity:1;transform:scaleX(1)}
/* Portada amb un marc d'edició suau i una quadrícula de paper al marge. */
#home-screen .hero{
 position:relative;padding:clamp(1.4rem,4vw,2.4rem);
 margin:0 0 clamp(1.7rem,4vw,2.5rem);
 border:1px solid var(--detail-fine);border-radius:1.15rem;
 background:
  repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--detail-ink) 8%,transparent) 23px 24px) right 1.25rem top 1rem/25% calc(100% - 2rem) no-repeat,
  linear-gradient(125deg,color-mix(in srgb,var(--detail-wash) 48%,var(--surface)),var(--surface));
 box-shadow:var(--detail-shadow);overflow:hidden;
}
#home-screen .hero::before{
 content:"";position:absolute;top:0;left:1.4rem;width:56px;height:3px;
 background:var(--detail-ink);border-radius:0 0 3px 3px;
}
#home-screen .hero::after{
 content:"";position:absolute;right:1.4rem;bottom:1.25rem;width:39px;height:39px;
 border-right:1px solid var(--detail-ink-soft);border-bottom:1px solid var(--detail-ink-soft);
 border-radius:0 0 .2rem 0;opacity:.55;pointer-events:none;
}
#home-screen .hero h1{max-width:30ch;position:relative;z-index:1}
#home-screen .hero>p:last-child{max-width:55ch;margin-bottom:0;position:relative;z-index:1}
#home-screen .hero>.eyebrow{color:var(--detail-ink)}
/* Separadors editorials: el títol no competeix amb les fitxes. */
.home-tools-heading{padding:0 0 .75rem;border-bottom:1px solid var(--detail-fine)}
.home-tools-heading h2::before{
 content:"";display:inline-block;margin-right:.58rem;width:4px;height:.8em;
 background:var(--detail-ink);border-radius:3px;vertical-align:0;
}
.home-tools .all-blocks .block-card{
 border-color:var(--detail-fine);
 background:linear-gradient(100deg,color-mix(in srgb,var(--detail-wash) 63%,var(--surface)),var(--surface));
}
.home-tools .all-blocks .block-card::after{
 content:"↗";align-self:center;color:var(--detail-ink);font-size:1.2rem;margin-left:auto;
}
/* Targetes d'eines: pictogrames de traç fi i estat interactiu discret. */
.home-tools-grid{gap:.8rem}
.home-tools-grid .home-tool{
 position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
 grid-template-rows:37px 1fr;align-items:start;row-gap:.72rem;
 min-height:142px;padding:1rem;
 background:var(--surface);border:1px solid var(--detail-fine);
 border-radius:1rem;box-shadow:var(--detail-shadow);
 transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.home-tools-grid .home-tool::before{
 content:"";position:absolute;top:0;left:1rem;width:26px;height:2px;
 background:var(--detail-ink);opacity:.75;border-radius:0 0 3px 3px;
}
.home-tools-grid .home-tool:hover{
 border-color:var(--detail-ink-soft);
 box-shadow:0 9px 30px color-mix(in srgb,var(--detail-ink) 13%,transparent);
 transform:translateY(-2px);
}
.home-tools-grid .home-tool .tool-motif{
 grid-column:1 / -1;grid-row:1;
 display:grid;place-items:center;width:38px;height:38px;
 background:color-mix(in srgb,var(--detail-wash) 85%,var(--surface));
 color:var(--detail-ink);border:1px solid var(--detail-fine);border-radius:.7rem;
}
.home-tools-grid .home-tool .tool-motif svg{width:21px;height:21px;stroke-width:1.6;stroke:currentColor;fill:none;stroke-linejoin:round;stroke-linecap:round}
.home-tools-grid .home-tool strong{grid-column:1;grid-row:2;align-self:end;font-weight:700;line-height:1.4}
.home-tools-grid .home-tool .tool-arrow{
 grid-column:2;grid-row:2;align-self:end;display:grid;place-items:center;
 width:25px;height:25px;border:1px solid var(--detail-fine);
 border-radius:50%;color:var(--detail-ink);font-size:.92rem;
}
:root[data-theme="dark"] .home-tools-grid .home-tool,
:root[data-theme="dark"] .home-tools-grid .home-tool:hover{color:var(--text)}
:root[data-theme="dark"] .home-tools-grid .home-tool{background:var(--surface)}
:root[data-theme="dark"] .home-tools-grid .home-tool:hover{background:var(--surface-2)}
/* Jerarquia d'unitats — guia de lectura tipus índex documental. */
#home-screen .units{gap:2.4rem}
#home-screen .unit-group{position:relative;padding-left:1.15rem;border-left:1px solid var(--detail-fine)}
#home-screen .unit-group::before{
 content:"";position:absolute;top:.17rem;left:-3px;width:5px;height:29px;
 background:var(--detail-ink);border-radius:5px;
}
#home-screen .unit-heading{margin-bottom:1rem}
#home-screen .unit-heading .eyebrow{color:var(--detail-ink);letter-spacing:.11em}
#home-screen .unit-heading h2{font-size:clamp(1.1rem,2.2vw,1.32rem);line-height:1.36}
#home-screen .unit-group .blocks{gap:.65rem}
#home-screen .unit-group .block-card{
 display:grid;grid-template-columns:34px minmax(0,1fr) auto;
 align-items:center;gap:.9rem;padding:1rem 1.1rem;
 border-color:var(--detail-fine);box-shadow:var(--detail-shadow);
 transition:border-color .15s ease,transform .15s ease;
}
#home-screen .unit-group .block-card:hover{border-color:var(--detail-ink-soft);transform:translateX(2px)}
#home-screen .unit-group .block-card .block-file-icon{
 display:grid;place-items:center;width:34px;height:39px;
 color:var(--detail-ink);background:var(--detail-wash);
 border:1px solid var(--detail-fine);border-radius:.45rem;
}
#home-screen .unit-group .block-card .block-file-icon svg{width:21px;height:24px;stroke:currentColor;fill:none;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
#home-screen .unit-group .block-card .block-card-content{min-width:0}
#home-screen .unit-group .block-card .block-card-content strong{font-size:.9rem;color:var(--text);font-weight:750}
#home-screen .unit-group .block-card .block-card-content small{font-size:.85rem;line-height:1.4}
#home-screen .unit-group .block-card .card-meta{font-size:.79rem;font-weight:650;color:var(--muted)}
/* Composició gràfica coherent dins de les eines existents. */
.panel,.question-card{position:relative;border-color:var(--detail-fine)}
.panel::before,.question-card::before{
 content:"";position:absolute;left:1.3rem;top:-1px;width:42px;height:3px;
 background:var(--detail-ink);border-radius:0 0 3px 3px;pointer-events:none;
}
.primary{box-shadow:0 2px 0 color-mix(in srgb,var(--detail-ink) 55%,transparent)}
.primary:not(:disabled):hover{filter:brightness(.94)}
:root[data-theme="dark"] .primary:not(:disabled):hover{filter:brightness(1.13)}
.answer-option{transition:border-color .15s,background-color .15s}
.answer-option .choice-marker{border-color:var(--detail-fine);background:var(--detail-wash);color:var(--text)}
.answer-option[aria-pressed="true"] .choice-marker{border-color:var(--detail-ink);font-weight:800}
.study-card-face.front{border-color:var(--detail-fine)}
.study-card-face.front::before{
 content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
 width:54px;height:3px;background:var(--detail-ink);border-radius:0 0 4px 4px;
}
.dictionary-controls,.hangman-round,.stock-exercise-card,.stock-office-product{border-color:var(--detail-fine)}
.stock-exercise-card{position:relative;box-shadow:var(--detail-shadow)}
.stock-exercise-card::before{
 content:"";position:absolute;top:1rem;right:1rem;width:17px;height:20px;
 border:1px solid var(--detail-ink-soft);border-radius:2px;
 background:linear-gradient(var(--detail-ink-soft),var(--detail-ink-soft)) 4px 7px/7px 1px no-repeat,
 linear-gradient(var(--detail-ink-soft),var(--detail-ink-soft)) 4px 11px/7px 1px no-repeat;
 opacity:.7;pointer-events:none;
}
.stock-exercise-number{color:var(--detail-ink);letter-spacing:.08em}
.practical-tabs{border-color:var(--detail-fine);gap:.4rem}
.practical-tabs button{transition:background-color .15s ease}
.practical-tabs button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--detail-ink-soft)}
.site-footer-inner{position:relative;border-color:var(--detail-fine)}
.site-footer-inner::before{content:"";display:block;position:absolute;top:-1px;width:58px;height:2px;background:var(--detail-ink)}
/* Responsive: recuperar espai per a llegir, no augmentar llargada de pàgina. */
@media(max-width:760px){
 #home-screen .hero{padding:1.35rem 1.3rem;margin-bottom:1.6rem}
 #home-screen .hero::after{right:.9rem;bottom:.75rem;width:22px;height:22px}
 #home-screen .hero{background:linear-gradient(125deg,color-mix(in srgb,var(--detail-wash) 48%,var(--surface)),var(--surface))}
 .home-tools-grid .home-tool{min-height:118px;padding:.78rem;grid-template-rows:34px 1fr;row-gap:.48rem}
 .home-tools-grid .home-tool .tool-motif{width:34px;height:34px}
 .home-tools-grid .home-tool .tool-motif svg{width:19px;height:19px}
 .home-tools-grid .home-tool .tool-arrow{width:23px;height:23px}
 #home-screen .unit-group{padding-left:.75rem}
 #home-screen .unit-group .block-card{grid-template-columns:31px minmax(0,1fr);gap:.65rem;padding:.85rem}
 #home-screen .unit-group .block-card .block-file-icon{width:31px;height:36px;grid-column:1;grid-row:1 / 3}
 #home-screen .unit-group .block-card .block-card-content{grid-column:2;grid-row:1}
 #home-screen .unit-group .block-card .card-meta{grid-column:2;grid-row:2;white-space:normal;margin-top:-.1rem}
 .home-tools .all-blocks .block-card::after{font-size:1rem}
}
@media(max-width:360px){
 .home-tools-grid{gap:.55rem}
 .home-tools-grid .home-tool{padding:.65rem}
 .home-tools-grid .home-tool .tool-arrow{width:22px;height:22px}
 .home-tools-grid .home-tool strong{font-size:.84rem}
}
@media(prefers-reduced-motion:reduce){
 .home-tools-grid .home-tool,#home-screen .unit-group .block-card,
 .answer-option,.practical-tabs button{transition:none;transform:none}
}