/* ==========================================================================
   BARK design system — core: reset, type, layout, chrome, primitives.
   Every value comes from var(--tp-*) in theme.css. No raw colours, radii,
   durations or shadows below this line.
   ========================================================================== */

*,
*::before,
*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
    margin:0;
    min-height:100%;
    background:var(--tp-canvas);
    background-attachment:fixed;
    color:var(--tp-ink);
    font-family:var(--tp-font-body);
    font-size:var(--tp-text-base);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img,
svg,
video{max-width:100%;height:auto}

figure{margin:0}

a{color:inherit;text-decoration:none}

p{margin:0 0 var(--tp-space-4)}

p:last-child{margin-bottom:0}

ul,
ol{margin:0;padding:0;list-style:none}

hr{border:0;border-top:var(--tp-bw) solid var(--tp-line);margin:var(--tp-space-6) 0}

::selection{background:var(--tp-acc);color:var(--tp-acc-ink)}

:focus-visible{outline:2px solid var(--tp-acc-2);outline-offset:3px;border-radius:var(--tp-r-sm)}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0 0 var(--tp-space-3);
    font-family:var(--tp-font-display);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display);
    line-height:1.12;
    text-wrap:balance;
}

h1{font-size:var(--tp-text-3xl)}
h2{font-size:var(--tp-text-2xl)}
h3{font-size:var(--tp-text-xl)}
h4{font-size:var(--tp-text-lg)}
h5{font-size:var(--tp-text-md)}
h6{font-size:var(--tp-text-base)}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child{margin-bottom:0}

strong{font-weight:700;color:var(--tp-ink)}

small{font-size:var(--tp-text-sm)}

code,
kbd,
samp{font-family:var(--tp-font-mono);font-size:.92em}

/* Hand-labelled, workshop register: mono, spaced, small caps-ish. */
.eyebrow,
.section-kicker{
    display:inline-block;
    margin:0 0 var(--tp-space-2);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tp-mute);
}

.section-kicker::before{
    content:"";
    display:inline-block;
    width:16px;
    height:2px;
    margin-inline-end:var(--tp-space-2);
    vertical-align:middle;
    background:var(--tp-acc);
}

.muted{color:var(--tp-mute)}

.text-link{
    display:inline-flex;
    align-items:center;
    gap:var(--tp-space-2);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--tp-ink);
    border-bottom:2px solid var(--tp-acc);
    padding-bottom:2px;
    transition:color var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease)
}

.text-link::after{content:"\2192"}

[dir="rtl"] .text-link::after{content:"\2190"}

.text-link:hover{color:var(--tp-acc-2);border-color:var(--tp-acc-2)}

.text-link:active{transform:scale(var(--tp-press))}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.section,
.page-heading,
.hero,
.dashboard-hero,
.profile-hero,
.auth-section{
    position:relative;
    width:100%;
    max-width:var(--tp-shell);
    margin-inline:auto;
    padding-inline:var(--tp-space-5);
}

.section{padding-block:var(--tp-space-8)}

.section.narrow{max-width:var(--tp-shell-narrow)}

.section-title{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    justify-content:space-between;
    gap:var(--tp-space-5);
    margin-bottom:var(--tp-space-6)
}

.section-title>p{max-width:52ch;color:var(--tp-mute);margin:0}

.section-title-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--tp-space-3)}

.section-title-actions--end{justify-content:flex-end}

.grid{display:grid;gap:var(--tp-space-5)}

.grid.three{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

.grid.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}

.feature-list{display:flex;flex-wrap:wrap;gap:var(--tp-space-2);margin:0}

.feature-list>span{
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:var(--tp-space-1) var(--tp-space-4);
    background:var(--tp-surf-2);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-sm);
    font-weight:600;
    color:var(--tp-ink)
}

