/* Match the weekly table's Karvanis surfaces in both public themes. */
.demo-page :is(.pointages-demo,.demo-shell){--p-bg:#0c0c0cf5;--p-panel:#151515;--p-control:#191919;--p-button:#191919;--p-text:#f0edea;--p-muted:#bdb6ad;--p-border:#8c7663;--p-surface-border:#d4a47b30;--p-accent:#d4a47b;--p-metric:#edcfb3;--p-ok:#a4d7c5;--p-warning:#ffd591;--p-hover:#29231e;--p-primary:#d4a47b;--p-primary-text:#241a13;--p-primary-hover:#e1b791;--p-error:#ef9999;--p-control-radius:10px;--p-card-radius:12px}
.pointages-demo{margin:0 auto 64px;background:var(--p-bg);color:var(--p-text);border:1px solid var(--p-surface-border);box-shadow:0 30px 100px #0008;backdrop-filter:blur(16px);position:relative;z-index:1;scroll-margin-top:100px}
html[data-public-theme=light] .demo-page :is(.pointages-demo,.demo-shell){--p-bg:var(--light-surface);--p-panel:var(--light-surface);--p-control:#fff;--p-button:#e8edf3;--p-text:#242c38;--p-muted:#455467;--p-border:#8c7761;--p-surface-border:#99aaba66;--p-accent:#885c36;--p-metric:#885c36;--p-ok:#20583d;--p-warning:#704716;--p-hover:#dce5ed;--p-error:#a0352d;box-shadow:0 12px 35px #23344b08}
.demo-page .demo-hero{padding-bottom:36px;min-height:auto}.pointages-demo .pointages-intro{max-width:900px;margin-bottom:24px}.pointages-demo h2{font-size:clamp(28px,3.4vw,46px);line-height:1.1;letter-spacing:-.025em;margin:8px 0 18px}.pointages-demo h3{font-size:19px;margin:0 0 18px}.pointages-demo h4{font-size:18px;margin:18px 0 10px}.pointages-demo p{line-height:1.65}.pointages-demo .pointages-intro>p:not(.eyebrow){color:var(--p-muted)}.pointages-demo .pointages-steps{font-size:14px;border-left:3px solid var(--p-accent);padding-left:16px}
.pointages-filters{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:16px}.pointages-demo label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:600}.pointages-demo select,.pointages-demo input,.pointages-demo textarea{font:inherit;background:var(--p-control);border:1px solid var(--p-border);color:var(--p-text);border-radius:8px;padding:10px;width:100%;min-height:44px;box-sizing:border-box;color-scheme:dark}.pointages-demo textarea{resize:vertical;line-height:1.5}html[data-public-theme=light] .pointages-demo :is(select,input,textarea){color-scheme:light}.pointages-demo .pointages-check{grid-column:1/-1;flex-direction:row;align-items:center}.pointages-demo input[type=checkbox]{width:18px;min-height:18px;accent-color:var(--p-accent);margin:0}
.pointages-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}.pointages-metrics>div{background:var(--p-panel);border:1px solid var(--p-surface-border);border-radius:12px;padding:18px}.pointages-metrics span{display:block;font-size:13px;color:var(--p-muted)}.pointages-metrics strong{color:var(--p-metric);display:block;font-size:28px;margin-top:8px}
.pointages-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px}.pointages-demo button{font:inherit;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid var(--p-border);background:var(--p-button);color:var(--p-text);border-radius:8px}.pointages-demo button:hover{border-color:var(--p-accent)}.pointages-demo :is(button,select,input,textarea):focus-visible{outline:3px solid var(--p-accent);outline-offset:3px}.pointages-demo button:disabled{opacity:.5;cursor:not-allowed}.pointages-demo .pointages-record{width:100%;text-align:left;display:flex;flex-direction:column;gap:10px;margin-bottom:12px;padding:18px}.pointages-record[aria-pressed=true]{border:2px solid var(--p-accent);padding:17px}.pointages-record>span,.pointages-record>small{font-size:13px}.pointages-record>strong{font-size:17px}.pointages-warning{color:var(--p-warning)}.pointages-ok{color:var(--p-ok)}.pointages-detail{border:1px solid var(--p-border);border-radius:12px;padding:22px;min-width:0}.pointages-detail dl{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;font-size:14px;margin:18px 0 24px}.pointages-detail dt{color:var(--p-muted)}.pointages-detail dd{margin:0;overflow-wrap:anywhere}.pointages-help{font-size:13px;color:var(--p-muted);margin:8px 0 14px}.pointages-correction{margin:24px 0;padding-top:6px;border-top:1px solid var(--p-border)}.pointages-correction label{margin-bottom:14px}.pointages-history{padding-left:20px}.pointages-history li{padding:8px 0;overflow-wrap:anywhere}.pointages-history small{display:block;color:var(--p-muted);margin-top:8px}.pointages-history p{margin:6px 0;font-size:14px}.pointages-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}.pointages-limits{font-size:13px;color:var(--p-muted);border-top:1px solid var(--p-border);padding-top:20px;margin:24px 0 0}.pointages-demo [data-p-message]{min-height:1.5em;color:var(--p-accent)}
@media(max-width:720px){.pointages-demo{margin-bottom:36px}.pointages-filters,.pointages-workspace{grid-template-columns:1fr}.pointages-metrics{gap:8px}.pointages-metrics>div{padding:12px 8px}.pointages-metrics strong{font-size:21px}.pointages-metrics span{font-size:11px}.pointages-detail{padding:16px}.pointages-detail dl{grid-template-columns:1fr}.pointages-detail dd{margin-bottom:8px}.pointages-actions{flex-direction:column}.pointages-record>span{overflow-wrap:anywhere}}

