/* Add data (the port script). Owned by the Add data agent.
   Contract: docs/web-redesign-spec, 4-surfaces, §4.3. The only class names
   in this file are .portcols .port-tray .port-name .port-size .port-foot
   .port-options .port-logo .port-blurb .port-connect; base children of
   those (rows, selects, buttons, hints) are reached by element, never by
   their base class. Two base gaps are worked around here and reported:
   a bare hint in a padding-0 group card has no inset, and a drop zone
   inside such a card has no margin. No colour beyond the tokens; the
   chip's square tint comes inline from CLASS_TINT/folderColor. */

/* the two columns */
.portcols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s-xl);align-items:start}
.portcols>div{display:flex;flex-direction:column;gap:var(--s-xl);min-width:0}
@media (max-width:1179px){.portcols{grid-template-columns:minmax(0,1fr)}}

/* a hint standing alone in a card (group > block > p) takes the row inset;
   a hint or a message inside a row or a row's wrapper keeps no margin */
#port-body section>section>p{margin:var(--s-l) 0;padding:0 var(--s-xxl)}
#port-body section>section>p+p{margin-top:0}
#port-body section>section div>p{margin:0}

/* the drop zone is the card's div that holds the file picker; it sits inset */
#port-body section>section>div:has(>input[type=file]){margin:var(--s-xl)}
#port-body div:has(>input[type=file])>i{width:44px;height:44px;border-radius:var(--r-md);background:var(--card2);display:grid;place-items:center;color:var(--muted)}
#port-body div:has(>input[type=file])>b+span{font-size:12.5px;color:var(--muted)}
#port-body div:has(>input[type=file])>span+button{margin-top:var(--s-xs)}
#port-body div:has(>input[type=file])>span:first-child+button{margin:0 0 0 auto}
#port-body div:has(>input[type=file])+.port-foot{border-top:0;padding-top:0}

/* the tray: its head ("Waiting · n files · Remove all"), then a row per staged file */
.port-tray>header{margin:0;padding:var(--s-m) var(--s-xxl) 0;align-items:center;min-height:40px}
.port-tray>header>span{margin-left:0}
.port-tray>header>button{margin-left:auto}
.port-tray>div{min-height:48px;padding:var(--s-s) var(--s-xxl);gap:var(--s-m)}
.port-tray>div>svg{color:var(--muted);flex:none}
.port-tray>div>span:first-of-type{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.port-tray>div:last-child{border-bottom:1px solid var(--line)}
/* the options panel's selects keep their natural width; the chevron keeps its 8 px */
.port-options select{width:auto;flex:0 1 auto;min-width:80px;padding:0 24px 0 8px;overflow:hidden;text-overflow:ellipsis;background-position:right 8px center}
/* tray rows: the name takes what is left, every control has a fixed width
   (Views.swift:752), so the columns line up from row to row and the x stays inside */
.port-tray{container-type:inline-size}
.port-tray>div>select{flex:none;min-width:0;padding:0 24px 0 8px;overflow:hidden;text-overflow:ellipsis;background-position:right 8px center}
.port-tray>div>select:first-of-type{width:96px}
.port-tray>div>button:not(:last-child){flex:none;min-width:140px}
.port-tray>div>button:not(:last-child)+select{width:124px}
/* a narrow card: name and x on line one, the controls on line two under the name */
@container (max-width:659px){
  .port-tray>div{flex-wrap:wrap;row-gap:var(--s-xs)}
  .port-tray>div>span:first-of-type{flex-basis:calc(100% - 12px - 26px - 2 * var(--s-m))}
  .port-tray>div>button:last-child{order:1}
  .port-tray>div>span:first-of-type~:not(button:last-child){order:2}
  .port-tray>div>span:first-of-type+*{margin-left:calc(12px + var(--s-m))}
}
.port-name{min-width:0;display:flex;font-size:14.5px;line-height:1.3;font-weight:500;color:var(--text)}
.port-name>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.port-name>span:last-child{white-space:nowrap;flex:none}
.port-size{font-size:12.5px;line-height:1.2;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}

/* the card's foot: the batch note, the chips, Change and the one primary */
.port-foot{display:flex;flex-direction:column;gap:var(--s-l);padding:var(--s-xl) var(--s-xxl);border-top:1px solid var(--line)}
.port-foot>textarea{min-height:64px}
.port-foot>div{align-items:center}
/* the chips and Change wrap on the left; the one primary keeps the first line's right end */
.port-foot>div:first-of-type{display:flex;flex-wrap:nowrap;gap:var(--s-s)}
.port-foot>div:first-of-type>div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-s);flex:1 1 auto;min-width:0}
.port-foot>div:first-of-type>button{flex:none;margin-left:auto;align-self:flex-start}
.port-foot>.port-options{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-m);padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.port-options>h5{margin:var(--s-s) 0 0}
.port-options>h5:first-child{margin-top:0}