.card-index{
    display:inline-block;
    margin-bottom:var(--tp-space-3);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.16em;
    color:var(--tp-acc-2)
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button,
button.button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--tp-space-2);
    min-height:var(--tp-tap);
    padding:var(--tp-space-3) var(--tp-space-6);
    border:var(--tp-bw) solid transparent;
    border-radius:var(--tp-r-btn);
    background:var(--tp-ink);
    color:var(--tp-surf);
    font-family:var(--tp-font-body);
    font-size:var(--tp-text-base);
    font-weight:700;
    line-height:1;
    cursor:pointer;
    transition:transform var(--tp-dur) var(--tp-ease),background var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease),border-color var(--tp-dur) var(--tp-ease)
}

.button:hover{background:var(--tp-acc);color:var(--tp-acc-ink);border-color:var(--tp-acc)}

.button:active{transform:scale(var(--tp-press))}

.button[disabled],
.button.disabled{opacity:.45;cursor:not-allowed;transform:none}

.button-light{background:var(--tp-surf);color:var(--tp-ink);border-color:var(--tp-line)}

.button-light:hover{background:var(--tp-surf-2);color:var(--tp-ink);border-color:var(--tp-acc)}

.button-secondary{background:var(--tp-acc);color:var(--tp-acc-ink);border-color:var(--tp-acc)}

.button-secondary:hover{background:var(--tp-ink);color:var(--tp-surf);border-color:var(--tp-ink)}

.button-small{min-height:36px;padding:var(--tp-space-2) var(--tp-space-4);font-size:var(--tp-text-sm)}

.button-secondary,
.button-light,
.button{text-decoration:none}

.hero-actions,
.payment-actions,
.payment-reminder-actions,
.payment-schedule-actions,
.payment-schedule-row-actions,
.payroll-row__actions,
.attendance-filters__actions,
.attendance-toolbar__actions,
.attendance-savebar,
.payment-analytics-filters__actions,
.payroll-filters__actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--tp-space-3)
}

/* --------------------------------------------------------------------------
   Status pills
   -------------------------------------------------------------------------- */

.status-pill{
    display:inline-flex;
    align-items:center;
    gap:var(--tp-space-2);
    padding:var(--tp-space-1) var(--tp-space-3);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    background:var(--tp-surf-2);
    color:var(--tp-ink);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    white-space:nowrap
}

.status-pill::before{
    content:"";
    width:7px;
    height:7px;
    border-radius:var(--tp-r-btn);
    background:var(--tp-mute);
    flex:none
}

.status-active,
.status-paid,
.status-present{background:var(--tp-acc);border-color:var(--tp-acc);color:var(--tp-acc-ink)}

.status-active::before,
.status-paid::before,
.status-present::before{background:var(--tp-acc-ink)}

.status-pending,
.status-late{background:var(--tp-surf);border-color:var(--tp-ink);color:var(--tp-ink)}

.status-pending::before,
.status-late::before{background:var(--tp-ink)}

.status-overdue,
.status-absent{background:var(--tp-ink);border-color:var(--tp-ink);color:var(--tp-surf)}

.status-overdue::before,
.status-absent::before{background:var(--tp-acc)}

.status-missing,
.status-excused,
.status-canceled,
.status-exited,
.status-completed{background:var(--tp-surf-2);border-color:var(--tp-line);color:var(--tp-mute)}

.status-missing::before,
.status-excused::before,
.status-canceled::before,
.status-exited::before,
.status-completed::before{background:var(--tp-line)}

.is-active{color:var(--tp-ink);font-weight:700}

.is-blocked,
.is-alert{color:var(--tp-acc-2);font-weight:700}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.form-panel{
    display:grid;
    gap:var(--tp-space-4);
    padding:var(--tp-space-6);
    background:var(--tp-surf);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-lg);
    box-shadow:var(--tp-sh-sm)
}

label{
    display:grid;
    gap:var(--tp-space-2);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="url"],
input:not([type]),
textarea,
select{
    width:100%;
    min-height:var(--tp-tap);
    padding:var(--tp-space-3) var(--tp-space-4);
    background:var(--tp-bg);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r);
    color:var(--tp-ink);
    font-family:var(--tp-font-body);
    font-size:var(--tp-text-base);
    letter-spacing:normal;
    text-transform:none;
    transition:border-color var(--tp-dur) var(--tp-ease),box-shadow var(--tp-dur) var(--tp-ease)
}