/* Keep both demo blocks and their content on the same horizontal grid. */
body.demo-page :is(.pointages-demo,.demo-shell){width:92%;max-width:none;margin-inline:auto;padding:36px;border-radius:16px}
@media(max-width:767px){body.demo-page :is(.pointages-demo,.demo-shell){padding:18px}}

/* Shared controls override the legacy weekly-table styles in both themes. */
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) :is(button,input,select,textarea):where(:not([type=checkbox])){
  min-height:44px;
  padding:10px 12px;
  border:1px solid var(--p-border);
  border-radius:var(--p-control-radius);
  background:var(--p-control);
  color:var(--p-text);
  font:400 14px/1.5 var(--body);
  box-shadow:none;
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) button{
  padding:10px 16px;
  background:var(--p-button);
  font-weight:500;
  cursor:pointer;
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) button:hover:not(:disabled){
  background:var(--p-hover);
  border-color:var(--p-accent);
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) :is(button,input,select,textarea):focus-visible{
  outline:3px solid var(--p-accent);
  outline-offset:3px;
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) button:disabled{
  opacity:.5;
  cursor:not-allowed;
}
html:root body.demo-page.public-detail :is(.demo-toolbar button.primary,.pointages-correction>button){
  background:var(--p-primary);
  border-color:var(--p-primary);
  color:var(--p-primary-text);
}
html:root body.demo-page.public-detail :is(.demo-toolbar button.primary,.pointages-correction>button):hover:not(:disabled){
  background:var(--p-primary-hover);
  border-color:var(--p-primary-hover);
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) :is(input,textarea,select):user-invalid{
  border-color:var(--p-error);
  outline:2px solid var(--p-error);
  outline-offset:2px;
}
html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics){gap:12px;margin:24px 0}
html:root body.demo-page.public-detail :is(.pointages-metrics>div,.metrics article){
  min-width:0;
  padding:18px;
  border:1px solid var(--p-surface-border);
  border-radius:var(--p-card-radius);
  background:var(--p-panel);
  color:var(--p-text);
  box-shadow:none;
}
html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics) span{
  color:var(--p-muted);
  font:400 13px/1.5 var(--body);
}
html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics) strong{
  display:block;
  margin-top:8px;
  color:var(--p-metric);
  font:600 28px/1.2 var(--heading);
  letter-spacing:-.025em;
}
html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) :is(.pointages-record,.pointages-detail,.table-wrap){
  border:1px solid var(--p-surface-border);
  border-radius:var(--p-card-radius);
}
html:root body.demo-page.public-detail .pointages-demo .pointages-record{padding:18px}
html:root body.demo-page.public-detail .pointages-demo .pointages-record[aria-pressed=true]{
  border:2px solid var(--p-accent);
  padding:17px;
}
@media(max-width:720px){
  html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  html:root body.demo-page.public-detail .pointages-metrics>div:last-child{grid-column:1/-1}
  html:root body.demo-page.public-detail :is(.pointages-metrics>div,.metrics article){padding:14px}
  html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics) strong{font-size:23px}
  html:root body.demo-page.public-detail :is(.pointages-metrics,.metrics) span{font-size:12px}
}
html:root body.demo-page.public-detail :is(.pointages-actions,.demo-toolbar>div:last-child){gap:12px}
@media(max-width:720px){
  html:root body.demo-page.public-detail .demo-toolbar>div:last-child{display:grid;width:100%;grid-template-columns:1fr}
}
/* Leave room for decimal hours and the native number spinner. */
html:root body.demo-page.public-detail .table-wrap input{width:80px}