/* connected apps: the logo is the shipped SVG as a mask over currentColor */
.port-logo{width:20px;height:20px;flex:none;display:block;color:var(--muted);
  -webkit-mask-size:contain;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;mask-size:contain;mask-position:center;mask-repeat:no-repeat}
.port-logo:not([data-id]){display:grid;place-items:center}
/* one rule per shipped file; the url resolves against css/ */
.port-logo[data-id="dropbox"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/dropbox.svg?v=conn1");mask-image:url("../assets/connectors/dropbox.svg?v=conn1")}
.port-logo[data-id="gcal"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/gcal.svg?v=conn1");mask-image:url("../assets/connectors/gcal.svg?v=conn1")}
.port-logo[data-id="gdrive"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/gdrive.svg?v=conn1");mask-image:url("../assets/connectors/gdrive.svg?v=conn1")}
.port-logo[data-id="github"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/github.svg?v=conn1");mask-image:url("../assets/connectors/github.svg?v=conn1")}
.port-logo[data-id="gmail"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/gmail.svg?v=conn1");mask-image:url("../assets/connectors/gmail.svg?v=conn1")}
.port-logo[data-id="notion"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/notion.svg?v=conn1");mask-image:url("../assets/connectors/notion.svg?v=conn1")}
.port-logo[data-id="onedrive"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/onedrive.svg?v=conn1");mask-image:url("../assets/connectors/onedrive.svg?v=conn1")}
.port-logo[data-id="outlook"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/outlook.svg?v=conn1");mask-image:url("../assets/connectors/outlook.svg?v=conn1")}
.port-logo[data-id="slack"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/slack.svg?v=conn1");mask-image:url("../assets/connectors/slack.svg?v=conn1")}
.port-logo[data-id="stahlkraft"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/stahlkraft.svg?v=conn1");mask-image:url("../assets/connectors/stahlkraft.svg?v=conn1")}
.port-logo[data-id="teams"]{background:currentColor;-webkit-mask-image:url("../assets/connectors/teams.svg?v=conn1");mask-image:url("../assets/connectors/teams.svg?v=conn1")}
.port-blurb{display:block;font-size:12.5px;line-height:1.3;color:var(--muted);font-weight:400}
#port-body div:has(>span>.port-blurb){min-height:56px}
.port-connect{display:flex;flex-direction:column;gap:var(--s-m);padding:0 var(--s-xxl) var(--s-xl);border-bottom:1px solid var(--line)}
.port-connect>label{margin:0}
.port-connect>input{max-width:520px}
.port-connect>div{margin-top:0}

/* Right now > Last filed: the label never shrinks; chip and name take the rest */
.trow.port-last>.lead{flex:none}
.port-lastval{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--s-s);color:var(--faint);font-size:12.5px}
.port-lastval>.chip{flex:none}
.port-lastval>.port-name{min-width:0;font-size:12.5px;font-weight:400;color:var(--faint)}