textarea{min-height:140px;resize:vertical;line-height:1.55}

select{
    appearance:none;
    padding-inline-end:var(--tp-space-7);
    background-image:linear-gradient(45deg,transparent 50%,var(--tp-ink) 50%),linear-gradient(135deg,var(--tp-ink) 50%,transparent 50%);
    background-position:calc(100% - 22px) calc(50% + 2px),calc(100% - 16px) calc(50% + 2px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat
}

[dir="rtl"] select{background-position:22px calc(50% + 2px),16px calc(50% + 2px)}

input:hover,
textarea:hover,
select:hover{border-color:var(--tp-mute)}

input:focus,
textarea:focus,
select:focus{outline:none;border-color:var(--tp-acc-2);box-shadow:0 0 0 3px var(--tp-surf-2)}

input::placeholder,
textarea::placeholder{color:var(--tp-mute);opacity:.72}

.form-check{
    display:flex;
    align-items:center;
    gap:var(--tp-space-3);
    min-height:var(--tp-tap);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-sm);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:none;
    color:var(--tp-ink)
}

.form-check-input{
    width:20px;
    height:20px;
    min-height:0;
    margin:0;
    flex:none;
    accent-color:var(--tp-acc-2)
}

.form-label{
    display:block;
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

/* --------------------------------------------------------------------------
   Tables (used by backoffice and finance screens)
   -------------------------------------------------------------------------- */

.table{
    width:100%;
    border-collapse:collapse;
    font-size:var(--tp-text-sm)
}

.table>thead>tr>th{
    padding:var(--tp-space-3) var(--tp-space-4);
    text-align:start;
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute);
    border-bottom:2px solid var(--tp-line);
    white-space:nowrap
}

.table>tbody>tr>td{
    padding:var(--tp-space-3) var(--tp-space-4);
    border-bottom:var(--tp-bw) solid var(--tp-line);
    vertical-align:middle
}

.table>tbody>tr:last-child>td{border-bottom:0}

.table-hover>tbody>tr:hover>td{background:var(--tp-surf-2)}

.table-responsive{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* --------------------------------------------------------------------------
   Skip link + loader
   -------------------------------------------------------------------------- */

.skip-link{
    position:absolute;
    inset-inline-start:var(--tp-space-4);
    top:calc(-1 * var(--tp-space-8));
    z-index:200;
    padding:var(--tp-space-3) var(--tp-space-5);
    background:var(--tp-ink);
    color:var(--tp-surf);
    border-radius:var(--tp-r-btn);
    font-weight:700;
    transition:top var(--tp-dur) var(--tp-ease)
}

.skip-link:focus{top:var(--tp-space-4)}

.app-loader{
    position:fixed;
    inset:0;
    z-index:500;
    display:grid;
    place-content:center;
    justify-items:center;
    gap:var(--tp-space-5);
    background:var(--tp-canvas);
    background-attachment:fixed;
    transition:opacity 420ms var(--tp-ease),visibility 420ms var(--tp-ease)
}

.app-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}

.app-loader__scene{position:relative;display:grid;place-items:center;width:132px;height:132px}

.app-loader__scene img{
    position:relative;
    z-index:2;
    width:72px;
    height:72px;
    object-fit:contain;
    border-radius:var(--tp-r)
}

.app-loader__ring,
.app-loader__orbit{
    position:absolute;
    inset:0;
    border-radius:var(--tp-r-btn);
    border:2px solid var(--tp-line)
}

.app-loader__ring{border-top-color:var(--tp-acc);animation:tp-spin 1100ms linear infinite}

.app-loader__orbit{inset:14px;border-block-color:transparent;border-inline-color:var(--tp-acc-2);animation:tp-spin 1900ms linear infinite reverse}

.app-loader__text{display:grid;justify-items:center;gap:var(--tp-space-1);text-align:center}

.app-loader__text strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-lg);
    letter-spacing:var(--tp-track-display)
}

