/* Sovelluksen tyylit. Kaikki värit, välistykset, pyöristykset, fonttikoot ja varjot
   tulevat tiedostosta tokens.css (issue #20); tässä tiedostossa ei ole niiden arvoja. */
:root{
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);
  color:var(--color-on-surface);background:var(--color-bg);color-scheme:var(--color-scheme);
}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}

.bar{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-6);background:var(--color-header);color:var(--color-on-header)}
.brand{font-weight:var(--weight-bold);letter-spacing:.01em;color:var(--color-on-header);text-decoration:none}
.bar nav a{color:var(--color-on-header);text-decoration:none;padding:var(--space-1) var(--space-0-5);border-bottom:2px solid transparent}
.bar nav a[aria-current=page]{border-bottom-color:var(--color-header-highlight)}
.bar{flex-wrap:wrap}
.bar .who{margin-left:auto}
.search{position:relative;flex:1;max-width:340px;min-width:180px}
.search input{padding:var(--space-1-5) var(--space-2-5);border:0;border-radius:var(--radius-control);background:var(--color-header-input);color:var(--color-on-header-input)}
.hits{position:absolute;z-index:10;left:0;right:0;top:calc(100% + var(--space-1));list-style:none;margin:0;padding:var(--space-1) 0;background:var(--color-surface);color:var(--color-on-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);max-height:60vh;overflow:auto}
.hits a{display:flex;flex-direction:column;padding:var(--space-2) var(--space-3);color:var(--color-on-surface);text-decoration:none}
.hits a:hover,.hits a:focus-visible{background:var(--color-surface-subtle)}
.hits .meta{font-size:var(--text-13)}
.hits .none{padding:var(--space-2) var(--space-3);color:var(--color-text-muted)}
.hits ul{list-style:none;margin:0;padding:0}
.hits-title{margin:0;padding:var(--space-2) var(--space-3) var(--space-0-5);font-size:var(--text-12);font-weight:var(--weight-bold);letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-muted)}
.hits [role=group]+[role=group]{border-top:1px solid var(--color-border);margin-top:var(--space-1)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1-5) var(--space-6);margin:var(--space-5) 0 0;font-size:var(--text-15)}
.facts dt{color:var(--color-text-muted);font-weight:var(--weight-semibold)}
.facts dd{margin:0;overflow-wrap:anywhere}
.facts .contact{margin:0 0 var(--space-1)}
.notes{white-space:pre-wrap;margin-top:var(--space-1-5);font-size:var(--text-15);max-width:65ch}
.tag.warn-tag{color:var(--color-danger);border-color:var(--color-danger)}
h1 .tag{font-size:var(--text-14);vertical-align:middle;margin-left:var(--space-3);letter-spacing:0}
.day+.warn{margin-top:var(--space-3)}
.who{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-14-4);overflow-wrap:anywhere}
.bar .link{color:var(--color-on-header)}

