/* Compact tool cards on phones (Oct 8, 2026): small square icon on the left, title and one-line description on the right.
   Desktop is untouched. Icons live in img/icon/ (same file name as the card picture); mobile-cards.js swaps them in. */
@media (max-width: 640px) {
  .k-cards { grid-template-columns: 1fr !important; gap: 10px !important; }
  .k-cards > .k-tf { margin: 0 !important; }
  a.k-card-tool { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important;
    padding: 12px 14px !important; min-height: 0 !important; height: auto !important; border-radius: 16px !important; }
  a.k-card-tool .k-prev { flex: 0 0 76px !important; width: 76px !important; height: 76px !important; min-height: 0 !important;
    padding: 0 !important; margin: 0 !important; background: none !important; border: 0 !important; position: relative !important; overflow: visible !important; }
  a.k-card-tool .k-paper { display: block !important; width: 76px !important; height: 76px !important; padding: 0 !important; margin: 0 !important;
    border-radius: 12px !important; overflow: hidden !important; transform: none !important; box-shadow: 0 1px 0 rgba(31,58,44,.12), 0 2px 6px rgba(31,58,44,.10) !important; }
  a.k-card-tool .k-paper img { width: 100% !important; height: 100% !important; object-fit: cover !important; aspect-ratio: 1 / 1 !important; border-radius: 0 !important; }
  a.k-card-tool .k-state { position: absolute !important; top: auto !important; right: auto !important; bottom: -8px !important; left: 50% !important;
    transform: translateX(-50%) !important; font-size: 10px !important; padding: 2px 7px !important; white-space: nowrap !important; }
  a.k-card-tool .k-state .k-ic { width: 10px !important; height: 10px !important; }
  a.k-card-tool .k-card-body { padding: 0 !important; margin: 0 !important; flex: 1 1 auto !important; min-width: 0 !important; }
  a.k-card-tool .k-tags { gap: 4px !important; margin: 0 0 4px !important; flex-wrap: wrap !important; }
  a.k-card-tool .k-tags > span { font-size: 9px !important; padding: 2px 6px !important; letter-spacing: .06em !important; }
  a.k-card-tool .k-card-body > strong { font-size: 16px !important; line-height: 1.2 !important; margin: 0 0 3px !important; }
  a.k-card-tool .k-tbx-list { margin: 0 !important; padding: 0 !important; display: block !important; }
  a.k-card-tool .k-tbx-list > span { display: none !important; }
  a.k-card-tool .k-tbx-list > span:first-child { display: block !important; font-size: 13px !important; line-height: 1.35 !important;
    color: #5b6560 !important; padding: 0 !important; margin: 0 !important; }
  a.k-card-tool .k-tbx-list > span:first-child::before { display: none !important; }
  /* toolbox cards keep their frame; the handle and clasp sit smaller on the compact card */
  a.k-card-tool[data-group="toolbox"] { margin-top: 12px !important; }
  a.k-card-tool[data-group="toolbox"]::before { width: 44px !important; height: 14px !important; top: -12px !important; }
  a.k-card-tool[data-group="toolbox"]::after { width: 16px !important; height: 6px !important; top: -5px !important; }
}

/* Coming-soon cards don't link anywhere (Oct 8, 2026) */
a.k-card-tool[aria-disabled="true"] { cursor: default; }
a.k-card-tool[aria-disabled="true"]:hover { transform: none !important; }

/* Label pills on phones (Oct 8, 2026): every pill (Field Tool, Birds, Free, ...) the same height, size and font, text centered */
@media (max-width: 640px) {
  a.k-card-tool .k-tags { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; margin: 0 0 6px !important; }
  a.k-card-tool .k-tags > span,
  a.k-card-tool .k-tags::after { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important;
    height: 20px !important; min-height: 0 !important; padding: 0 7px !important; margin: 0 !important; border-radius: 5px !important;
    font-family: ui-monospace, Menlo, Consolas, monospace !important; font-size: 9.5px !important; font-weight: 700 !important;
    line-height: 1 !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; }
}

/* Featured banner when you already own the tool (Oct 8, 2026): "In My Tools" · Open the tool · "You're subscribed" on one row */
@media (max-width: 640px) {
  .k-new .k-new-buy:has(.k-new-owned) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
  .k-new .k-new-buy:has(.k-new-owned) .k-new-owned { order: 1 !important; font-size: 15px !important; white-space: nowrap !important; margin: 0 !important; }
  .k-new .k-new-buy:has(.k-new-owned) .k-new-btn { order: 2 !important; margin: 0 !important; padding: 8px 12px !important; font-size: 13px !important; white-space: nowrap !important; }
  .k-new .k-new-buy:has(.k-new-owned) .k-new-or { order: 3 !important; font-size: 11.5px !important; white-space: nowrap !important; margin: 0 !important; text-align: right !important; }
}

/* Featured BO, Illustrated card on phones (Oct 8, 2026): same 76px square picture as the tool cards */
@media (max-width: 640px) {
  .k-feature-pack .k-fp-img { flex: 0 0 76px !important; width: 76px !important; height: 76px !important; min-width: 76px !important;
    border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 1px 0 rgba(31,58,44,.12), 0 2px 6px rgba(31,58,44,.10) !important; }
  .k-feature-pack .k-fp-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
}

/* Featured card label (Oct 8, 2026): "Featured · Free, approval required" in the Qualifications Builder banner's green-to-gold gradient, all screen sizes */
.k-feature-pack small { background: linear-gradient(100deg, #1f3a2c 0%, #2f5a43 45%, #6a7d3c 75%, #c8962e 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important;
  font-weight: 800 !important; width: fit-content !important; }
@media (max-width: 640px) { .k-feature-pack small { -webkit-box-decoration-break: clone !important; box-decoration-break: clone !important; } }

/* Featured card accent (Oct 8, 2026): green-to-gold bar down the left edge, a warm wash behind the picture and a deeper shadow */
.k-feature-pack { position: relative !important; overflow: hidden !important; padding-left: 26px !important;
  background: linear-gradient(100deg, #fbf3df 0%, #fffdf8 34%, #ffffff 60%) !important;
  box-shadow: 0 1px 0 rgba(31,58,44,.10), 0 12px 28px rgba(31,58,44,.14) !important; transition: transform .15s ease, box-shadow .15s ease; }
.k-feature-pack::before { content: "" !important; position: absolute !important; left: 0; top: 0; bottom: 0; width: 9px;
  background: linear-gradient(180deg, #1f3a2c 0%, #2f5a43 40%, #6a7d3c 72%, #c8962e 100%); }
.k-feature-pack:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(31,58,44,.10), 0 16px 32px rgba(31,58,44,.18) !important; }
@media (max-width: 640px) { .k-feature-pack { padding-left: 22px !important; } .k-feature-pack::before { width: 8px; } }

/* Builder banner on phones (Oct 8, 2026): 76px picture like the tool cards; price and "or $49 / year" on one baseline, button to the right */
@media (max-width: 760px) {
  a.k-new { grid-template-columns: 76px 1fr !important; }
  a.k-new > img { width: 76px !important; height: 76px !important; border-radius: 12px !important; object-fit: cover !important; }
  a.k-new .k-new-buy:not(:has(.k-new-owned)) { display: flex !important; align-items: baseline !important; gap: 8px !important; flex-wrap: nowrap !important; }
  a.k-new .k-new-buy:not(:has(.k-new-owned)) .k-new-or { font-size: 14px !important; line-height: 1.2 !important; margin: 0 !important; position: static !important; transform: none !important; top: auto !important; }
  a.k-new .k-new-buy:not(:has(.k-new-owned)) .k-new-btn { margin-left: auto !important; align-self: center !important; }
}

/* Public pages header (Oct 8, 2026): same gap on the right as the logo has on the left */
body.k-plain > .k-bar { margin-right: 18px !important; }

/* My Tools shortcuts on the dashboard (Oct 8, 2026): a toolbox keeps its toolbox look here too */
a.k-qm-item.k-qm-tbx { position: relative !important; overflow: visible !important; box-sizing: border-box !important; border: 3px solid #1f3a2c !important; border-bottom-width: 7px !important; box-shadow: none !important; padding: 5px 10px 3px 6px !important; }
a.k-qm-item.k-qm-tbx::before { content: ""; position: absolute; box-sizing: border-box; top: -17px; left: 50%; transform: translateX(-50%); width: 44px; height: 16px; border: 3px solid #1f3a2c; border-bottom: 0; border-radius: 9px 9px 0 0; background: transparent; pointer-events: none; }
a.k-qm-item.k-qm-tbx::after { content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%); width: 16px; height: 5px; border-radius: 2px; background: #c8962e; box-shadow: inset 0 0 0 1px #8a6418; pointer-events: none; }
.k-qm:has(.k-qm-tbx) { padding-top: 16px; align-items: stretch; }

/* Oct 8, 2026: only toolboxes get a bordered look. Tools in My Tools keep the plain card shadow, no green outline. */
.k-tw:has(> .k-mt-in) > a.k-card-tool:not([data-group="toolbox"]) { box-shadow: 0 10px 30px rgba(22,24,26,.07) !important; }
.k-tw:has(> .k-mt-in) > a.k-card-tool:not([data-group="toolbox"]):hover { box-shadow: 0 12px 26px rgba(24,51,38,.094) !important; }

/* Polish pass (Oct 8, 2026) */
/* Buttons with a trailing arrow: keep a space between the words and the arrow */
.k-btn-ghost:has(> span[aria-hidden]), .k-btn:has(> span[aria-hidden]) { gap: 8px; }
/* Sidebar: My Tools and Browse Tools icons are drawn larger; centre them in the same slot so every label lines up */
.k-nav-mytools > .k-ic, .k-nav-tools > .k-ic { margin-left: -2px; margin-right: -2px; }
/* Cards with the check badge or the remove button: keep the last line of text clear of it */
.k-tw > a.k-card-tool .k-card-body li:last-child, .k-tw > a.k-card-tool .k-tbx-list > span:last-child { padding-right: 30px; }
/* Dashboard guide: the Toolbox label matches the tag on toolbox cards */
.ww-pill.p-tb { background: #1f3a2c !important; color: #fff !important; border-color: #1f3a2c !important; }

/* Project app card tag matches Field Tool (Oct 8, 2026) */
.k-type-app { background: #315b46 !important; color: #fff !important; border: 0 !important; }

/* Public pages (storefront, log in, sign up, invite): option 4, brand gradient buttons (Oct 8, 2026) */
body.k-plain .k-btn, body.k-plain a.k-btn, body.k-plain button.k-btn { background: linear-gradient(100deg, #1f3a2c 0%, #2f5a43 55%, #6a7d3c 100%) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; padding: 15px 26px !important; font: 700 15.5px/1.2 Archivo, Arial, sans-serif !important; box-shadow: 0 8px 20px rgba(31,58,44,.28) !important; text-shadow: none !important; transition: box-shadow .15s, filter .15s, transform .15s !important; }
body.k-plain .k-btn:hover { box-shadow: 0 10px 26px rgba(31,58,44,.38) !important; filter: brightness(1.06); }
body.k-plain .k-btn:active { transform: translateY(1px); }
body.k-plain .k-btn-ghost, body.k-plain a.k-btn-ghost { background: #fff !important; color: #1f3a2c !important; border: 1px solid #dfe3dc !important; border-radius: 12px !important; padding: 14px 24px !important; font: 700 15.5px/1.2 Archivo, Arial, sans-serif !important; box-shadow: 0 2px 6px rgba(31,58,44,.08) !important; transition: border-color .15s, box-shadow .15s !important; }
body.k-plain .k-btn-ghost:hover { border-color: #9fbba3 !important; box-shadow: 0 4px 10px rgba(31,58,44,.12) !important; }
body.k-plain .k-btn:focus-visible, body.k-plain .k-btn-ghost:focus-visible { outline: 3px solid #c8962e !important; outline-offset: 3px; }
body.k-plain .k-sf-end .k-btn { background: linear-gradient(100deg, #f2c95e, #e3ad3c) !important; color: #1f3a2c !important; box-shadow: 0 8px 20px rgba(0,0,0,.2) !important; }
body.k-plain .k-sf-end .k-btn-ghost { background: rgba(255,255,255,.1) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; box-shadow: none !important; }
body.k-plain .k-sf-end .k-btn-ghost:hover { background: rgba(255,255,255,.18) !important; border-color: rgba(255,255,255,.7) !important; }
body.k-plain .k-btn, body.k-plain .k-btn-ghost { text-align: center !important; justify-content: center !important; }

/* Cards in a row are all the same height, wrapped ("In My Tools") or not (Oct 8, 2026) */
.k-cards > .k-tw { display: flex !important; flex-direction: column; }
.k-cards > .k-tw > a.k-card-tool { flex: 1 1 auto; }

/* Phone layout repair (Oct 9, 2026): preserve compact cards and allow narrow banners to wrap. */
@media(max-width:640px){
  html body .k-cards .k-card-tool.k-card-tool{height:auto !important;min-height:0 !important}
  .k-cards > .k-tw,.k-cards > .k-tf{min-width:0}
  a.k-card-tool .k-card-body{gap:4px !important;overflow-wrap:anywhere}
  a.k-card-tool .k-tags > span{max-width:100%;height:auto !important;min-height:20px !important;white-space:normal !important;line-height:1.25 !important;text-align:center}
  a.k-card-tool .k-tags{min-width:0}
  .k-tw > a.k-card-tool .k-tbx-list > span:first-child{padding-right:30px !important}
  .k-new .k-new-buy:has(.k-new-owned),a.k-new .k-new-buy:not(:has(.k-new-owned)){flex-wrap:wrap !important}
  /* Featured toolbox: the status gets its own row, leaving the title readable. */
  .k-feature-pack{grid-template-columns:76px minmax(0,1fr) !important;column-gap:12px !important;row-gap:6px !important}
  .k-feature-pack .k-fp-img{grid-column:1;grid-row:1 / 3;align-self:center}
  .k-feature-pack .k-fp-body{grid-column:2;grid-row:1;min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none}
  .k-feature-pack .k-fp-body small{max-width:100%;line-height:1.4;text-wrap:balance}
  .k-feature-pack .k-fp-state{grid-column:2;grid-row:2;justify-self:start;align-self:start;padding-left:0;max-width:100%;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:normal;text-wrap:pretty}
}
@media(max-width:360px){
  .k-new .k-new-buy:has(.k-new-owned) .k-new-or{flex-basis:100%;text-align:left !important}
  .k-new-replay{position:static !important;grid-column:1/-1;margin:0 0 3px;font-size:11px}
}

/* Phone admin and form repair (Oct 9, 2026). Desktop rules are unchanged. */
.k-cards > .k-tw[hidden]{display:none!important}
@media(max-width:640px){
  .k-main .k-tbl{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .k-main .k-tbl:has(table)::after{content:"Swipe sideways to see more columns";display:block;font-size:12px;color:#53665a;padding:10px 0}
  .k-main .k-tbl .k-btn,.k-main .k-tbl .k-btn-ghost{min-height:44px}
  .k-main .iv-t{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .k-main .iv-t .k-btn,.k-main .iv-t .k-btn-ghost{min-height:44px}
  .k-main .va-pick{min-width:0;flex-wrap:wrap}
  .k-main .va-pick select{width:100%;max-width:100%;min-width:0;flex:1 1 100%;font-size:16px;min-height:44px}
  .k-main .va-pick .k-btn{min-height:44px}
  .k-main .iv-person{flex-direction:column;align-items:stretch;min-width:0}
  .k-main .iv-person>span:first-child{min-width:0;overflow-wrap:anywhere}
  .k-main .iv-row{flex-wrap:wrap;min-width:0;max-width:100%;justify-content:flex-start}
  .k-main .iv-row select{min-width:0;max-width:100%;font-size:16px;min-height:44px}
  .k-main .iv-row form{max-width:100%;min-width:0}
  .k-main .iv-addrow input{min-width:0;flex:1 1 100%;font-size:16px;min-height:44px}
  .k-main .iv-addrow select{min-width:0;max-width:100%;font-size:16px;min-height:44px}
  .k-main .iv-card .k-btn,.k-main .iv-card .k-btn-ghost,.k-main .iv-new .k-btn{min-height:44px}
  .k-main .iv-new input[type=text],.k-main .iv-new input[type=number],.k-main .iv-new select{min-width:0;max-width:100%;font-size:16px;min-height:44px}
  .k-main .pr-wrap,.k-main .pr-card,.k-main .pr-grid,.k-main .pr-exp,.k-main .pr-grid label,.k-main .pr-exp label{min-width:0}
  .k-main .pr-grid,.k-main .pr-exp{grid-template-columns:1fr}
  .k-main .pr-card input,.k-main .pr-card select,.k-main .pr-card textarea{font-size:16px;min-height:44px}
  .k-main .pr-labor-scroll{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .k-main .pr-labor-scroll .pr-table{min-width:660px}
  .k-main .pr-card:has(.pr-labor-scroll)::after{content:"Swipe the labor table sideways to edit all columns";display:block;font-size:12px;color:#53665a;margin-top:12px}
  .k-main .pr-btn{min-height:44px}
  .k-main .pr-del{min-width:44px;min-height:44px}
}

/* Feedback and preview controls: additions to the current dashboard, Oct 9. */
.fb-form,.fb-management{display:grid;gap:14px;max-width:680px}.fb-form>label,.fb-management>label,.fb-controls>label{display:grid;gap:5px;font-weight:600}.fb-form input[type=text],.fb-form select,.fb-form textarea,.fb-management select,.fb-management textarea{box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:10px;border:1px solid #c6d3c1;border-radius:8px;font:inherit;background:#fbfcfa}.fb-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.fb-form .fb-check,.fb-management .fb-check{display:flex;align-items:center;gap:9px}.fb-check input{width:20px;height:20px}.fb-item{border-top:1px solid #e2e7df;padding:18px 0}.fb-item blockquote{margin:8px 0;overflow-wrap:anywhere}.fb-management .k-btn{justify-self:start}.fb-success{padding:12px;background:#edf4e8;border-radius:10px}.pv-mode{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 16px}.pv-mode span{font-weight:600;margin-right:6px}.pv-mode button{min-height:44px;padding:9px 14px;border:1px solid #315b46;background:#fff;color:#213b2c;border-radius:9px;font:600 14px Archivo,Arial,sans-serif;cursor:pointer}.pv-mode button[aria-pressed=true]{background:#315b46;color:#fff}.k-main .k-tbl:has(table)::after,.k-main .pr-card:has(.pr-labor-scroll)::after{content:none}
@media(max-width:640px){.fb-controls{grid-template-columns:1fr}.fb-form input[type=text],.fb-form select,.fb-form textarea,.fb-management select,.fb-management textarea{font-size:16px}.fb-inbox{min-width:0}.fb-item p{overflow-wrap:anywhere}}

.fb-rating{color:#c89321;letter-spacing:2px;font-size:22px}