.app-loader__text span{
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

.app-loader__bar{
    width:180px;
    height:5px;
    border-radius:var(--tp-r-btn);
    background:var(--tp-surf-2);
    overflow:hidden
}

.app-loader__bar span{
    display:block;
    width:40%;
    height:100%;
    border-radius:inherit;
    background:var(--tp-acc);
    animation:tp-shimmer 1400ms linear infinite;
    background-image:var(--tp-grad);
    background-size:200% 100%
}
/* --------------------------------------------------------------------------
   Site header + navigation
   -------------------------------------------------------------------------- */

.site-header{
    position:sticky;
    top:0;
    z-index:120;
    background:var(--tp-canvas);
    background-attachment:fixed;
    border-bottom:var(--tp-bw) solid transparent;
    transition:border-color var(--tp-dur) var(--tp-ease),box-shadow var(--tp-dur) var(--tp-ease)
}

.site-header.is-scrolled{border-bottom-color:var(--tp-line);box-shadow:var(--tp-sh-sm)}

.site-header__inner{
    display:flex;
    align-items:center;
    gap:var(--tp-space-5);
    width:100%;
    max-width:var(--tp-shell);
    min-height:var(--tp-header-h);
    margin-inline:auto;
    padding-inline:var(--tp-space-5)
}

.brand{display:flex;align-items:center;gap:var(--tp-space-3);flex:none}

.brand-logo{
    width:44px;
    height:44px;
    object-fit:contain;
    border-radius:var(--tp-r-sm)
}

.brand__text{display:grid;line-height:1.15}

.brand__text strong{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-md);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display)
}

.brand__text small{
    font-family:var(--tp-font-mono);
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tp-mute)
}

/* Simple brand mark fallback (single <span> brand without __text). */
.brand>span:not(.brand__text){
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-md);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display)
}

.main-nav{
    display:flex;
    align-items:center;
    gap:var(--tp-space-5);
    flex:1 1 auto;
    min-width:0
}

.main-nav__links{display:flex;align-items:center;gap:var(--tp-space-1);flex:1 1 auto;min-width:0}

.main-nav__links>a{
    position:relative;
    padding:var(--tp-space-2) var(--tp-space-3);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-sm);
    font-weight:600;
    white-space:nowrap;
    color:var(--tp-mute);
    transition:color var(--tp-dur) var(--tp-ease),background var(--tp-dur) var(--tp-ease)
}

.main-nav__links>a:hover{color:var(--tp-ink);background:var(--tp-surf-2)}

.main-nav__links>a.is-current{color:var(--tp-ink)}

.main-nav__links>a.is-current::after{
    content:"";
    position:absolute;
    inset-inline:var(--tp-space-3);
    bottom:1px;
    height:3px;
    border-radius:var(--tp-r-btn);
    background:var(--tp-acc)
}

/* Legacy flat nav: <nav class="main-nav"> with <a> children directly. */
.main-nav>a:not(.nav-account){
    padding:var(--tp-space-2) var(--tp-space-3);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-sm);
    font-weight:600;
    color:var(--tp-mute);
    transition:color var(--tp-dur) var(--tp-ease),background var(--tp-dur) var(--tp-ease)
}

.main-nav>a:not(.nav-account):hover{color:var(--tp-ink);background:var(--tp-surf-2)}

.main-nav>a.is-current:not(.nav-account){color:var(--tp-ink);background:var(--tp-surf-2)}

.main-nav__aside{
    display:flex;
    align-items:center;
    gap:var(--tp-space-3);
    margin-inline-start:auto;
    flex:none
}

.nav-account{
    display:inline-flex;
    align-items:center;
    gap:var(--tp-space-2);
    min-height:40px;
    padding:var(--tp-space-2) var(--tp-space-5);
    border:var(--tp-bw) solid var(--tp-ink);
    border-radius:var(--tp-r-btn);
    background:var(--tp-ink);
    color:var(--tp-surf);
    font-size:var(--tp-text-sm);
    font-weight:700;
    white-space:nowrap;
    transition:transform var(--tp-dur) var(--tp-ease),background var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease)
}

