/* Free tools (websidyn.com/tools/). Loaded after guide.css. */
[hidden]{display:none!important}
.tool-head{padding:28px 0 28px}
.tool-head h1{max-width:900px}
.tool-head .dek{max-width:700px}
.tool-head .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.tool-head .chips span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(255,181,71,.35);border-radius:99px;padding:5px 11px}

.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;padding-bottom:56px}
.panel{background:var(--ink2);border:1px solid var(--line);border-radius:20px;padding:22px}
.panel h2{font-size:15px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold);font-weight:500;margin:26px 0 12px}
.panel h2:first-child{margin-top:0}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-size:14px;color:#d6d1c7;margin-bottom:6px;font-weight:500}
.field small{display:block;color:var(--muted);font-size:13px;margin-top:5px;line-height:1.45}
.tool input[type=text],.tool input[type=date],.tool select,.tool textarea{width:100%;font:inherit;font-size:16px;color:var(--paper);background:var(--ink);border:1px solid rgba(244,239,230,.2);border-radius:10px;padding:11px 12px;min-height:46px}
.tool textarea{resize:vertical;min-height:70px;line-height:1.45}
.tool select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:34px}
.tool input:focus,.tool select:focus,.tool textarea:focus{outline:2px solid var(--ember);outline-offset:1px;border-color:transparent}
.tool input::placeholder,.tool textarea::placeholder{color:#6f6c66}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#d6d1c7;margin:4px 0 14px;cursor:pointer}
.check input{width:20px;height:20px;accent-color:var(--ember);margin-top:2px;flex:none}

.days{display:flex;flex-direction:column;gap:8px}
.day{display:grid;grid-template-columns:minmax(0,1fr) minmax(150px,190px);gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--ink)}
.day.ph{border-color:rgba(255,91,31,.45)}
.day-l b{display:block;font-size:16px}
.day-l span{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.day.ph .day-l span{color:var(--gold)}
.day-r{display:flex;flex-direction:column;gap:6px}
.day-r select,.day-r input{min-height:40px!important;padding-top:8px!important;padding-bottom:8px!important;font-size:15px!important}

.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sw{display:flex;align-items:center;gap:8px;font:inherit;font-size:14px;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:8px 10px;cursor:pointer;min-height:44px}
.sw i{width:22px;height:22px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--a) 55%,var(--b) 55%);border:1px solid rgba(255,255,255,.25)}
.sw[aria-pressed=true],.seg[aria-pressed=true]{border-color:var(--ember);box-shadow:0 0 0 1px var(--ember) inset}
.segs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.seg{font:inherit;font-size:14px;color:var(--paper);background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 8px;cursor:pointer;min-height:44px}

.preview{position:sticky;top:84px}
.stage{background:repeating-conic-gradient(#17171b 0 25%,#121215 0 50%) 0 0/22px 22px;border:1px solid var(--line);border-radius:20px;padding:22px;display:flex;justify-content:center;align-items:center;min-height:300px}
.stage canvas{display:block;max-width:100%;height:auto;max-height:68vh;box-shadow:0 18px 50px rgba(0,0,0,.5);border-radius:4px}
.stage canvas[data-format=a4]{width:min(100%,46vh*.707*1.6)}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.actions .btn{border:0;font:inherit;font-weight:700;cursor:pointer;min-height:48px}
.btn2{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:600;color:var(--paper);background:transparent;border:1px solid rgba(244,239,230,.3);border-radius:99px;padding:13px 20px;cursor:pointer;min-height:48px;text-decoration:none}
.btn2:hover{border-color:var(--paper)}
.note{font-size:13px;color:var(--muted);margin-top:12px;line-height:1.5}
.note a{color:var(--gold)}

.tool-body{padding-top:8px}
.tool-body .body{padding-top:0}

#hs-printimg{display:none}
@media print{
  @page{margin:0}
  body{background:#fff}
  body>*:not(#hs-printwrap){display:none!important}
  #hs-printwrap{display:block!important}
  #hs-printimg{display:block;width:100%;height:100vh;object-fit:contain}
}

@media (max-width:900px){
  .tool{grid-template-columns:1fr}
  .preview{position:static;order:-1}
  .stage canvas{max-height:56vh}
}
@media (max-width:420px){
  .panel{padding:16px}
  .day{grid-template-columns:1fr}
  .swatches{grid-template-columns:repeat(2,1fr)}
  .row2{grid-template-columns:1fr}
}

/* tools hub */
.tcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tcard{display:flex;flex-direction:column;gap:10px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--ink2);text-decoration:none;transition:border-color .2s,transform .2s}
.tcard:hover{border-color:var(--ember);transform:translateY(-2px)}
.tcard .mono{color:var(--gold)}
.tcard b{font-size:22px;line-height:1.2;letter-spacing:-.01em}
.tcard span:last-child{color:var(--muted);font-size:15px;line-height:1.5}