main{max-width:760px;margin:0 auto;padding:var(--space-6) var(--space-6) var(--space-16)}
main.narrow{max-width:440px}
main.wide{max-width:960px}
main.full{max-width:1400px}
.board{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(250px,1fr);gap:var(--space-4);overflow-x:auto;padding:var(--space-1) var(--space-0-5) var(--space-4);margin-top:var(--space-2)}
.column{background:var(--color-surface-subtle);border-radius:var(--radius-md);padding:var(--space-3);min-width:0}
.column h2{margin:0;font-size:var(--text-16);border:0;padding:0;display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.column>.meta{margin-bottom:var(--space-2)}
.column .empty{padding:var(--space-2) 0}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid transparent;border-radius:var(--radius-sm);padding:var(--space-2-5) var(--space-3);margin-top:var(--space-2);display:flex;flex-direction:column;gap:var(--space-0-5)}
.card.late{border-left-color:var(--color-danger)}
.card .title{font-size:var(--text-16)}
.move{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-2);max-width:360px}
.move.compact{border-top:1px solid var(--color-border);padding-top:var(--space-2)}
.move.compact label{font-size:var(--text-13)}
.move button{align-self:flex-start;margin-top:var(--space-1)}
.toast{position:fixed;left:50%;bottom:var(--space-4);transform:translateX(-50%);z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);width:min(640px,calc(100% - var(--space-8)));padding:var(--space-3) var(--space-4);background:var(--color-inverse);color:var(--color-on-inverse);border-radius:var(--radius-md);box-shadow:var(--shadow-toast)}
.toast p{flex:1;min-width:200px}
.toast .link{color:var(--color-on-inverse)}
.toast button.small{background:var(--color-on-inverse);color:var(--color-inverse);border-color:var(--color-on-inverse)}
main.with-toast{padding-bottom:var(--space-40)}
.queue-chooser{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin:var(--space-1) 0 var(--space-2)}
.segmented{display:inline-flex;border:1px solid var(--color-accent);border-radius:var(--radius-control);overflow:hidden}
.segmented a{padding:var(--space-1) var(--space-3-5);color:var(--color-link);text-decoration:none;font-size:var(--text-15)}
.segmented a+a{border-left:1px solid var(--color-accent)}
.segmented a[aria-current=true]{background:var(--color-accent);color:var(--color-on-accent)}
.segmented a[aria-disabled=true]{opacity:.6;cursor:not-allowed}
.segmented a:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}
.owner-filter{display:inline-flex;align-items:center;gap:var(--space-2);font-size:var(--text-15)}
.owner-filter select{width:auto;padding:var(--space-1) var(--space-2)}
.row.others .main{opacity:.92}
.row.others{border-left-color:var(--color-border)}
.row .owner{font-weight:var(--weight-semibold)}
.limit{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-1) var(--space-4);margin:var(--space-1) 0 var(--space-2)}
.limit details{font-size:var(--text-15)}
.actions-hint{flex-basis:100%;text-align:right;margin:0}
.alert.inline{margin:var(--space-1) 0 0;padding:0;max-width:none;font-size:var(--text-14)}
.bar nav{display:flex;gap:var(--space-4)}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--space-3) var(--space-4);margin:var(--space-4) 0 var(--space-2);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.filter{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.pager{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0}

h1{font-family:var(--font-heading);font-size:var(--text-36);line-height:var(--leading-tight);font-weight:var(--weight-bold);margin:var(--space-6) 0 var(--space-2);letter-spacing:-.01em}
h2{font-family:var(--font-heading);font-size:var(--text-20);margin:var(--space-10) 0 var(--space-1);padding-bottom:var(--space-2);border-bottom:2px solid var(--color-on-surface)}
h3{font-family:var(--font-heading);font-size:var(--text-16);margin:var(--space-5) 0 var(--space-1);color:var(--color-text-muted)}
p{margin:0}

.day{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--space-1) var(--space-4)}
.day h1{grid-column:1/-1}
.summary{font-size:var(--text-18);max-width:60ch}
.hint{font-size:var(--text-14);color:var(--color-text-muted);margin:var(--space-1-5) 0}
.empty{padding:var(--space-4) 0;color:var(--color-text-muted)}

.alert,.note{max-width:760px;margin:var(--space-4) auto 0;padding:0 var(--space-6)}
.alert{color:var(--color-danger);font-weight:var(--weight-semibold)}
.alert:empty,.note:empty{display:none}
.note{color:var(--color-link);font-weight:var(--weight-semibold)}

.list{list-style:none;margin:0;padding:0}
ol.list{counter-reset:rank}
ol.list>li{counter-increment:rank}
ol.list>li>.row::before{content:counter(rank);font-variant-numeric:tabular-nums;color:var(--color-text-muted);font-weight:var(--weight-semibold);min-width:1.5em;padding-top:var(--space-0-5)}

.row{display:flex;gap:var(--space-4);align-items:flex-start;padding:var(--space-3-5) 0 var(--space-3-5) var(--space-3);border-bottom:1px solid var(--color-border);border-left:4px solid transparent;margin-left:calc(-1 * var(--space-4))}
.row.late{border-left-color:var(--color-danger);background:var(--color-danger-subtle)}
.row .main{flex:1;min-width:0}
.title{font-weight:var(--weight-semibold);font-size:var(--text-17);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
.meta{color:var(--color-text-muted);font-size:var(--text-15);font-variant-numeric:tabular-nums}
.warn{color:var(--color-danger);font-size:var(--text-15);font-weight:var(--weight-semibold)}
.tag{font-size:var(--text-13);font-weight:var(--weight-semibold);color:var(--color-link);border:1px solid var(--color-accent);border-radius:var(--radius-pill);padding:0 var(--space-2)}
.contact{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-4);margin:var(--space-1) 0;font-size:var(--text-15)}
.reasons{margin:var(--space-1-5) 0;padding-left:var(--space-4-5);font-size:var(--text-15)}
.reasons li::marker{color:var(--color-marker)}

.brief{margin:var(--space-2) 0;padding:var(--space-2) var(--space-3);background:var(--color-surface-subtle);border-radius:var(--radius-md);font-size:var(--text-15)}
.brief p{margin:var(--space-1) 0;overflow-wrap:anywhere}
.brief-body{white-space:pre-line}
.brief-actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:flex-end;align-items:flex-start;max-width:280px}
.forms{display:flex;flex-direction:column;gap:var(--space-1-5);min-width:220px}