.nav-account:hover{background:var(--tp-acc);border-color:var(--tp-acc);color:var(--tp-acc-ink)}

.nav-account:active{transform:scale(var(--tp-press))}

.language-switcher{
    display:inline-flex;
    align-items:center;
    gap:2px;
    padding:3px;
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    background:var(--tp-surf-2)
}

.language-switcher>a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:36px;
    min-height:30px;
    padding:0 var(--tp-space-2);
    border-radius:var(--tp-r-btn);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.06em;
    color:var(--tp-mute);
    transition:background var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease)
}

.language-switcher>a:hover{color:var(--tp-ink)}

.language-switcher>a.active{background:var(--tp-ink);color:var(--tp-surf)}

.nav-toggle{
    display:none;
    align-items:center;
    gap:var(--tp-space-2);
    min-height:var(--tp-tap);
    margin-inline-start:auto;
    padding:var(--tp-space-2) var(--tp-space-4);
    border:var(--tp-bw) solid var(--tp-line);
    border-radius:var(--tp-r-btn);
    background:var(--tp-surf);
    color:var(--tp-ink);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.1em;
    text-transform:uppercase;
    cursor:pointer
}

.nav-toggle i{
    position:relative;
    display:block;
    width:18px;
    height:2px;
    background:var(--tp-ink);
    border-radius:var(--tp-r-btn);
    transition:background var(--tp-dur) var(--tp-ease)
}

.nav-toggle i::before,
.nav-toggle i::after{
    content:"";
    position:absolute;
    inset-inline-start:0;
    width:18px;
    height:2px;
    background:var(--tp-ink);
    border-radius:var(--tp-r-btn);
    transition:transform var(--tp-dur) var(--tp-ease)
}

.nav-toggle i::before{top:-6px}
.nav-toggle i::after{top:6px}

.nav-toggle[aria-expanded="true"] i{background:transparent}

.nav-toggle[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}

.nav-toggle[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}

/* --------------------------------------------------------------------------
   Site footer
   -------------------------------------------------------------------------- */

.site-footer{
    margin-top:var(--tp-space-8);
    padding-block:var(--tp-space-7) var(--tp-space-6);
    background:var(--tp-ink);
    color:var(--tp-surf);
    border-top:var(--tp-bw) solid var(--tp-line)
}

.site-footer__inner{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);
    gap:var(--tp-space-7);
    width:100%;
    max-width:var(--tp-shell);
    margin-inline:auto;
    padding-inline:var(--tp-space-5)
}

.site-footer__brand p{color:var(--tp-acc);max-width:42ch;margin-top:var(--tp-space-4)}

.footer-brand{display:flex;align-items:center;gap:var(--tp-space-3)}

.footer-brand img{
    width:48px;
    height:48px;
    object-fit:contain;
    padding:var(--tp-space-1);
    background:var(--tp-surf);
    border-radius:var(--tp-r-sm)
}

.footer-brand>span{
    font-family:var(--tp-font-display);
    font-size:var(--tp-text-lg);
    font-weight:var(--tp-w-display);
    letter-spacing:var(--tp-track-display)
}

.site-footer__nav strong{
    display:block;
    margin-bottom:var(--tp-space-4);
    font-family:var(--tp-font-mono);
    font-size:var(--tp-text-xs);
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tp-acc)
}

.site-footer__nav>div{display:grid;gap:var(--tp-space-2)}

.site-footer__nav a{
    color:var(--tp-surf);
    font-size:var(--tp-text-sm);
    opacity:.86;
    transition:opacity var(--tp-dur) var(--tp-ease),color var(--tp-dur) var(--tp-ease)
}

.site-footer__nav a:hover{opacity:1;color:var(--tp-acc)}

.site-footer__credit{
    display:grid;
    align-content:start;
    gap:var(--tp-space-2);
    justify-items:start;
    font-size:var(--tp-text-sm);
    color:var(--tp-surf)
}

.site-footer__credit a{
    font-weight:700;
    border-bottom:2px solid var(--tp-acc);
    padding-bottom:1px;
    transition:color var(--tp-dur) var(--tp-ease)
}

