/* Mobile skill details share the knowledge library's card and color system. */
.phone .skill-detail-page{padding:18px var(--page-gutter) 28px;min-width:0;color:var(--color-text-primary)}
.phone .skill-detail-page :is(.card,.field,.grow,details,dl){min-width:0;max-width:100%}
.phone .skill-detail-page :is(h2,h3,h4,p,label,summary,code,dt,dd,button){overflow-wrap:anywhere}
.phone .skill-detail-page :is(.skill-detail-hero,.skill-detail-section){margin-bottom:14px;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--shadow-card)}
.phone .skill-detail-hero{padding:18px 16px}
.phone .skill-detail-identity{display:flex;align-items:flex-start;gap:12px;min-width:0}
.phone .skill-detail-identity>.app-icon{flex:0 0 44px;width:44px;height:44px;border-radius:var(--radius-md);color:var(--color-link);background:var(--color-primary-soft)}
.phone .skill-detail-identity h2{margin:0 0 7px;font-size:var(--font-size-title);line-height:1.5;font-weight:var(--font-weight-semibold)}
.phone .skill-detail-badges{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.phone .skill-detail-badges .pill{max-width:100%;font-size:10px;line-height:1.5;white-space:normal}
.phone .skill-detail-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;margin-top:14px;padding-top:12px;border-top:1px solid var(--color-border);font-size:11px;line-height:1.6;color:var(--color-text-tertiary)}
.phone .skill-detail-meta>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px;min-width:0}
.phone .skill-detail-meta .ico{width:14px;height:14px;flex-shrink:0}
.phone .skill-detail-meta code{min-width:0;max-width:100%;font-family:inherit;word-break:break-word}
.phone .skill-detail-hero>.sub{margin-top:12px;color:var(--color-text-secondary)}
.phone .skill-detail-hero-links{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.phone .skill-detail-hero-links>.text-btn{min-height:44px;max-width:100%;padding:8px 0;font-size:var(--font-size-caption);line-height:1.5;color:var(--color-link);white-space:normal;text-align:left}
.phone .skill-detail-hero-links>[data-action="skill-detail-disable"]{color:var(--color-error-text)}
.phone .skill-detail-page .skill-detail-section{padding:0}
.phone .skill-section-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;padding:16px;border-bottom:1px solid var(--color-border)}
.phone .skill-section-heading h3{flex:1;min-width:0;font-size:var(--font-size-body);font-weight:var(--font-weight-semibold);line-height:1.6}
.phone .skill-section-heading>p{flex-basis:100%;font-size:var(--font-size-caption);line-height:1.7;color:var(--color-text-tertiary)}
.phone .skill-section-heading details{font-size:var(--font-size-caption);line-height:1.7;color:var(--color-text-secondary)}
.phone .skill-section-heading details summary{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-12px -10px;list-style:none;cursor:pointer;color:var(--color-text-tertiary)}
.phone .skill-section-heading details summary::-webkit-details-marker{display:none}
.phone .skill-section-heading details[open]{flex-basis:100%}
.phone .skill-section-heading details[open] summary{justify-content:flex-start;margin:0}
.phone .skill-section-heading details[open]>p{margin-top:6px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--color-surface-subtle)}
.phone .skill-section-body{padding:16px;min-width:0}
.phone .skill-section-body>.field{margin:0 0 16px}
.phone .skill-section-body>.field:last-child{margin-bottom:0}
.phone .skill-section-body .field :is(input,textarea){min-width:0;max-width:100%;box-sizing:border-box}
.phone .skill-prompt-label{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px;font-size:var(--font-size-caption);line-height:1.6;color:var(--color-text-secondary)}
.phone .skill-prompt-label>.text-btn{min-height:44px;padding:8px 0;color:var(--color-link);white-space:normal;text-align:left}
.phone .skill-detail-page .skill-prompt-textarea{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:280px;margin:0;padding:12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);resize:vertical;background:var(--color-surface-subtle);color:var(--color-text-primary);font:inherit;font-size:var(--font-size-caption);line-height:1.85;white-space:pre-wrap;overflow-wrap:break-word;scrollbar-width:thin;scroll-margin-block:20px}
.phone .skill-detail-page .skill-prompt-textarea:focus{outline:0;border-color:var(--color-primary);box-shadow:var(--shadow-focus)}
.phone .skill-detail-page .skill-prompt-textarea[readonly]{opacity:1;cursor:text;-webkit-text-fill-color:var(--color-text-primary);user-select:text;-webkit-user-select:text}
.phone .skill-prompt-count{margin-top:8px;text-align:right;font-size:10px;line-height:1.5;color:var(--color-text-tertiary);font-variant-numeric:tabular-nums}
.phone .skill-writing-guide{margin:0 0 14px;padding:0 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-primary-soft);font-size:var(--font-size-caption);line-height:1.75;color:var(--color-text-secondary)}
.phone .skill-writing-guide>summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;color:var(--color-link);font-weight:var(--font-weight-medium)}
.phone .skill-writing-guide>summary::-webkit-details-marker{display:none}
.phone .skill-writing-guide>summary>.ico{width:16px;height:16px;flex-shrink:0}
.phone .skill-writing-guide>summary>.ico:last-child{margin-left:auto;transition:transform .15s}
.phone .skill-writing-guide[open]>summary>.ico:last-child{transform:rotate(180deg)}
.phone .skill-writing-guide[open]{padding-bottom:12px}
.phone .skill-writing-guide h4{margin:10px 0 5px;font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}
.phone .skill-guide-step{padding:10px 0;border-bottom:1px solid var(--color-border)}
.phone .skill-guide-step:last-child{border-bottom:0}
.phone .skill-guide-step strong{display:block;margin-bottom:3px;color:var(--color-text-primary)}
.phone .skill-guide-example{margin-top:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text-secondary)}
.phone .skill-guide-quick{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.phone .skill-guide-quick>button{min-height:44px;min-width:0;max-width:100%;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-link);font-size:var(--font-size-caption);line-height:1.5;text-align:left;white-space:normal}
.phone .skill-tool-card{padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);min-width:0}
.phone .skill-tool-card+.skill-tool-card{margin-top:12px}
.phone .skill-tool-heading{display:flex;align-items:flex-start;gap:10px;min-width:0}
.phone .skill-tool-heading>.app-icon{width:36px;height:36px;flex:0 0 36px;border-radius:10px;background:var(--color-primary-soft);color:var(--color-link)}
.phone .skill-tool-heading>.ico{width:20px;height:20px;flex-shrink:0;color:var(--color-link)}
.phone .skill-tool-heading h4{margin:0 0 6px;font-size:var(--font-size-caption);font-weight:var(--font-weight-semibold);line-height:1.6}
.phone .skill-tool-heading .pill{display:inline-block;margin:0 4px 4px 0;max-width:100%;font-size:10px;line-height:1.5;white-space:normal}
.phone .skill-tool-card>p{margin-top:10px;font-size:var(--font-size-caption);line-height:1.75;color:var(--color-text-secondary)}
.phone .skill-tool-card code{display:inline-block;max-width:100%;margin-top:8px;padding:3px 6px;border-radius:var(--radius-xs);background:var(--color-surface-subtle);color:var(--color-text-tertiary);font-size:10px;line-height:1.6;white-space:normal;word-break:break-word}
.phone .skill-tool-control{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--color-border);font-size:var(--font-size-caption);line-height:1.6;color:var(--color-text-tertiary)}
.phone .skill-tool-control>label{min-width:0}
.phone .skill-tool-control>button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.phone .skill-tool-control .switch{position:relative;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border-radius:var(--radius-sm)}
.phone .skill-tool-control .switch:before{content:'';position:absolute;inset:10px 0;border-radius:var(--radius-pill);background:var(--color-border)}
.phone .skill-tool-control .switch.on:before{background:var(--color-primary)}
.phone .skill-tool-control .switch:after{width:18px;height:18px;top:13px;left:3px;background:var(--color-on-primary)}
.phone .skill-tool-control .switch.on:after{left:23px}
.phone .skill-tool-notes{display:grid;gap:8px;margin-top:12px}
.phone .skill-tool-notes p,.phone .skill-readonly-note{display:flex;align-items:flex-start;gap:7px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--color-surface-subtle);font-size:11px;line-height:1.75;color:var(--color-text-secondary)}
.phone .skill-tool-notes p>.ico,.phone .skill-readonly-note>.ico{flex:0 0 14px;width:14px;height:14px;margin-top:3px;color:var(--color-link)}
.phone .skill-readonly-note{margin-top:12px}
.phone .skill-detail-info dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:12px;margin:0;font-size:var(--font-size-caption);line-height:1.7}
.phone .skill-detail-info dt{margin:0;color:var(--color-text-tertiary)}
.phone .skill-detail-info dd{min-width:0;margin:0;text-align:right;color:var(--color-text-primary)}
.phone .skill-history-entry{padding:14px 16px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-surface);color:var(--color-text-primary)}
.phone .skill-history-entry+.skill-history-entry{margin-top:10px}
.phone .skill-history-entry .between{align-items:flex-start;flex-wrap:wrap}
.phone .skill-history-entry :is(h3,h4){margin:0;font-size:var(--font-size-body);line-height:1.6}
.phone .skill-history-entry p{margin-top:6px;font-size:var(--font-size-caption);line-height:1.7;color:var(--color-text-secondary)}
.phone .skill-history-entry pre{max-width:100%;max-height:360px;margin:12px 0 0;padding:12px;border-radius:var(--radius-sm);overflow:auto;background:var(--color-surface-subtle);color:var(--color-text-secondary);font:inherit;font-size:var(--font-size-caption);line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.phone .skill-detail-tabs{display:flex;align-items:stretch;gap:0;min-width:0;margin:0 0 14px;border-bottom:1px solid var(--color-border)}
.phone .skill-detail-tabs>button{position:relative;flex:1;min-width:0;min-height:44px;padding:10px 8px;font-size:var(--font-size-caption);line-height:1.6;text-align:center;white-space:normal;color:var(--color-text-tertiary)}
.phone .skill-detail-tabs>button.active{color:var(--color-link);font-weight:var(--font-weight-medium)}
.phone .skill-detail-tabs>button.active:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--color-primary)}
.phone #composer:has(.skill-detail-actions){position:relative;z-index:5;flex-shrink:0;padding:10px var(--page-gutter) max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--color-border);background:var(--color-surface)}
.phone .skill-detail-actions{min-width:0}
.phone .skill-detail-actions .button-row{display:flex;align-items:stretch;gap:8px;min-width:0}
.phone .skill-detail-actions button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere}
.phone .skill-detail-actions .button-row>button{flex:1;min-width:0;min-height:44px;padding:10px 8px;border-radius:var(--radius-sm);font-size:var(--font-size-caption);line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.phone .skill-detail-actions .button-row>.primary{flex:1.2}
.phone .skill-detail-actions>small,.phone .skill-detail-actions .smalllocalnote{display:block;margin-top:7px;font-size:10px;line-height:1.6;color:var(--color-text-tertiary);text-align:center;overflow-wrap:anywhere}
.phone .skill-detail-page :is(button,summary):focus-visible,.phone .skill-detail-actions button:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
@media(max-width:360px){
  .phone .skill-detail-hero{padding:16px 14px}
  .phone .skill-detail-identity{gap:10px}
  .phone .skill-detail-identity>.app-icon{flex-basis:40px;width:40px;height:40px}
  .phone .skill-section-heading,.phone .skill-section-body{padding:14px}
  .phone .skill-tool-card{padding:12px}
  .phone .skill-detail-actions .button-row{gap:6px}
  .phone .skill-detail-actions .button-row>button{padding-inline:6px}
}