a{color:var(--color-link);text-underline-offset:2px}
button,a.button{font:inherit;font-weight:var(--weight-semibold);background:var(--color-accent);color:var(--color-on-accent);border:1px solid var(--color-accent);border-radius:var(--radius-button);padding:var(--space-2) var(--space-3-5);cursor:pointer}
a.button{display:inline-block;text-decoration:none}
button:hover,a.button:hover{background:var(--color-accent-hover)}
button.secondary,a.button.secondary{background:var(--color-surface);color:var(--color-link)}
button.secondary:hover,a.button.secondary:hover{background:var(--color-surface-subtle)}
button.small,a.button.small{padding:var(--space-1) var(--space-2-5);font-size:var(--text-14)}
button.link{background:none;border:0;padding:0;text-decoration:underline;font-weight:var(--weight-regular);color:var(--color-link)}
button:disabled{opacity:.55;cursor:wait}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:2px}

details>summary{cursor:pointer;color:var(--color-link);font-weight:var(--weight-semibold);font-size:var(--text-15);padding:var(--space-1) 0;list-style-position:inside}
details[open]>summary{margin-bottom:var(--space-1)}
.actions details{flex-basis:100%;text-align:right}
.actions details[open]{text-align:left}
.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1);min-width:240px}
.panel button{align-self:flex-start;margin-top:var(--space-2)}
fieldset{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}

label{font-weight:var(--weight-semibold);font-size:var(--text-14)}
label.check{display:flex;gap:var(--space-2);align-items:flex-start;font-weight:var(--weight-regular);margin-top:var(--space-1-5)}
input,select,textarea{font:inherit;padding:var(--space-2);border:1px solid var(--color-border-strong);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-on-surface);width:100%}
input[type=checkbox],input[type=radio]{width:auto;margin-top:var(--space-1)}
.forms a.button{align-self:flex-start}
.section-actions{margin:var(--space-2) 0}
.deal-form{max-width:520px;margin-top:var(--space-2)}
.deal-form input,.deal-form select{max-width:360px}
.form-title{font-size:var(--text-16);margin:var(--space-5) 0 0;padding-bottom:var(--space-1);border-bottom-width:1px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);margin-top:var(--space-4)}
.pick{list-style:none;margin:var(--space-1) 0 0;padding:0}
.pick li{padding:var(--space-1-5) 0;border-bottom:1px solid var(--color-border)}
.pick label.check{margin-top:0}
.pick label.check.primary{margin:var(--space-1) 0 0 var(--space-7);font-size:var(--text-14)}
.pick .tag{margin-left:var(--space-2)}
main.narrow input{margin:var(--space-1-5) 0 var(--space-4)}
main.narrow button{margin:0 var(--space-2) var(--space-2) 0}

@media (max-width:640px){
  .board{grid-auto-flow:row;grid-auto-columns:auto;overflow-x:visible}
  .bar{padding:var(--space-2-5) var(--space-4)}
  .search{order:5;flex-basis:100%;max-width:none}
  /* Puhelimen yläpalkki (#138, #208): ensimmäisellä rivillä nimi ja Kirjaudu ulos, sitten rivittyvä
     valikko ja haku. Valikko ei vieritä sivua sivuttain, ja kosketusalueet ovat vähintään 44 px. */
  .bar{row-gap:var(--space-1)}
  .bar .who{order:2}
  .bar .who .email{display:none}
  .bar .who .link{min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-1)}
  .bar nav{flex-wrap:wrap;gap:0 var(--space-1);flex-basis:100%;order:3}
  .bar nav a{white-space:nowrap;min-height:44px;display:inline-flex;align-items:center;padding:0 var(--space-2)}
  .bar .search{order:4}
  .bar .search input{min-height:44px}
  .facts{grid-template-columns:1fr;gap:0}
  .facts dd{margin-bottom:var(--space-2)}
  main{padding:var(--space-4) var(--space-4) var(--space-12)}
  .alert,.note{padding:0 var(--space-4)}
  h1{font-size:var(--text-28)}
  .row{flex-direction:column;margin-left:calc(-1 * var(--space-3));padding-left:var(--space-2)}
  .actions{justify-content:flex-start;max-width:none}
  .actions details,.actions details[open]{text-align:left}
  .forms{min-width:0;width:100%}
  ol.list>li>.row::before{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
/* Brevo-valinta (#204): valintapalkki listan yllä ja rivin tila tai valintaruutu. */
.brevo-bar{margin:var(--space-2) 0 var(--space-3)}
.brevo-bar .actions{max-width:none;justify-content:flex-start;align-items:center}
.brevo-bar .panel{margin-top:var(--space-2)}
.brevo-pick{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin:var(--space-1) 0 0}
.brevo-pick label.check{margin-top:0}
/* Yritysehdotukset (#207): avattavat kontaktit ja toimipaikat kortin alla. */
.company-children{display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-1)}
.company-children .list{margin-top:var(--space-1)}