.site-footer__credit a:hover{color:var(--tp-acc)}

.site-footer__credit .footer-facebook{margin-top:var(--tp-space-3);padding:9px 14px;border:1px solid rgba(255,255,255,.22);border-radius:var(--tp-r-btn);color:#fff}

.site-footer__credit .footer-facebook:hover{border-color:var(--tp-acc);background:rgba(241,183,28,.1)}

.site-footer__credit small{color:var(--tp-acc);font-family:var(--tp-font-mono);letter-spacing:.06em}
/* --------------------------------------------------------------------------
   RTL — the site runs French (LTR) and Arabic (RTL) from the same markup.
   -------------------------------------------------------------------------- */

[dir="rtl"] .section-kicker::before{margin-inline-end:0;margin-inline-start:var(--tp-space-2)}

[dir="rtl"] .main-nav__aside{margin-inline-start:0;margin-inline-end:auto}

[dir="rtl"] .site-footer__credit{justify-items:end}

[dir="rtl"] .main-nav__links{justify-content:flex-end}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width:1180px){
    .main-nav__links>a{padding-inline:var(--tp-space-2)}
    .site-header__inner{gap:var(--tp-space-4)}
}

@media (max-width:1024px){
    :root{--tp-header-h:68px}
    [data-theme="bark"]{--tp-hero:56px}
    .hero-grid,
    .experience-band,
    .outing-strip,
    .contact-layout{grid-template-columns:1fr}
    .experience-band>img{order:-1}
    .site-footer__inner{grid-template-columns:1fr 1fr;gap:var(--tp-space-6)}
    .site-footer__brand{grid-column:1 / -1}
}

@media (max-width:900px){
    .nav-toggle{display:inline-flex}
    .main-nav{
        position:absolute;
        top:100%;
        inset-inline:0;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:var(--tp-space-4);
        margin:0;
        padding:var(--tp-space-5);
        background:var(--tp-surf);
        border-bottom:var(--tp-bw) solid var(--tp-line);
        box-shadow:var(--tp-sh-sm);
        max-height:calc(100vh - var(--tp-header-h));
        overflow-y:auto
    }
    .main-nav.is-open{display:flex}
    .main-nav__links{flex-direction:column;align-items:stretch;gap:var(--tp-space-1)}
    .main-nav__links>a{padding:var(--tp-space-3) var(--tp-space-4);font-size:var(--tp-text-base)}
    /* In the stacked panel a full-width underline reads as a divider, so the
       current page gets a start-edge marker instead. */
    .main-nav__links>a.is-current{background:var(--tp-surf-2);box-shadow:inset 3px 0 0 var(--tp-acc)}
    [dir="rtl"] .main-nav__links>a.is-current{box-shadow:inset -3px 0 0 var(--tp-acc)}
    .main-nav__links>a.is-current::after{content:none}
    .main-nav>a:not(.nav-account){padding:var(--tp-space-3) var(--tp-space-4);font-size:var(--tp-text-base)}
    .main-nav__aside{margin-inline-start:0;flex-wrap:wrap;padding-top:var(--tp-space-4);border-top:var(--tp-bw) solid var(--tp-line)}
    .nav-account{flex:1 1 auto;justify-content:center}
}

@media (max-width:760px){
    [data-theme="bark"]{--tp-hero:38px;--tp-text-3xl:32px;--tp-text-2xl:26px;--tp-text-xl:21px}
    .section{padding-block:var(--tp-space-7)}
    .hero{padding:var(--tp-space-6) var(--tp-space-5);border-radius:var(--tp-r)}
    .page-heading{padding:var(--tp-space-6) var(--tp-space-5);border-inline-start-width:4px}
    .hero-stats{grid-template-columns:1fr 1fr;gap:var(--tp-space-3)}
    .hero-stats strong{font-size:var(--tp-text-xl)}
    .profile-hero{flex-direction:column;align-items:flex-start;text-align:start}
    .dashboard-logo{position:static;width:56px;height:56px;margin-bottom:var(--tp-space-2)}
    .site-footer__inner{grid-template-columns:1fr}
    .notification-card{grid-template-columns:auto minmax(0,1fr)}
    .notification-card__actions{grid-column:2;justify-items:start}
    .attendance-row,
    .staff-attendance-row{grid-template-columns:1fr}
    .attendance-toolbar,
    .attendance-savebar{position:static}
    .outing-card{grid-template-columns:1fr}
    .outing-card>img{max-height:260px}
    .chat-message{max-width:100%}
    .receipt-card{padding:var(--tp-space-6) var(--tp-space-5)}
    .receipt-lines{grid-template-columns:1fr}
    .contact-map{min-height:300px}
}