/* Leave enough room for the tablet navigation; contact remains in its menu. */
@media(min-width:768px) and (max-width:1100px){
  body.demo-page.public-detail .public-header .nav-cta{display:none}
}

/* On phones, keep every day visible within each person's weekly record. */
@media(max-width:767px){
  html:root body.demo-page.public-detail :is(.pointages-filters,.pointages-workspace){grid-template-columns:minmax(0,1fr)}
  html:root body.demo-page.public-detail :is(.pointages-demo,.demo-shell) :is(button,input,select,textarea):where(:not([type=checkbox])){
    min-width:0;
    max-width:100%;
    min-height:48px;
    font-size:16px;
    scroll-margin-block:100px;
  }
  html:root body.demo-page.public-detail .pointages-demo textarea{min-height:104px}
  html:root body.demo-page.public-detail .pointages-check{min-height:44px}
  html:root body.demo-page.public-detail .pointages-check input{width:22px;height:22px;flex-shrink:0}
  html:root body.demo-page.public-detail .pointages-actions{flex-direction:column}
  html:root body.demo-page.public-detail .demo-toolbar>div:last-child{display:grid;width:100%;grid-template-columns:1fr}
  html:root body.demo-page.public-detail .demo-shell .table-wrap{
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
  }
  html:root body.demo-page.public-detail .demo-shell table{display:block;width:100%;min-width:0}
  /* Keep the real column headers available to assistive technology. */
  html:root body.demo-page.public-detail .demo-shell thead{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  html:root body.demo-page.public-detail .demo-shell tbody{display:grid;gap:16px}
  html:root body.demo-page.public-detail .demo-shell tbody tr{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px 10px;
    padding:14px;
    border:1px solid var(--p-surface-border);
    border-radius:var(--p-card-radius);
    background:var(--p-panel);
  }
  html:root body.demo-page.public-detail .demo-shell tbody th{
    position:static;
    grid-column:1/-1;
    min-width:0;
    padding:0 0 12px;
    border:0;
    border-bottom:1px solid var(--p-surface-border);
    background:transparent;
    color:var(--p-text);
    box-shadow:none;
    font-size:16px;
    overflow-wrap:anywhere;
  }
  html:root body.demo-page.public-detail .demo-shell .avatar{flex-shrink:0}
  html:root body.demo-page.public-detail .demo-shell tbody td{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    grid-column:span 2;
    min-width:0;
    padding:0;
    border:0;
    background:transparent;
    color:var(--p-text);
    text-align:left;
  }
  html:root body.demo-page.public-detail .demo-shell tbody td::before{
    content:attr(data-label);
    color:var(--p-muted);
    font:500 12px/1.4 var(--body);
  }
  html:root body.demo-page.public-detail .demo-shell tbody td:nth-of-type(n+4){grid-column:span 3}
  html:root body.demo-page.public-detail .demo-shell tbody td:nth-of-type(n+6){padding-top:12px;border-top:1px solid var(--p-surface-border)}
  html:root body.demo-page.public-detail .demo-shell tbody td:last-child{grid-column:1/-1}
  html:root body.demo-page.public-detail .demo-shell .table-wrap input{width:100%;padding:10px 6px}
  html:root body.demo-page.public-detail .demo-shell .status{align-self:flex-start;font-size:12px;padding:6px 10px}
}