@media (max-width:520px){
    .hero-stats{grid-template-columns:1fr}
    .brand__text small{display:none}
    .button{padding-inline:var(--tp-space-5)}
    .receipt-title{text-align:start}
    .receipt-stamp{min-width:100%}
}

/* Reveal placeholders must stay readable if JS never runs. */
@media (prefers-reduced-motion: reduce){
    [data-reveal]{opacity:1!important;animation:none!important}
}
.nav-logout{
    padding:var(--tp-space-2) var(--tp-space-3);
    border-radius:var(--tp-r-btn);
    font-size:var(--tp-text-sm);
    font-weight:600;
    color:var(--tp-mute);
    white-space:nowrap;
    transition:color var(--tp-dur) var(--tp-ease),background var(--tp-dur) var(--tp-ease)
}

.nav-logout:hover{color:var(--tp-ink);background:var(--tp-surf-2)}

/* --------------------------------------------------------------------------
   Reveal — sections marked with data-reveal start hidden and are revealed
   by reveal.js. Landing sections only; never on the nav or above-the-fold
   app chrome.
   -------------------------------------------------------------------------- */

[data-reveal]{opacity:1}

/* ===========================================================================
   Academy 2026 — luminous, premium interface layer
   ========================================================================== */

body{background-color:var(--tp-bg);background-attachment:scroll}

main{overflow:clip}

.eyebrow,
.section-kicker{letter-spacing:.12em;color:var(--tp-acc-2)}

.section-kicker::before{width:28px;height:3px;border-radius:var(--tp-r-btn)}

.section-title{align-items:center;margin-bottom:clamp(28px,4vw,52px)}

.section-title h2{max-width:18ch;font-size:clamp(32px,4.4vw,58px);line-height:1.02}

.button,
button.button{min-height:50px;padding-inline:26px;box-shadow:0 10px 24px rgba(16,42,94,.12)}

.button:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(16,42,94,.18)}

.button-light{box-shadow:none}

.site-header{
    background:rgba(251,252,255,.9);
    border-bottom-color:rgba(219,228,241,.72);
    backdrop-filter:blur(18px) saturate(1.35);
    -webkit-backdrop-filter:blur(18px) saturate(1.35)
}

.site-header.is-scrolled{box-shadow:0 10px 36px rgba(16,42,94,.08)}

.brand-logo{width:54px;height:54px;border-radius:50%;background:#fff;box-shadow:0 8px 22px rgba(16,42,94,.12)}

.brand__text strong{font-size:18px;color:var(--tp-ink)}

.brand__text small{color:var(--tp-acc-2);letter-spacing:.1em}

.main-nav__links{justify-content:center}

.main-nav__links>a{font-weight:700;color:#566783}

.main-nav__links>a.is-current::after{height:2px;bottom:0}

.nav-account{border-color:var(--tp-ink);box-shadow:0 9px 22px rgba(16,42,94,.14)}

.language-switcher{background:#fff}

.form-panel,
.dashboard-card,
.profile-card,
.auth-card{box-shadow:var(--tp-sh-sm)}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"],
input[type="url"],
input:not([type]),
textarea,
select{background:#fff;border-width:1.5px}

.site-footer{position:relative;margin-top:0;padding-block:72px 34px;border:0;overflow:hidden}

.site-footer::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    inset-inline-end:-150px;
    bottom:-240px;
    border:80px solid rgba(241,183,28,.1);
    border-radius:50%;
    pointer-events:none
}

.site-footer__inner{position:relative;z-index:1}

.footer-brand img{width:60px;height:60px;padding:5px;border-radius:50%}

.site-footer__brand p{color:#bdc9dc}

.site-footer__nav strong,
.site-footer__credit small{color:var(--tp-acc)}

@media (max-width:900px){
    .site-header__inner{min-height:72px}
    .brand-logo{width:48px;height:48px}
    .main-nav{background:rgba(255,255,255,.98);border-radius:0 0 24px 24px}
}

@media (max-width:760px){
    [data-theme="academy"]{--tp-text-3xl:34px;--tp-text-2xl:28px;--tp-text-xl:22px}
    .section-title h2{font-size:clamp(30px,10vw,42px)}
}

@media (max-width:520px){
    .site-header__inner{padding-inline:16px;gap:10px}
    .brand{gap:8px;min-width:0}
    .brand-logo{width:44px;height:44px}
    .brand__text strong{font-size:16px;white-space:nowrap}
    .nav-toggle{width:44px;padding:0;justify-content:center;flex:none}
    .nav-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ===========================================================================
   Responsive hardening — shared public and authenticated front surfaces
   ========================================================================== */

html,body{max-width:100%;overflow-x:hidden}

main,
.section,
.hero,
.page-heading,
.site-header__inner,
.site-footer__inner,
.grid>*{min-width:0}

h1,h2,h3,h4,h5,h6,p,a,span,strong,small{overflow-wrap:break-word}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] p{text-wrap:wrap}

input,select,textarea,button{max-width:100%;font:inherit}

@media (max-width:900px){
    body.nav-is-open{overflow:hidden}

    .site-header{isolation:isolate}

    .main-nav{
        inset-inline:12px;
        width:auto;
        max-height:calc(100dvh - var(--tp-header-h) - 12px);
        padding:18px;
        overscroll-behavior:contain;
        border:1px solid var(--tp-line);
        border-top:0;
        border-radius:0 0 22px 22px;
        box-shadow:0 24px 60px rgba(16,42,94,.2)
    }

    .main-nav__links>a,
    .nav-account,
    .nav-logout{min-height:48px}

    .main-nav__aside{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
    .language-switcher{justify-self:start}
    .nav-account,.nav-logout{width:100%;text-align:center}
}

@media (max-width:760px){
    .section,
    .page-heading,
    .auth-section,
    .dashboard-hero,
    .profile-hero{padding-inline:clamp(16px,5vw,24px)}

    .section-title{align-items:flex-start;gap:18px}
    .section-title>div,.section-title>p{width:100%}
    .section-title-actions{width:100%}

    .grid.three,
    .grid.two{grid-template-columns:minmax(0,1fr)}

    .form-panel,
    .dashboard-card,
    .profile-card,
    .auth-card{padding:clamp(20px,5vw,28px)}

    input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
    input[type="number"],input[type="date"],input[type="datetime-local"],input[type="time"],
    input[type="search"],input[type="url"],input:not([type]),textarea,select{width:100%;min-height:48px;font-size:16px}

    .button,button.button{min-height:48px}
    .text-link{min-height:44px;align-items:center}

    .site-footer__nav a{
        display:flex;
        align-items:center;
        min-height:44px
    }
}

@media (max-width:520px){
    .brand__text{min-width:0}
    .brand__text strong{display:block;max-width:calc(100vw - 150px);overflow:hidden;text-overflow:ellipsis}

    .main-nav{inset-inline:8px;padding:14px}
    .main-nav__aside{grid-template-columns:1fr;gap:10px}
    .language-switcher{width:100%;justify-content:center}

    .section-title-actions,
    .section-title-actions .button{width:100%}

    .site-footer{padding-block:52px 28px}
    .site-footer__inner{gap:34px}
    .site-footer__nav div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
    .site-footer__credit{justify-items:start}
    [dir="rtl"] .site-footer__credit{justify-items:start}
}